From a289913476ec739c1758496f76610a4792913298 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Wed, 9 Oct 2024 19:36:42 +0300
Subject: [PATCH 01/34] Fx flex replacements. Switch to tailwind.css.

---
 ui-ngx/package.json                           |   3 +
 .../src/app/modules/home/home.component.html  |  44 ++--
 .../home/menu/side-menu.component.html        |   2 +-
 .../scada-symbol-editor.component.html        |   2 +-
 .../scada-symbol-editor.component.ts          |   5 +
 .../login/create-password.component.html      |   9 +-
 .../pages/login/link-expired.component.html   |   4 +-
 .../login/pages/login/login.component.html    |  14 +-
 .../reset-password-request.component.html     |   9 +-
 .../pages/login/reset-password.component.html |   9 +-
 .../two-factor-auth-login.component.html      |  24 +--
 .../components/breadcrumb.component.html      |   8 +-
 .../color-picker-panel.component.html         |   4 +-
 .../app/shared/components/css.component.html  |  14 +-
 .../dashboard-autocomplete.component.html     |   2 +-
 .../dashboard-select-panel.component.html     |   2 +-
 .../dashboard-select.component.html           |   4 +-
 .../dialog/alert-dialog.component.html        |   2 +-
 .../dialog/confirm-dialog.component.html      |   2 +-
 .../entity-conflict-dialog.component.html     |   4 +-
 .../dialog/error-alert-dialog.component.html  |   2 +-
 .../json-object-edit-dialog.component.html    |   8 +-
 .../node-script-test-dialog.component.html    |  20 +-
 .../dialog/todo-dialog.component.html         |   2 +-
 .../entity/entity-autocomplete.component.html |   2 +-
 .../entity/entity-list-select.component.html  |   6 +-
 .../entity-subtype-select.component.html      |   2 +-
 .../footer-fab-buttons.component.html         |   2 +-
 .../grid/scroll-grid.component.html           |   5 +-
 .../app/shared/components/html.component.html |  14 +-
 .../image/embed-image-dialog.component.html   |   7 +-
 .../image/image-dialog.component.html         |   2 +-
 .../image/image-gallery.component.html        |  94 +++++----
 .../image/image-gallery.component.scss        |  14 +-
 .../image/image-gallery.component.ts          |   5 -
 .../image/images-in-use-dialog.component.html |   8 +-
 ...ultiple-gallery-image-input.component.html |  14 +-
 .../image/upload-image-dialog.component.html  |   4 +-
 .../shared/components/js-func.component.html  |  18 +-
 .../components/json-content.component.html    |  14 +-
 .../json-object-edit.component.html           |  18 +-
 .../json-object-view.component.html           |   6 +-
 .../shared/components/kv-map.component.html   |  20 +-
 .../app/shared/components/logo.component.html |   4 +-
 .../components/markdown-editor.component.html |  18 +-
 .../shared/components/markdown.component.html |   2 +-
 .../material-icon-select.component.html       |   6 +-
 .../components/material-icons.component.html  |  10 +-
 .../multiple-image-input.component.html       |  12 +-
 .../notification/notification.component.html  |  16 +-
 .../ota-package-autocomplete.component.html   |   2 +-
 .../protobuf-content.component.html           |  12 +-
 .../components/script-lang.component.html     |   6 +-
 .../components/snack-bar-component.html       |  27 ++-
 .../socialshare-panel.component.html          |   3 +-
 .../string-autocomplete.component.html        |   2 +-
 .../string-items-list.component.html          |   2 +-
 .../shared/components/svg-xml.component.html  |  14 +-
 .../time/datapoints-limit.component.html      |   4 +-
 .../components/time/datetime.component.html   |   2 +-
 .../time/quick-time-interval.component.html   |   4 +-
 .../time/timeinterval.component.html          |   4 +-
 .../timewindow-config-dialog.component.html   |   4 +-
 .../time/timewindow-panel.component.html      |  10 +-
 .../components/time/timewindow.component.html |   4 +-
 .../time/timezone-select.component.html       |   2 +-
 .../components/time/timezone.component.html   |   2 +-
 .../components/unit-input.component.html      |   4 +-
 .../components/user-menu.component.html       |   6 +-
 .../components/value-input.component.html     |  14 +-
 .../widgets-bundle-search.component.html      |   2 +-
 ui-ngx/src/styles.scss                        |  78 ++++----
 ui-ngx/tailwind.config.js                     |  67 +++++++
 ui-ngx/yarn.lock                              | 189 +++++++++++++++++-
 74 files changed, 625 insertions(+), 361 deletions(-)
 create mode 100644 ui-ngx/tailwind.config.js

diff --git a/ui-ngx/package.json b/ui-ngx/package.json
index 5f67ac948f..a753381720 100644
--- a/ui-ngx/package.json
+++ b/ui-ngx/package.json
@@ -147,6 +147,7 @@
     "@typescript-eslint/eslint-plugin": "^8.7.0",
     "@typescript-eslint/parser": "^8.7.0",
     "@typescript-eslint/utils": "^8.7.0",
+    "autoprefixer": "^10.4.20",
     "compression-webpack-plugin": "^11.1.0",
     "directory-tree": "^3.5.2",
     "eslint": "~8.57.1",
@@ -155,8 +156,10 @@
     "eslint-plugin-prefer-arrow": "latest",
     "ngrx-store-freeze": "^0.2.4",
     "patch-package": "^8.0.0",
+    "postcss": "^8.4.47",
     "postinstall-prepare": "^2.0.0",
     "raw-loader": "^4.0.2",
+    "tailwindcss": "^3.4.13",
     "ts-node": "^10.9.2",
     "typescript": "~5.5.4",
     "webpack": "5.95.0"
diff --git a/ui-ngx/src/app/modules/home/home.component.html b/ui-ngx/src/app/modules/home/home.component.html
index 4c52919d34..bab9c76824 100644
--- a/ui-ngx/src/app/modules/home/home.component.html
+++ b/ui-ngx/src/app/modules/home/home.component.html
@@ -23,50 +23,58 @@
                [opened]="sidenavOpened && !forceFullscreen">
     <header class="tb-nav-header">
       <mat-toolbar color="primary" class="tb-nav-header-toolbar">
-        <div fxFlex="auto" fxLayout="row">
+        <div class="flex flex-auto">
           <img [src]="logo"
                aria-label="logo" class="tb-logo-title"/>
         </div>
       </mat-toolbar>
     </header>
-    <mat-toolbar color="primary" fxFlex="0%" class="tb-side-menu-toolbar" fxLayout="column" role="navigation">
+    <mat-toolbar color="primary" class="flex flex-1 flex-col tb-side-menu-toolbar" role="navigation">
       <tb-side-menu></tb-side-menu>
     </mat-toolbar>
   </mat-sidenav>
   <mat-sidenav-content>
-    <div fxLayout="column" role="main" style="height: 100%;">
-      <mat-toolbar fxLayout="row" color="primary" class="tb-primary-toolbar">
-        <button [fxShow]="!forceFullscreen" mat-icon-button id="main"
-                [ngClass]="{'tb-invisible': displaySearchMode()}"
-                fxHide.gt-sm (click)="sidenav.toggle()">
+    <div class="flex flex-col" role="main" style="height: 100%;">
+      <mat-toolbar color="primary" class="tb-primary-toolbar flex flex-row">
+        <button [class]="{
+                  '!hidden': forceFullscreen,
+                  'tb-invisible': displaySearchMode()
+                }"
+                class="gt-sm:hidden" (click)="sidenav.toggle()">
           <mat-icon class="material-icons">menu</mat-icon>
         </button>
-        <button [fxShow]="forceFullscreen" mat-icon-button
-                [ngClass]="{'tb-invisible': displaySearchMode()}"
+        <button mat-icon-button
+                [class]="{
+                  '!hidden': !forceFullscreen,
+                  'tb-invisible': displaySearchMode()
+                }"
                 (click)="goBack()">
           <mat-icon class="material-icons">arrow_back</mat-icon>
         </button>
         <button mat-icon-button
-                [ngClass]="{'tb-invisible': !displaySearchMode()}"
+                [class.tb-invisible]="!displaySearchMode()"
                 (click)="closeSearch()">
           <mat-icon class="material-icons">arrow_back</mat-icon>
         </button>
-        <tb-breadcrumb [fxShow]="!displaySearchMode()"
-             fxFlex class="mat-toolbar-tools">
+        <tb-breadcrumb
+            [class.!hidden]="displaySearchMode()"
+            class="mat-toolbar-tools flex-1">
         </tb-breadcrumb>
-        <div [fxShow]="displaySearchMode()" fxFlex fxLayout="row" class="tb-dark">
-          <mat-form-field fxFlex class="tb-appearance-transparent">
+        <div [class.!hidden]="!displaySearchMode()" class="tb-dark flex-1 flex flex-row">
+          <mat-form-field class="tb-appearance-transparent flex-1">
             <input #searchInput matInput
                    [formControl]="textSearch"
                    placeholder="{{ 'common.enter-search' | translate }}"/>
           </mat-form-field>
         </div>
-        <button [fxShow]="searchEnabled"
+        <button [class.!hidden]="!searchEnabled"
                 mat-icon-button (click)="openSearch()">
           <mat-icon class="material-icons">search</mat-icon>
         </button>
-        <button *ngIf="fullscreenEnabled" [fxShow]="!displaySearchMode()"
-                mat-icon-button fxHide.lt-md (click)="toggleFullscreen()">
+        <button *ngIf="fullscreenEnabled"
+                [class.!hidden]="displaySearchMode()"
+                class="lt-md:!hidden"
+                mat-icon-button (click)="toggleFullscreen()">
           <mat-icon class="material-icons">{{ isFullscreen() ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
         </button>
         <tb-notification-bell></tb-notification-bell>
@@ -75,7 +83,7 @@
       <mat-progress-bar color="warn" style="z-index: 10; margin-bottom: -4px; width: 100%;" mode="indeterminate"
                         *ngIf="!hideLoadingBar && (isLoading$ | async)">
       </mat-progress-bar>
-      <div fxFlex fxLayout="column" tb-toast class="tb-main-content">
+      <div tb-toast class="tb-main-content flex flex-1 flex-col">
         <router-outlet (activate)="activeComponentChanged($event)"></router-outlet>
       </div>
     </div>
diff --git a/ui-ngx/src/app/modules/home/menu/side-menu.component.html b/ui-ngx/src/app/modules/home/menu/side-menu.component.html
index bbbc323502..6e5a666e84 100644
--- a/ui-ngx/src/app/modules/home/menu/side-menu.component.html
+++ b/ui-ngx/src/app/modules/home/menu/side-menu.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<ul fxFlex fxLayout="column" fxLayoutAlign="start stretch" class="tb-side-menu">
+<ul class="tb-side-menu flex flex-col justify-start items-stretch">
   <li *ngFor="let section of menuSections$ | async; trackBy: trackByMenuSection" [ngSwitch]="section.type === 'link'">
     <tb-menu-link *ngSwitchCase="true" [section]="section"></tb-menu-link>
     <tb-menu-toggle *ngSwitchCase="false" [section]="section"></tb-menu-toggle>
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html
index 96bd1d7a8a..3ece699a83 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html
@@ -70,7 +70,7 @@
       </button>
     </div>
     <tb-toggle-select appearance="fill"
-                      [disabled]="!svgContentFormControl.valid"
+                      [disabled]="!readonly && !svgContentFormControl.valid"
                       fillHeight
                       extraPadding
                       primaryBackground
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts
index 8d0e3c86bd..e13cc953df 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts
@@ -110,6 +110,11 @@ export class ScadaSymbolEditorComponent implements OnInit, OnDestroy, AfterViewI
   }
 
   ngOnInit(): void {
+    if (this.readonly) {
+      this.svgContentFormControl.disable({emitEvent: false});
+    } else {
+      this.svgContentFormControl.enable({emitEvent: false});
+    }
     this.svgContentFormControl.valueChanges.subscribe((svgContent) => {
       if (this.svgContent !== svgContent) {
         this.svgContent = svgContent;
diff --git a/ui-ngx/src/app/modules/login/pages/login/create-password.component.html b/ui-ngx/src/app/modules/login/pages/login/create-password.component.html
index 37781ac83a..752d6cf319 100644
--- a/ui-ngx/src/app/modules/login/pages/login/create-password.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/create-password.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div class="tb-create-password-content mat-app-background tb-dark" fxLayout="row" fxLayoutAlign="center center" style="width: 100%;">
-  <mat-card appearance="raised" fxFlex="initial" class="tb-create-password-card">
+<div class="tb-create-password-content mat-app-background tb-dark flex flex-row justify-center items-center" style="width: 100%;">
+  <mat-card appearance="raised" class="tb-create-password-card flex-initial">
     <mat-card-header>
       <mat-card-title class="layout-padding">
         <span translate class="mat-headline-5">login.create-password</span>
@@ -28,7 +28,7 @@
     <mat-card-content>
       <form [formGroup]="createPassword" (ngSubmit)="onCreatePassword()">
         <fieldset [disabled]="isLoading$ | async">
-          <div tb-toast fxLayout="column" class="layout-padding">
+          <div tb-toast class="layout-padding flex flex-col">
             <span style="height: 50px;"></span>
             <mat-form-field class="mat-block tb-appearance-transparent">
               <mat-label translate>common.password</mat-label>
@@ -42,8 +42,7 @@
               <mat-icon class="material-icons" matPrefix>lock</mat-icon>
               <tb-toggle-password matSuffix></tb-toggle-password>
             </mat-form-field>
-            <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="16px" fxLayoutAlign="start center"
-                 fxLayoutAlign.gt-xs="center start">
+            <div class="flex flex-col gap-4 justify-start items-center gt-xs:flex-row gt-xs:justify-center gt-xs:items-start">
               <button mat-raised-button color="accent" type="submit" [disabled]="(isLoading$ | async)">
                 {{ 'login.create-password' | translate }}
               </button>
diff --git a/ui-ngx/src/app/modules/login/pages/login/link-expired.component.html b/ui-ngx/src/app/modules/login/pages/login/link-expired.component.html
index a1d52f0735..2d9fa4d58b 100644
--- a/ui-ngx/src/app/modules/login/pages/login/link-expired.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/link-expired.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-expired-link-content mat-app-background tb-dark tb-flex row center align-center"
+<div class="tb-expired-link-content mat-app-background tb-dark flex flex-row justify-center items-center"
      style="width: 100%;">
   <mat-card appearance="raised" class="tb-expired-link-card">
     <mat-card-header style="justify-content: center">
@@ -29,7 +29,7 @@
     <mat-card-content style="padding: 24px 16px">
       <div>{{ message | translate }}</div>
     </mat-card-content>
-    <mat-card-actions class="tb-flex row center">
+    <mat-card-actions class="flex flex-row justify-center">
       <button mat-raised-button color="accent"
               [disabled]="(isLoading$ | async)"
               (click)="navigateToLoginPage()">
diff --git a/ui-ngx/src/app/modules/login/pages/login/login.component.html b/ui-ngx/src/app/modules/login/pages/login/login.component.html
index 8a9b9959c3..224cfd4884 100644
--- a/ui-ngx/src/app/modules/login/pages/login/login.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/login.component.html
@@ -15,20 +15,20 @@
     limitations under the License.
 
 -->
-<div class="tb-login-content mat-app-background tb-dark" fxFlex fxLayoutAlign="center center">
+<div class="tb-login-content mat-app-background tb-dark flex flex-1 items-center justify-center">
   <mat-card appearance="raised" style="max-height: 80vh; overflow-y: auto;">
     <mat-card-content>
       <form class="tb-login-form" [formGroup]="loginFormGroup" (ngSubmit)="login()">
-        <fieldset fxLayout="column">
-          <div fxLayout="column" fxLayoutAlign="start center" style="padding: 15px 0;">
+        <fieldset class="flex flex-col">
+          <div class="flex flex-col items-center justify-start" style="padding: 15px 0;">
             <tb-logo class="login-logo"></tb-logo>
           </div>
           <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
           </mat-progress-bar>
           <span style="height: 4px;" *ngIf="!(isLoading$ | async)"></span>
-          <div tb-toast fxLayout="column" class="layout-padding">
+          <div tb-toast class="layout-padding flex flex-col">
             <span style="height: 50px;"></span>
-            <div class="oauth-container tb-default" fxLayout="column" fxLayoutGap="16px" *ngIf="oauth2Clients?.length">
+            <div class="oauth-container tb-default flex flex-col gap-4" *ngIf="oauth2Clients?.length">
               <ng-container *ngFor="let oauth2Client of oauth2Clients">
                 <a mat-raised-button class="login-with-button" href="{{ getOAuth2Uri(oauth2Client) }}">
                   <mat-icon class="icon" svgIcon="{{ oauth2Client.icon }}"></mat-icon>
@@ -55,12 +55,12 @@
               <tb-toggle-password matSuffix></tb-toggle-password>
               <mat-icon matPrefix>lock</mat-icon>
             </mat-form-field>
-            <div fxLayoutAlign="end center" class="forgot-password">
+            <div class="forgot-password flex items-center justify-end">
               <button class="tb-reset-password" mat-button type="button" routerLink="/login/resetPasswordRequest">
                 {{ (passwordViolation ? 'login.reset-password' : 'login.forgot-password') | translate }}
               </button>
             </div>
-            <div fxLayout="column" class="tb-action-button">
+            <div class="tb-action-button flex flex-col">
               <button mat-raised-button color="accent" [disabled]="(isLoading$ | async)"
                       type="submit">{{ 'login.login' | translate }}</button>
             </div>
diff --git a/ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html b/ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html
index d397a92a5a..eb4123624e 100644
--- a/ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<div class="tb-request-password-reset-content mat-app-background tb-dark" fxLayout="row" fxLayoutAlign="center center"
+<div class="tb-request-password-reset-content mat-app-background tb-dark flex flex-row items-center justify-center"
      style="width: 100%;">
-  <mat-card appearance="raised" fxFlex="initial" class="tb-request-password-reset-card">
+  <mat-card appearance="raised" class="tb-request-password-reset-card flex flex-initial">
     <mat-card-header>
       <mat-card-title class="layout-padding">
         <span translate class="mat-headline-5">login.request-password-reset</span>
@@ -29,7 +29,7 @@
     <mat-card-content>
       <form [formGroup]="requestPasswordRequest" (ngSubmit)="sendResetPasswordLink()">
         <fieldset [disabled]="isLoading$ | async">
-          <div tb-toast fxLayout="column" class="layout-padding">
+          <div tb-toast class="layout-padding flex flex-col">
             <span style="height: 50px;"></span>
             <mat-form-field class="mat-block tb-appearance-transparent" hideRequiredMarker>
               <mat-label translate>login.email</mat-label>
@@ -39,8 +39,7 @@
                 {{ 'user.invalid-email-format' | translate }}
               </mat-error>
             </mat-form-field>
-            <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="16px" fxLayoutAlign="start center"
-                 fxLayoutAlign.gt-xs="center start">
+            <div class="flex flex-col gap-4 justify-start items-center gt-xs:flex-row gt-xs:justify-center gt-xs:items-start">
               <button mat-raised-button color="accent" type="submit" [disabled]="(isLoading$ | async) || this.clicked">
                 {{ 'login.request-password-reset' | translate }}
               </button>
diff --git a/ui-ngx/src/app/modules/login/pages/login/reset-password.component.html b/ui-ngx/src/app/modules/login/pages/login/reset-password.component.html
index f7e3da26ab..465eee53fc 100644
--- a/ui-ngx/src/app/modules/login/pages/login/reset-password.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/reset-password.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div class="tb-reset-password-content mat-app-background tb-dark" fxLayout="row" fxLayoutAlign="center center" style="width: 100%;">
-  <mat-card appearance="raised" fxFlex="initial" class="tb-reset-password-card">
+<div class="tb-reset-password-content mat-app-background tb-dark flex flex-row justify-center items-center" style="width: 100%;">
+  <mat-card appearance="raised" class="tb-reset-password-card flex-initial">
     <mat-card-header>
       <mat-card-title class="layout-padding tb-card-title">
         <span translate class="mat-headline-5 tb-card-title">login.password-reset</span>
@@ -31,7 +31,7 @@
     <mat-card-content>
       <form [formGroup]="resetPassword" (ngSubmit)="onResetPassword()">
         <fieldset [disabled]="isLoading$ | async">
-          <div tb-toast fxLayout="column" class="layout-padding">
+          <div tb-toast class="layout-padding flex flex-col">
             <span style="height: 50px;"></span>
             <mat-form-field class="mat-block tb-appearance-transparent">
               <mat-label translate>login.new-password</mat-label>
@@ -45,8 +45,7 @@
               <mat-icon class="material-icons" matPrefix>lock</mat-icon>
               <tb-toggle-password matSuffix></tb-toggle-password>
             </mat-form-field>
-            <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="16px" fxLayoutAlign="start center"
-                 fxLayoutAlign.gt-sm="center start">
+            <div class="flex flex-col gap-4 justify-start items-center gt-sm:flex-row gt-sm:justify-center gt-sm:items-start">
               <button mat-raised-button color="accent" type="submit" [disabled]="(isLoading$ | async)">
                 {{ 'login.reset-password' | translate }}
               </button>
diff --git a/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.html b/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.html
index d1e1e10edc..ca5f9ea7d2 100644
--- a/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.html
@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<div class="tb-two-factor-auth-login-content mat-app-background tb-dark" fxLayout="row" fxLayoutAlign="center center"
+<div class="tb-two-factor-auth-login-content mat-app-background tb-dark flex flex-row justify-center items-center"
      style="width: 100%;">
-  <mat-card appearance="raised" fxFlex="initial" class="tb-two-factor-auth-login-card" >
+  <mat-card appearance="raised" class="tb-two-factor-auth-login-card flex-initial">
     <mat-card-header>
-      <mat-card-title class="mat-headline-5" fxLayout="row" fxLayoutAlign="start center">
+      <mat-card-title class="mat-headline-5 flex flex-row justify-start items-center">
         <button mat-icon-button type="button" (click)="cancelLogin()">
           <mat-icon>chevron_left</mat-icon>
         </button>
@@ -27,7 +27,7 @@
       </mat-card-title>
     </mat-card-header>
     <mat-card-content>
-      <div class="providers-container tb-default" fxLayout="column" fxLayoutGap="8px" *ngIf="!selectedProvider">
+      <div class="providers-container tb-default flex flex-col gap-2" *ngIf="!selectedProvider">
         <p class="mat-body" translate>login.select-way-to-verify</p>
         <ng-container *ngFor="let provider of allowProviders">
           <button type="button" mat-stroked-button class="provider" (click)="selectProvider(provider)">
@@ -38,10 +38,10 @@
       </div>
       <form [formGroup]="verificationForm" (ngSubmit)="sendVerificationCode()" *ngIf="selectedProvider">
         <fieldset [disabled]="isLoading$ | async">
-          <div tb-toast fxLayout="column">
+          <div tb-toast class="flex flex-col">
             <p class="mat-body">{{ providerDescription }}</p>
-            <div fxLayout="row" class="code-block" fxLayoutGap="8px">
-              <mat-form-field class="mat-block tb-appearance-transparent" fxFlex>
+            <div class="code-block flex flex-row gap-2">
+              <mat-form-field class="mat-block tb-appearance-transparent flex-1">
                 <input matInput formControlName="verificationCode"
                        required [maxlength]="maxLengthInput" type="text"
                        [attr.inputmode]="inputMode" [pattern]="pattern"
@@ -69,19 +69,19 @@
               {{ 'action.continue' | translate }}
             </button>
             <span style="height: 16px;"></span>
-            <div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="8px" class="action-row">
-              <div *ngIf="showResendAction" fxFlex fxLayoutAlign="center center" class="action-resend">
+            <div class="action-row flex flex-row justify-between items-center gap-2">
+              <div *ngIf="showResendAction" class="action-resend flex flex-1 justify-center items-center">
                 <div *ngIf="countDownTime" class="timer">
                   {{ 'login.resend-code-wait' | translate : {time: countDownTime} }}
                 </div>
-                <button [fxShow]="!hideResendButton"
-                        mat-button fxFlex
+                <button mat-button class="flex-1"
+                        [class.!hidden]="hideResendButton"
                         (click)="sendCode($event)"
                         type="button">
                   {{ 'login.resend-code' | translate }}
                 </button>
               </div>
-              <button mat-button fxFlex
+              <button mat-button class="flex-1"
                       type="button"
                       *ngIf="allowProviders.length > 1"
                       (click)="selectProvider(null)">
diff --git a/ui-ngx/src/app/shared/components/breadcrumb.component.html b/ui-ngx/src/app/shared/components/breadcrumb.component.html
index a80d3b375d..d76c7b0986 100644
--- a/ui-ngx/src/app/shared/components/breadcrumb.component.html
+++ b/ui-ngx/src/app/shared/components/breadcrumb.component.html
@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<div fxFlex class="tb-breadcrumb" fxLayout="row">
-  <h1 fxFlex fxHide.gt-sm *ngIf="lastBreadcrumb$ | async; let breadcrumb">
+<div class="tb-breadcrumb flex flex-1 flex-row">
+  <h1 class="flex-1 gt-sm:!hidden" *ngIf="lastBreadcrumb$ | async; let breadcrumb">
     {{ breadcrumb.labelFunction ? breadcrumb.labelFunction() : (breadcrumb.customTranslate ? (breadcrumb.label | customTranslate) : (breadcrumb.label | translate)) }}
   </h1>
-  <span fxHide.lt-md fxLayout="row" *ngFor="let breadcrumb of breadcrumbs$ | async; trackBy: trackByBreadcrumbs; last as isLast;" [ngSwitch]="isLast">
+  <span class="flex flex-row lt-md:!hidden" *ngFor="let breadcrumb of breadcrumbs$ | async; trackBy: trackByBreadcrumbs; last as isLast;" [ngSwitch]="isLast">
 	    <a *ngSwitchCase="false" [routerLink]="breadcrumb.link" [queryParams]="breadcrumb.queryParams">
         <ng-container
           *ngTemplateOutlet="breadcrumbWithIcon;context:{breadcrumb: breadcrumb}">
@@ -30,7 +30,7 @@
           *ngTemplateOutlet="breadcrumbWithIcon;context:{breadcrumb: breadcrumb}">
         </ng-container>
       </span>
-	    <span class="divider" [fxHide]="isLast"> > </span>
+	    <span class="divider" [class.!hidden]="isLast"> > </span>
 	</span>
 </div>
 <ng-template #breadcrumbWithIcon let-breadcrumb="breadcrumb">
diff --git a/ui-ngx/src/app/shared/components/color-picker/color-picker-panel.component.html b/ui-ngx/src/app/shared/components/color-picker/color-picker-panel.component.html
index 6ddae212e1..4d885a12a8 100644
--- a/ui-ngx/src/app/shared/components/color-picker/color-picker-panel.component.html
+++ b/ui-ngx/src/app/shared/components/color-picker/color-picker-panel.component.html
@@ -26,8 +26,8 @@
             [disabled]="!colorPickerControl.value">
       {{ 'action.clear' | translate }}
     </button>
-    <span fxFlex></span>
-    <div fxLayoutGap="8px">
+    <span class="flex-1"></span>
+    <div class="flex flex-row gap-2">
       <button *ngIf="colorCancelButton"
               mat-button
               type="button"
diff --git a/ui-ngx/src/app/shared/components/css.component.html b/ui-ngx/src/app/shared/components/css.component.html
index c6cd4d568a..f82cee1d61 100644
--- a/ui-ngx/src/app/shared/components/css.component.html
+++ b/ui-ngx/src/app/shared/components/css.component.html
@@ -15,12 +15,12 @@
     limitations under the License.
 
 -->
-<div class="tb-css" style="background: #fff;" [ngClass]="{'tb-disabled': disabled, 'fill-height': fillHeight}"
+<div class="tb-css flex flex-col" style="background: #fff;" [class]="{'tb-disabled': disabled, 'fill-height': fillHeight}"
      tb-fullscreen
-     [fullscreen]="fullscreen" fxLayout="column">
-  <div fxLayout="row" fxLayoutAlign="start center" style="height: 40px;" class="tb-css-toolbar">
-    <label class="tb-title no-padding" [ngClass]="{'tb-error': !disabled && (hasErrors || required && !modelValue), 'tb-required': !disabled && required}">{{ label }}</label>
-    <span fxFlex></span>
+     [fullscreen]="fullscreen">
+  <div style="height: 40px;" class="tb-css-toolbar flex flex-row justify-start items-center">
+    <label class="tb-title no-padding" [class]="{'tb-error': !disabled && (hasErrors || required && !modelValue), 'tb-required': !disabled && required}">{{ label }}</label>
+    <span class="flex-1"></span>
     <button type='button' *ngIf="!disabled" mat-button class="tidy" (click)="beautifyCss()">
       {{'js-func.tidy' | translate }}
     </button>
@@ -35,7 +35,7 @@
       </div>
     </fieldset>
   </div>
-  <div id="tb-css-panel" class="tb-css-content-panel" fxLayout="column">
-    <div #cssEditor id="tb-css-input" [ngClass]="{'fill-height': fillHeight}"></div>
+  <div id="tb-css-panel" class="tb-css-content-panel flex flex-col">
+    <div #cssEditor id="tb-css-input" [class.fill-height]="fillHeight"></div>
   </div>
 </div>
diff --git a/ui-ngx/src/app/shared/components/dashboard-autocomplete.component.html b/ui-ngx/src/app/shared/components/dashboard-autocomplete.component.html
index 13cf1bd664..bfdf4dce2b 100644
--- a/ui-ngx/src/app/shared/components/dashboard-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/dashboard-autocomplete.component.html
@@ -30,7 +30,7 @@
          (focusin)="onFocus()"
          [required]="required"
          [matAutocomplete]="dashboardAutocomplete"
-         [fxShow]="!useDashboardLink || !disabled || !selectDashboardFormGroup.get('dashboard').value">
+         [class.!hidden]="useDashboardLink && disabled && selectDashboardFormGroup.get('dashboard').value">
   <a *ngIf="useDashboardLink && selectDashboardFormGroup.get('dashboard').value && disabled" aria-label="Open device profile" [routerLink]=dashboardURL>
     {{ displayDashboardFn(selectDashboardFormGroup.get('dashboard').value) | customTranslate }}
   </a>
diff --git a/ui-ngx/src/app/shared/components/dashboard-select-panel.component.html b/ui-ngx/src/app/shared/components/dashboard-select-panel.component.html
index a564568379..aaaf2c2c3a 100644
--- a/ui-ngx/src/app/shared/components/dashboard-select-panel.component.html
+++ b/ui-ngx/src/app/shared/components/dashboard-select-panel.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" class="mat-content mat-padding">
+<div class="mat-content mat-padding flex flex-col">
   <mat-form-field>
     <mat-label>{{'dashboard.select-dashboard' | translate}}</mat-label>
     <mat-select matInput [(ngModel)]="dashboardId"
diff --git a/ui-ngx/src/app/shared/components/dashboard-select.component.html b/ui-ngx/src/app/shared/components/dashboard-select.component.html
index 307d165d49..16d9838e31 100644
--- a/ui-ngx/src/app/shared/components/dashboard-select.component.html
+++ b/ui-ngx/src/app/shared/components/dashboard-select.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-select fxHide.lt-lg
+<mat-select class="lt-lg:!hidden"
             [required]="required"
             [disabled]="disabled"
             [(ngModel)]="dashboardId"
@@ -24,7 +24,7 @@
     {{dashboard.title}}
   </mat-option>
 </mat-select>
-<section fxHide.gt-md class="tb-dashboard-select">
+<section class="tb-dashboard-select gt-md:!hidden">
   <button mat-icon-button
           cdkOverlayOrigin #dashboardSelectPanelOrigin="cdkOverlayOrigin"
           (click)="openDashboardSelectPanel()"
diff --git a/ui-ngx/src/app/shared/components/dialog/alert-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/alert-dialog.component.html
index febca6d3c7..3b656b43fc 100644
--- a/ui-ngx/src/app/shared/components/dialog/alert-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/alert-dialog.component.html
@@ -22,6 +22,6 @@
 <ng-template #htmlMode>
   <div mat-dialog-content [innerHTML]="data.message | safe:'html'"></div>
 </ng-template>
-<div mat-dialog-actions fxLayoutAlign="end center">
+<div mat-dialog-actions class="flex justify-end items-center">
   <button mat-button color="primary" [mat-dialog-close]="true" cdkFocusInitial>{{data.ok}}</button>
 </div>
diff --git a/ui-ngx/src/app/shared/components/dialog/confirm-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/confirm-dialog.component.html
index 3422e983e2..782af9cdb3 100644
--- a/ui-ngx/src/app/shared/components/dialog/confirm-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/confirm-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <h2 mat-dialog-title>{{data.title}}</h2>
 <div mat-dialog-content [innerHTML]="data.message | safe: 'html'"></div>
-<div mat-dialog-actions fxLayoutAlign="end center">
+<div mat-dialog-actions class="flex justify-end items-center">
   <button mat-button color="primary" [mat-dialog-close]="false">{{data.cancel}}</button>
   <button mat-button color="primary" [mat-dialog-close]="true" cdkFocusInitial>{{data.ok}}</button>
 </div>
diff --git a/ui-ngx/src/app/shared/components/dialog/entity-conflict-dialog/entity-conflict-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/entity-conflict-dialog/entity-conflict-dialog.component.html
index c1530bf1d8..f2ed025e1a 100644
--- a/ui-ngx/src/app/shared/components/dialog/entity-conflict-dialog/entity-conflict-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/entity-conflict-dialog/entity-conflict-dialog.component.html
@@ -19,7 +19,7 @@
   <h2 class="main-label">
     {{ data.message }}
   </h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           (click)="onCancel()"
           type="button">
@@ -36,7 +36,7 @@
     <span>{{ 'entity.version-conflict.message' | translate }}</span>
   </div>
 </div>
-<div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+<div mat-dialog-actions class="flex flex-row justify-end items-center">
   <button mat-button color="primary"
           type="button"
           (click)="onDiscard()"
diff --git a/ui-ngx/src/app/shared/components/dialog/error-alert-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/error-alert-dialog.component.html
index d9f77f1a09..0a10fe9923 100644
--- a/ui-ngx/src/app/shared/components/dialog/error-alert-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/error-alert-dialog.component.html
@@ -25,6 +25,6 @@
     <small class="error-details-content" [innerHTML]="errorDetails"></small>
   </mat-expansion-panel>
 </div>
-<div mat-dialog-actions fxLayoutAlign="end center">
+<div mat-dialog-actions class="flex justify-end items-center">
   <button mat-button color="primary" [mat-dialog-close]="true" cdkFocusInitial>{{data.ok}}</button>
 </div>
diff --git a/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.html
index 07f228bfc6..684b009b5d 100644
--- a/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.html
@@ -16,9 +16,9 @@
 
 -->
 <form [formGroup]="jsonFormGroup" (ngSubmit)="add()" style="min-width: 400px;">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>{{ title }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -38,8 +38,8 @@
       </tb-json-object-edit>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
-    <span fxFlex></span>
+  <div mat-dialog-actions class="flex flex-row justify-end items-center">
+    <span class="flex-1"></span>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.html
index 06fb510d1b..0cd5247719 100644
--- a/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.html
@@ -17,16 +17,16 @@
 -->
 <form class="tb-node-script-test-dialog"
       [formGroup]="nodeScriptTestFormGroup" (ngSubmit)="save()">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>{{ 'rulenode.test-script-function' | translate }} ({{ (scriptLang === scriptLanguage.JS ? 'rulenode.script-lang-java-script' : 'rulenode.script-lang-tbel') | translate }})</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <div mat-dialog-content fxFlex style="position: relative;">
+  <div mat-dialog-content class="flex-1" style="position: relative;">
     <div class="tb-absolute-fill">
       <div #topPanel class="tb-split tb-split-vertical">
         <div #topLeftPanel class="tb-split tb-content">
@@ -34,8 +34,8 @@
             <div class="tb-editor-area-title-panel">
               <label translate>rulenode.message</label>
             </div>
-            <div formGroupName="payload" fxLayout="column" style="height: 100%;">
-              <div fxLayout="row">
+            <div formGroupName="payload" class="flex flex-col" style="height: 100%;">
+              <div class="flex flex-row">
                 <tb-message-type-autocomplete
                   style="margin-bottom: 0; min-width: 300px;"
                   formControlName="msgType"
@@ -44,7 +44,7 @@
               </div>
               <tb-json-content
                 #payloadContent
-                fxFlex
+                class="flex-1"
                 formControlName="msg"
                 label="{{ 'rulenode.message' | translate }}"
                 [contentType]="contentTypes.JSON"
@@ -70,7 +70,7 @@
       <div #bottomPanel class="tb-split tb-split-vertical">
         <div #bottomLeftPanel class="tb-split tb-content">
           <div class="tb-resize-container">
-            <div class="tb-editor-area-title-panel tb-js-function" [ngClass]="{'tb-js-function-help': data.helpId}">
+            <div class="tb-editor-area-title-panel tb-js-function" [class.tb-js-function-help]="data.helpId">
               <label>{{ functionTitle }}</label>
             </div>
             <tb-js-func
@@ -92,7 +92,7 @@
               <label translate>rulenode.output</label>
             </div>
             <tb-json-content
-              fxFlex
+              class="flex-1"
               formControlName="output"
               label="{{ 'rulenode.output' | translate }}"
               [contentType]="contentTypes.JSON"
@@ -105,14 +105,14 @@
       </div>
     </div>
   </div>
-  <div mat-dialog-actions fxLayout="row">
+  <div mat-dialog-actions class="flex flex-row">
     <button mat-button mat-raised-button color="primary"
             type="button"
             (click)="test()"
             [disabled]="(isLoading$ | async) || nodeScriptTestFormGroup.invalid">
       {{ 'rulenode.test' | translate }}
     </button>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
diff --git a/ui-ngx/src/app/shared/components/dialog/todo-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/todo-dialog.component.html
index a030131227..fba57b4d72 100644
--- a/ui-ngx/src/app/shared/components/dialog/todo-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/todo-dialog.component.html
@@ -19,6 +19,6 @@
 <div mat-dialog-content>
   <h1>COMING SOON!</h1>
 </div>
-<div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+<div mat-dialog-actions class="flex flex-row justify-end items-center">
   <button mat-button color="primary" [mat-dialog-close]="true" cdkFocusInitial>Ok</button>
 </div>
diff --git a/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.html b/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.html
index 2ca193468c..8986ed12e9 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.html
@@ -23,7 +23,7 @@
          (focusin)="onFocus()"
          [required]="required"
          [matAutocomplete]="entityAutocomplete"
-         [fxShow]="!disabled || !selectEntityFormGroup.get('entity').value">
+         [class.!hidden]="disabled && selectEntityFormGroup.get('entity').value">
   <a *ngIf="selectEntityFormGroup.get('entity').value && disabled" aria-label="Open device profile" [routerLink]=entityURL>
     {{ displayEntityFn(selectEntityFormGroup.get('entity').value) }}
   </a>
diff --git a/ui-ngx/src/app/shared/components/entity/entity-list-select.component.html b/ui-ngx/src/app/shared/components/entity/entity-list-select.component.html
index 5be5f613e8..49e1c003f7 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-list-select.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-list-select.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div fxLayout="row" class="tb-entity-list-select" [formGroup]="entityListSelectFormGroup">
+<div class="tb-entity-list-select flex flex-row" [formGroup]="entityListSelectFormGroup">
   <tb-entity-type-select
     style="min-width: 100px; padding-right: 8px;"
     *ngIf="displayEntityTypeSelect"
@@ -26,8 +26,8 @@
     formControlName="entityType">
   </tb-entity-type-select>
   <tb-entity-list
-    [ngClass]="{'tb-not-empty': this.modelValue.ids?.length > 0}"
-    fxFlex
+    class="flex-1"
+    [class.tb-not-empty]="modelValue.ids?.length > 0"
     *ngIf="modelValue.entityType"
     [required]="required"
     [entityType]="modelValue.entityType"
diff --git a/ui-ngx/src/app/shared/components/entity/entity-subtype-select.component.html b/ui-ngx/src/app/shared/components/entity/entity-subtype-select.component.html
index e05d3245f6..35dfcd2cd3 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-subtype-select.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-subtype-select.component.html
@@ -17,7 +17,7 @@
 -->
 <mat-form-field [formGroup]="subTypeFormGroup" class="mat-block" subscriptSizing="{{ subscriptSizing }}">
   <mat-label *ngIf="showLabel">{{ entitySubtypeTitle | translate }}</mat-label>
-  <mat-select [fxShow]="subTypesLoaded" class="tb-entity-subtype-select" formControlName="subType">
+  <mat-select [class.!hidden]="!subTypesLoaded" class="tb-entity-subtype-select" formControlName="subType">
     <mat-option *ngFor="let subType of subTypesOptions | async" [value]="subType">
       {{ displaySubTypeFn(subType) }}
     </mat-option>
diff --git a/ui-ngx/src/app/shared/components/footer-fab-buttons.component.html b/ui-ngx/src/app/shared/components/footer-fab-buttons.component.html
index 7d9c0c33d5..fe03de8006 100644
--- a/ui-ngx/src/app/shared/components/footer-fab-buttons.component.html
+++ b/ui-ngx/src/app/shared/components/footer-fab-buttons.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section fxLayout="row" class="layout-wrap tb-footer-fab-buttons" [ngClass]="{'relative-buttons': relative}">
+<section class="tb-footer-fab-buttons flex flex-row flex-wrap" [class.relative-buttons]="relative">
   <div class="fab-container">
     <button [disabled]="isLoading$ | async"
             mat-fab class="fab-toggler tb-btn-footer"
diff --git a/ui-ngx/src/app/shared/components/grid/scroll-grid.component.html b/ui-ngx/src/app/shared/components/grid/scroll-grid.component.html
index 7e4f705ede..666d19ea5d 100644
--- a/ui-ngx/src/app/shared/components/grid/scroll-grid.component.html
+++ b/ui-ngx/src/app/shared/components/grid/scroll-grid.component.html
@@ -42,13 +42,12 @@
   <ng-container *ngTemplateOutlet="noData"></ng-container>
 </ng-template>
 <ng-template #defaultLoadingCell>
-  <div fxLayout="column" fxLayoutAlign="center center" [style]="{minHeight: itemSize + 'px'}">
+  <div class="flex flex-col justify-center items-center" [style]="{minHeight: itemSize + 'px'}">
     <mat-spinner color="accent" strokeWidth="5"></mat-spinner>
   </div>
 </ng-template>
 <ng-template #defaultDataLoading>
-  <div fxLayout="column"
-       fxLayoutAlign="center center" class="tb-absolute-fill">
+  <div class="tb-absolute-fill flex flex-col justify-center items-center">
     <mat-spinner color="accent" strokeWidth="5"></mat-spinner>
   </div>
 </ng-template>
diff --git a/ui-ngx/src/app/shared/components/html.component.html b/ui-ngx/src/app/shared/components/html.component.html
index 25868a78d9..22c7f19551 100644
--- a/ui-ngx/src/app/shared/components/html.component.html
+++ b/ui-ngx/src/app/shared/components/html.component.html
@@ -15,12 +15,12 @@
     limitations under the License.
 
 -->
-<div class="tb-html" style="background: #fff;" [ngClass]="{'tb-disabled': disabled, 'fill-height': fillHeight}"
+<div class="tb-html flex flex-col" style="background: #fff;" [class]="{'tb-disabled': disabled, 'fill-height': fillHeight}"
      tb-fullscreen
-     [fullscreen]="fullscreen" fxLayout="column">
-  <div fxLayout="row" fxLayoutAlign="start center" style="min-height: 40px;" class="tb-html-toolbar">
-    <label class="tb-title no-padding" [ngClass]="{'tb-error': !disabled && (hasErrors || required && !modelValue), 'tb-required': !disabled && required}">{{ label }}</label>
-    <span fxFlex></span>
+     [fullscreen]="fullscreen">
+  <div style="min-height: 40px;" class="tb-html-toolbar flex flex-row justify-start items-center">
+    <label class="tb-title no-padding" [class]="{'tb-error': !disabled && (hasErrors || required && !modelValue), 'tb-required': !disabled && required}">{{ label }}</label>
+    <span class="flex-1"></span>
     <button type='button' *ngIf="!disabled" mat-button class="tidy" (click)="beautifyHtml()">
       {{'js-func.tidy' | translate }}
     </button>
@@ -35,7 +35,7 @@
       </div>
     </fieldset>
   </div>
-  <div id="tb-html-panel" class="tb-html-content-panel" fxLayout="column">
-    <div #htmlEditor id="tb-html-input" [ngStyle]="fillHeight ? {} : {minHeight: minHeight}" [ngClass]="{'fill-height': fillHeight}"></div>
+  <div id="tb-html-panel" class="tb-html-content-panel flex flex-col">
+    <div #htmlEditor id="tb-html-input" [style]="fillHeight ? {} : {minHeight: minHeight}" [class.fill-height]="fillHeight"></div>
   </div>
 </div>
diff --git a/ui-ngx/src/app/shared/components/image/embed-image-dialog.component.html b/ui-ngx/src/app/shared/components/image/embed-image-dialog.component.html
index 1a29d9837a..9f2d582ade 100644
--- a/ui-ngx/src/app/shared/components/image/embed-image-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/image/embed-image-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2>{{ 'image.embed-image' | translate }}</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           (click)="cancel()"
           type="button">
@@ -30,12 +30,11 @@
 <div mat-dialog-content>
   <div class="tb-form-panel stroked tb-slide-toggle" *ngIf="!readonly || image.public">
     <mat-expansion-panel class="tb-settings" [expanded]="image.public" disabled>
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
           <div *ngIf="!readonly" tb-hint-tooltip-icon="{{ 'image.embed-to-html-hint' | translate }}"
                class="tb-form-row no-border no-padding">
-            <mat-slide-toggle class="mat-slide" [formControl]="publicStatusControl" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle class="mat-slide flex justify-center items-stretch" [formControl]="publicStatusControl" (click)="$event.stopPropagation()">
               <div class="tb-form-panel-title">{{ 'image.embed-to-html' | translate }}</div>
             </mat-slide-toggle>
           </div>
diff --git a/ui-ngx/src/app/shared/components/image/image-dialog.component.html b/ui-ngx/src/app/shared/components/image/image-dialog.component.html
index dc2043097a..684f5bbd77 100644
--- a/ui-ngx/src/app/shared/components/image/image-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/image/image-dialog.component.html
@@ -18,7 +18,7 @@
 <form class="tb-image-dialog" [formGroup]="imageFormGroup">
   <mat-toolbar color="primary">
     <h2>{{ (readonly ? 'image.image-details' : 'image.edit-image') | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
diff --git a/ui-ngx/src/app/shared/components/image/image-gallery.component.html b/ui-ngx/src/app/shared/components/image/image-gallery.component.html
index 9fffb9ded5..acb4a50eee 100644
--- a/ui-ngx/src/app/shared/components/image/image-gallery.component.html
+++ b/ui-ngx/src/app/shared/components/image/image-gallery.component.html
@@ -15,21 +15,19 @@
     limitations under the License.
 
 -->
-<div class="tb-images tb-absolute-fill" [ngClass]="{'tb-dialog-mode': dialogMode, 'mat-padding': !dialogMode}">
-  <div fxFlex fxLayout="column" class="tb-images-content" [ngClass]="{'tb-outlined-border': pageMode}">
-    <mat-toolbar class="mat-mdc-table-toolbar"
-                 fxLayout.lt-lg="column" fxLayoutAlign.lt-lg="start stretch"
-                 [fxShow]="!textSearchMode && (mode === 'grid' || dataSource?.selection.isEmpty())" [ngClass.lt-lg]="{'multi-row': !isSysAdmin}">
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+<div class="tb-images tb-absolute-fill" [class.tb-dialog-mode]="dialogMode" [class.mat-padding]="!dialogMode">
+  <div class="tb-images-content flex flex-1 flex-col" [class.tb-outlined-border]="pageMode">
+    <mat-toolbar class="mat-mdc-table-toolbar lt-lg:flex lt-lg:flex-col lt-lg:justify-start lt-lg:items-stretch"
+                 [class.!hidden]="textSearchMode || !(mode === 'grid' || dataSource?.selection.isEmpty())"
+                 [class.multi-row]="!isSysAdmin">
+      <div class="flex flex-1 flex-row justify-start items-center">
         <div class="mat-toolbar-tools">
-          <div fxHide fxShow.gt-sm class="tb-images-title">
+          <div class="tb-images-title lt-md:!hidden">
             <div tbTruncateWithTooltip>{{ (isScada ? 'scada.symbols' : 'image.gallery') | translate }}</div>
             <div *ngIf="isScada" tb-help="scada"></div>
           </div>
-          <div class="tb-images-view-type-toolbar"
-               fxLayout="row"
-               fxLayoutAlign="start center">
-            <div class="tb-toolbar-button" [ngClass]="{'tb-selected' : mode === 'list'}">
+          <div class="tb-images-view-type-toolbar flex flex-row justify-start items-center">
+            <div class="tb-toolbar-button" [class.tb-selected]="mode === 'list'">
               <button mat-icon-button
                       (click)="setMode('list')"
                       matTooltip="{{'image.list-mode' | translate }}"
@@ -37,7 +35,7 @@
                 <mat-icon>view_list</mat-icon>
               </button>
             </div>
-            <div class="tb-toolbar-button" [ngClass]="{'tb-selected' : mode === 'grid'}">
+            <div class="tb-toolbar-button" [class.tb-selected]="mode === 'grid'">
               <button mat-icon-button
                       (click)="setMode('grid');"
                       matTooltip="{{'image.grid-mode' | translate }}"
@@ -47,13 +45,13 @@
             </div>
           </div>
           <mat-slide-toggle *ngIf="!isSysAdmin"
-                            fxHide fxShow.gt-md
+                            class="lt-lg:!hidden"
                             [ngModel]="includeSystemImages"
                             (ngModelChange)="includeSystemImagesChanged($event)">{{ (isScada ? 'scada.include-system-symbols' : 'image.include-system-images') | translate }}</mat-slide-toggle>
         </div>
-        <section fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap.gt-md="16px">
-          <span fxFlex></span>
-          <section fxLayout="row" fxLayoutAlign="start center">
+        <section class="flex flex-1 flex-row justify-start items-center gt-md:gap-4">
+          <span class="flex-1"></span>
+          <section class="flex flex-row justify-start items-center">
             <button [disabled]="isLoading$ | async"
                     mat-icon-button
                     (click)="enterFilterMode()"
@@ -75,7 +73,8 @@
                     matTooltipPosition="above">
               <tb-icon>mdi:file-import</tb-icon>
             </button>
-            <button [fxHide]="!(dialogMode && isScada)" fxShow.lt-lg
+            <button [class.!hidden]="dialogMode && isScada"
+                    class="gt-md:!hidden"
                     [disabled]="isLoading$ | async"
                     mat-icon-button
                     color="primary"
@@ -85,7 +84,8 @@
               <mat-icon>add</mat-icon>
             </button>
           </section>
-          <button fxHide [fxShow.gt-md]="!(dialogMode && isScada)"
+          <button [class.!hidden]="dialogMode && isScada"
+                  class="lt-lg:!hidden"
                   [disabled]="isLoading$ | async"
                   mat-flat-button
                   color="primary"
@@ -94,18 +94,18 @@
           </button>
         </section>
       </div>
-      <mat-slide-toggle *ngIf="!isSysAdmin" fxHide fxShow.lt-lg
+      <mat-slide-toggle *ngIf="!isSysAdmin" class="gt-md:!hidden"
                         [ngModel]="includeSystemImages"
                         (ngModelChange)="includeSystemImagesChanged($event)">{{ (isScada ? 'scada.include-system-symbols' : 'image.include-system-images') | translate }}</mat-slide-toggle>
     </mat-toolbar>
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode && (mode === 'grid' || dataSource?.selection.isEmpty())">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode || !(mode === 'grid' || dataSource?.selection.isEmpty())">
       <div class="mat-toolbar-tools">
         <button mat-icon-button
                 matTooltip="{{ (isScada ? 'scada.search' : 'image.search' ) | translate }}"
                 matTooltipPosition="above">
           <mat-icon>search</mat-icon>
         </button>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>&nbsp;</mat-label>
           <input #searchInput matInput
                  [formControl]="textSearch"
@@ -118,12 +118,12 @@
         </button>
       </div>
     </mat-toolbar>
-    <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [fxShow]="mode === 'list' && !dataSource?.selection.isEmpty()">
+    <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [class.!hidden]="mode !== 'list' || dataSource?.selection.isEmpty()">
       <div class="mat-toolbar-tools">
         <span>
           {{ translate.get((isScada ? 'scada.selected-symbols' : 'image.selected-images' ), {count: dataSource?.selection.selected.length}) | async }}
         </span>
-        <span fxFlex></span>
+        <span class="flex-1"></span>
         <button mat-icon-button [disabled]="isLoading$ | async"
                 matTooltip="{{ 'action.delete' | translate }}"
                 matTooltipPosition="above"
@@ -132,8 +132,8 @@
         </button>
       </div>
     </mat-toolbar>
-    <div fxFlex *ngIf="mode === 'list'" fxLayout="column">
-      <div fxFlex class="table-container">
+    <div *ngIf="mode === 'list'" class="flex flex-1 flex-col">
+      <div class="table-container flex-1">
         <table mat-table [dataSource]="dataSource" [trackBy]="trackByEntity"
                matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
           <ng-container matColumnDef="select" sticky>
@@ -145,7 +145,7 @@
             </mat-header-cell>
             <mat-cell *matCellDef="let image">
               <mat-checkbox (click)="$event.stopPropagation()"
-                            [fxShow]="deleteEnabled(image)"
+                            [class.!hidden]="!deleteEnabled(image)"
                             (change)="$event ? dataSource.selection.toggle(image) : null"
                             [checked]="dataSource.selection.isSelected(image)">
               </mat-checkbox>
@@ -190,10 +190,22 @@
             </mat-cell>
           </ng-container>
           <ng-container matColumnDef="actions" stickyEnd>
-            <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: actionColumnWidth, maxWidth: actionColumnWidth, width: actionColumnWidth }">
+            <mat-header-cell *matHeaderCellDef
+                             [class.gt-md:min-w-60]="!isScada"
+                             [class.gt-md:max-w-60]="!isScada"
+                             [class.gt-md:w-60]="!isScada"
+                             [class.gt-md:min-w-48]="isScada"
+                             [class.gt-md:max-w-48]="isScada"
+                             [class.gt-md:w-48]="isScada">
             </mat-header-cell>
-            <mat-cell *matCellDef="let image" [ngStyle.gt-md]="{ minWidth: actionColumnWidth, maxWidth: actionColumnWidth, width: actionColumnWidth }">
-              <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
+            <mat-cell *matCellDef="let image"
+                      [class.gt-md:min-w-60]="!isScada"
+                      [class.gt-md:max-w-60]="!isScada"
+                      [class.gt-md:w-60]="!isScada"
+                      [class.gt-md:min-w-48]="isScada"
+                      [class.gt-md:max-w-48]="isScada"
+                      [class.gt-md:w-48]="isScada">
+              <div class="lt-lg:!hidden flex flex-1 flex-row justify-end items-stretch">
                 <button mat-icon-button [disabled]="isLoading$ | async"
                         matTooltip="{{ (isScada ? 'scada.download-symbol' : 'image.download-image' ) | translate }}"
                         matTooltipPosition="above"
@@ -225,7 +237,7 @@
                   <mat-icon>delete</mat-icon>
                 </button>
               </div>
-              <div fxHide fxShow.lt-lg>
+              <div class="gt-md:!hidden">
                 <button mat-icon-button
                         (click)="$event.stopPropagation()"
                         [matMenuTriggerFor]="cellActionsMenu">
@@ -258,7 +270,7 @@
                   </button>
                   <button mat-menu-item
                           [disabled]="isLoading$ | async"
-                          [fxShow]="deleteEnabled(image)"
+                          [class.!hidden]="!deleteEnabled(image)"
                           (click)="deleteImage($event, image)">
                     <mat-icon>delete</mat-icon>
                     <span>{{ (isScada ? 'scada.delete-symbol' : 'image.delete-image' ) | translate }}</span>
@@ -275,18 +287,17 @@
                       (click)="selectImage($event, image)">{{ 'action.select' | translate }}</button>
             </mat-cell>
           </ng-container>
-          <mat-header-row [ngClass]="{'mat-row-select': true}" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
-          <mat-row [fxShow]="!dataSource.dataLoading"
-                   [ngClass]="{'mat-row-select': true,
-                               'mat-selected': dataSource.selection.isSelected(image)}"
+          <mat-header-row class="mat-row-select" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
+          <mat-row class="mat-row-select"
+                   [class.!hidden]="dataSource.dataLoading"
+                   [class.mat-selected]="dataSource.selection.isSelected(image)"
                    *matRowDef="let image; columns: displayedColumns;" (click)="rowClick($event, image)"></mat-row>
         </table>
         <ng-container *ngIf="(dataSource.isEmpty() | async) && !dataSource.dataLoading">
           <ng-container *ngTemplateOutlet="noImages"></ng-container>
         </ng-container>
-        <span [fxShow]="dataSource.dataLoading"
-              fxLayoutAlign="center center"
-              class="no-data-found">{{ 'common.loading' | translate }}</span>
+        <span [class.!hidden]="!dataSource.dataLoading"
+              class="no-data-found flex justify-center items-center">{{ 'common.loading' | translate }}</span>
       </div>
       <mat-divider></mat-divider>
       <mat-paginator [length]="dataSource.total() | async"
@@ -296,8 +307,8 @@
                      [hidePageSize]="hidePageSize"
                      showFirstLastButtons></mat-paginator>
     </div>
-    <div *ngIf="mode === 'grid'" fxFlex [ngClass]="{'mat-padding': !dialogMode}" fxLayout="column">
-      <tb-scroll-grid fxFlex
+    <div *ngIf="mode === 'grid'" class="flex flex-1 flex-col" [class.mat-padding]="!dialogMode">
+      <tb-scroll-grid class="flex-1"
         [columns]="gridColumns"
         [itemSize]="gridImagesItemSizeStrategy"
         [fetchFunction]="gridImagesFetchFunction"
@@ -311,8 +322,7 @@
   </div>
 </div>
 <ng-template #loadingImages>
-  <div fxLayout="column"
-       fxLayoutAlign="center center" class="tb-absolute-fill">
+  <div class="tb-absolute-fill flex flex-col justify-center items-center">
         <span>
           {{ 'common.loading' | translate }}
         </span>
diff --git a/ui-ngx/src/app/shared/components/image/image-gallery.component.scss b/ui-ngx/src/app/shared/components/image/image-gallery.component.scss
index 065edce62c..e895283d58 100644
--- a/ui-ngx/src/app/shared/components/image/image-gallery.component.scss
+++ b/ui-ngx/src/app/shared/components/image/image-gallery.component.scss
@@ -42,12 +42,14 @@ $tb-button-selected-color: rgb(255, 110, 64) !default;
 
     .mat-mdc-table-toolbar {
       &.multi-row {
-        &.mat-toolbar-single-row {
-          height: 112px;
-        }
-        .mat-mdc-slide-toggle {
-          display: flex;
-          min-height: 48px;
+        @media #{$mat-lt-lg} {
+          &.mat-toolbar-single-row {
+            height: 112px;
+          }
+          .mat-mdc-slide-toggle {
+            display: flex;
+            min-height: 48px;
+          }
         }
       }
     }
diff --git a/ui-ngx/src/app/shared/components/image/image-gallery.component.ts b/ui-ngx/src/app/shared/components/image/image-gallery.component.ts
index 566fc699ae..93d77bd622 100644
--- a/ui-ngx/src/app/shared/components/image/image-gallery.component.ts
+++ b/ui-ngx/src/app/shared/components/image/image-gallery.component.ts
@@ -174,8 +174,6 @@ export class ImageGalleryComponent extends PageComponent implements OnInit, OnDe
 
   authUser = getCurrentAuthUser(this.store);
 
-  actionColumnWidth = '240px';
-
   get isScada() {
     return this.imageSubType === ResourceSubType.SCADA_SYMBOL;
   }
@@ -245,9 +243,6 @@ export class ImageGalleryComponent extends PageComponent implements OnInit, OnDe
       this.dataSource = new ImagesDatasource(this.imageService, null,
           entity => this.deleteEnabled(entity));
     }
-    if (this.isScada) {
-      this.actionColumnWidth = '192px';
-    }
   }
 
   ngOnDestroy(): void {
diff --git a/ui-ngx/src/app/shared/components/image/images-in-use-dialog.component.html b/ui-ngx/src/app/shared/components/image/images-in-use-dialog.component.html
index 6bbc62ade2..0be6a11d1b 100644
--- a/ui-ngx/src/app/shared/components/image/images-in-use-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/image/images-in-use-dialog.component.html
@@ -63,15 +63,15 @@
                     (click)="toggleShowReferences($event, image, showReferencesButton)">{{ 'image.references' | translate }}</button>
           </mat-cell>
         </ng-container>
-        <mat-header-row [ngClass]="{'mat-row-select': true}" *matHeaderRowDef="['select', 'preview', 'title', 'references']; sticky: true"></mat-header-row>
-        <mat-row [ngClass]="{'mat-row-select': true,
-                                 'mat-selected': dataSource.selection.isSelected(image)}"
+        <mat-header-row class="mat-row-select" *matHeaderRowDef="['select', 'preview', 'title', 'references']; sticky: true"></mat-header-row>
+        <mat-row class="mat-row-select"
+                 [class.mat-selected]="dataSource.selection.isSelected(image)"
                  *matRowDef="let image; columns: ['select', 'preview', 'title', 'references'];"></mat-row>
       </table>
     </div>
   </ng-container>
 </div>
-<div mat-dialog-actions fxLayoutAlign="end center">
+<div mat-dialog-actions class="flex justify-end items-center">
   <button mat-button color="primary" (click)="cancel()">{{'action.cancel' | translate}}</button>
   <button mat-raised-button color="accent" (click)="delete()" [disabled]="data.multiple && dataSource.selection.isEmpty()"
           cdkFocusInitial>{{ (data.multiple ? 'action.delete-selected' : 'action.delete-anyway') | translate}}</button>
diff --git a/ui-ngx/src/app/shared/components/image/multiple-gallery-image-input.component.html b/ui-ngx/src/app/shared/components/image/multiple-gallery-image-input.component.html
index ea6a4cc603..6707e0e05c 100644
--- a/ui-ngx/src/app/shared/components/image/multiple-gallery-image-input.component.html
+++ b/ui-ngx/src/app/shared/components/image/multiple-gallery-image-input.component.html
@@ -16,10 +16,10 @@
 
 -->
 <div class="tb-container">
-  <label class="tb-title" *ngIf="label" [ngClass]="{'tb-error': !disabled && (required && !imageUrls.length), 'tb-required': !disabled && required}">{{label}}</label>
-  <div class="images-container" dndDropzone [dndHorizontal]="true" dndEffectAllowed="move"
-       [dndDisableIf]="disabled" (dndDrop)="imageDrop($event)"
-       fxLayout="row" fxLayoutGap="8px" [ngClass]="{'no-images': !imageUrls.length}">
+  <label class="tb-title" *ngIf="label" [class]="{'tb-error': !disabled && (required && !imageUrls.length), 'tb-required': !disabled && required}">{{label}}</label>
+  <div class="images-container flex flex-row gap-2" dndDropzone [dndHorizontal]="true" dndEffectAllowed="move"
+       [class.no-images]="!imageUrls.length"
+       [dndDisableIf]="disabled" (dndDrop)="imageDrop($event)">
     <div dndPlaceholderRef class="image-card image-dnd-placeholder"></div>
     <div *ngFor="let imageUrl of imageUrls; let $index = index;"
          (dndStart)="imageDragStart($index)"
@@ -27,10 +27,10 @@
          [dndDraggable]="imageUrl"
          [dndDisableIf]="disabled"
          dndEffectAllowed="move"
-         [ngClass]="{'image-dragging': dragIndex === $index}"
-         class="image-card" fxLayout="column">
+         [class.image-dragging]="dragIndex === $index"
+         class="image-card flex flex-col">
       <span class="image-title">{{ 'image-input.images' | translate }} [{{ $index }}]</span>
-      <div class="image-content-container" fxLayout="row">
+      <div class="image-content-container flex flex-row">
         <div dndHandle *ngIf="!disabled" class="tb-image-action-container tb-drag-handle">
           <mat-icon color="primary">drag_indicator</mat-icon>
         </div>
diff --git a/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html b/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html
index 6f928639db..f4bc600cd2 100644
--- a/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="uploadImageFormGroup" (ngSubmit)="upload()" style="width: 560px;">
   <mat-toolbar color="primary">
     <h2>{{ ( uploadImage ? (isScada ? 'scada.upload-symbol' : 'image.upload-image') : (isScada ? 'scada.update-symbol' : 'image.update-image') ) | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -50,7 +50,7 @@
       </mat-form-field>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex flex-row justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/shared/components/js-func.component.html b/ui-ngx/src/app/shared/components/js-func.component.html
index f38749550a..e9d30f2dd2 100644
--- a/ui-ngx/src/app/shared/components/js-func.component.html
+++ b/ui-ngx/src/app/shared/components/js-func.component.html
@@ -15,15 +15,15 @@
     limitations under the License.
 
 -->
-<div class="tb-js-func" style="background: #fff;" [ngClass]="{'tb-disabled': disabled, 'fill-height': fillHeight, 'tb-hide-brackets': hideBrackets}"
+<div class="tb-js-func flex flex-col" style="background: #fff;" [class]="{'tb-disabled': disabled, 'fill-height': fillHeight, 'tb-hide-brackets': hideBrackets}"
      tb-fullscreen
-     [fullscreen]="fullscreen" fxLayout="column">
-  <div fxLayout="row" fxLayoutAlign="start center" style="min-height: 40px;" class="tb-js-func-toolbar">
+     [fullscreen]="fullscreen">
+  <div style="min-height: 40px;" class="tb-js-func-toolbar flex flex-row justify-start items-center">
     <label class="tb-title no-padding"
-           [ngClass]="{'tb-error': !disabled && (hasErrors || !functionValid || required && !modelValue), 'tb-required': !disabled && required}">
+           [class]="{'tb-error': !disabled && (hasErrors || !functionValid || required && !modelValue), 'tb-required': !disabled && required}">
       {{ functionLabel }}
     </label>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <ng-content select="[toolbarPrefixButton]"></ng-content>
     <button type='button' *ngIf="!disabled" mat-button class="tidy" (click)="beautifyJs()">
       {{'js-func.tidy' | translate }}
@@ -41,10 +41,10 @@
       </div>
     </fieldset>
   </div>
-  <div id="tb-javascript-panel" class="tb-js-func-panel" fxLayout="column" tb-toast toastTarget="{{toastTargetId}}">
-    <div #javascriptEditor id="tb-javascript-input" [ngStyle]="fillHeight ? {} : {minHeight: minHeight}" [ngClass]="{'fill-height': fillHeight}"></div>
+  <div id="tb-javascript-panel" class="tb-js-func-panel flex flex-col" tb-toast toastTarget="{{toastTargetId}}">
+    <div #javascriptEditor id="tb-javascript-input" [style]="fillHeight ? {} : {minHeight: minHeight}" [class.fill-height]="fillHeight"></div>
   </div>
-  <div *ngIf="!hideBrackets" fxLayout="row" fxLayoutAlign="start center" style="height: 40px;">
-    <label class="tb-title no-padding" [ngClass]="{'tb-error': hasErrors || !functionValid || required && !modelValue}">&#125;</label>
+  <div *ngIf="!hideBrackets" class="flex flex-row justify-start items-center" style="height: 40px;">
+    <label class="tb-title no-padding" [class]="{'tb-error': hasErrors || !functionValid || required && !modelValue}">&#125;</label>
   </div>
 </div>
diff --git a/ui-ngx/src/app/shared/components/json-content.component.html b/ui-ngx/src/app/shared/components/json-content.component.html
index 67727591a4..c5452c92c4 100644
--- a/ui-ngx/src/app/shared/components/json-content.component.html
+++ b/ui-ngx/src/app/shared/components/json-content.component.html
@@ -15,12 +15,12 @@
     limitations under the License.
 
 -->
-<div class="tb-json-content" style="background: #fff;" [ngClass]="{'fill-height': fillHeight}"
+<div class="tb-json-content flex flex-col" style="background: #fff;" [class]="{'fill-height': fillHeight}"
      tb-fullscreen
-     [fullscreen]="fullscreen" (fullscreenChanged)="onFullscreen()" fxLayout="column">
-  <div fxLayout="row" fxLayoutAlign="start center" style="height: 40px;" class="tb-json-content-toolbar" *ngIf="!hideToolbar">
-    <label class="tb-title no-padding" [ngClass]="{'tb-error': !disabled && (!contentValid || required && !contentBody), 'tb-required': !disabled && required}">{{ label }}</label>
-    <span fxFlex></span>
+     [fullscreen]="fullscreen" (fullscreenChanged)="onFullscreen()">
+  <div style="height: 40px;" class="tb-json-content-toolbar flex flex-row justify-start items-center" *ngIf="!hideToolbar">
+    <label class="tb-title no-padding" [class]="{'tb-error': !disabled && (!contentValid || required && !contentBody), 'tb-required': !disabled && required}">{{ label }}</label>
+    <span class="flex-1"></span>
     <button type="button"
             mat-button *ngIf="!readonly && !disabled" class="tidy" (click)="beautifyJSON()">
       {{'js-func.tidy' | translate }}
@@ -41,7 +41,7 @@
     </fieldset>
   </div>
   <div id="tb-json-panel" tb-toast toastTarget="{{toastTargetId}}"
-       class="tb-json-content-panel" fxLayout="column">
-    <div #jsonEditor id="tb-json-input" [ngStyle]="editorStyle" [ngClass]="{'fill-height': fillHeight}"></div>
+       class="tb-json-content-panel flex flex-col">
+    <div #jsonEditor id="tb-json-input" [style]="editorStyle" [class.fill-height]="fillHeight"></div>
   </div>
 </div>
diff --git a/ui-ngx/src/app/shared/components/json-object-edit.component.html b/ui-ngx/src/app/shared/components/json-object-edit.component.html
index 81b6d386fd..cf60036986 100644
--- a/ui-ngx/src/app/shared/components/json-object-edit.component.html
+++ b/ui-ngx/src/app/shared/components/json-object-edit.component.html
@@ -15,15 +15,15 @@
     limitations under the License.
 
 -->
-<div style="background: #fff;" [ngClass]="{'fill-height': fillHeight}"
+<div class="flex flex-col" style="background: #fff;" [class.fill-height]="fillHeight"
      tb-fullscreen
-     [fullscreen]="fullscreen" (fullscreenChanged)="onFullscreen()" fxLayout="column">
-  <div fxLayout="row" fxLayoutAlign="start center" class="tb-json-object-toolbar">
+     [fullscreen]="fullscreen" (fullscreenChanged)="onFullscreen()">
+  <div class="tb-json-object-toolbar flex flex-row justify-start items-center">
     <label class="tb-title no-padding"
-           [ngClass]="{'tb-required': jsonRequired,
-                       'tb-readonly': readonly,
-                       'tb-error': !objectValid}">{{ label }}</label>
-    <span fxFlex></span>
+           [class]="{'tb-required': jsonRequired,
+                     'tb-readonly': readonly,
+                     'tb-error': !objectValid}">{{ label }}</label>
+    <span class="flex-1"></span>
     <button type="button"
             mat-button *ngIf="!readonly && !disabled" class="tidy" (click)="beautifyJSON()">
       {{'js-func.tidy' | translate }}
@@ -39,7 +39,7 @@
     </button>
   </div>
   <div id="tb-json-panel" tb-toast toastTarget="{{toastTargetId}}"
-       class="tb-json-object-panel" fxLayout="column">
-    <div #jsonEditor id="tb-json-input" [ngStyle]="editorStyle" [ngClass]="{'fill-height': fillHeight}"></div>
+       class="tb-json-object-panel flex flex-col">
+    <div #jsonEditor id="tb-json-input" [style]="editorStyle" [class.fill-height]="fillHeight"></div>
   </div>
 </div>
diff --git a/ui-ngx/src/app/shared/components/json-object-view.component.html b/ui-ngx/src/app/shared/components/json-object-view.component.html
index d87b4a9e00..74d76d9b8f 100644
--- a/ui-ngx/src/app/shared/components/json-object-view.component.html
+++ b/ui-ngx/src/app/shared/components/json-object-view.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div style="background: #fff;" [ngClass]="{'fill-height': fillHeight}">
+<div style="background: #fff;" [class.fill-height]="fillHeight">
   <label class="tb-title no-padding" *ngIf="label">{{ label }}</label>
-  <span fxFlex></span>
-  <div #jsonViewer id="tb-json-view" [ngClass]="{'fill-height': fillHeight}"></div>
+  <span class="flex-1"></span>
+  <div #jsonViewer id="tb-json-view" [class.fill-height]="fillHeight"></div>
 </div>
diff --git a/ui-ngx/src/app/shared/components/kv-map.component.html b/ui-ngx/src/app/shared/components/kv-map.component.html
index e3a22a27d3..28861708e8 100644
--- a/ui-ngx/src/app/shared/components/kv-map.component.html
+++ b/ui-ngx/src/app/shared/components/kv-map.component.html
@@ -15,21 +15,21 @@
     limitations under the License.
 
 -->
-<section fxLayout="column" class="tb-kv-map" [formGroup]="kvListFormGroup">
+<section class="tb-kv-map flex flex-col" [formGroup]="kvListFormGroup">
   <label translate class="tb-title">{{ titleText }}</label>
-  <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"
+  <div class="flex flex-row justify-start items-center gap-2"
        formArrayName="keyVals"
        *ngFor="let keyValControl of keyValsFormArray().controls; let $index = index">
-    <mat-form-field fxFlex class="mat-block" subscriptSizing="{{ subscriptSizing }}">
+    <mat-form-field class="mat-block flex-1" subscriptSizing="{{ subscriptSizing }}">
       <input [formControl]="keyValControl.get('key')" matInput required
              placeholder="{{ (keyPlaceholderText ? keyPlaceholderText : 'key-val.key') | translate }}"/>
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block" subscriptSizing="{{ subscriptSizing }}">
+    <mat-form-field class="mat-block flex-1" subscriptSizing="{{ subscriptSizing }}">
       <input [formControl]="keyValControl.get('value')" matInput required
              placeholder="{{ (valuePlaceholderText ? valuePlaceholderText : 'key-val.value') | translate }}"/>
     </mat-form-field>
     <button mat-icon-button color="primary"
-            [fxShow]="!disabled"
+            [class.!hidden]="disabled"
             type="button"
             (click)="removeKeyVal($index)"
             [disabled]="isLoading$ | async"
@@ -38,12 +38,14 @@
       <mat-icon>close</mat-icon>
     </button>
   </div>
-  <span [fxShow]="!keyValsFormArray().length"
-        fxLayoutAlign="center center" [ngClass]="{'disabled': disabled}"
-        class="no-data-found" translate>{{noDataText ? noDataText : 'key-val.no-data'}}</span>
+  <span [class]="{
+          'disabled': disabled,
+          '!hidden': keyValsFormArray().length
+        }"
+        class="no-data-found flex justify-center items-center" translate>{{noDataText ? noDataText : 'key-val.no-data'}}</span>
   <div style="margin-top: 8px;">
     <button mat-button mat-raised-button color="primary"
-            [fxShow]="!disabled"
+            [class.!hidden]="disabled"
             [disabled]="isLoading$ | async"
             (click)="addKeyVal()"
             type="button"
diff --git a/ui-ngx/src/app/shared/components/logo.component.html b/ui-ngx/src/app/shared/components/logo.component.html
index a6fd077636..f547f9b44f 100644
--- a/ui-ngx/src/app/shared/components/logo.component.html
+++ b/ui-ngx/src/app/shared/components/logo.component.html
@@ -15,5 +15,5 @@
     limitations under the License.
 
 -->
-<img (click)="gotoThingsboard()" fxFlex [src]="logo"
-         aria-label="logo" class="tb-logo-title"/>
+<img (click)="gotoThingsboard()" [src]="logo"
+         aria-label="logo" class="tb-logo-title flex-1"/>
diff --git a/ui-ngx/src/app/shared/components/markdown-editor.component.html b/ui-ngx/src/app/shared/components/markdown-editor.component.html
index 1cc1a46731..a52a8ef749 100644
--- a/ui-ngx/src/app/shared/components/markdown-editor.component.html
+++ b/ui-ngx/src/app/shared/components/markdown-editor.component.html
@@ -15,15 +15,15 @@
     limitations under the License.
 
 -->
-<div class="markdown-content" [ngClass]="{'tb-edit-mode': !readonly}"
+<div class="markdown-content" [class.tb-edit-mode]="!readonly"
      tb-fullscreen [fullscreen]="fullscreen" (fullscreenChanged)="onFullscreen()">
-  <div fxLayout="row" fxLayoutAlign="start center" style="min-height: 40px;" class="markdown-editor-toolbar">
-    <label class="tb-title no-padding" [ngClass]="{'tb-error': !disabled && required && !markdownValue, 'tb-required': !disabled && required}">{{ label }}</label>
-    <span fxFlex></span>
-    <button [fxShow]="!editorMode"
+  <div style="min-height: 40px;" class="markdown-editor-toolbar flex flex-row justify-start items-center">
+    <label class="tb-title no-padding" [class]="{'tb-error': !disabled && required && !markdownValue, 'tb-required': !disabled && required}">{{ label }}</label>
+    <span class="flex-1"></span>
+    <button [class.!hidden]="editorMode"
             type="button"
             mat-button (click)="toggleEditMode()">{{ 'markdown.edit' | translate }}</button>
-    <button [fxShow]="editorMode"
+    <button [class.!hidden]="!editorMode"
             type="button"
             mat-button (click)="toggleEditMode()">{{ 'markdown.preview' | translate }}</button>
     <div *ngIf = "helpId" [tb-help-popup]="helpId"></div>
@@ -38,9 +38,9 @@
       </div>
     </fieldset>
   </div>
-  <div [fxShow]="!readonly && !disabled" class="markdown-content-editor">
-    <div [fxShow]="editorMode" #markdownEditor class="tb-markdown-editor"></div>
-    <div [fxShow]="!editorMode" class="tb-markdown-view-container">
+  <div [class.!hidden]="readonly || disabled" class="markdown-content-editor">
+    <div [class.!hidden]="!editorMode" #markdownEditor class="tb-markdown-editor"></div>
+    <div [class.!hidden]="editorMode" class="tb-markdown-view-container">
       <tb-markdown [data]="renderValue" lineNumbers fallbackToPlainMarkdown></tb-markdown>
     </div>
   </div>
diff --git a/ui-ngx/src/app/shared/components/markdown.component.html b/ui-ngx/src/app/shared/components/markdown.component.html
index 72ae432335..2f791f495b 100644
--- a/ui-ngx/src/app/shared/components/markdown.component.html
+++ b/ui-ngx/src/app/shared/components/markdown.component.html
@@ -22,5 +22,5 @@
                                                       background: #efefef;">
   {{error}}
 </div>
-<div #fallbackElement [fxShow]="usePlainMarkdown || (error && fallbackToPlainMarkdown)" class="tb-markdown-view" [ngClass]="markdownClass" [ngStyle]="style">
+<div #fallbackElement [class.!hidden]="!usePlainMarkdown && !(error && fallbackToPlainMarkdown)" class="tb-markdown-view" [class]="markdownClass" [style]="style">
 </div>
diff --git a/ui-ngx/src/app/shared/components/material-icon-select.component.html b/ui-ngx/src/app/shared/components/material-icon-select.component.html
index 1f5ace3cac..6f3920c14c 100644
--- a/ui-ngx/src/app/shared/components/material-icon-select.component.html
+++ b/ui-ngx/src/app/shared/components/material-icon-select.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<div *ngIf="!asBoxInput; else boxInput"  fxLayout="row" [formGroup]="materialIconFormGroup">
-  <tb-icon class="icon-value" [ngStyle]="color ? { color: color } : {}" (click)="openIconDialog()">{{materialIconFormGroup.get('icon').value}}</tb-icon>
-  <mat-form-field fxFlex>
+<div *ngIf="!asBoxInput; else boxInput"  class="flex flex-row" [formGroup]="materialIconFormGroup">
+  <tb-icon class="icon-value" [style]="color ? { color: color } : {}" (click)="openIconDialog()">{{materialIconFormGroup.get('icon').value}}</tb-icon>
+  <mat-form-field class="flex-1">
     <mat-label>{{ label }}</mat-label>
     <input [required]="required" matInput formControlName="icon" (mousedown)="openIconDialog()">
     <button *ngIf="iconClearButton"
diff --git a/ui-ngx/src/app/shared/components/material-icons.component.html b/ui-ngx/src/app/shared/components/material-icons.component.html
index b732e87a32..98a0268a99 100644
--- a/ui-ngx/src/app/shared/components/material-icons.component.html
+++ b/ui-ngx/src/app/shared/components/material-icons.component.html
@@ -27,8 +27,10 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-form-field>
-  <cdk-virtual-scroll-viewport [fxShow]="!notFound" #iconsPanel
-                               [itemSize]="iconsRowHeight" class="tb-material-icons-viewport" [ngStyle]="{width: iconsPanelWidth, height: iconsPanelHeight}">
+  <cdk-virtual-scroll-viewport [class.!hidden]="notFound" #iconsPanel
+                               [itemSize]="iconsRowHeight" class="tb-material-icons-viewport"
+                               [style.width]="iconsPanelWidth"
+                               [style.height]="iconsPanelHeight">
     <div *cdkVirtualFor="let iconRow of iconRows$ | async" class="tb-material-icons-row">
       <ng-container *ngFor="let icon of iconRow">
         <button *ngIf="icon.name === selectedIcon"
@@ -54,7 +56,7 @@
     </div>
   </cdk-virtual-scroll-viewport>
   <ng-container *ngIf="notFound">
-    <div class="tb-no-data-available" [ngStyle]="{width: iconsPanelWidth}">
+    <div class="tb-no-data-available" [style.width]="iconsPanelWidth">
       <div class="tb-no-data-bg"></div>
       <div class="tb-no-data-text">{{ 'icon.no-icons-found' | translate:{iconSearch: searchIconControl.value} }}</div>
     </div>
@@ -68,7 +70,7 @@
             [disabled]="!selectedIcon">
       {{ 'action.clear' | translate }}
     </button>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button *ngIf="!showAllSubject.value" class="tb-material-icons-show-more" mat-button color="primary" (click)="showAllSubject.next(true)">
       {{ 'action.show-more' | translate }}
     </button>
diff --git a/ui-ngx/src/app/shared/components/multiple-image-input.component.html b/ui-ngx/src/app/shared/components/multiple-image-input.component.html
index d76e02f935..635b27aa5c 100644
--- a/ui-ngx/src/app/shared/components/multiple-image-input.component.html
+++ b/ui-ngx/src/app/shared/components/multiple-image-input.component.html
@@ -16,13 +16,13 @@
 
 -->
 <div class="tb-container">
-  <label class="tb-title" *ngIf="label" [ngClass]="{'tb-error': !disabled && (required && !safeImageUrls.length), 'tb-required': !disabled && required}">{{label}}</label>
+  <label class="tb-title" *ngIf="label" [class]="{'tb-error': !disabled && (required && !safeImageUrls.length), 'tb-required': !disabled && required}">{{label}}</label>
   <ng-container #flow="flow"
                 [flowConfig]="{allowDuplicateUploads: true}">
     <div class="tb-image-select-container" #flowDrop="flowDrop" flowDrop [flow]="flow.flowJs">
-      <div class="images-container" dndDropzone [dndHorizontal]="true" dndEffectAllowed="move"
+      <div class="images-container flex flex-row gap-2" dndDropzone [dndHorizontal]="true" dndEffectAllowed="move"
            [dndDisableIf]="disabled" (dndDrop)="imageDrop($event)"
-           fxLayout="row" fxLayoutGap="8px" [ngClass]="{'no-images': !safeImageUrls.length}">
+           [class.no-images]="!safeImageUrls.length">
         <div dndPlaceholderRef class="image-card image-dnd-placeholder"></div>
         <div *ngFor="let safeImageUrl of safeImageUrls; let $index = index;"
              (dndStart)="imageDragStart($index)"
@@ -30,10 +30,10 @@
              [dndDraggable]="safeImageUrl"
              [dndDisableIf]="disabled"
              dndEffectAllowed="move"
-             [ngClass]="{'image-dragging': dragIndex === $index}"
-             class="image-card" fxLayout="column">
+             [class.image-dragging]="dragIndex === $index"
+             class="image-card flex flex-col">
           <span class="image-title">{{ 'image-input.images' | translate }} [{{ $index }}]</span>
-          <div class="image-content-container" fxLayout="row">
+          <div class="image-content-container flex flex-row">
             <div dndHandle *ngIf="!disabled" class="tb-image-action-container tb-drag-handle">
               <mat-icon color="primary">drag_indicator</mat-icon>
             </div>
diff --git a/ui-ngx/src/app/shared/components/notification/notification.component.html b/ui-ngx/src/app/shared/components/notification/notification.component.html
index 73e549a686..52c39d115f 100644
--- a/ui-ngx/src/app/shared/components/notification/notification.component.html
+++ b/ui-ngx/src/app/shared/components/notification/notification.component.html
@@ -15,19 +15,19 @@
     limitations under the License.
 
 -->
-<section fxLayout="row" fxLayoutAlign="space-between start" class="notification"
-         [ngStyle]="{borderColor: notificationColor(), backgroundColor: notificationBackgroundColor()}">
+<section class="notification flex flex-row justify-between items-start"
+         [style]="{borderColor: notificationColor(), backgroundColor: notificationBackgroundColor()}">
   <div *ngIf="showIcon; else defaultIcon">
-    <tb-icon class="icon" [ngStyle]="{color: notification.additionalConfig.icon.color}">
+    <tb-icon class="icon" [style.color]="notification.additionalConfig.icon.color">
       {{ notification.additionalConfig.icon.icon }}
     </tb-icon>
   </div>
   <ng-template #defaultIcon>
-    <tb-icon class="icon" *ngIf="notificationTypeIcons.get(notification.type)" [ngStyle]="notificationIconColor()">
+    <tb-icon class="icon" *ngIf="notificationTypeIcons.get(notification.type)" [style]="notificationIconColor()">
       {{ notificationTypeIcons.get(notification.type) }}
     </tb-icon>
   </ng-template>
-  <div class="content" fxFlex>
+  <div class="content flex-1">
     <div class="title" [innerHTML]="(title | safe: 'html' )"></div>
     <div class="message" [innerHTML]="(message  | safe: 'html' )"></div>
     <button *ngIf="showButton" mat-stroked-button class="button" color="primary"
@@ -35,15 +35,15 @@
       {{ buttonLabel }}
     </button>
   </div>
-  <div class="description" fxLayout="column" fxLayoutAlign="start end">
+  <div class="description flex flex-col justify-start items-end">
     <span class="time">{{ notification.createdTime ?? currentDate | dateAgo }}</span>
     <button mat-icon-button (click)="markRead($event)" *ngIf="!hideMarkAsReadButton"
             matTooltip="{{ 'notification.mark-as-read' | translate }}" matTooltipPosition="above">
       <mat-icon>check_circle_outline</mat-icon>
     </button>
     <div class="alarm-severity" *ngIf="notification.type === notificationType.ALARM && !notification.info.cleared"
-         [ngStyle]="{backgroundColor: alarmColorSeverity(0.06)}">
-      <span [ngStyle]="notificationIconColor()" class="severity">
+         [style.background-color]="alarmColorSeverity(0.06)">
+      <span [style]="notificationIconColor()" class="severity">
         {{alarmSeverityTranslations.get(notification.info.alarmSeverity) | translate}}
       </span>
     </div>
diff --git a/ui-ngx/src/app/shared/components/ota-package/ota-package-autocomplete.component.html b/ui-ngx/src/app/shared/components/ota-package/ota-package-autocomplete.component.html
index b85a9074c4..1dd065c94d 100644
--- a/ui-ngx/src/app/shared/components/ota-package/ota-package-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/ota-package/ota-package-autocomplete.component.html
@@ -24,7 +24,7 @@
          [required]="required"
          [matAutocomplete]="packageAutocomplete"
          [matAutocompleteDisabled]="disabled"
-         [fxShow]="!showDetailsPageLink || !usePackageLink || !disabled || !otaPackageFormGroup.get('packageId').value">
+         [class.!hidden]="showDetailsPageLink && usePackageLink && disabled && otaPackageFormGroup.get('packageId').value">
   <a *ngIf="showDetailsPageLink && usePackageLink && otaPackageFormGroup.get('packageId').value && disabled"
      aria-label="Open ota package" [routerLink]=packageURL>
     {{ displayPackageFn(otaPackageFormGroup.get('packageId').value) }}
diff --git a/ui-ngx/src/app/shared/components/protobuf-content.component.html b/ui-ngx/src/app/shared/components/protobuf-content.component.html
index e4ef59437d..1a60aea94d 100644
--- a/ui-ngx/src/app/shared/components/protobuf-content.component.html
+++ b/ui-ngx/src/app/shared/components/protobuf-content.component.html
@@ -15,12 +15,12 @@
     limitations under the License.
 
 -->
-<div style="background: #fff;" [ngClass]="{'fill-height': fillHeight}"
+<div class="flex flex-col" style="background: #fff;" [class.fill-height]="fillHeight"
      tb-fullscreen
-     [fullscreen]="fullscreen" (fullscreenChanged)="onFullscreen()" fxLayout="column">
-  <div fxLayout="row" fxLayoutAlign="start center" style="height: 40px;" class="tb-protobuf-content-toolbar">
+     [fullscreen]="fullscreen" (fullscreenChanged)="onFullscreen()">
+  <div style="height: 40px;" class="tb-protobuf-content-toolbar flex flex-row justify-start items-center">
     <label class="tb-title no-padding">{{ label }}</label>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button type="button"
             mat-button *ngIf="!readonly && !disabled" class="tidy" (click)="beautifyProtobuf()">
       {{'js-func.tidy' | translate }}
@@ -37,7 +37,7 @@
     </fieldset>
   </div>
   <div id="tb-protobuf-panel" tb-toast toastTarget="{{toastTargetId}}"
-       class="tb-protobuf-content-panel" fxLayout="column">
-    <div #protobufEditor id="tb-protobuf-input" [ngStyle]="editorStyle" [ngClass]="{'fill-height': fillHeight}"></div>
+       class="tb-protobuf-content-panel flex flex-col">
+    <div #protobufEditor id="tb-protobuf-input" [style]="editorStyle" [class.fill-height]="fillHeight"></div>
   </div>
 </div>
diff --git a/ui-ngx/src/app/shared/components/script-lang.component.html b/ui-ngx/src/app/shared/components/script-lang.component.html
index 2afa16e743..71625b698d 100644
--- a/ui-ngx/src/app/shared/components/script-lang.component.html
+++ b/ui-ngx/src/app/shared/components/script-lang.component.html
@@ -15,12 +15,12 @@
     limitations under the License.
 
 -->
-<div [formGroup]="scriptLangFormGroup" fxLayout="row" fxLayoutAlign="center">
+<div [formGroup]="scriptLangFormGroup" class="flex flex-row justify-center items-stretch">
   <mat-button-toggle-group class="tb-script-lang-toggle-group"
                            formControlName="scriptLang"
                            aria-label="Script language">
-    <mat-button-toggle fxFlex value="{{ scriptLanguage.TBEL }}">{{ 'rulenode.script-lang-tbel' | translate }}</mat-button-toggle>
-    <mat-button-toggle fxFlex value="{{ scriptLanguage.JS }}">
+    <mat-button-toggle class="flex-1" value="{{ scriptLanguage.TBEL }}">{{ 'rulenode.script-lang-tbel' | translate }}</mat-button-toggle>
+    <mat-button-toggle class="flex-1" value="{{ scriptLanguage.JS }}">
       {{ 'rulenode.script-lang-java-script' | translate }}
     </mat-button-toggle>
   </mat-button-toggle-group>
diff --git a/ui-ngx/src/app/shared/components/snack-bar-component.html b/ui-ngx/src/app/shared/components/snack-bar-component.html
index ca70f6b476..4181e7c087 100644
--- a/ui-ngx/src/app/shared/components/snack-bar-component.html
+++ b/ui-ngx/src/app/shared/components/snack-bar-component.html
@@ -15,28 +15,25 @@
     limitations under the License.
 
 -->
-<div fxLayout="row" fxLayoutAlign="start center"
+<div class="flex flex-row justify-start items-center"
      [@showHideAnimation]="{value: animationState, params: animationParams}"
      (@showHideAnimation.done)="onHideFinished($event)"
-     [ngClass]="{
-        'tb-toast': !notification.modern,
-        'tb-modern-toast': notification.modern,
-        'error-toast': notification.type === 'error',
-        'warn-toast': notification.type === 'warn',
-        'success-toast': notification.type === 'success',
-        'info-toast': notification.type === 'info'
-     }">
+     [class.tb-toast]="!notification.modern"
+     [class.tb-modern-toast]="notification.modern"
+     [class.error-toast]="notification.type === 'error'"
+     [class.warn-toast]="notification.type === 'warn'"
+     [class.success-toast]="notification.type === 'success'"
+     [class.info-toast]="notification.type === 'info'">
   <ng-container *ngIf="!notification.modern; else modern">
     <div class="toast-text" [innerHTML]="notification.message | safe: 'html'"></div>
     <button #actionButton type="button" mat-button (click)="action($event)">{{ 'action.close' | translate }}</button>
   </ng-container>
   <ng-template #modern>
-    <div class="tb-modern-toast-panel" [ngClass]="{
-        'error-toast': notification.type === 'error',
-        'warn-toast': notification.type === 'warn',
-        'success-toast': notification.type === 'success',
-        'info-toast': notification.type === 'info'
-     }">
+    <div class="tb-modern-toast-panel"
+         [class.error-toast]="notification.type === 'error'"
+         [class.warn-toast]="notification.type === 'warn'"
+         [class.success-toast]="notification.type === 'success'"
+         [class.info-toast]="notification.type === 'info'">
       <div class="toast-text" [innerHTML]="notification.message | safe: 'html'"></div>
       <button #actionButton class="tb-mat-20" mat-icon-button (click)="action($event)"><mat-icon>close</mat-icon></button>
     </div>
diff --git a/ui-ngx/src/app/shared/components/socialshare-panel.component.html b/ui-ngx/src/app/shared/components/socialshare-panel.component.html
index 0c88596ee0..da9512ec7d 100644
--- a/ui-ngx/src/app/shared/components/socialshare-panel.component.html
+++ b/ui-ngx/src/app/shared/components/socialshare-panel.component.html
@@ -15,7 +15,8 @@
     limitations under the License.
 
 -->
-<div fxLayout="row" fxLayoutGap="12px" [fxHide]="isShareLinkLocal()">
+<div class="flex flex-row gap-3"
+     [class.!hidden]="isShareLinkLocal()">
   <button mat-mini-fab color="primary"
           shareButton="facebook"
           title="{{ shareTitle }}"
diff --git a/ui-ngx/src/app/shared/components/string-autocomplete.component.html b/ui-ngx/src/app/shared/components/string-autocomplete.component.html
index afd7518d1e..adc571c89a 100644
--- a/ui-ngx/src/app/shared/components/string-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/string-autocomplete.component.html
@@ -45,7 +45,7 @@
     class="tb-autocomplete tb-options-input-autocomplete"
     panelWidth="fit-content">
     <mat-option *ngFor="let option of filteredOptions$ | async" [value]="option">
-      <span class="tb-option-name" fxFlex [innerHTML]="option | highlight:searchText:true:'ig'"></span>
+      <span class="tb-option-name flex-1" [innerHTML]="option | highlight:searchText:true:'ig'"></span>
     </mat-option>
   </mat-autocomplete>
 </mat-form-field>
diff --git a/ui-ngx/src/app/shared/components/string-items-list.component.html b/ui-ngx/src/app/shared/components/string-items-list.component.html
index 1b06cacf63..375f22e02f 100644
--- a/ui-ngx/src/app/shared/components/string-items-list.component.html
+++ b/ui-ngx/src/app/shared/components/string-items-list.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="stringItemsForm" fxFlex class="mat-block"
+<mat-form-field [formGroup]="stringItemsForm" class="mat-block flex-1"
                 [floatLabel]="floatLabel"
                 [appearance]="appearance"
                 [subscriptSizing]="subscriptSizing">
diff --git a/ui-ngx/src/app/shared/components/svg-xml.component.html b/ui-ngx/src/app/shared/components/svg-xml.component.html
index 9b6101dce7..f0c55b6faa 100644
--- a/ui-ngx/src/app/shared/components/svg-xml.component.html
+++ b/ui-ngx/src/app/shared/components/svg-xml.component.html
@@ -15,12 +15,12 @@
     limitations under the License.
 
 -->
-<div class="tb-svg-xml" style="background: #fff;" [ngClass]="{'tb-disabled': disabled, 'fill-height': fillHeight, 'no-label': noLabel}"
+<div class="tb-svg-xml flex flex-col" style="background: #fff;" [class]="{'tb-disabled': disabled, 'fill-height': fillHeight, 'no-label': noLabel}"
      tb-fullscreen
-     [fullscreen]="fullscreen" fxLayout="column">
-  <div fxLayout="row" fxLayoutAlign="start center" style="min-height: 40px;" class="tb-svg-xml-toolbar">
-    <label *ngIf="!noLabel" class="tb-title no-padding" [ngClass]="{'tb-error': !disabled && (hasErrors || required && !modelValue), 'tb-required': !disabled && required}">{{ label }}</label>
-    <span fxFlex></span>
+     [fullscreen]="fullscreen">
+  <div style="min-height: 40px;" class="tb-svg-xml-toolbar flex flex-row justify-start items-center">
+    <label *ngIf="!noLabel" class="tb-title no-padding" [class]="{'tb-error': !disabled && (hasErrors || required && !modelValue), 'tb-required': !disabled && required}">{{ label }}</label>
+    <span class="flex-1"></span>
     <fieldset style="width: initial">
       <div matTooltip="{{(fullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
            matTooltipPosition="above"
@@ -32,7 +32,7 @@
       </div>
     </fieldset>
   </div>
-  <div id="tb-svg-xml-panel" class="tb-svg-xml-content-panel" fxLayout="column">
-    <div #svgXmlEditor id="tb-svg-xml-input" [ngStyle]="fillHeight ? {} : {minHeight: minHeight}" [ngClass]="{'fill-height': fillHeight}"></div>
+  <div id="tb-svg-xml-panel" class="tb-svg-xml-content-panel flex flex-col">
+    <div #svgXmlEditor id="tb-svg-xml-input" [style]="fillHeight ? {} : {minHeight: minHeight}" [class.fill-height]="fillHeight"></div>
   </div>
 </div>
diff --git a/ui-ngx/src/app/shared/components/time/datapoints-limit.component.html b/ui-ngx/src/app/shared/components/time/datapoints-limit.component.html
index 8e2a5ac459..a0ae5dd5af 100644
--- a/ui-ngx/src/app/shared/components/time/datapoints-limit.component.html
+++ b/ui-ngx/src/app/shared/components/time/datapoints-limit.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div [formGroup]="datapointsLimitFormGroup" class="limit-slider-container" fxLayout="row" fxLayoutAlign="start center">
-  <mat-slider fxFlex
+<div [formGroup]="datapointsLimitFormGroup" class="limit-slider-container flex flex-row justify-start items-center">
+  <mat-slider class="flex-1"
               min="{{minDatapointsLimit()}}"
               max="{{maxDatapointsLimit()}}">
     <input matSliderThumb formControlName="limit" [value]="datapointsLimitFormGroup.get('limit').value"/>
diff --git a/ui-ngx/src/app/shared/components/time/datetime.component.html b/ui-ngx/src/app/shared/components/time/datetime.component.html
index 5f59cefd53..f2bb042775 100644
--- a/ui-ngx/src/app/shared/components/time/datetime.component.html
+++ b/ui-ngx/src/app/shared/components/time/datetime.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="16px">
+<section class="flex flex-row justify-start items-start gap-4">
   <mat-form-field>
     <mat-label *ngIf="showLabel">{{ dateText | translate }}</mat-label>
     <mat-datetimepicker-toggle [for]="datePicker" matPrefix></mat-datetimepicker-toggle>
diff --git a/ui-ngx/src/app/shared/components/time/quick-time-interval.component.html b/ui-ngx/src/app/shared/components/time/quick-time-interval.component.html
index 2a68d672c9..5ffc4679e4 100644
--- a/ui-ngx/src/app/shared/components/time/quick-time-interval.component.html
+++ b/ui-ngx/src/app/shared/components/time/quick-time-interval.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<section class="interval-section" fxLayout="row" fxFlex>
-  <mat-form-field fxFlex [subscriptSizing]="subscriptSizing" [appearance]="appearance">
+<section class="interval-section flex-1 flex flex-row">
+  <mat-form-field class="flex-1" [subscriptSizing]="subscriptSizing" [appearance]="appearance">
     <mat-label *ngIf="displayLabel" translate>timewindow.interval</mat-label>
     <mat-select [disabled]="disabled" [(ngModel)]="modelValue" (ngModelChange)="onIntervalChange()">
       <mat-option *ngFor="let interval of intervals" [value]="interval">
diff --git a/ui-ngx/src/app/shared/components/time/timeinterval.component.html b/ui-ngx/src/app/shared/components/time/timeinterval.component.html
index ea9fd8adad..57e6ca0808 100644
--- a/ui-ngx/src/app/shared/components/time/timeinterval.component.html
+++ b/ui-ngx/src/app/shared/components/time/timeinterval.component.html
@@ -18,7 +18,7 @@
 <section class="tb-form-panel no-border no-padding" [formGroup]="timeintervalFormGroup">
   <section class="tb-form-row column-xs no-border no-padding tb-standard-fields">
     <ng-content></ng-content>
-    <mat-form-field fxFlex class="flex" [subscriptSizing]="subscriptSizing" [appearance]="appearance">
+    <mat-form-field class="flex flex-1" [subscriptSizing]="subscriptSizing" [appearance]="appearance">
       <mat-label *ngIf="predefinedName" translate>{{ predefinedName }}</mat-label>
       <mat-select formControlName="interval">
         <mat-option *ngFor="let interval of intervals" [value]="interval.value">
@@ -29,7 +29,7 @@
   </section>
   <section class="tb-form-row column-xs no-border no-padding tb-standard-fields advanced-input"
            formGroupName="customInterval"
-           [fxShow]="advanced">
+           [class.!hidden]="!advanced">
     <div class="tb-flex">
       <mat-form-field class="number-input flex" [subscriptSizing]="subscriptSizing" [appearance]="appearance">
         <mat-label translate>timeinterval.days</mat-label>
diff --git a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html
index 383bf7f7b0..e987da97ee 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="timewindowForm" mat-dialog-content  class="tb-timewindow-form">
   <mat-toolbar color="primary">
     <h2>{{ 'timewindow.timewindow-settings' | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <!--  <div tb-help="#"></div>-->
     <button mat-icon-button
             (click)="cancel()"
@@ -195,7 +195,7 @@
         </div>
       </section>
 
-      <section class="tb-form-panel" [fxShow]="timewindowForm.get('aggregation.type').value !== aggregationTypes.NONE">
+      <section class="tb-form-panel" [class.!hidden]="timewindowForm.get('aggregation.type').value === aggregationTypes.NONE">
         <div class="tb-form-panel-title">{{ 'aggregation.group-interval' | translate }}</div>
 
         <ng-container *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.REALTIME">
diff --git a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html
index a3409e0ef3..60512f1f6b 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html
+++ b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html
@@ -31,7 +31,8 @@
     <ng-container *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.REALTIME">
       <section class="tb-form-panel stroked" *ngIf="realtimeIntervalSelectionAvailable; else timezoneSelectionPanel">
         <div class="tb-flex space-between"
-             [ngClass]="{'align-end': realtimeTypeSelectionAvailable, 'align-center': !realtimeTypeSelectionAvailable }">
+             [class.align-end]="realtimeTypeSelectionAvailable"
+             [class.align-center]="!realtimeTypeSelectionAvailable">
           <div class="tb-flex-xs column">
             <div class="tb-form-panel-title">{{ 'timewindow.timewindow' | translate }}</div>
             <ng-container formGroupName="realtime" *ngIf="realtimeTypeSelectionAvailable">
@@ -72,7 +73,8 @@
     <ng-container *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY">
       <section class="tb-form-panel stroked" *ngIf="historyIntervalSelectionAvailable; else timezoneSelectionPanel">
         <div class="tb-flex space-between"
-             [ngClass]="{'align-end': historyTypeSelectionAvailable, 'align-center': !historyTypeSelectionAvailable }">
+             [class.align-end]="historyTypeSelectionAvailable"
+             [class.align-center]="!historyTypeSelectionAvailable">
           <div class="tb-flex-xs column">
             <div class="tb-form-panel-title">{{ 'timewindow.timewindow' | translate }}</div>
             <ng-container formGroupName="history" *ngIf="historyTypeSelectionAvailable">
@@ -143,8 +145,8 @@
         </section>
       </ng-container>
 
-      <section class="tb-form-row column-xs same-padding" [fxShow]="(isEdit || !timewindow.hideAggInterval)
-       && timewindowForm.get('aggregation.type').value !== aggregationTypes.NONE">
+      <section class="tb-form-row column-xs same-padding" [class.!hidden]="!(isEdit || !timewindow.hideAggInterval)
+                 || timewindowForm.get('aggregation.type').value === aggregationTypes.NONE">
         <ng-container formGroupName="realtime" *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.REALTIME">
           <tb-timeinterval
             formControlName="interval"
diff --git a/ui-ngx/src/app/shared/components/time/timewindow.component.html b/ui-ngx/src/app/shared/components/time/timewindow.component.html
index 9896d65bc0..24cc238e1d 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow.component.html
+++ b/ui-ngx/src/app/shared/components/time/timewindow.component.html
@@ -49,8 +49,8 @@
          (click)="toggleTimewindow($event)">
   <tb-icon *ngIf="computedTimewindowStyle.showIcon && computedTimewindowStyle.iconPosition === 'left'"
            [style]="timewindowIconStyle">{{ computedTimewindowStyle.icon }}</tb-icon>
-  <div class="tb-timewindow-label" [fxHide]="hideLabel">
-    {{innerValue?.displayValue}} <span [fxShow]="innerValue?.displayTimezoneAbbr !== ''">| <span class="timezone-abbr">{{innerValue?.displayTimezoneAbbr}}</span></span>
+  <div class="tb-timewindow-label" [class.!hidden]="hideLabel">
+    {{innerValue?.displayValue}} <span [class.!hidden]="!(innerValue?.displayTimezoneAbbr !== '')">| <span class="timezone-abbr">{{innerValue?.displayTimezoneAbbr}}</span></span>
   </div>
   <tb-icon *ngIf="computedTimewindowStyle.showIcon && computedTimewindowStyle.iconPosition === 'right'"
            [style]="timewindowIconStyle">{{ computedTimewindowStyle.icon }}</tb-icon>
diff --git a/ui-ngx/src/app/shared/components/time/timezone-select.component.html b/ui-ngx/src/app/shared/components/time/timezone-select.component.html
index 8def5a4ee8..d824cdd24f 100644
--- a/ui-ngx/src/app/shared/components/time/timezone-select.component.html
+++ b/ui-ngx/src/app/shared/components/time/timezone-select.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="selectTimezoneFormGroup" fxFlex class="flex mat-block"
+<mat-form-field [formGroup]="selectTimezoneFormGroup" class="flex flex-1 mat-block"
                 [subscriptSizing]="subscriptSizing" [appearance]="appearance">
   <mat-label *ngIf="displayLabel" translate>timezone.timezone</mat-label>
   <input matInput type="text" placeholder="{{ 'timezone.select-timezone' | translate }}"
diff --git a/ui-ngx/src/app/shared/components/time/timezone.component.html b/ui-ngx/src/app/shared/components/time/timezone.component.html
index a2a5b84899..2ad8a04249 100644
--- a/ui-ngx/src/app/shared/components/time/timezone.component.html
+++ b/ui-ngx/src/app/shared/components/time/timezone.component.html
@@ -48,7 +48,7 @@
          [matTooltip]="tooltipValue()"
          [matTooltipPosition]="tooltipPosition"
          (click)="toggleTimezone($event)">
-  <div class="tb-timezone-label" [fxHide]="hideLabel">
+  <div class="tb-timezone-label" [class.!hidden]="hideLabel">
     {{displayValue()}}
   </div>
 </section>
diff --git a/ui-ngx/src/app/shared/components/unit-input.component.html b/ui-ngx/src/app/shared/components/unit-input.component.html
index 1ab4c1d019..7ad14d608b 100644
--- a/ui-ngx/src/app/shared/components/unit-input.component.html
+++ b/ui-ngx/src/app/shared/components/unit-input.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field fxFlex appearance="outline" class="tb-inline-field tb-suffix-show-on-hover" subscriptSizing="dynamic" style="width: 100%;">
+<mat-form-field appearance="outline" class="tb-inline-field tb-suffix-show-on-hover flex-1" subscriptSizing="dynamic" style="width: 100%;">
   <input matInput #unitInput [formControl]="unitsFormControl"
          placeholder="{{ 'widget-config.set' | translate }}"
          (focusin)="onFocus()"
@@ -40,7 +40,7 @@
     panelWidth="fit-content"
     [displayWith]="displayUnitFn">
     <mat-option *ngFor="let unit of filteredUnits | async" [value]="unit">
-      <span class="tb-unit-name" fxFlex [innerHTML]="unit.name | highlight:searchText:true:'ig'"></span>
+      <span class="tb-unit-name flex-1" [innerHTML]="unit.name | highlight:searchText:true:'ig'"></span>
       <span class="tb-unit-symbol" [innerHTML]="unit.symbol | highlight:searchText:true:'ig'"></span>
     </mat-option>
   </mat-autocomplete>
diff --git a/ui-ngx/src/app/shared/components/user-menu.component.html b/ui-ngx/src/app/shared/components/user-menu.component.html
index c8b457ccbe..c57bbbcc1a 100644
--- a/ui-ngx/src/app/shared/components/user-menu.component.html
+++ b/ui-ngx/src/app/shared/components/user-menu.component.html
@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<section fxLayout="row">
-  <div fxHide.lt-lg *ngIf="displayUserInfo" class="tb-user-info" fxLayout="row">
+<section class="flex flex-row">
+  <div *ngIf="displayUserInfo" class="tb-user-info flex flex-row lt-lg:!hidden">
     <mat-icon class="material-icons tb-mini-avatar">account_circle</mat-icon>
-    <div fxLayout="column" fxLayoutAlign="center">
+    <div class="flex flex-col justify-center items-stretch">
       <span *ngIf="userDisplayName$ | async; let userDisplayName" class="tb-user-display-name">{{ userDisplayName }}</span>
       <span *ngIf="authorityName$ | async; let authorityName" class="tb-user-authority">{{ authorityName | translate }}</span>
     </div>
diff --git a/ui-ngx/src/app/shared/components/value-input.component.html b/ui-ngx/src/app/shared/components/value-input.component.html
index e3b3e12b83..cdcaf837c2 100644
--- a/ui-ngx/src/app/shared/components/value-input.component.html
+++ b/ui-ngx/src/app/shared/components/value-input.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form #inputForm="ngForm">
-  <section [fxLayout]="computedLayout" fxLayoutGap="8px">
+  <section class="flex gap-2" [class]="computedLayout === 'row' ? 'flex-row' : 'flex-col'">
     <mat-form-field *ngIf="showValueType" appearance="outline" subscriptSizing="dynamic" class="tb-value-type tb-inline-field" [class]="computedLayout">
       <mat-select [disabled]="disabled" name="valueType" [(ngModel)]="valueType" (ngModelChange)="onValueTypeChanged()">
         <mat-select-trigger>
@@ -31,7 +31,7 @@
         </mat-option>
       </mat-select>
     </mat-form-field>
-    <mat-form-field *ngIf="valueType === valueTypeEnum.STRING" fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute">
+    <mat-form-field *ngIf="valueType === valueTypeEnum.STRING" appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute flex-1">
       <input [disabled]="disabled" matInput required name="value" #value="ngModel" [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()"
              placeholder="{{ 'value.string-value' | translate }}*"/>
       <mat-icon matSuffix
@@ -43,7 +43,7 @@
         warning
       </mat-icon>
     </mat-form-field>
-    <mat-form-field *ngIf="valueType === valueTypeEnum.INTEGER" fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute number">
+    <mat-form-field *ngIf="valueType === valueTypeEnum.INTEGER" appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute number flex-1">
       <input [disabled]="disabled" matInput required name="value" type="number" step="1" pattern="^-?[0-9]+$" #value="ngModel" [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()"
              placeholder="{{ 'value.integer-value' | translate }}*"/>
       <mat-icon matSuffix
@@ -56,7 +56,7 @@
         warning
       </mat-icon>
     </mat-form-field>
-    <mat-form-field *ngIf="valueType === valueTypeEnum.DOUBLE" fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute number">
+    <mat-form-field *ngIf="valueType === valueTypeEnum.DOUBLE" appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute number flex-1">
       <input [disabled]="disabled" matInput required name="value" type="number" step="any" #value="ngModel" [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()"
              placeholder="{{ 'value.double-value' | translate }}*"/>
       <mat-icon matSuffix
@@ -68,13 +68,13 @@
         warning
       </mat-icon>
     </mat-form-field>
-    <mat-chip-listbox *ngIf="valueType === valueTypeEnum.BOOLEAN" fxFlex class="tb-boolean-input center-stretch"
+    <mat-chip-listbox *ngIf="valueType === valueTypeEnum.BOOLEAN" class="tb-boolean-input center-stretch flex-1"
                       [disabled]="disabled" name="value" #value="ngModel" [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()">
       <mat-chip-option [selectable]="!modelValue" [value]="true">{{ trueLabel }}</mat-chip-option>
       <mat-chip-option [selectable]="modelValue" [value]="false">{{ falseLabel }}</mat-chip-option>
     </mat-chip-listbox>
-    <div *ngIf="valueType === valueTypeEnum.JSON" fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute">
+    <div *ngIf="valueType === valueTypeEnum.JSON" class="flex flex-1 flex-row justify-start items-center gap-2">
+      <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute flex-1">
         <input [disabled]="disabled" matInput tb-json-to-string required name="value" #value="ngModel"
                [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()" placeholder="{{ 'value.json-value' | translate }}*"/>
         <mat-icon matSuffix
diff --git a/ui-ngx/src/app/shared/components/widgets-bundle-search.component.html b/ui-ngx/src/app/shared/components/widgets-bundle-search.component.html
index 92dbea53b8..5c9c80be7f 100644
--- a/ui-ngx/src/app/shared/components/widgets-bundle-search.component.html
+++ b/ui-ngx/src/app/shared/components/widgets-bundle-search.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="input-wrapper" [ngClass]="{'focus': focus}" fxLayoutAlign="start center" fxLayoutGap="16px">
+<div class="input-wrapper flex justify-start items-center gap-4" [class.focus]="focus">
   <mat-icon>search</mat-icon>
   <input type="text"
          [(ngModel)]="searchText"
diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss
index adcb3b96d0..c8568d91fc 100644
--- a/ui-ngx/src/styles.scss
+++ b/ui-ngx/src/styles.scss
@@ -23,6 +23,10 @@
 @import './scss/mixins';
 @import './scss/fonts';
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body, html {
   height: 100%;
   min-height: 100%;
@@ -58,6 +62,10 @@ tb-root {
  * TYPE DEFAULTS
  ***************/
 
+*, ::before, ::after {
+  border-style: none;
+}
+
 body,
 button,
 html,
@@ -70,7 +78,7 @@ th {
   font-size: 16px;
 }
 
-body {
+body, button {
   line-height: normal;
 }
 
@@ -314,40 +322,6 @@ pre.tb-highlight {
   z-index: 0;
 }
 
-mat-label {
-  &.tb-title {
-    font-size: 13px;
-    font-weight: 400;
-    color: #666;
-    pointer-events: none;
-
-    &.no-padding {
-      padding-bottom: 0;
-    }
-
-    &.tb-required::after {
-      font-size: 13px;
-      color: rgba(0, 0, 0, .54);
-      vertical-align: top;
-      content: " *";
-    }
-
-    &.tb-error {
-      color: rgb(221, 44, 0);
-
-      &.tb-required::after {
-        color: rgb(221, 44, 0);
-      }
-    }
-  }
-}
-
-mat-icon {
-  &.tb-error {
-    color: rgb(221, 44, 0);
-  }
-}
-
 .tb-error-messages {
   height: 24px; //30px
   margin-top: -6px;
@@ -518,6 +492,40 @@ mat-icon {
     letter-spacing: .01em;
   }
 
+  mat-label {
+    &.tb-title {
+      font-size: 13px;
+      font-weight: 400;
+      color: #666;
+      pointer-events: none;
+
+      &.no-padding {
+        padding-bottom: 0;
+      }
+
+      &.tb-required::after {
+        font-size: 13px;
+        color: rgba(0, 0, 0, .54);
+        vertical-align: top;
+        content: " *";
+      }
+
+      &.tb-error {
+        color: rgb(221, 44, 0);
+
+        &.tb-required::after {
+          color: rgb(221, 44, 0);
+        }
+      }
+    }
+  }
+
+  mat-icon {
+    &.tb-error {
+      color: rgb(221, 44, 0);
+    }
+  }
+
   .mat-mdc-tooltip {
     white-space: pre-line;
   }
diff --git a/ui-ngx/tailwind.config.js b/ui-ngx/tailwind.config.js
new file mode 100644
index 0000000000..be29b4ad98
--- /dev/null
+++ b/ui-ngx/tailwind.config.js
@@ -0,0 +1,67 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  important: ".tb-default",
+  content: [
+    "./src/**/*.{html,ts}",
+  ],
+  theme: {
+    screens: {
+      'xs': {
+        max: '599px'
+      },
+      'sm': {
+        min: '600px',
+        max: '959px'
+      },
+      'md': {
+        min: '960px',
+        max: '1279px'
+      },
+      'md-lg': {
+        min: '960px',
+        max: '1819px'
+      },
+      'lg': {
+        min: '1280px',
+        max: '1919px'
+      },
+      'xl': {
+        min: '1920px',
+        max: '5000px'
+      },
+      'lt-sm': {
+        max: '599px'
+      },
+      'lt-md': {
+        max: '959px'
+      },
+      'lt-lg': {
+        max: '1279px'
+      },
+      'lt-xl': {
+        max: '1919px'
+      },
+      'gt-xs': {
+        min: '600px'
+      },
+      'gt-sm': {
+        min: '960px'
+      },
+      'gt-md': {
+        min: '1280px'
+      },
+      'gt-xmd': {
+        min: '1600px'
+      },
+      'gt-lg': {
+        min: '1920px'
+      },
+      'gt-xl': {
+        min: '1920px'
+      }
+    },
+    extend: {},
+  },
+  plugins: [],
+}
+
diff --git a/ui-ngx/yarn.lock b/ui-ngx/yarn.lock
index 6115ad9fe6..d9a8a1a343 100644
--- a/ui-ngx/yarn.lock
+++ b/ui-ngx/yarn.lock
@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@alloc/quick-lru@^5.2.0":
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
+  integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
+
 "@ampproject/remapping@2.3.0", "@ampproject/remapping@^2.2.0":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4"
@@ -2094,7 +2099,7 @@
   resolved "https://registry.yarnpkg.com/@jcubic/lily/-/lily-0.3.0.tgz#00b229aab69fe094a57fd37f27d32dd4f380c1d1"
   integrity sha512-4z6p4jLGSthc8gQ7wu4nHfGYn/IgCKFr+7hjuf80VdXUs7sm029mZGGDpS8sb29PVZWUBvMMTBCVGFhH2nN4Vw==
 
-"@jridgewell/gen-mapping@^0.3.5":
+"@jridgewell/gen-mapping@^0.3.2", "@jridgewell/gen-mapping@^0.3.5":
   version "0.3.5"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz#dcce6aff74bdf6dad1a95802b69b04a2fcb1fb36"
   integrity sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==
@@ -3877,6 +3882,11 @@ ansidec@^0.3.4:
   resolved "https://registry.yarnpkg.com/ansidec/-/ansidec-0.3.4.tgz#e12d267d6b1f122d2da5b98fe0de1f98d14ac62b"
   integrity sha512-Ydgbey4zqUmmNN2i2OVeVHXig3PxHRbok2X6B2Sogmb92JzZUFfTL806dT7os6tBL1peXItfeFt76CP3zsoXUg==
 
+any-promise@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
+  integrity sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==
+
 anymatch@~3.1.2:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
@@ -3895,6 +3905,11 @@ arg@^4.1.0:
   resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089"
   integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==
 
+arg@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
+  integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
+
 argparse@^1.0.9:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -4017,7 +4032,7 @@ attr-accept@^2.2.2:
   resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.2.tgz#646613809660110749e92f2c10833b70968d929b"
   integrity sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==
 
-autoprefixer@10.4.20:
+autoprefixer@10.4.20, autoprefixer@^10.4.20:
   version "10.4.20"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.20.tgz#5caec14d43976ef42e32dcb4bd62878e96be5b3b"
   integrity sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==
@@ -4253,6 +4268,11 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
+camelcase-css@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
+  integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
+
 camelcase@^5.0.0:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
@@ -4309,7 +4329,7 @@ chevrotain@~11.0.3:
     "@chevrotain/utils" "11.0.3"
     lodash-es "4.17.21"
 
-"chokidar@>=3.0.0 <4.0.0", chokidar@^3.0.0, chokidar@^3.6.0:
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.0.0, chokidar@^3.5.3, chokidar@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
   integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
@@ -4498,6 +4518,11 @@ commander@^2.20.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
+commander@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
+  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
+
 commander@^8.3.0:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
@@ -5233,6 +5258,11 @@ detect-node@^2.0.4:
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
   integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==
 
+didyoumean@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
+  integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
+
 diff-match-patch@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/diff-match-patch/-/diff-match-patch-1.0.5.tgz#abb584d5f10cd1196dfc55aa03701592ae3f7b37"
@@ -5256,6 +5286,11 @@ directory-tree@^3.5.2:
     command-line-args "^5.2.0"
     command-line-usage "^6.1.1"
 
+dlv@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
+  integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
+
 dns-packet@^5.2.2:
   version "5.6.1"
   resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-5.6.1.tgz#ae888ad425a9d1478a0674256ab866de1012cf2f"
@@ -5905,7 +5940,7 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@3.3.2, fast-glob@^3.3.2:
+fast-glob@3.3.2, fast-glob@^3.3.0, fast-glob@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
   integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
@@ -6958,7 +6993,7 @@ jest-worker@^27.4.5:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
-jiti@^1.20.0:
+jiti@^1.20.0, jiti@^1.21.0:
   version "1.21.6"
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.6.tgz#6c7f7398dd4b3142767f9a168af2f317a428d268"
   integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==
@@ -7368,6 +7403,16 @@ lie@~3.3.0:
   dependencies:
     immediate "~3.0.5"
 
+lilconfig@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
+  integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
+
+lilconfig@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.1.2.tgz#e4a7c3cb549e3a606c8dcc32e5ae1005e62c05cb"
+  integrity sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==
+
 lines-and-columns@^1.1.6:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
@@ -7871,6 +7916,15 @@ mute-stream@^1.0.0:
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-1.0.0.tgz#e31bd9fe62f0aed23520aa4324ea6671531e013e"
   integrity sha512-avsJQhyd+680gKXyG/sQc0nXaC6rBkPOfyHYcFb9+hdkqQkR9bdnkJ0AMZhke0oesPqIO+mFFJ+IdBc7mst4IA==
 
+mz@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
+  integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
+  dependencies:
+    any-promise "^1.0.0"
+    object-assign "^4.0.1"
+    thenify-all "^1.0.0"
+
 nanoid@^3.3.7:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
@@ -8149,11 +8203,16 @@ nth-check@^2.0.1:
   dependencies:
     boolbase "^1.0.0"
 
-object-assign@^4.1.1:
+object-assign@^4.0.1, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
 
+object-hash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
+  integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
+
 object-inspect@^1.13.1:
   version "1.13.2"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.2.tgz#dea0088467fb991e67af4058147a24824a3043ff"
@@ -8553,11 +8612,21 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
+pify@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+  integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
+
 pify@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
   integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
 
+pirates@^4.0.1:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
+  integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
+
 piscina@4.6.1:
   version "4.6.1"
   resolved "https://registry.yarnpkg.com/piscina/-/piscina-4.6.1.tgz#4de673b0ff84bf641b31b07b3348669383b51c9a"
@@ -8612,6 +8681,30 @@ possible-typed-array-names@^1.0.0:
   resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
   integrity sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==
 
+postcss-import@^15.1.0:
+  version "15.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-15.1.0.tgz#41c64ed8cc0e23735a9698b3249ffdbf704adc70"
+  integrity sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==
+  dependencies:
+    postcss-value-parser "^4.0.0"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
+postcss-js@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
+  integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
+  dependencies:
+    camelcase-css "^2.0.1"
+
+postcss-load-config@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.2.tgz#7159dcf626118d33e299f485d6afe4aff7c4a3e3"
+  integrity sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==
+  dependencies:
+    lilconfig "^3.0.0"
+    yaml "^2.3.4"
+
 postcss-loader@8.1.1:
   version "8.1.1"
   resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-8.1.1.tgz#2822589e7522927344954acb55bbf26e8b195dfe"
@@ -8654,7 +8747,14 @@ postcss-modules-values@^4.0.0:
   dependencies:
     icss-utils "^5.0.0"
 
-postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
+postcss-nested@^6.0.1:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.2.0.tgz#4c2d22ab5f20b9cb61e2c5c5915950784d068131"
+  integrity sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==
+  dependencies:
+    postcss-selector-parser "^6.1.1"
+
+postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.1.1:
   version "6.1.2"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz#27ecb41fb0e3b6ba7a1ec84fff347f734c7929de"
   integrity sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==
@@ -8662,7 +8762,7 @@ postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
@@ -8676,7 +8776,7 @@ postcss@8.4.41:
     picocolors "^1.0.1"
     source-map-js "^1.2.0"
 
-postcss@^8.2.14, postcss@^8.4.23, postcss@^8.4.33, postcss@^8.4.43:
+postcss@^8.2.14, postcss@^8.4.23, postcss@^8.4.33, postcss@^8.4.43, postcss@^8.4.47:
   version "8.4.47"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.47.tgz#5bf6c9a010f3e724c503bf03ef7947dcb0fea365"
   integrity sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==
@@ -8952,6 +9052,13 @@ reactcss@^1.2.3:
   dependencies:
     lodash "^4.0.1"
 
+read-cache@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
+  integrity sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==
+  dependencies:
+    pify "^2.3.0"
+
 readable-stream@^2.0.1, readable-stream@~2.3.6:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.8.tgz#91125e8042bba1b9887f49345f6277027ce8be9b"
@@ -9095,7 +9202,7 @@ resolve-url-loader@5.0.0:
     postcss "^8.2.14"
     source-map "0.6.1"
 
-resolve@1.22.8, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.22.4:
+resolve@1.22.8, resolve@^1.1.7, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.22.2, resolve@^1.22.4:
   version "1.22.8"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -9849,6 +9956,19 @@ stylis@^4.3.1:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.4.tgz#ca5c6c4a35c4784e4e93a2a24dc4e9fa075250a4"
   integrity sha512-osIBl6BGUmSfDkyH2mB7EFvCJntXDrLhKjHTRj/rK6xLH0yuPrHULDRQzKokSOD4VoorhtKpfcfW1GAntu8now==
 
+sucrase@^3.32.0:
+  version "3.35.0"
+  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.0.tgz#57f17a3d7e19b36d8995f06679d121be914ae263"
+  integrity sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.2"
+    commander "^4.0.0"
+    glob "^10.3.10"
+    lines-and-columns "^1.1.6"
+    mz "^2.7.0"
+    pirates "^4.0.1"
+    ts-interface-checker "^0.1.9"
+
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -9903,6 +10023,34 @@ table-layout@^1.0.2:
     typical "^5.2.0"
     wordwrapjs "^4.0.0"
 
+tailwindcss@^3.4.13:
+  version "3.4.13"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.13.tgz#3d11e5510660f99df4f1bfb2d78434666cb8f831"
+  integrity sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==
+  dependencies:
+    "@alloc/quick-lru" "^5.2.0"
+    arg "^5.0.2"
+    chokidar "^3.5.3"
+    didyoumean "^1.2.2"
+    dlv "^1.1.3"
+    fast-glob "^3.3.0"
+    glob-parent "^6.0.2"
+    is-glob "^4.0.3"
+    jiti "^1.21.0"
+    lilconfig "^2.1.0"
+    micromatch "^4.0.5"
+    normalize-path "^3.0.0"
+    object-hash "^3.0.0"
+    picocolors "^1.0.0"
+    postcss "^8.4.23"
+    postcss-import "^15.1.0"
+    postcss-js "^4.0.1"
+    postcss-load-config "^4.0.1"
+    postcss-nested "^6.0.1"
+    postcss-selector-parser "^6.0.11"
+    resolve "^1.22.2"
+    sucrase "^3.32.0"
+
 tapable@^2.1.1, tapable@^2.2.0, tapable@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
@@ -9963,6 +10111,20 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
 
+thenify-all@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
+  integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==
+  dependencies:
+    thenify ">= 3.1.0 < 4"
+
+"thenify@>= 3.1.0 < 4":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.1.tgz#8932e686a4066038a016dd9e2ca46add9838a95f"
+  integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==
+  dependencies:
+    any-promise "^1.0.0"
+
 thingies@^1.20.0:
   version "1.21.0"
   resolved "https://registry.yarnpkg.com/thingies/-/thingies-1.21.0.tgz#e80fbe58fd6fdaaab8fad9b67bd0a5c943c445c1"
@@ -10047,6 +10209,11 @@ ts-dedent@^2.2.0:
   resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-2.2.0.tgz#39e4bd297cd036292ae2394eb3412be63f563bb5"
   integrity sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==
 
+ts-interface-checker@^0.1.9:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
+  integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
+
 ts-node@^10.0.0, ts-node@^10.9.2:
   version "10.9.2"
   resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-10.9.2.tgz#70f021c9e185bccdca820e26dc413805c101c71f"
@@ -10725,7 +10892,7 @@ yaml@^1.10.0:
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
-yaml@^2.2.2:
+yaml@^2.2.2, yaml@^2.3.4:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.5.1.tgz#c9772aacf62cb7494a95b0c4f1fb065b563db130"
   integrity sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q==

From 899820cd27ecd8526a802c3b99919be504fc21be Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Thu, 10 Oct 2024 15:09:59 +0300
Subject: [PATCH 02/34] Fx flex replacements. Switch to tailwind.css.

---
 .../alarm/alarm-assignee-panel.component.html |   4 +-
 .../alarm/alarm-assignee.component.html       |   2 +-
 .../alarm/alarm-comment-dialog.component.html |   2 +-
 .../alarm/alarm-comment.component.html        |  54 ++++---
 .../alarm/alarm-details-dialog.component.html |  37 ++---
 .../alarm/alarm-filter-config.component.html  |  10 +-
 ...aliases-entity-select-panel.component.html |   6 +-
 .../aliases-entity-select.component.html      |   4 +-
 .../alias/entity-alias-dialog.component.html  |   4 +-
 .../entity-aliases-dialog.component.html      |  34 ++--
 .../add-attribute-dialog.component.html       |   4 +-
 ...-widget-to-dashboard-dialog.component.html |  12 +-
 .../attribute/attribute-table.component.html  |  68 ++++----
 .../delete-timeseries-panel.component.html    |   6 +-
 .../edit-attribute-value-panel.component.html |   4 +-
 .../audit-log-details-dialog.component.html   |  10 +-
 .../add-widget-dialog.component.html          |   8 +-
 .../dashboard-image-dialog.component.html     |  15 +-
 .../dashboard-page.component.html             | 153 +++++++++---------
 .../dashboard-settings-dialog.component.html  |  10 +-
 .../dashboard-widget-select.component.html    |  20 +--
 .../dashboard-page/edit-widget.component.html |   8 +-
 .../add-new-breakpoint-dialog.component.html  |   4 +-
 .../layout/dashboard-layout.component.html    |  12 +-
 ...ge-dashboard-layouts-dialog.component.html |  51 +++---
 ...ge-dashboard-layouts-dialog.component.scss |   6 +-
 .../layout/move-widgets-dialog.component.html |   6 +-
 .../dashboard-state-dialog.component.html     |   6 +-
 .../default-state-controller.component.html   |   2 +-
 .../entity-state-controller.component.html    |   9 +-
 ...age-dashboard-states-dialog.component.html |  23 ++-
 .../widget-types-panel.component.html         |   2 +-
 .../dashboard/dashboard.component.html        |   8 +-
 .../components/dashboard/layout-button.scss   |   8 +
 ...select-target-layout-dialog.component.html |  16 +-
 .../select-target-state-dialog.component.html |   6 +-
 .../components/details-panel.component.html   |  16 +-
 .../components/router-tabs.component.html     |   8 +-
 ...ification-type-filter-panel.component.html |   2 +-
 .../src/app/modules/home/home.component.html  |  15 +-
 .../src/app/modules/home/home.component.scss  |   4 -
 .../home/menu/menu-toggle.component.html      |   6 +-
 .../button/copy-button.component.html         |   6 +-
 .../shared/components/cheatsheet.component.ts |   2 +-
 .../components/color-input.component.html     |   6 +-
 .../entity/entity-list.component.html         |   2 +-
 .../components/help-popup.component.html      |   2 +-
 .../components/image-input.component.html     |   2 +-
 .../components/led-light.component.html       |   2 +-
 .../shared/components/markdown.component.ts   |   2 +-
 .../notification/notification.component.scss  |   1 -
 .../shared/components/popover.component.ts    |   8 +-
 .../shared/components/tb-error.component.ts   |   2 +-
 .../history-selector.component.html           |  16 +-
 ...xport-widgets-bundle-dialog.component.html |   4 +-
 .../import-dialog-csv.component.html          |  22 +--
 .../import-dialog.component.html              |   6 +-
 ui-ngx/src/styles.scss                        |  22 +--
 ui-ngx/tailwind.config.js                     |   9 +-
 59 files changed, 394 insertions(+), 405 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.html
index ffd0a196e9..d16176e7f4 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.html
@@ -35,11 +35,11 @@
       <span>{{ assignedToCurrentUserText | translate }}</span>
     </mat-option>
     <mat-option *ngFor="let user of filteredUsers | async" [value]="user"
-                [fxHide]="assigneeId === user.id.id">
+                [class.!hidden]="assigneeId === user.id.id">
       <span class="user-avatar" [innerHTML]="getUserInitials(user)"
             [style.background-color]="getAvatarBgColor(user)">
       </span>
-      <div class="user-display-name" fxLayout="column" fxLayoutGap="2px">
+      <div class="user-display-name flex flex-col gap-0.5">
         <span *ngIf="user.firstName || user.lastName"
               [innerHTML]="getFullName(user) | highlight:searchText"></span>
         <span [innerHTML]="user.email | highlight:searchText"></span>
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.html
index 229566a3ae..7fb20305bd 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field fxFlex class="mat-block" style="margin-bottom: 25px"
+<mat-form-field class="mat-block flex-1" style="margin-bottom: 25px"
                 (click)="openAlarmAssigneePanel($event, alarm)"
                 subscriptSizing="dynamic">
   <mat-label translate>alarm.assignee</mat-label>
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html
index 8145c31b06..293f7efe08 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <form style="width: 600px;">
   <mat-toolbar color="primary">
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button (click)="close()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html
index d98e960081..6d03da14ed 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html
@@ -15,10 +15,11 @@
     limitations under the License.
 
 -->
-<div [formGroup]="alarmCommentFormGroup" class="tb-alarm-comments" fxLayout="column">
-  <div class="header"  [ngClass]="{'activity-only': alarmActivityOnly}">
-    <div class="header-container" fxLayout="row" fxLayoutAlign="space-between center"
-         [ngClass]="{'asc': isDirectionAscending(), 'activity-only': alarmActivityOnly}">
+<div [formGroup]="alarmCommentFormGroup" class="tb-alarm-comments flex flex-col">
+  <div class="header" [class.activity-only]="alarmActivityOnly">
+    <div class="header-container flex flex-row justify-between items-center"
+         [class.asc]="isDirectionAscending()"
+         [class.activity-only]="alarmActivityOnly">
       <span class="header-title" translate>
         alarm-activity.activity
       </span>
@@ -47,13 +48,14 @@
       </div>
     </div>
   </div>
-  <div fxLayout="column">
+  <div class="flex flex-col">
     <ng-container *ngIf="!isDirectionAscending()">
       <ng-container *ngTemplateOutlet="commentInput"></ng-container>
     </ng-container>
-    <div class="comments-container" fxLayout="column" fxLayoutGap="12px" style="padding: 24px"
-         [ngClass]="{'asc': isDirectionAscending(), 'activity-only': alarmActivityOnly}">
-      <div fxFlex *ngFor="let displayDataElement of displayData; index as i">
+    <div class="comments-container flex flex-col gap-3" style="padding: 24px"
+         [class.asc]="isDirectionAscending()"
+         [class.activity-only]="alarmActivityOnly">
+      <div class="flex-1" *ngFor="let displayDataElement of displayData; index as i">
         <div class="system-comment" *ngIf="displayDataElement.isSystemComment; else userComment">
           <span class="system-text" style="margin-right: 8px">
             {{ displayDataElement.commentText }}
@@ -65,20 +67,20 @@
           </span>
         </div>
         <ng-template #userComment>
-          <div class="user-comment" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"
+          <div class="user-comment flex flex-row justify-start items-center gap-2"
                *ngIf="!displayDataElement.edit; else commentEditing"
                (mouseenter)="onCommentMouseEnter(displayDataElement.commentId, i)"
                (mouseleave)="onCommentMouseLeave(i)">
-            <div *ngIf="displayDataElement.userExists; else userDeleted" class="user-avatar"
-                 fxLayout="row" fxLayoutAlign="center center" fxFlexAlign="start" fxHide.xs
+            <div *ngIf="displayDataElement.userExists; else userDeleted"
+                 class="user-avatar flex flex-row justify-center items-center self-start xs:!hidden"
                  [style.background-color]="displayDataElement.avatarBgColor">
               {{ getUserInitials(displayDataElement.displayName) }}
             </div>
             <ng-template #userDeleted>
-              <mat-icon class="mat-icon tb-mat-28" fxHide.xs>no_accounts</mat-icon>
+              <mat-icon class="mat-icon tb-mat-28 xs:!hidden">no_accounts</mat-icon>
             </ng-template>
-            <div fxFlex fxLayout="column" fxLayoutGap="5px">
-              <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+            <div class="flex flex-1 flex-col" style="gap: 5px">
+              <div class="flex flex-row justify-start items-center gap-2">
                 <span class="user-name">{{ displayDataElement.displayName }}</span>
                 <span class="time"
                       [matTooltip]="displayDataElement.createdTime"
@@ -93,8 +95,8 @@
               </div>
               <span class="text">{{ displayDataElement.commentText }}</span>
             </div>
-            <div fxLayout="row" fxLayout.xs="column"  class="action-buttons"
-                 [ngClass]="{ 'show-buttons': displayDataElement.showActions }">
+            <div class="action-buttons flex flex-row xs:flex-col"
+                 [class.show-buttons]="displayDataElement.showActions">
               <button mat-icon-button
                       type="button"
                       (click)="editComment(displayDataElement.commentId)">
@@ -108,13 +110,12 @@
             </div>
           </div>
           <ng-template #commentEditing>
-            <div fxLayoutAlign="row center" fxLayoutGap="8px">
-              <div fxLayout="row" fxLayoutAlign="center center"
-                   class="user-avatar"
+            <div class="flex flex-row justify-start items-center gap-2">
+              <div class="user-avatar flex flex-row justify-center items-center"
                    [style.background-color]="displayDataElement.avatarBgColor">
                 {{ getUserInitials(displayDataElement.displayName) }}
               </div>
-              <mat-form-field fxFlex class="mat-block tb-appearance-transparent">
+              <mat-form-field class="mat-block tb-appearance-transparent flex-1">
                 <textarea matInput
                           type="text"
                           placeholder="{{ 'alarm-activity.add' | translate }}"
@@ -125,7 +126,7 @@
                           (keyup.enter)="saveEditedComment(displayDataElement.commentId)"
                           (keydown.enter)="$event.preventDefault()">
                 </textarea>
-                <div matSuffix fxLayout="row">
+                <div matSuffix class="flex flex-row">
                   <button mat-icon-button
                           (click)="cancelEdit(displayDataElement.commentId)"
                           type="button">
@@ -149,15 +150,16 @@
   </div>
   <ng-template #commentInput>
     <div style="background-color: white" class="comment-input"
-         [ngClass]="{'newest-first': !isDirectionAscending(), 'oldest-first': isDirectionAscending(), 'activity-only': alarmActivityOnly}">
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" class="inner-wrap">
-        <div fxLayout="row" fxLayoutAlign="center center"
-             class="user-avatar"
+         [class.newest-first]="!isDirectionAscending()"
+         [class.oldest-first]="isDirectionAscending()"
+         [class.activity-only]="alarmActivityOnly">
+      <div class="inner-wrap flex flex-row justify-start items-center gap-2">
+        <div class="user-avatar flex flex-row justify-center items-center"
              *ngIf="userDisplayName$ | async; let userDisplayName"
              [style.background-color]="getCurrentUserBgColor(userDisplayName)">
           {{ getUserInitials(userDisplayName) }}
         </div>
-        <mat-form-field fxFlex class="mat-block tb-appearance-transparent">
+        <mat-form-field class="mat-block tb-appearance-transparent flex-1">
           <textarea matInput
                     type="text"
                     placeholder="{{ 'alarm-activity.add' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html
index 7059899765..c096b0a4de 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="alarmFormGroup" style="width: 600px;">
   <mat-toolbar color="primary">
     <h2>{{ 'alarm.alarm-details' | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="close()"
             type="button">
@@ -27,45 +27,46 @@
   </mat-toolbar>
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  <div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async" style="margin-bottom: 22px">
-      <div fxLayout="row" fxLayoutGap="6px">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row gap-1.5">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>alarm.originator</mat-label>
           <input matInput formControlName="originatorName" readonly>
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>alarm.severity</mat-label>
           <input matInput formControlName="alarmSeverity" readonly
-                 [ngStyle]="{fontWeight: 'bold', color: alarmSeverityColorsMap.get((alarm$ | async)?.severity)}">
+                 style="font-weight: bold"
+                 [style.color]="alarmSeverityColorsMap.get((alarm$ | async)?.severity)">
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutGap="6px">
-        <mat-form-field *ngIf="alarmFormGroup.get('startTime').value" fxFlex class="mat-block">
+      <div class="flex flex-row gap-1.5">
+        <mat-form-field *ngIf="alarmFormGroup.get('startTime').value" class="mat-block flex-1">
           <mat-label translate>alarm.start-time</mat-label>
           <input matInput formControlName="startTime" readonly>
         </mat-form-field>
-        <mat-form-field *ngIf="alarmFormGroup.get('duration').value" fxFlex class="mat-block">
+        <mat-form-field *ngIf="alarmFormGroup.get('duration').value" class="mat-block flex-1">
           <mat-label translate>alarm.duration</mat-label>
           <input matInput formControlName="duration" readonly>
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutGap="6px">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row gap-1.5">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>alarm.type</mat-label>
           <input matInput formControlName="type" readonly>
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>alarm.status</mat-label>
           <input matInput formControlName="alarmStatus" readonly>
         </mat-form-field>
       </div>
       <mat-expansion-panel class="tb-alarm-details">
-        <mat-expansion-panel-header  fxLayout="row wrap" style="margin-bottom: 8px">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap" style="margin-bottom: 8px">
           <mat-panel-title>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" translate>
+          <mat-panel-description class="flex justify-end items-center" translate>
             alarm.show-more
           </mat-panel-description>
         </mat-expansion-panel-header>
@@ -79,15 +80,15 @@
         </ng-template>
       </mat-expansion-panel>
     </fieldset>
-    <tb-alarm-assignee fxFlex [allowAssign]="allowAssign"
+    <tb-alarm-assignee class="flex-1" [allowAssign]="allowAssign"
                        [alarm]="alarm$ | async"
                        (alarmReassigned)="onReassign()">
     </tb-alarm-assignee>
     <tb-alarm-comment #alarmCommentComponent [alarmId]="alarmId"></tb-alarm-comment>
   </div>
-  <div mat-dialog-actions fxLayout="row">
-    <span fxFlex></span>
-    <div fxLayout="row" *ngIf="alarm$ | async; let alarm;" fxLayoutGap="8px">
+  <div mat-dialog-actions class="flex flex-row">
+    <span class="flex-1"></span>
+    <div class="flex flex-row gap-2" *ngIf="alarm$ | async; let alarm;">
       <button *ngIf="allowAcknowledgment && (alarm.status === alarmStatuses.ACTIVE_UNACK ||
                                              alarm.status === alarmStatuses.CLEARED_UNACK)"
               mat-raised-button
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.html
index 82278e9585..eec5624ae5 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.html
@@ -30,16 +30,16 @@
   </ng-container>
 </ng-template>
 <ng-template #alarmFilterPanel>
-  <form fxLayout="column" class="mat-content mat-padding" (ngSubmit)="update()">
+  <form class="mat-content mat-padding flex flex-col" (ngSubmit)="update()">
     <ng-container *ngTemplateOutlet="alarmFilter"></ng-container>
-    <div fxLayout="row" class="tb-panel-actions" fxLayoutAlign="end center">
+    <div class="tb-panel-actions flex flex-row justify-end items-center">
       <button type="button"
               mat-button
               color="primary"
               (click)="reset()">
         {{ 'action.reset' | translate }}
       </button>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <button type="button"
               mat-button
               (click)="cancel()">
@@ -73,7 +73,7 @@
       </mat-chip-listbox>
     </div>
     <div class="tb-form-row column-xs">
-      <div class="fixed-title-width" ngClass.xs="filters-title-mobile" translate>alarm.alarm-type-list</div>
+      <div class="fixed-title-width" ranslate>alarm.alarm-type-list</div>
       <tb-entity-subtype-list subscriptSizing="dynamic"
                               formControlName="typeList"
                               appearance="outline"
@@ -83,7 +83,7 @@
     </div>
     <div class="tb-form-row column-xs">
       <div class="fixed-title-width" translate>alarm.assignee</div>
-      <tb-alarm-assignee-select fxFlex inline="true"
+      <tb-alarm-assignee-select class="flex-1" inline="true"
                                 [userMode]="userMode"
         formControlName="assigneeId">
       </tb-alarm-assignee-select>
diff --git a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select-panel.component.html b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select-panel.component.html
index 7ebd42358e..4f4f6258d8 100644
--- a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select-panel.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" class="mat-content mat-padding">
-  <div fxLayout="row" *ngFor="let alias of entityAliasesInfo | keyvalue">
-    <tb-aliases-entity-autocomplete fxFlex
+<div class="mat-content mat-padding flex flex-col">
+  <div class="flex flex-row" *ngFor="let alias of entityAliasesInfo | keyvalue">
+    <tb-aliases-entity-autocomplete class="flex-1"
       required
       [alias]="alias.value.alias"
       [entityFilter]="alias.value.entityFilter"
diff --git a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.html b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.html
index 18044ad2f7..7957eaeb2c 100644
--- a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-aliases-entity-select" fxLayout="row" fxLayoutAlign="start center" *ngIf="hasSelectableAliasEntities">
+<section class="tb-aliases-entity-select flex flex-row justify-start items-center" *ngIf="hasSelectableAliasEntities">
   <button mat-icon-button
           cdkOverlayOrigin #aliasEntitySelectPanelOrigin="cdkOverlayOrigin"
           (click)="openEditMode()"
@@ -23,7 +23,7 @@
           [matTooltipPosition]="tooltipPosition">
     <mat-icon class="material-icons">devices_other</mat-icon>
   </button>
-  <span fxHide.lt-lg
+  <span class="lt-lg:!hidden"
         (click)="openEditMode()"
         matTooltip="{{ 'entity.select-entities' | translate }}"
         [matTooltipPosition]="tooltipPosition">
diff --git a/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html b/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html
index d6edb9b4cd..42a33b8f1c 100644
--- a/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="entityAliasFormGroup" (ngSubmit)="save()" style="width: 700px;">
   <mat-toolbar color="primary">
     <h2>{{ (isAdd ? 'alias.add' : 'alias.edit') | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -55,7 +55,7 @@
                 ? translate.instant('alias.entity-filter-no-entity-matched') : ''"></tb-error>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html b/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html
index 8e8e3ee7a9..1c63fe12e5 100644
--- a/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="entityAliasesFormGroup" (ngSubmit)="save()" style="width: 800px;">
   <mat-toolbar color="primary">
     <h2>{{ title | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -29,34 +29,32 @@
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
   <div mat-dialog-content>
-    <div class="tb-aliases-header" fxLayout="row" fxLayoutAlign="start center">
-      <span fxFlex="5"></span>
-      <div fxFlex="95" fxLayout="row" fxLayoutAlign="start center">
-        <span class="tb-header-label" translate fxFlex fxFlex.gt-sm="200px">alias.name</span>
-        <span class="tb-header-label" translate fxFlex style="padding-left: 10px;">alias.entity-filter</span>
-        <span class="tb-header-label" translate fxFlex="120px" style="padding-left: 10px;">alias.resolve-multiple</span>
+    <div class="tb-aliases-header flex flex-row justify-start items-center">
+      <span class="flex-[1_1_5%]"></span>
+      <div class="flex-[1_1_95%] flex flex-row justify-start items-center">
+        <span class="tb-header-label flex-1 gt-sm:flex-[1_1_208px] gt-sm:min-w-52 gt-sm:max-w-52" translate>alias.name</span>
+        <span class="tb-header-label flex-1" translate style="padding-left: 10px;">alias.entity-filter</span>
+        <span class="tb-header-label flex-[1_1_128px] min-w-32 max-w-32" translate style="padding-left: 10px;">alias.resolve-multiple</span>
         <span style="min-width: 80px;"></span>
       </div>
     </div>
     <fieldset [disabled]="isLoading$ | async">
       <mat-divider></mat-divider>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center"
+      <div class="flex-1 flex flex-row justify-start items-center"
            formArrayName="entityAliases"
            *ngFor="let entityAliasControl of entityAliasesFormArray().controls; let $index = index">
-        <span fxFlex="5">{{$index + 1}}.</span>
-        <div class="mat-elevation-z4 tb-alias" fxFlex="95" fxLayout="row" fxLayoutAlign="start center">
-          <mat-form-field class="mat-block" fxFlex fxFlex.gt-sm="200px" style="padding-top: 20px;">
+        <span class="flex-[1_1_5%]">{{$index + 1}}.</span>
+        <div class="mat-elevation-z4 tb-alias flex-[1_1_95%] flex flex-row justify-start items-center">
+          <mat-form-field class="mat-block flex-1 gt-sm:flex-[1_1_208px] gt-sm:min-w-52 gt-sm:max-w-52" style="padding-top: 20px;">
             <input matInput [formControl]="entityAliasControl.get('alias')" required placeholder="{{ 'entity.alias' | translate }}">
             <mat-error *ngIf="entityAliasControl.get('alias').hasError('required')">
               {{ 'entity.alias-required' | translate }}
             </mat-error>
           </mat-form-field>
-          <tb-entity-filter-view fxFlex style="padding-left: 10px;" [formControl]="entityAliasControl.get('filter')">
+          <tb-entity-filter-view class="flex-1" style="padding-left: 10px;" [formControl]="entityAliasControl.get('filter')">
           </tb-entity-filter-view>
-          <section fxFlex="120px" style="padding-left: 10px;"
-                   class="tb-resolve-multiple-switch"
-                   fxLayout="column"
-                   fxLayoutAlign="center center">
+          <section style="padding-left: 10px;"
+                   class="tb-resolve-multiple-switch flex-[1_1_128px] min-w-32 max-w-32 flex flex-col justify-center items-center">
             <mat-slide-toggle class="resolve-multiple-switch"
                    [formControl]="entityAliasControl.get('resolveMultiple')">
             </mat-slide-toggle>
@@ -87,13 +85,13 @@
     <button mat-raised-button color="primary"
             type="button"
             (click)="addAlias()"
-            [fxShow]="!disableAdd"
+            [class.!hidden]="disableAdd"
             [disabled]="isLoading$ | async"
             matTooltip="{{ 'alias.add' | translate }}"
             matTooltipPosition="above">
       {{ 'alias.add' | translate }}
     </button>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/attribute/add-attribute-dialog.component.html b/ui-ngx/src/app/modules/home/components/attribute/add-attribute-dialog.component.html
index b70159d9b3..ab307ae0e8 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/add-attribute-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/add-attribute-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="attributeFormGroup" (ngSubmit)="add()" style="min-width: 420px; max-width: 420px;">
   <mat-toolbar color="primary">
     <h2>{{ (isTelemetry ? 'attribute.add-telemetry' : 'attribute.add') | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -46,7 +46,7 @@
       </tb-value-input>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.html b/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.html
index 25c806c92d..a59732a999 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="addWidgetFormGroup" (ngSubmit)="add()" style="min-width: 400px;">
   <mat-toolbar color="primary">
     <h2 translate>attribute.add-widget-to-dashboard</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -27,11 +27,11 @@
   </mat-toolbar>
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
-  <div mat-dialog-content fxLayout="column">
+  <div mat-dialog-content class="flex flex-col">
     <fieldset [disabled]="isLoading$ | async">
       <mat-radio-group formControlName="addToDashboardType">
         <mat-radio-button [value]="0" color="primary">
-          <section fxLayout="column" style="width: 300px;">
+          <section class="flex flex-col" style="width: 300px;">
             <span translate>dashboard.select-existing</span>
             <tb-dashboard-autocomplete formControlName="dashboardId"
                                        [required]="addWidgetFormGroup.get('addToDashboardType').value === 0"
@@ -40,7 +40,7 @@
           </section>
         </mat-radio-button>
         <mat-radio-button [value]="1" color="primary">
-          <section fxLayout="column" style="width: 300px;">
+          <section class="flex flex-col" style="width: 300px;">
             <span translate>dashboard.create-new</span>
             <mat-form-field class="mat-block">
               <mat-label translate>dashboard.new-dashboard-title</mat-label>
@@ -55,12 +55,12 @@
       </mat-radio-group>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayout="row">
+  <div mat-dialog-actions class="flex flex-row">
     <mat-checkbox formControlName="openDashboard"
                   style="margin-bottom: 0;">
       {{ 'dashboard.open-dashboard' | translate }}
     </mat-checkbox>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
index cc4930483e..e99f44ce27 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
@@ -16,10 +16,10 @@
 
 -->
 <div class="mat-padding tb-entity-table tb-absolute-fill">
-  <div fxFlex fxLayout="column" class="tb-entity-table-content tb-outlined-border">
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="mode === 'default' && !textSearchMode && dataSource.selection.isEmpty()">
+  <div class="tb-entity-table-content tb-outlined-border flex-1 flex flex-col">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="mode !== 'default' || textSearchMode || !dataSource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">
+        <div class="title-container flex flex-row justify-start items-center xs:flex-col xs:justify-center xs:items-start">
           <span class="tb-entity-table-title">{{telemetryTypeTranslationsMap.get(attributeScope) | translate}}</span>
           <mat-form-field class="mat-block tb-attribute-scope" *ngIf="!disableAttributeScopeSelection && !attributeScopeSelectionReadonly">
             <mat-label translate>attribute.attributes-scope</mat-label>
@@ -32,7 +32,7 @@
             </mat-select>
           </mat-form-field>
         </div>
-        <span fxFlex></span>
+        <span class="flex-1"></span>
         <button mat-icon-button
                 *ngIf="attributeScope !== attributeScopeTypes.CLIENT_SCOPE"
                 [disabled]="isLoading$ | async"
@@ -58,14 +58,14 @@
         </button>
       </div>
     </mat-toolbar>
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="mode === 'default' && textSearchMode && dataSource.selection.isEmpty()">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="mode !== 'default' || !textSearchMode || !dataSource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
         <button mat-icon-button
                 matTooltip="{{ 'action.search' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>search</mat-icon>
         </button>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>&nbsp;</mat-label>
           <input #searchInput matInput
                  [formControl]="textSearch"
@@ -78,14 +78,14 @@
         </button>
       </div>
     </mat-toolbar>
-    <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [fxShow]="mode === 'default' && !dataSource.selection.isEmpty()">
-      <div class="mat-toolbar-tools" fxLayout.xs="row wrap">
+    <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [class.!hidden]="mode !== 'default' || dataSource.selection.isEmpty()">
+      <div class="mat-toolbar-tools xs:flex xs:flex-row xs:flex-wrap">
         <span class="tb-entity-table-info">
           {{ (attributeScope === latestTelemetryTypes.LATEST_TELEMETRY ?
                 'attribute.selected-telemetry' : 'attribute.selected-attributes') | translate:{count: dataSource.selection.selected.length} }}
         </span>
-        <span fxFlex></span>
-        <button [fxShow]="attributeScope !== attributeScopeTypes.CLIENT_SCOPE"
+        <span class="flex-1"></span>
+        <button [class.!hidden]="attributeScope === attributeScopeTypes.CLIENT_SCOPE"
                 class="button-widget-action"
                 mat-icon-button [disabled]="isLoading$ | async"
                 matTooltip="{{ 'action.delete' | translate }}"
@@ -104,12 +104,12 @@
         </button>
       </div>
     </mat-toolbar>
-    <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [fxShow]="mode === 'widget'">
-      <div class="mat-toolbar-tools" fxLayoutGap="8px" fxLayout.xs="row wrap">
-        <div fxFlex fxLayout="row" fxLayoutAlign="start">
+    <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [class.!hidden]="mode !== 'widget'">
+      <div class="mat-toolbar-tools gap-2 xs:flex xs:flex-row xs:flex-wrap">
+        <div class="flex-1 flex flex-row justify-start items-stretch">
           <span class="tb-details-subtitle">{{ 'widgets-bundle.current' | translate }}</span>
-          <tb-widgets-bundle-select fxFlexOffset="5"
-                                    fxFlex
+          <tb-widgets-bundle-select class="flex-1"
+                                    style="margin-left: 5%"
                                     required
                                     [selectFirstBundle]="false"
                                     [selectBundleAlias]="selectedWidgetsBundleAlias"
@@ -117,7 +117,7 @@
                                     (ngModelChange)="onWidgetsBundleChanged($event)">
           </tb-widgets-bundle-select>
         </div>
-        <button mat-raised-button [fxShow]="widgetsList.length > 0"
+        <button mat-raised-button [class.!hidden]="!widgetsList.length"
                 color="accent"
                 class="button-widget-action"
                 [disabled]="isLoading$ | async"
@@ -136,7 +136,7 @@
         </button>
       </div>
     </mat-toolbar>
-    <div fxFlex class="table-container" [fxShow]="mode !== 'widget'">
+    <div class="table-container flex-1" [class.!hidden]="mode === 'widget'">
       <table mat-table [dataSource]="dataSource"
                  matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
         <ng-container matColumnDef="select" sticky>
@@ -162,7 +162,7 @@
         <ng-container matColumnDef="key">
           <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%"> {{ 'attribute.key' | translate }} </mat-header-cell>
           <mat-cell *matCellDef="let attribute" class="attribute">
-            <div fxLayout="row" style="align-items: center">
+            <div class="flex flex-row" style="align-items: center">
               <span class="ellipsis">{{ attribute.key }}</span>
               <tb-copy-button
                 class="attribute-copy"
@@ -182,8 +182,8 @@
           <mat-cell *matCellDef="let attribute"
                     class="tb-value-cell attribute"
                     (click)="editAttribute($event, attribute)">
-            <div fxFlex fxLayout="row" style="align-items: center">
-              <div fxFlex fxLayout="row" style="overflow: hidden; align-items: center;">
+            <div class="flex-1 flex flex-row" style="align-items: center">
+              <div class="flex-1 flex flex-row" style="overflow: hidden; align-items: center;">
                 <span class="ellipsis">{{attribute.value | tbJson}}</span>
                 <tb-copy-button
                   *ngIf="attribute.value !== ''"
@@ -197,7 +197,7 @@
                 >
                 </tb-copy-button>
               </div>
-              <span [fxShow]="!isClientSideTelemetryTypeMap.get(attributeScope)">
+              <span [class.!hidden]="isClientSideTelemetryTypeMap.get(attributeScope)">
                 <mat-icon>edit</mat-icon>
               </span>
               <button mat-icon-button *ngIf="attributeScope === latestTelemetryTypes.LATEST_TELEMETRY"
@@ -207,34 +207,32 @@
             </div>
           </mat-cell>
         </ng-container>
-        <mat-header-row [ngClass]="{'mat-row-select': true}" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
-        <mat-row [ngClass]="{'mat-row-select': true,
-                             'mat-selected': dataSource.selection.isSelected(attribute)}"
+        <mat-header-row class="mat-row-select" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
+        <mat-row class="mat-row-select" [class.mat-selected]="dataSource.selection.isSelected(attribute)"
                  *matRowDef="let attribute; columns: displayedColumns;" (click)="dataSource.selection.toggle(attribute)"></mat-row>
       </table>
-      <span [fxShow]="dataSource.isEmpty() | async"
-            fxLayoutAlign="center center"
-            class="no-data-found" translate>{{
+      <span [class.!hidden]="(dataSource.isEmpty() | async) === false"
+            class="no-data-found flex justify-center items-center" translate>{{
           attributeScope === latestTelemetryTypes.LATEST_TELEMETRY
               ? 'attribute.no-telemetry-text'
               : 'attribute.no-attributes-text'
         }}</span>
     </div>
-    <mat-divider [fxShow]="mode !== 'widget'"></mat-divider>
-    <mat-paginator [fxShow]="mode !== 'widget'"
+    <mat-divider [class.!hidden]="mode === 'widget'"></mat-divider>
+    <mat-paginator [class.!hidden]="mode === 'widget'"
                    [length]="dataSource.total() | async"
                    [pageIndex]="pageLink.page"
                    [pageSize]="pageLink.pageSize"
                    [pageSizeOptions]="[10, 20, 30]"
                    [hidePageSize]="hidePageSize"
                    showFirstLastButtons></mat-paginator>
-    <ngx-hm-carousel fxFlex *ngIf="mode === 'widget' && widgetsList.length > 0"
+    <ngx-hm-carousel *ngIf="mode === 'widget' && widgetsList.length > 0"
                      #carousel
                      [(ngModel)]="widgetsCarouselIndex"
                      (ngModelChange)="onWidgetsCarouselIndexChanged()"
                      [data]="widgetsList"
                      [infinite]="false"
-                     class="carousel c-accent">
+                     class="carousel c-accent flex-1">
       <section ngx-hm-carousel-container class="content">
         <article class="item cursor-pointer"
                  ngx-hm-carousel-item
@@ -277,12 +275,8 @@
     <span translate *ngIf="mode === 'widget' && widgetsLoaded &&
                            widgetsList.length === 0 &&
                            widgetBundleSet"
-          fxFlex fxLayoutAlign="center center"
-          style="display: flex;"
-          class="mat-headline-5">widgets-bundle.empty</span>
+          class="mat-headline-5 flex-1 flex justify-center items-center">widgets-bundle.empty</span>
     <span translate *ngIf="mode === 'widget' && !widgetBundleSet"
-          fxFlex fxLayoutAlign="center center"
-          style="display: flex;"
-          class="mat-headline-5">widget.select-widgets-bundle</span>
+          class="mat-headline-5 flex-1 flex justify-center items-center">widget.select-widgets-bundle</span>
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.html b/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.html
index 9d7123a94b..7e0fc13986 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.html
@@ -17,7 +17,7 @@
 -->
 <mat-toolbar>
   <h2>{{ "attribute.delete-timeseries.delete-strategy" | translate }}</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           type="button"
           (click)="cancel()">
@@ -51,8 +51,8 @@
     {{ "attribute.delete-timeseries.rewrite-latest-value" | translate }}
   </mat-slide-toggle>
 </form>
-<div fxLayout="row" class="tb-panel-actions">
-  <span fxFlex></span>
+<div class="tb-panel-actions flex flex-row">
+  <span class="flex-1"></span>
   <button mat-button color="primary"
           type="button"
           (click)="cancel()" cdkFocusInitial>
diff --git a/ui-ngx/src/app/modules/home/components/attribute/edit-attribute-value-panel.component.html b/ui-ngx/src/app/modules/home/components/attribute/edit-attribute-value-panel.component.html
index 7c682e6c0c..1308290991 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/edit-attribute-value-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/edit-attribute-value-panel.component.html
@@ -23,8 +23,8 @@
       requiredText="attribute.value-required">
     </tb-value-input>
   </fieldset>
-  <div fxLayout="row" class="tb-panel-actions">
-    <span fxFlex></span>
+  <div class="tb-panel-actions flex flex-row">
+    <span class="flex-1"></span>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.html
index 11b67279f0..38b514a6dc 100644
--- a/ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.html
@@ -17,23 +17,23 @@
 -->
 <mat-toolbar color="primary">
   <h2 translate>audit-log.audit-log-details</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           [mat-dialog-close]="false"
           type="button">
     <mat-icon class="material-icons">close</mat-icon>
   </button>
 </mat-toolbar>
-<div mat-dialog-content fxLayout="column">
+<div mat-dialog-content class="flex flex-col">
   <label translate class="tb-title no-padding">audit-log.action-data</label>
   <div #actionDataEditor class="tb-audit-log-action-data">
   </div>
   <span style="min-height: 30px;"></span>
-  <label [fxShow]="displayFailureDetails" translate class="tb-title no-padding">audit-log.failure-details</label>
-  <div #failureDetailsEditor [fxShow]="displayFailureDetails" class="tb-audit-log-failure-details">
+  <label [class.!hidden]="!displayFailureDetails" translate class="tb-title no-padding">audit-log.failure-details</label>
+  <div #failureDetailsEditor [class.!hidden]="!displayFailureDetails" class="tb-audit-log-failure-details">
   </div>
 </div>
-<div mat-dialog-actions fxLayoutAlign="end center">
+<div mat-dialog-actions class="flex justify-end items-center">
   <button mat-button color="primary"
           type="button"
           [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html
index b86d41a5b5..98c4251c8f 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html
@@ -19,8 +19,8 @@
   <mat-toolbar color="primary">
     <div class="tb-add-widget-toolbar">
       <h2>{{'widget.add' | translate}}:</h2>
-      <span fxFlex>{{data.widgetInfo.widgetName}}</span>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap.gt-xs="16px" style="min-width: fit-content;">
+      <span class="flex-1">{{data.widgetInfo.widgetName}}</span>
+      <div class="flex flex-row justify-start items-center gt-xs:gap-4" style="min-width: fit-content;">
         <tb-toggle-select *ngIf="widgetConfig.hasBasicMode" appearance="fill-invert" selectMediaBreakpoint="xs"
                           [(ngModel)]="widgetConfigMode" [ngModelOptions]="{standalone: true}">
           <tb-toggle-option value="basic">{{ 'widget.basic-mode' | translate }}</tb-toggle-option>
@@ -66,14 +66,14 @@
       </div>
     </tb-widget-preview>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="space-between center">
+  <div mat-dialog-actions class="flex justify-between items-center">
     <button mat-button color="primary"
             type="button"
             (click)="cancel()"
             cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
-    <div fxLayout="row" fxLayoutGap="8px">
+    <div class="flex flex-row gap-2">
       <button *ngIf="!previewMode"
               mat-button color="primary"
               type="button"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html
index 2dd4ea3fb4..2ee4c482d6 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html
@@ -18,7 +18,7 @@
 <form (ngSubmit)="save()">
   <mat-toolbar color="primary">
     <h2 translate>dashboard.update-image</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -28,13 +28,13 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div mat-dialog-content style="position: relative;">
-    <fieldset [disabled]="(isLoading$ | async) || (takingScreenshot$ | async)" fxLayout="column" fxLayoutAlign="center stretch" fxLayoutGap="8px">
-      <div [formGroup]="dashboardRectFormGroup" fxLayout="column" fxLayoutGap="8px" fxLayoutAlign="center center">
+    <fieldset [disabled]="(isLoading$ | async) || (takingScreenshot$ | async)" class="flex flex-col justify-center items-stretch gap-2">
+      <div [formGroup]="dashboardRectFormGroup" class="flex flex-col gap-2 justify-center items-center">
         <mat-form-field class="rect-field">
           <mat-label>Top %</mat-label>
           <input matInput formControlName="top" type="number" step="1" min="0" max="100">
         </mat-form-field>
-        <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="center center">
+        <div class="flex flex-row gap-2 justify-center items-center">
           <mat-form-field  class="rect-field">
             <mat-label>Left %</mat-label>
             <input matInput formControlName="left" type="number" step="1" min="0" max="100">
@@ -53,7 +53,7 @@
           <input matInput formControlName="bottom" type="number" step="1" min="0" max="100">
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutAlign="center center">
+      <div class="flex flex-row justify-center items-center">
         <button mat-raised-button color="accent"
                 type="button"
                 [disabled]="(isLoading$ | async) || (takingScreenshot$ | async)"
@@ -67,12 +67,11 @@
         </tb-gallery-image-input>
       </div>
     </fieldset>
-    <div *ngIf="takingScreenshot$ | async" class="taking-screenshot-progress tb-absolute-fill" fxLayout="column"
-         fxLayoutAlign="center center">
+    <div *ngIf="takingScreenshot$ | async" class="taking-screenshot-progress tb-absolute-fill flex flex-col justify-center items-center">
         <mat-progress-spinner color="accent" mode="indeterminate"></mat-progress-spinner>
     </div>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async) || (takingScreenshot$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
index 694a6e9a41..b36349f34a 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
@@ -15,32 +15,29 @@
     limitations under the License.
 
 -->
-<div class="tb-dashboard-page mat-content" [ngClass]="{'mobile-app': isMobileApp && !isEdit}" tb-toast
-     fxFlex tb-fullscreen [fullscreenElement]="elRef.nativeElement" [fullscreen]="widgetEditMode || iframeMode || forceFullscreen || isFullscreen">
+<div class="tb-dashboard-page mat-content flex-1" [class.mobile-app]="isMobileApp && !isEdit" tb-toast
+     tb-fullscreen [fullscreenElement]="elRef.nativeElement" [fullscreen]="widgetEditMode || iframeMode || forceFullscreen || isFullscreen">
   <tb-hotkeys-cheatsheet #cheatSheetComponent></tb-hotkeys-cheatsheet>
   <section class="tb-dashboard-toolbar"
-           [ngClass]="{ 'tb-dashboard-toolbar-opened': toolbarOpened,
-                        'tb-dashboard-toolbar-closed': !toolbarOpened }">
-    <tb-dashboard-toolbar [fxShow]="!widgetEditMode && !hideToolbar" [forceFullscreen]="forceFullscreen"
+           [class.tb-dashboard-toolbar-opened]="toolbarOpened"
+           [class.tb-dashboard-toolbar-closed]="!toolbarOpened">
+    <tb-dashboard-toolbar [class.!hidden]="widgetEditMode || hideToolbar" [forceFullscreen]="forceFullscreen"
                           [toolbarOpened]="toolbarOpened" (triggerClick)="openToolbar()">
-      <div class="tb-dashboard-action-panels" fxLayout="column" fxLayout.gt-sm="row"
-           fxLayoutAlign="center stretch" fxLayoutAlign.gt-sm="space-between center">
-        <div class="tb-dashboard-action-panel tb-left-panel" [fxHide]="isMobileApp && !isEdit">
-          <tb-user-menu *ngIf="!isPublicUser() && forceFullscreen" fxHide.gt-sm displayUserInfo="true">
+      <div class="tb-dashboard-action-panels flex flex-col justify-center items-stretch gt-sm:flex-row gt-sm:justify-between gt-sm:items-center">
+        <div class="tb-dashboard-action-panel tb-left-panel" [class.!hidden]="isMobileApp && !isEdit">
+          <tb-user-menu *ngIf="!isPublicUser() && forceFullscreen" class="gt-sm:!hidden" displayUserInfo="true">
           </tb-user-menu>
           <ng-container *ngIf="isEdit">
-            <div style="flex: 1 1 100%" fxHide.gt-sm></div>
-            <div fxFlex.lt-md fxLayout="row"
-                 fxLayoutAlign.gt-sm="start center"
-                 fxLayoutAlign="end center" fxLayoutGap.lt-lg="3px" fxLayoutGap.lg="6px" fxLayoutGap.gt-lg="12px">
+            <div style="flex: 1 1 100%" class="gt-sm:!hidden"></div>
+            <div class="flex flex-row justify-end items-center lt-md:flex-1 gt-sm:justify-start gt-sm:items-center lt-lg:gap-0.75 lg:gap-1.5 gt-lg:gap-3">
               <mat-divider class="tb-toolbar-divider" vertical></mat-divider>
-              <button fxHide.gt-md mat-icon-button
+              <button class="gt-md:!hidden" mat-icon-button
                       matTooltip="{{'layout.manage' | translate}}"
                       matTooltipPosition="below"
                       (click)="manageDashboardLayouts($event)">
                 <mat-icon>view_compact</mat-icon>
               </button>
-              <button fxHide.lt-lg mat-button
+              <button class="lt-lg:!hidden" mat-button
                       matTooltip="{{'layout.manage' | translate}}"
                       matTooltipPosition="below"
                       (click)="manageDashboardLayouts($event)">
@@ -52,7 +49,7 @@
               </tb-select-dashboard-breakpoint>
             </div>
           </ng-container>
-          <tb-states-component fxFlex.lt-md
+          <tb-states-component class="lt-md:flex-1"
                                [statesControllerId]="isEdit ? 'default' : dashboardConfiguration.settings.stateControllerId"
                                [dashboardCtrl]="this"
                                [dashboardId]="setStateDashboardId ? dashboard.id.id : ''"
@@ -63,13 +60,13 @@
                                [states]="dashboardConfiguration.states">
           </tb-states-component>
           <ng-container *ngIf="isEdit">
-            <button fxHide.gt-md mat-icon-button
+            <button class="gt-md:!hidden" mat-icon-button
                     matTooltip="{{'dashboard.manage-states' | translate}}"
                     matTooltipPosition="below"
                     (click)="manageDashboardStates($event)">
               <mat-icon>layers</mat-icon>
             </button>
-            <button fxHide.lt-lg mat-button
+            <button class="lt-lg:!hidden" mat-button
                     matTooltip="{{'dashboard.manage-states' | translate}}"
                     matTooltipPosition="below"
                     (click)="manageDashboardStates($event)">
@@ -81,65 +78,65 @@
                aria-label="dashboard_logo" class="dashboard_logo"/>
         </div>
         <div class="tb-dashboard-action-panel">
-          <button [fxShow]="showCloseToolbar()" mat-icon-button class="close-action"
+          <button [class.!hidden]="!showCloseToolbar()" mat-icon-button class="close-action"
                   matTooltip="{{ 'dashboard.close-toolbar' | translate }}"
                   matTooltipPosition="below"
                   (click)="closeToolbar()">
             <mat-icon>arrow_forward</mat-icon>
           </button>
-          <tb-user-menu *ngIf="!isPublicUser() && forceFullscreen" fxHide.lt-md displayUserInfo="true">
+          <tb-user-menu *ngIf="!isPublicUser() && forceFullscreen" class="lt-md:!hidden" displayUserInfo="true">
           </tb-user-menu>
-          <button [fxShow]="showRightLayoutSwitch()" mat-icon-button
+          <button [class.!hidden]="!showRightLayoutSwitch()" mat-icon-button
                   matTooltip="{{ (isRightLayoutOpened ? 'dashboard.hide-details' : 'dashboard.show-details') | translate }}"
                   matTooltipPosition="below"
                   (click)="toggleLayouts()">
             <mat-icon>{{isRightLayoutOpened ? 'arrow_back' : 'menu'}}</mat-icon>
           </button>
-          <button [fxShow]="!hideFullscreenButton()" mat-icon-button fxHide.xs
+          <button [class.!hidden]="hideFullscreenButton()" class="xs:!hidden" mat-icon-button
                   matTooltip="{{(isFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
                   matTooltipPosition="below"
                   (click)="isFullscreen = !isFullscreen">
             <mat-icon>{{ isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
           </button>
-          <button [fxShow]="currentDashboardId && !isMobileApp && displayExport() && !isEdit" mat-icon-button
+          <button [class.!hidden]="!currentDashboardId || isMobileApp || !displayExport() || isEdit" mat-icon-button
                   matTooltip="{{'dashboard.export' | translate}}"
                   matTooltipPosition="below"
                   (click)="exportDashboard($event)">
             <mat-icon>file_download</mat-icon>
           </button>
           <ng-container *ngIf="!readonly && !isEdit">
-            <button fxHide.gt-md mat-icon-button (click)="toggleDashboardEditMode()"
+            <button class="gt-md:!hidden" mat-icon-button (click)="toggleDashboardEditMode()"
                     matTooltip="{{'dashboard.edit-mode' | translate}}"
                     matTooltipPosition="below">
               <mat-icon>edit</mat-icon></button>
-            <button fxHide.lt-lg mat-stroked-button (click)="toggleDashboardEditMode()">
+            <button class="lt-lg:!hidden" mat-stroked-button (click)="toggleDashboardEditMode()">
               <mat-icon>edit</mat-icon>{{'dashboard.edit-mode' | translate}}</button>
           </ng-container>
           <ng-container *ngIf="isEdit">
-            <button fxHide.gt-md mat-icon-button (click)="saveDashboard()" [disabled]="isLoading$ | async"
+            <button class="gt-md:!hidden" mat-icon-button (click)="saveDashboard()" [disabled]="isLoading$ | async"
                     matTooltip="{{'action.save' | translate}}"
                     matTooltipPosition="below">
               <mat-icon>done</mat-icon></button>
-            <button fxHide.lt-lg mat-stroked-button [disabled]="isLoading$ | async" (click)="saveDashboard()">
+            <button class="lt-lg:!hidden" mat-stroked-button [disabled]="isLoading$ | async" (click)="saveDashboard()">
               <mat-icon>done</mat-icon>{{ 'action.save' | translate }}</button>
-            <button fxHide.gt-md mat-icon-button (click)="toggleDashboardEditMode()"
+            <button class="gt-md:!hidden" mat-icon-button (click)="toggleDashboardEditMode()"
                     matTooltip="{{'action.cancel' | translate}}"
                     [disabled]="isLoading$ | async"
                     matTooltipPosition="below">
               <mat-icon>close</mat-icon></button>
-            <button fxHide.lt-lg mat-button (click)="toggleDashboardEditMode()" [disabled]="isLoading$ | async">
+            <button class="lt-lg:!hidden" mat-button (click)="toggleDashboardEditMode()" [disabled]="isLoading$ | async">
               <mat-icon>close</mat-icon>{{ 'action.cancel' | translate }}</button>
             <mat-divider class="tb-toolbar-divider" vertical></mat-divider>
           </ng-container>
           <ng-container *ngIf="currentDashboardId && isEdit && isTenantAdmin()">
-            <button fxHide.lt-lg fxHide.gt-lg mat-icon-button
+            <button class="lt-lg:!hidden gt-lg:!hidden" mat-icon-button
                     #versionControlIconButton
                     matTooltip="{{'version-control.version-control' | translate}}"
                     matTooltipPosition="below"
                     (click)="toggleVersionControl($event, versionControlIconButton)">
               <mat-icon>history</mat-icon>
             </button>
-            <button fxHide.lt-xl mat-button
+            <button class="lt-xl:!hidden" mat-button
                     #versionControlButton
                     matTooltip="{{'version-control.version-control' | translate}}"
                     matTooltipPosition="below"
@@ -149,13 +146,13 @@
             </button>
           </ng-container>
           <ng-container *ngIf="isEdit">
-            <button fxHide.gt-lg mat-icon-button
+            <button class="gt-lg:!hidden" mat-icon-button
                     matTooltip="{{ 'filter.filters' | translate }}"
                     matTooltipPosition="below"
                     (click)="openFilters($event)">
               <mat-icon>filter_list</mat-icon>
             </button>
-            <button fxHide.lt-xl mat-button
+            <button class="lt-xl:!hidden" mat-button
                     matTooltip="{{ 'filter.filters' | translate }}"
                     matTooltipPosition="below"
                     (click)="openFilters($event)">
@@ -164,13 +161,13 @@
             </button>
           </ng-container>
           <ng-container *ngIf="isEdit">
-            <button fxHide.gt-lg mat-icon-button
+            <button class="gt-lg:!hidden" mat-icon-button
                     matTooltip="{{ 'entity.aliases' | translate }}"
                     matTooltipPosition="below"
                     (click)="openEntityAliases($event)">
               <mat-icon>devices_other</mat-icon>
             </button>
-            <button fxHide.lt-xl mat-button
+            <button class="lt-xl:!hidden" mat-button
                     matTooltip="{{ 'entity.aliases' | translate }}"
                     matTooltipPosition="below"
                     (click)="openEntityAliases($event)">
@@ -179,13 +176,13 @@
             </button>
           </ng-container>
           <ng-container *ngIf="isEdit">
-            <button fxHide.gt-lg mat-icon-button
+            <button class="gt-lg:!hidden" mat-icon-button
                     matTooltip="{{ 'dashboard.settings' | translate }}"
                     matTooltipPosition="below"
                     (click)="openDashboardSettings($event)">
               <mat-icon>settings</mat-icon>
             </button>
-            <button fxHide.lt-xl mat-button
+            <button class="lt-xl:!hidden" mat-button
                     matTooltip="{{ 'dashboard.settings' | translate }}"
                     matTooltipPosition="below"
                     (click)="openDashboardSettings($event)">
@@ -193,14 +190,14 @@
               {{ 'dashboard.settings' | translate }}
             </button>
           </ng-container>
-          <button [fxShow]="currentDashboardId && !isEdit && !isMobileApp && isTenantAdmin() && displayUpdateDashboardImage()" mat-icon-button
+          <button [class.!hidden]="!currentDashboardId || isEdit || isMobileApp || !isTenantAdmin() || !displayUpdateDashboardImage()" mat-icon-button
                   matTooltip="{{'dashboard.update-image' | translate}}"
                   matTooltipPosition="below"
                   (click)="updateDashboardImage($event)">
             <mat-icon>wallpaper</mat-icon>
           </button>
           <ng-container *ngIf="isEdit; else timewindowTemplate">
-            <tb-timewindow fxHide.lt-xl asButton
+            <tb-timewindow class="lt-xl:!hidden" asButton
                            flatButton
                            [displayTimewindowValue]="false"
                            [isEdit]="true"
@@ -209,7 +206,7 @@
                            timezone="true"
                            [(ngModel)]="dashboardCtx.dashboardTimewindow">
             </tb-timewindow>
-            <tb-timewindow fxHide.gt-lg
+            <tb-timewindow class="gt-lg:!hidden"
                            hideLabel
                            [isEdit]="true"
                            tooltipPosition="below"
@@ -220,7 +217,7 @@
           </ng-container>
           <ng-template #timewindowTemplate>
             <ng-container *ngIf="displayDashboardTimewindow()">
-              <tb-timewindow fxHide.gt-md
+              <tb-timewindow class="gt-md:!hidden"
                              [isEdit]="false"
                              hideLabel
                              tooltipPosition="below"
@@ -228,7 +225,7 @@
                              timezone="true"
                              [(ngModel)]="dashboardCtx.dashboardTimewindow">
               </tb-timewindow>
-              <tb-timewindow fxHide.lt-lg
+              <tb-timewindow class="lt-lg:!hidden"
                              [isEdit]="false"
                              tooltipPosition="below"
                              aggregation="true"
@@ -238,13 +235,13 @@
             </ng-container>
           </ng-template>
           <ng-container *ngIf="isEdit">
-            <button fxHide.gt-md mat-icon-button
+            <button class="gt-md:!hidden" mat-icon-button
                     matTooltip="{{ 'dashboard.add-widget-button-text' | translate }}"
                     matTooltipPosition="below"
                     (click)="addWidget($event)">
               <mat-icon>add</mat-icon>
             </button>
-            <button fxHide.lt-lg mat-stroked-button
+            <button class="lt-lg:!hidden" mat-stroked-button
                     matTooltip="{{ 'dashboard.add-widget-button-text' | translate }}"
                     matTooltipPosition="below"
                     (click)="addWidget($event)">
@@ -252,11 +249,11 @@
               {{ 'dashboard.add-widget-button-text' | translate }}
             </button>
           </ng-container>
-          <tb-filters-edit [fxShow]="!isEdit && displayFilters()"
+          <tb-filters-edit [class.!hidden]="isEdit || !displayFilters()"
                            tooltipPosition="below"
                            [aliasController]="dashboardCtx.aliasController">
           </tb-filters-edit>
-          <tb-aliases-entity-select [fxShow]="!isEdit && displayEntitiesSelect()"
+          <tb-aliases-entity-select [class.!hidden]="isEdit || !displayEntitiesSelect()"
                                     tooltipPosition="below"
                                     [aliasController]="dashboardCtx.aliasController">
           </tb-aliases-entity-select>
@@ -273,30 +270,30 @@
   <section class="tb-dashboard-container tb-absolute-fill"
            tb-toast toastTarget="dashboardRoot"
            #dashboardContainer
-           [ngClass]="{ 'is-fullscreen': forceFullscreen,
-           'tb-dashboard-toolbar-opened': toolbarOpened,
-           'tb-dashboard-toolbar-animated': isToolbarOpenedAnimate,
-           'tb-dashboard-toolbar-closed': !toolbarOpened }">
+           [class.is-fullscreen]="forceFullscreen"
+           [class.tb-dashboard-toolbar-opened]="toolbarOpened"
+           [class.tb-dashboard-toolbar-animated]="isToolbarOpenedAnimate"
+           [class.tb-dashboard-toolbar-closed]="!toolbarOpened">
     <mat-drawer-container hasBackdrop="false" class="tb-absolute-fill tb-dashboard-drawer-container">
-      <mat-drawer-content #dashboardContent fxLayout="column" fxLayoutAlign="center start">
+      <mat-drawer-content #dashboardContent class="flex flex-col justify-center items-start">
         <section *ngIf="!widgetEditMode" class="tb-dashboard-title"
-                 [ngStyle]="{'color': dashboard.configuration.settings.titleColor}">
-          <h3 [fxShow]="!isEdit && displayTitle()">{{ translatedDashboardTitle }}</h3>
-          <mat-form-field [fxShow]="isEdit" class="mat-block tb-appearance-transparent" subscriptSizing="dynamic">
-            <mat-label translate [ngStyle]="{'color': dashboard.configuration.settings.titleColor}">dashboard.title</mat-label>
+                 [style.color]="dashboard.configuration.settings.titleColor">
+          <h3 [class.!hidden]="isEdit || !displayTitle()">{{ translatedDashboardTitle }}</h3>
+          <mat-form-field [class.!hidden]="!isEdit" class="mat-block tb-appearance-transparent" subscriptSizing="dynamic">
+            <mat-label translate [style.color]="dashboard.configuration.settings.titleColor">dashboard.title</mat-label>
             <input matInput class="tb-dashboard-title"
-                   [ngStyle]="{'color': dashboard.configuration.settings.titleColor}"
+                   [style.color]="dashboard.configuration.settings.titleColor"
                    required name="title" [(ngModel)]="dashboard.title">
           </mat-form-field>
         </section>
-        <mat-drawer-container class="tb-dashboard-layouts" fxFlex
-                              [class]="{'tb-shrinked' : isEditingWidget}">
+        <mat-drawer-container class="tb-dashboard-layouts flex-1"
+                              [class.tb-shrinked]="isEditingWidget">
           <mat-drawer *ngIf="layouts.right.show"
                       id="tb-right-layout"
-                      [ngStyle]="{minWidth: rightLayoutSize.width,
-                                  maxWidth: rightLayoutSize.width,
-                                  height: rightLayoutSize.height,
-                                  borderLeft: 'none'}"
+                      style="border-left: none"
+                      [style.min-width]="rightLayoutSize.width"
+                      [style.max-width]="rightLayoutSize.width"
+                      [style.height]="rightLayoutSize.height"
               disableClose="true"
               [@.disabled]="!isMobile"
               position="end"
@@ -314,10 +311,10 @@
               [popoverComponent]="popoverComponent">
             </tb-dashboard-layout>
           </mat-drawer>
-          <mat-drawer-content [fxShow]="layouts.main.show"
+          <mat-drawer-content [class.!hidden]="!layouts.main.show"
                               id="tb-main-layout"
-                              [style]="{width: mainLayoutSize.width,
-                                        height: mainLayoutSize.height}">
+                              [style.width]="mainLayoutSize.width"
+                              [style.height]="mainLayoutSize.height">
             <tb-dashboard-layout
               [style.max-width]="mainLayoutSize.maxWidth"
               [style.min-width]="mainLayoutSize.minWidth"
@@ -333,13 +330,13 @@
             </tb-dashboard-layout>
             <div class="layout-filler"
                  *ngIf="isEdit"
-                 [fxShow]="showMainLayoutFiller">
+                 [class.!hidden]="!showMainLayoutFiller">
               {{ 'dashboard.breakpoint-value' | translate : {value: currentBreakpointValue } }}
             </div>
           </mat-drawer-content>
         </mat-drawer-container>
-        <section data-html2canvas-ignore fxLayout="row" class="layout-wrap tb-header-buttons tb-enter-edit-mode" fxLayoutAlign="start end" *ngIf="!readonly && (hideToolbar || widgetEditMode)">
-          <button [fxShow]="!isEdit"
+        <section data-html2canvas-ignore class="tb-header-buttons tb-enter-edit-mode flex flex-row flex-wrap justify-start items-end" *ngIf="!readonly && (hideToolbar || widgetEditMode)">
+          <button [class.!hidden]="isEdit"
                   color="primary"
                   mat-mini-fab
                   class="tb-btn-header tb-btn-edit"
@@ -348,7 +345,7 @@
                   matTooltipPosition="above">
             <mat-icon>edit</mat-icon>
           </button>
-          <button [fxShow]="isEdit"
+          <button [class.!hidden]="!isEdit"
                   color="primary"
                   mat-mini-fab
                   class="tb-btn-header tb-btn-edit"
@@ -357,7 +354,7 @@
                   matTooltip="{{'action.save' | translate}}"
                   matTooltipPosition="below">
             <mat-icon>done</mat-icon></button>
-          <button [fxShow]="isEdit"
+          <button [class.!hidden]="!isEdit"
                   color="primary"
                   mat-mini-fab
                   class="tb-btn-header tb-btn-edit"
@@ -367,7 +364,7 @@
                   matTooltipPosition="below">
             <mat-icon>close</mat-icon></button>
         </section>
-        <section *ngIf="!embedded" data-html2canvas-ignore class="tb-powered-by-footer" [ngStyle]="{'color': dashboard.configuration.settings.titleColor}">
+        <section *ngIf="!embedded" data-html2canvas-ignore class="tb-powered-by-footer" [style.color]="dashboard.configuration.settings.titleColor">
           <span>Powered by <a href="https://thingsboard.io" target="_blank">Thingsboard v.{{ thingsboardVersion }}</a></span>
         </section>
       </mat-drawer-content>
@@ -378,12 +375,12 @@
                   disableClose
                   mode="over"
                   position="end">
-        <tb-details-panel *ngIf="!isEditingWidgetClosed" fxFlex
+        <tb-details-panel *ngIf="!isEditingWidgetClosed" class="flex-1"
                           headerTitle="{{editingWidget?.config.title}}"
                           headerSubtitle="{{ editingWidgetSubtitle }}"
                           [isReadOnly]="true"
                           (closeDetails)="onEditWidgetClosed()">
-          <div class="details-buttons" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
+          <div class="details-buttons flex flex-row justify-start items-center gap-4">
             <tb-toggle-select *ngIf="tbEditWidget.widgetConfig?.hasBasicMode" appearance="fill-invert" selectMediaBreakpoint="xs" [(ngModel)]="tbEditWidget.widgetConfigMode">
               <tb-toggle-option value="basic">{{ 'widget.basic-mode' | translate }}</tb-toggle-option>
               <tb-toggle-option value="advanced">{{ 'widget.advanced-mode' | translate }}</tb-toggle-option>
@@ -403,7 +400,7 @@
                           (applyWidgetConfig)="saveWidget()">
           </tb-edit-widget>
         </tb-details-panel>
-        <tb-details-panel *ngIf="!isAddingWidgetClosed && !widgetEditMode" fxFlex
+        <tb-details-panel *ngIf="!isAddingWidgetClosed && !widgetEditMode" class="flex-1"
                           headerTitle="{{ isAddingWidget ?
                             ((dashboardWidgetSelectComponent?.selectWidgetMode === 'allWidgets' ? ('dashboard.select-widget-value' | translate: { title: ('widget.all-widgets' | translate) }) :
                                (!dashboardWidgetSelectComponent?.widgetsBundle ?
@@ -416,19 +413,19 @@
                           backgroundColor="#cfd8dc"
                           (closeDetails)="onAddWidgetClosed()"
                           (closeSearch)="dashboardWidgetSelectComponent.search = ''">
-          <div class="prefix-title-buttons" [fxShow]="!!(isAddingWidget && (dashboardWidgetSelectComponent?.widgetsBundle || dashboardWidgetSelectComponent?.selectWidgetMode === 'allWidgets'))" style="height: 28px; margin-right: 12px">
+          <div class="prefix-title-buttons" [class.!hidden]="!(isAddingWidget && (dashboardWidgetSelectComponent?.widgetsBundle || dashboardWidgetSelectComponent?.selectWidgetMode === 'allWidgets'))" style="height: 28px; margin-right: 12px">
             <button class="tb-mat-28" mat-icon-button type="button" (click)="clearSelectedWidgetBundle()">
               <mat-icon>arrow_back</mat-icon>
             </button>
           </div>
-          <div class="search-pane" *ngIf="isAddingWidget && dashboardWidgetSelectComponent" fxLayout="row">
-            <tb-widgets-bundle-search fxFlex
+          <div class="search-pane flex flex-row" *ngIf="isAddingWidget && dashboardWidgetSelectComponent">
+            <tb-widgets-bundle-search class="flex-1"
                                       [(ngModel)]="dashboardWidgetSelectComponent.search"
                                       placeholder="{{ ((!dashboardWidgetSelectComponent.widgetsBundle && dashboardWidgetSelectComponent.selectWidgetMode === 'bundles')
                                                         ? 'widgets-bundle.search' : 'widget.search') | translate }}">
             </tb-widgets-bundle-search>
           </div>
-          <div class="details-buttons" *ngIf="isAddingWidget" fxLayout="row" fxLayoutAlign="start center">
+          <div class="details-buttons flex flex-row justify-start items-center" *ngIf="isAddingWidget">
             <button mat-button type="button" (click)="importWidget($event)"
                     *ngIf="dashboardWidgetSelectComponent?.selectWidgetMode === 'bundles' && !dashboardWidgetSelectComponent?.widgetsBundle">
               <mat-icon>file_upload</mat-icon>{{ 'dashboard.import-widget' | translate }}</button>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html
index 5137f6128d..49047f08b1 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html
@@ -18,7 +18,7 @@
 <form (ngSubmit)="save()" style="width: 750px;">
   <mat-toolbar color="primary">
     <h2 translate>{{settings ? 'dashboard.settings' : 'layout.settings'}}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -58,7 +58,7 @@
             {{ 'dashboard.display-dashboard-logo' | translate }}
           </mat-slide-toggle>
         </div>
-        <tb-gallery-image-input fxFlex
+        <tb-gallery-image-input class="flex-1"
                                 label="{{'dashboard.dashboard-logo-image' | translate}}"
                                 formControlName="dashboardLogoUrl">
         </tb-gallery-image-input>
@@ -92,7 +92,7 @@
       </div>
       <mat-expansion-panel class="tb-settings">
         <mat-expansion-panel-header>
-          <mat-panel-description fxLayoutAlign="end" translate>
+          <mat-panel-description class="flex justify-end items-stretch" translate>
             dashboard.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
@@ -197,7 +197,7 @@
                           formControlName="backgroundColor">
           </tb-color-input>
         </div>
-        <tb-gallery-image-input fxFlex
+        <tb-gallery-image-input class="flex-1"
                                 label="{{'dashboard.background-image' | translate}}"
                                 formControlName="backgroundImageUrl">
         </tb-gallery-image-input>
@@ -244,7 +244,7 @@
       </div>
     </div>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html
index 1b38be7fdf..2f022764fd 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html
@@ -36,7 +36,7 @@
       [noData]="noWidgets">
     </tb-scroll-grid>
     <ng-template #widgetCard let-item="item">
-      <mat-card class="tb-widget-preview-card" appearance="raised" fxLayout="column" fxLayoutGap="8px" (click)="onWidgetClicked($event, item)">
+      <mat-card class="tb-widget-preview-card flex flex-col gap-2" appearance="raised" (click)="onWidgetClicked($event, item)">
         <div class="title-container">
           <div title="{{item.name}}" class="widget-title">
             {{item.name}}
@@ -56,8 +56,7 @@
       </mat-card>
     </ng-template>
     <ng-template #loadingWidgets>
-      <div fxLayout="column"
-           fxLayoutAlign="center center" class="tb-absolute-fill">
+      <div class="tb-absolute-fill flex flex-col justify-center items-center">
         <span class="mat-headline-5" style="padding-bottom: 20px;">
           {{ 'widget.loading-widgets' | translate }}
         </span>
@@ -65,9 +64,7 @@
       </div>
     </ng-template>
     <ng-template #noWidgets>
-        <span style="display: flex;"
-              fxLayoutAlign="center center"
-              class="mat-headline-5 tb-absolute-fill">{{(selectWidgetMode === 'bundles' ? 'widgets-bundle.empty' : 'widget.no-widgets-text') | translate}}</span>
+        <span class="mat-headline-5 tb-absolute-fill flex justify-center items-center">{{(selectWidgetMode === 'bundles' ? 'widgets-bundle.empty' : 'widget.no-widgets-text') | translate}}</span>
     </ng-template>
   </ng-template>
 
@@ -83,7 +80,7 @@
       [noData]="noWidgetBundles">
     </tb-scroll-grid>
     <ng-template #widgetsBundleCard let-item="item">
-      <mat-card class="tb-widget-preview-card" appearance="raised" fxLayout="column" fxLayoutGap="8px" (click)="selectBundle($event, item)">
+      <mat-card class="tb-widget-preview-card flex flex-col gap-2" appearance="raised" (click)="selectBundle($event, item)">
         <div class="title-container">
           <div title="{{item.name}}" class="widget-title">
             {{item.title}}
@@ -100,8 +97,7 @@
       </mat-card>
     </ng-template>
     <ng-template #loadingWidgetBundles>
-      <div fxLayout="column"
-           fxLayoutAlign="center center" class="tb-absolute-fill">
+      <div class="tb-absolute-fill flex flex-col justify-center items-center">
         <span class="mat-headline-5" style="padding-bottom: 20px;">
           {{ 'widgets-bundle.loading-widgets-bundles' | translate }}
         </span>
@@ -110,13 +106,11 @@
     </ng-template>
     <ng-template #noWidgetBundles>
         <span translate
-              style="display: flex;"
-              fxLayoutAlign="center center"
-              class="mat-headline-5 tb-absolute-fill">widgets-bundle.no-widgets-bundles-text</span>
+              class="mat-headline-5 tb-absolute-fill flex justify-center items-center">widgets-bundle.no-widgets-bundles-text</span>
     </ng-template>
   </ng-template>
   <ng-template #widgetLoadingCard>
-    <mat-card class="tb-widget-preview-card loading-cell" appearance="raised" fxLayout="column" fxLayoutGap="8px">
+    <mat-card class="tb-widget-preview-card loading-cell flex flex-col gap-2" appearance="raised">
       <div class="title-container">
       </div>
       <div class="preview-container">
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/edit-widget.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/edit-widget.component.html
index 9748558b67..da0f1903d6 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/edit-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/edit-widget.component.html
@@ -35,7 +35,7 @@
           {{ 'action.back' | translate }}
         </button>
         <button *ngIf="!previewMode"
-                fxHide.gt-sm
+                class="gt-sm:!hidden"
                 [disabled]="!widgetFormGroup.valid"
                 mat-button color="primary"
                 (click)="previewMode = true">
@@ -43,16 +43,16 @@
           {{ 'widget-config.preview' | translate }}
         </button>
       </div>
-      <div fxFlex.lt-md class="tb-widget-config-header-suffix" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="12px">
+      <div class="tb-widget-config-header-suffix lt-md:flex-1 flex flex-row justify-end items-center gap-3">
         <button *ngIf="!previewMode"
-                fxHide.lt-md
+                class="lt-md:!hidden"
                 [disabled]="!widgetFormGroup.valid"
                 mat-button color="primary"
                 (click)="previewMode = true">
           <mat-icon>visibility</mat-icon>
           {{ 'widget-config.preview' | translate }}
         </button>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
+        <div class="flex flex-row justify-start items-center gap-3">
           <button [disabled]="!widgetFormGroup.dirty"
             mat-stroked-button color="primary"
             (click)="onRevertWidgetConfig()">
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html
index 15b7ee173a..9381f47d19 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2 translate>layout.add-new-breakpoint</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           (click)="cancel()"
           type="button">
@@ -50,7 +50,7 @@
     </mat-form-field>
   </form>
 </div>
-<div mat-dialog-actions fxLayoutAlign="end center">
+<div mat-dialog-actions class="flex justify-end items-center">
   <button mat-button
           color="primary"
           type="button"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html
index 0442061e99..55bad44765 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" class="tb-progress-cover" fxLayoutAlign="center center"
+<div class="tb-progress-cover flex flex-col justify-center items-center"
   *ngIf="layoutCtx.widgets.isLoading()">
   <mat-spinner color="warn" mode="indeterminate" diameter="100">
   </mat-spinner>
@@ -23,11 +23,11 @@
 <div class="mat-content"
           style="position: relative; width: 100%; height: 100%;" [tb-hotkeys]="hotKeys"
           [cheatSheet]="dashboardCheatSheet"
-          [style.backgroundImage]="backgroundImage$ | async"
-          [ngStyle]="dashboardStyle">
-  <section *ngIf="layoutCtx.widgets.isEmpty()" fxLayoutAlign="center center"
-           style="display: flex; z-index: 1; pointer-events: none;"
-           class="mat-headline-5 tb-absolute-fill">
+          [style.background-image]="backgroundImage$ | async"
+          [style]="dashboardStyle">
+  <section *ngIf="layoutCtx.widgets.isEmpty()"
+           style="z-index: 1; pointer-events: none;"
+           class="mat-headline-5 tb-absolute-fill flex justify-center items-center">
     <span *ngIf="!isEdit" style="text-align: center;">
       {{'dashboard.no-widgets' | translate}}
     </span>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
index 71adbc91c8..5df31abb68 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="layoutsFormGroup" (ngSubmit)="save()">
   <mat-toolbar color="primary">
     <h2 translate>layout.manage</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
       (click)="cancel()"
             type="button">
@@ -80,7 +80,7 @@
             </ng-container>
           </div>
         </div>
-        <button mat-button fxFlex class="tb-add-breakpoint-button"
+        <button mat-button class="tb-add-breakpoint-button flex-1"
                 matTooltip="{{ 'layout.add-new-breakpoint' | translate }}"
                 matTooltipPosition="above"
                 color="primary"
@@ -92,25 +92,24 @@
       </div>
     </section>
     <ng-template #dividerLayout>
-    <div fxLayout="column" fxLayoutAlign="start center" fxLayoutGap="20px">
+    <div class="flex flex-col justify-start items-center gap-5">
       <mat-button-toggle-group aria-label="Select width value type"
                                formControlName="type"
-                               [fxShow]="isDividerLayout">
-        <mat-button-toggle fxFlex value="percentage">
+                               [class.!hidden]="!isDividerLayout">
+        <mat-button-toggle class="flex-1" value="percentage">
           {{ 'layout.percentage-width' | translate }}
         </mat-button-toggle>
-        <mat-button-toggle fxFlex value="fixed">
+        <mat-button-toggle class="flex-1" value="fixed">
           {{ 'layout.fixed-width' | translate }}
         </mat-button-toggle>
       </mat-button-toggle-group>
-      <div fxLayout="row" fxLayoutAlign="center center" class="tb-layout-preview">
-        <div fxLayout="row"
-             fxLayoutAlign="start center"
-             class="tb-layout-preview-container"
+      <div class="tb-layout-preview flex flex-row justify-center items-center">
+        <div class="tb-layout-preview-container flex flex-row justify-start items-center"
              #tooltip="matTooltip"
              matTooltip=""
              matTooltipPosition="below">
-          <div fxLayout="column" fxLayoutAlign="start center" fxFlex="{{ buttonFlexValue() }}" class="tb-layout-preview-container-main">
+          <div [style.flex-basis]="buttonFlexValue() + '%'" [style.max-width]="buttonFlexValue() + '%'"
+               class="tb-layout-preview-container-main flex-1 flex flex-col justify-start items-center">
             <button mat-icon-button
                     type="button"
                     matTooltip="{{ 'layout.settings' | translate }}"
@@ -118,25 +117,24 @@
                     (click)="openLayoutSettings('main')"
                     class="tb-layout-preview-element"
                     aria-label="Layout settings"
-                    [ngClass]="layoutButtonClass('main')">
+                    [class]="layoutButtonClass('main')">
               <mat-icon>settings</mat-icon>
             </button>
-            <button fxFlex
-                    type="button"
+            <button type="button"
                     mat-raised-button
                     color="primary"
-                    class="tb-layout-button"
+                    class="tb-layout-button flex-1"
                     (mouseover)="mainLayoutTooltip.show()"
                     (mouseleave)="mainLayoutTooltip.hide()"
                     (click)="setFixedLayout('main')"
-                    [ngClass]="layoutButtonClass('main', true)">
+                    [class]="layoutButtonClass('main', true)">
               <span [matTooltip]="layoutButtonText('main')"
                     #mainLayoutTooltip="matTooltip"
                     matTooltipPosition="above">
                 {{ (isDividerLayout ? 'layout.left' : 'layout.main')  | translate }}
               </span>
             </button>
-            <div fxFlex class="tb-layout-preview-element tb-layout-preview-input" *ngIf="showPreviewInputs('main')">
+            <div class="tb-layout-preview-element tb-layout-preview-input flex-1" *ngIf="showPreviewInputs('main')">
               <input *ngIf="layoutsFormGroup.get('type').value !== layoutWidthType.FIXED"
                      formControlName="leftWidthPercentage"
                      type="number"
@@ -154,7 +152,7 @@
                      required>
             </div>
           </div>
-          <div fxLayout="column" fxLayoutAlign="start center" fxFlex *ngIf="isDividerLayout" matTooltip="">
+          <div class="flex-1 flex flex-col justify-start items-center" *ngIf="isDividerLayout" matTooltip="">
             <button mat-icon-button
                     type="button"
                     matTooltip="{{ 'layout.settings' | translate }}"
@@ -162,25 +160,24 @@
                     (click)="openLayoutSettings('right')"
                     class="tb-layout-preview-element"
                     aria-label="Layout settings"
-                    [ngClass]="layoutButtonClass('right')">
+                    [class]="layoutButtonClass('right')">
               <mat-icon>settings</mat-icon>
             </button>
-            <button fxFlex
-                    type="button"
+            <button type="button"
                     mat-raised-button
                     color="primary"
-                    class="tb-layout-button tb-layout-button-right"
+                    class="tb-layout-button tb-layout-button-right flex-1"
                     (mouseover)="rightLayoutTooltip.show()"
                     (mouseleave)="rightLayoutTooltip.hide()"
                     (click)="setFixedLayout('right')"
-                    [ngClass]="layoutButtonClass('right')">
+                    [class]="layoutButtonClass('right')">
               <span [matTooltip]="layoutButtonText('right')"
                     #rightLayoutTooltip="matTooltip"
                     matTooltipPosition="above">
                 {{ 'layout.right' | translate }}
               </span>
             </button>
-            <div fxFlex class="tb-layout-preview-element tb-layout-preview-input" *ngIf="showPreviewInputs('right')">
+            <div class="tb-layout-preview-element tb-layout-preview-input flex-1" *ngIf="showPreviewInputs('right')">
               <input *ngIf="layoutsFormGroup.get('type').value !== layoutWidthType.FIXED"
                      formControlName="rightWidthPercentage"
                      type="number"
@@ -199,7 +196,7 @@
           </div>
         </div>
       </div>
-      <div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="8px" *ngIf="isDividerLayout" style="width: 80%">
+      <div class="flex flex-col justify-center items-center gap-2" *ngIf="isDividerLayout" style="width: 80%">
         <mat-slider *ngIf="layoutsFormGroup.get('type').value === layoutWidthType.PERCENTAGE"
                     step="1"
                     min="{{ layoutPercentageSize.MIN }}"
@@ -218,7 +215,7 @@
                     discrete
                     [displayWith]="formatSliderTooltipLabel.bind(this)"><input matSliderThumb formControlName="sliderFixed"/>
         </mat-slider>
-        <div fxLayout="row" fxLayoutAlign="space-between center" class="tb-hint tb-hint-group" style="width: 100%;">
+        <div class="tb-hint tb-hint-group flex flex-row justify-between items-center" style="width: 100%;">
           <label>
             {{layoutsFormGroup.get('type').value === layoutWidthType.PERCENTAGE ? layoutPercentageSize.MIN + '%' : layoutFixedSize.MIN + 'px'}}
           </label>
@@ -230,7 +227,7 @@
     </div>
     </ng-template>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button
             color="primary"
             type="button"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss
index 964d5177f0..e953d2187f 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss
@@ -30,7 +30,6 @@ $tb-warn: mat.m2-get-color-from-palette(map-get($tb-theme, warn), text);
   .tb-hint-group {
     padding: 0;
     margin-top: -14px;
-    display: block;
   }
 
   .tb-layout-preview {
@@ -182,6 +181,11 @@ $tb-warn: mat.m2-get-color-from-palette(map-get($tb-theme, warn), text);
     .mat-button-toggle {
       border: none !important;
     }
+    .mat-button-toggle-label-content {
+      .mat-pseudo-checkbox {
+        display: none;
+      }
+    }
   }
 }
 
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/move-widgets-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/move-widgets-dialog.component.html
index 1feeaacc75..e5cc2d07e7 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/move-widgets-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/move-widgets-dialog.component.html
@@ -18,7 +18,7 @@
 <form (ngSubmit)="move()">
   <mat-toolbar color="primary">
     <h2 translate>dashboard.move-all-widgets</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -30,7 +30,7 @@
   <div mat-dialog-content class="tb-form-panel no-border no-padding" [formGroup]="moveWidgetsFormGroup">
     <div class="tb-form-row space-between column-xs">
       <div translate>dashboard.move-by</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row justify-start items-center gap-2">
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input required matInput formControlName="cols"
                  type="number" step="1" placeholder="{{ 'widget-config.set' | translate }}">
@@ -44,7 +44,7 @@
       </div>
     </div>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.html
index e8f586635f..f5d79a08d9 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="stateFormGroup" (ngSubmit)="save()" style="min-width: 480px;">
   <mat-toolbar color="primary">
     <h2 translate>{{ isAdd ? 'dashboard.add-state' : 'dashboard.edit-state' }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -28,7 +28,7 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div mat-dialog-content>
-    <fieldset [disabled]="isLoading$ | async" fxLayout="column">
+    <fieldset [disabled]="isLoading$ | async" class="flex flex-col">
       <mat-form-field class="mat-block">
         <mat-label translate>dashboard.state-name</mat-label>
         <input required matInput formControlName="name">
@@ -51,7 +51,7 @@
       </mat-checkbox>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.html
index 2bcf03726e..03604d6d94 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-select class="default-state-controller" [fxShow]="displayStateSelection()"
+<mat-select class="default-state-controller" [class.!hidden]="!displayStateSelection()"
     [(ngModel)]="stateObject[0].id" (ngModelChange)="selectedStateIdChanged()">
   <mat-option *ngFor="let stateKv of states | keyvalue" [value]="stateKv.key">
     {{getStateName(stateKv.key, stateKv.value)}}
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/entity-state-controller.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/states/entity-state-controller.component.html
index 27ab2e094d..05c4895987 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/entity-state-controller.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/entity-state-controller.component.html
@@ -16,11 +16,12 @@
 
 -->
 <div class="entity-state-controller">
-  <div *ngIf="!isMobile || stateObject.length === 1" fxLayout="row" fxLayoutAlign="start center">
-        <span *ngFor="let state of stateObject; index as i; last as isLast" class="state-entry" [ngStyle]="{fontWeight: isLast ? 'bold' : 'normal',
-                         cursor: isLast ? 'default' : 'pointer'}" (click)="navigatePrevState(i)">
+  <div *ngIf="!isMobile || stateObject.length === 1" class="flex flex-row justify-start items-center">
+        <span *ngFor="let state of stateObject; index as i; last as isLast" class="state-entry"
+              [style.font-weight]="isLast ? 'bold' : 'normal'"
+              [style.cursor]="isLast ? 'default' : 'pointer'" (click)="navigatePrevState(i)">
             {{getStateName(i)}}
-          <span class='state-divider' [fxHide]="isLast"> > </span>
+          <span class='state-divider' [class.!hidden]="isLast"> > </span>
         </span>
   </div>
   <mat-select *ngIf="isMobile && stateObject.length > 1"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
index 55a9f8e42a..dd05f277ef 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="statesFormGroup" (ngSubmit)="save()" style="width: 750px;">
   <mat-toolbar color="primary">
     <h2 translate>dashboard.manage-states</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -31,11 +31,11 @@
     <fieldset [disabled]="isLoading$ | async">
       <div class="manage-dashboard-states">
         <div class="tb-entity-table">
-          <div fxLayout="column" class="tb-entity-table-content">
-            <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode">
+          <div class="tb-entity-table-content flex flex-col">
+            <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode">
               <div class="mat-toolbar-tools">
                 <span class="tb-entity-table-title" translate>dashboard.states</span>
-                <span fxFlex></span>
+                <span class="flex-1"></span>
                 <button mat-icon-button [disabled]="isLoading$ | async"
                         type="button"
                         (click)="addState($event)"
@@ -51,7 +51,7 @@
                 </button>
               </div>
             </mat-toolbar>
-            <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode">
+            <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode">
               <div class="mat-toolbar-tools">
                 <button mat-icon-button
                         type="button"
@@ -59,7 +59,7 @@
                         matTooltipPosition="above">
                   <mat-icon>search</mat-icon>
                 </button>
-                <mat-form-field fxFlex>
+                <mat-form-field class="flex-1">
                   <mat-label>&nbsp;</mat-label>
                   <input #searchInput matInput
                          [(ngModel)]="pageLink.textSearch"
@@ -99,7 +99,7 @@
                   <mat-header-cell *matHeaderCellDef style="min-width: 120px; max-width: 120px; width: 120px">
                   </mat-header-cell>
                   <mat-cell *matCellDef="let state">
-                    <div fxFlex fxLayout="row">
+                    <div class="flex-1 flex flex-row">
                       <button mat-icon-button [disabled]="isLoading$ | async"
                               type="button"
                               matTooltip="{{ 'dashboard.edit-state' | translate }}"
@@ -114,7 +114,7 @@
                               (click)="duplicateState($event, state)">
                         <mat-icon>content_copy</mat-icon>
                       </button>
-                      <button [fxShow]="!state.root" mat-icon-button [disabled]="isLoading$ | async"
+                      <button [class.!hidden]="state.root" mat-icon-button [disabled]="isLoading$ | async"
                               type="button"
                               matTooltip="{{ 'dashboard.delete-state' | translate }}"
                               matTooltipPosition="above"
@@ -128,9 +128,8 @@
                 <mat-row class="mat-row-select"
                          *matRowDef="let state; columns: displayedColumns;"></mat-row>
               </table>
-              <span [fxShow]="dataSource.isEmpty() | async"
-                    fxLayoutAlign="center center"
-                    class="no-data-found" translate>{{ 'dashboard.no-states-text' }}</span>
+              <span [class.!hidden]="(dataSource.isEmpty() | async) === false"
+                    class="no-data-found flex justify-center items-center" translate>{{ 'dashboard.no-states-text' }}</span>
             </div>
             <mat-divider></mat-divider>
             <mat-paginator [length]="dataSource.total() | async"
@@ -142,7 +141,7 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/widget-types-panel.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/widget-types-panel.component.html
index ede082dd6d..9a10b78e06 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/widget-types-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/widget-types-panel.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" class="mat-content mat-padding">
+<div class="mat-content mat-padding flex flex-col">
   <mat-checkbox style="padding-bottom: 8px;" [(ngModel)]="type.display" *ngFor="let type of types"
                 (ngModelChange)="update()">
     {{ 'widget.' + type.type | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html
index 16498100ae..3df5f6a9df 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html
@@ -15,15 +15,15 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="column" class="tb-progress-cover" fxLayoutAlign="center center"
+<div class="tb-progress-cover flex-1 flex flex-col justify-center items-center"
      [style]="dashboardStyle"
-     [style.backgroundImage]="backgroundImage"
-     [fxShow]="(isLoading$ | async) && !ignoreLoading && !isEdit">
+     [style.background-image]="backgroundImage"
+     [class.!hidden]="(isLoading$ | async) === false || ignoreLoading || isEdit">
   <mat-spinner color="warn" mode="indeterminate" diameter="100">
   </mat-spinner>
 </div>
 <div id="gridster-parent"
-     fxFlex class="tb-dashboard-content" [class.autofill-height]="isAutofillHeight()"
+     class="tb-dashboard-content flex-1" [class.autofill-height]="isAutofillHeight()"
                 [class.center-vertical]="centerVertical"
                 [class.center-horizontal]="centerHorizontal"
                 (mousedown)="onDashboardMouseDown($event)"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard/layout-button.scss b/ui-ngx/src/app/modules/home/components/dashboard/layout-button.scss
index d85a9ab64c..dd09d6e7b2 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard/layout-button.scss
+++ b/ui-ngx/src/app/modules/home/components/dashboard/layout-button.scss
@@ -30,3 +30,11 @@
     }
   }
 }
+
+:host ::ng-deep {
+  button.tb-layout-button {
+    .mdc-button__label {
+      line-height: 36px;
+    }
+  }
+}
diff --git a/ui-ngx/src/app/modules/home/components/dashboard/select-target-layout-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard/select-target-layout-dialog.component.html
index 92210ec057..ace5ed1bf6 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard/select-target-layout-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard/select-target-layout-dialog.component.html
@@ -18,7 +18,7 @@
 <form>
   <mat-toolbar color="primary">
     <h2 translate>layout.select</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
       (click)="cancel()"
             type="button">
@@ -28,19 +28,17 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div mat-dialog-content>
-    <fieldset [disabled]="isLoading$ | async" fxLayout="column" fxLayoutGap="8px">
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <button fxFlex
-                mat-raised-button color="primary"
+    <fieldset [disabled]="isLoading$ | async" class="flex flex-col gap-2">
+      <div class="flex flex-row justify-start items-center gap-2">
+        <button mat-raised-button color="primary"
                 type="button"
-                class="tb-layout-button"
+                class="tb-layout-button flex-1"
                 (click)="selectLayout('main')">
           <span translate>layout.main</span>
         </button>
-        <button fxFlex
-                mat-raised-button color="primary"
+        <button mat-raised-button color="primary"
                 type="button"
-                class="tb-layout-button"
+                class="tb-layout-button flex-1"
                 (click)="selectLayout('right')">
           <span translate>layout.right</span>
         </button>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard/select-target-state-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard/select-target-state-dialog.component.html
index 817e4b777b..6e6c20b546 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard/select-target-state-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard/select-target-state-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="stateFormGroup" (ngSubmit)="save()">
   <mat-toolbar color="primary">
     <h2 translate>dashboard.select-state</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -28,7 +28,7 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div mat-dialog-content>
-    <fieldset [disabled]="isLoading$ | async" fxLayout="column">
+    <fieldset [disabled]="isLoading$ | async" class="flex flex-col">
       <mat-form-field class="mat-block">
         <mat-label translate>dashboard.state</mat-label>
         <mat-select required formControlName="stateId">
@@ -39,7 +39,7 @@
       </mat-form-field>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/details-panel.component.html b/ui-ngx/src/app/modules/home/components/details-panel.component.html
index 2483a5b5e3..398c9b0645 100644
--- a/ui-ngx/src/app/modules/home/components/details-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/details-panel.component.html
@@ -16,10 +16,10 @@
 
 -->
 <header>
-  <mat-toolbar class="details-toolbar" color="primary" [ngStyle]="{height: headerHeightPx+'px'}">
-    <div class="mat-toolbar-tools" fxLayout="row" fxLayoutAlign="start center" style="height: 100%;">
-      <div class="mat-toolbar-tools tb-details-title-header" fxFlex fxLayout="column" fxLayoutAlign="start start" [fxHide]="showSearchPane">
-        <div class="tb-details-title" fxLayout="row" fxLayoutAlign="start center">
+  <mat-toolbar class="details-toolbar" color="primary" [style.height]="headerHeightPx+'px'">
+    <div class="mat-toolbar-tools flex flex-row justify-start items-center" style="height: 100%;">
+      <div class="mat-toolbar-tools tb-details-title-header flex flex-1 flex-col justify-start items-start" [class.!hidden]="showSearchPane">
+        <div class="tb-details-title flex flex-row justify-start items-center">
           <ng-content select=".prefix-title-buttons"></ng-content>
           <span class="tb-details-title-text">{{ headerTitle }}</span>
         </div>
@@ -28,7 +28,7 @@
           <ng-content select=".header-pane"></ng-content>
         </span>
       </div>
-      <div *ngIf="isShowSearch" [fxHide]="!showSearchPane" fxLayout="row" fxLayoutAlign="start center" style="width: 100%;">
+      <div *ngIf="isShowSearch" [class.!hidden]="!showSearchPane" class="flex flex-row justify-start items-center" style="width: 100%;">
         <button mat-icon-button (click)="onToggleSearch()">
           <mat-icon class="material-icons">arrow_back</mat-icon>
         </button>
@@ -44,13 +44,13 @@
         <mat-icon class="material-icons">close</mat-icon>
       </button>
     </div>
-    <section *ngIf="!isReadOnly" fxLayout="row" class="layout-wrap tb-header-buttons">
+    <section *ngIf="!isReadOnly" class="flex flex-row layout-wrap tb-header-buttons">
       <button [disabled]="(isLoading$ | async) || theForm?.invalid || !theForm?.dirty"
               mat-fab
               matTooltip="{{ 'action.apply-changes' | translate }}"
               matTooltipPosition="above"
               color="accent" class="tb-btn-header mat-fab-bottom-right"
-              [ngClass]="{'tb-hide': !isEdit}"
+              [class.tb-hide]="!isEdit"
               (click)="onApplyDetails()">
         <mat-icon class="material-icons">done</mat-icon>
       </button>
@@ -65,6 +65,6 @@
     </section>
   </mat-toolbar>
 </header>
-<div fxFlex class="mat-content" [ngStyle]="{backgroundColor: backgroundColor}">
+<div class="mat-content flex-1" [style.background-color]="backgroundColor">
   <ng-content></ng-content>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/router-tabs.component.html b/ui-ngx/src/app/modules/home/components/router-tabs.component.html
index 82026236e9..ed9edeb3f6 100644
--- a/ui-ngx/src/app/modules/home/components/router-tabs.component.html
+++ b/ui-ngx/src/app/modules/home/components/router-tabs.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="column" style="width: 100%;">
-  <div fxLayout="row" style="width: 100%;">
-    <nav fxFlex *ngIf="!routerOutlet?.activatedRouteData?.hideTabs && !hideCurrentTabs && (tabs$ | async).length > 1" mat-tab-nav-bar mat-stretch-tabs="false" class="tb-router-tabs" [tabPanel]="tabPanel">
+<div class="flex flex-1 flex-col" style="width: 100%;">
+  <div class="flex flex-row" style="width: 100%;">
+    <nav *ngIf="!routerOutlet?.activatedRouteData?.hideTabs && !hideCurrentTabs && (tabs$ | async).length > 1" mat-tab-nav-bar mat-stretch-tabs="false" class="tb-router-tabs flex-1" [tabPanel]="tabPanel">
       <a *ngFor="let tab of tabs$ | async"
          routerLink="{{tab.path}}"
          replaceUrl="{{ replaceUrl }}"
@@ -31,7 +31,7 @@
     </nav>
     <tb-anchor #tabsHeaderComponent></tb-anchor>
   </div>
-  <mat-tab-nav-panel #tabPanel fxFlex fxLayout="column" class="tb-router-tabs-content">
+  <mat-tab-nav-panel #tabPanel class="tb-router-tabs-content flex flex-1 flex-col">
     <router-outlet #routerOutlet="outlet" (activate)="activeComponentChanged($event)"></router-outlet>
   </mat-tab-nav-panel>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/notification-type-filter-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/cards/notification-type-filter-panel.component.html
index 00ec196552..3637a502bd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/notification-type-filter-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/notification-type-filter-panel.component.html
@@ -18,7 +18,7 @@
 <form fxLayout="column" fxFlex class="mat-content mat-padding" (ngSubmit)="update()">
   <div class="tb-form-panel no-padding">
     <div class="tb-form-row column-xs">
-      <div class="fixed-title-width" ngClass.xs="filters-title-mobile" translate>widgets.notification.notification-types</div>
+      <div class="fixed-title-width" translate>widgets.notification.notification-types</div>
       <mat-form-field floatLabel="auto" appearance="outline" subscriptSizing="dynamic" class="flex fb-chips">
         <mat-chip-grid #chipList>
           <mat-chip-row
diff --git a/ui-ngx/src/app/modules/home/home.component.html b/ui-ngx/src/app/modules/home/home.component.html
index bab9c76824..78ac52ed97 100644
--- a/ui-ngx/src/app/modules/home/home.component.html
+++ b/ui-ngx/src/app/modules/home/home.component.html
@@ -36,23 +36,18 @@
   <mat-sidenav-content>
     <div class="flex flex-col" role="main" style="height: 100%;">
       <mat-toolbar color="primary" class="tb-primary-toolbar flex flex-row">
-        <button [class]="{
-                  '!hidden': forceFullscreen,
-                  'tb-invisible': displaySearchMode()
-                }"
-                class="gt-sm:hidden" (click)="sidenav.toggle()">
+        <button mat-icon-button id="main"
+                [class.!hidden]="forceFullscreen || displaySearchMode()"
+                class="gt-sm:!hidden" (click)="sidenav.toggle()">
           <mat-icon class="material-icons">menu</mat-icon>
         </button>
         <button mat-icon-button
-                [class]="{
-                  '!hidden': !forceFullscreen,
-                  'tb-invisible': displaySearchMode()
-                }"
+                [class.!hidden]="!forceFullscreen || displaySearchMode"
                 (click)="goBack()">
           <mat-icon class="material-icons">arrow_back</mat-icon>
         </button>
         <button mat-icon-button
-                [class.tb-invisible]="!displaySearchMode()"
+                [class.!hidden]="!displaySearchMode()"
                 (click)="closeSearch()">
           <mat-icon class="material-icons">arrow_back</mat-icon>
         </button>
diff --git a/ui-ngx/src/app/modules/home/home.component.scss b/ui-ngx/src/app/modules/home/home.component.scss
index 52a41ff9e3..7b49782090 100644
--- a/ui-ngx/src/app/modules/home/home.component.scss
+++ b/ui-ngx/src/app/modules/home/home.component.scss
@@ -18,10 +18,6 @@
   width: 100%;
   height: 100%;
 
-  .tb-invisible {
-    display: none !important;
-  }
-
   mat-sidenav-container {
     flex: 1;
   }
diff --git a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
index 3d488e9229..3a43f97bad 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
+++ b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
@@ -18,10 +18,10 @@
 <a mat-button class="tb-button-toggle" (click)="toggleSection($event)">
   <tb-icon matButtonIcon *ngIf="section.icon !== null">{{section.icon}}</tb-icon>
   <span>{{section.customTranslate ? (section.name | customTranslate) : (section.name | translate)}}</span>
-  <span class=" pull-right fa fa-chevron-down tb-toggle-icon"
-        [ngClass]="{'tb-toggled' : section.opened}"></span>
+  <span class="pull-right fa fa-chevron-down tb-toggle-icon"
+        [class.tb-toggled]="section.opened"></span>
 </a>
-<ul id="docs-menu-{{section.name | nospace}}" class="tb-menu-toggle-list" [ngStyle]="{height: sectionHeight()}">
+<ul id="docs-menu-{{section.name | nospace}}" class="tb-menu-toggle-list" [style.height]="sectionHeight()">
   <li *ngFor="let page of section.pages; trackBy: trackBySectionPages">
     <tb-menu-link [section]="page"></tb-menu-link>
   </li>
diff --git a/ui-ngx/src/app/shared/components/button/copy-button.component.html b/ui-ngx/src/app/shared/components/button/copy-button.component.html
index 2bdc9cc79d..751cc04e9e 100644
--- a/ui-ngx/src/app/shared/components/button/copy-button.component.html
+++ b/ui-ngx/src/app/shared/components/button/copy-button.component.html
@@ -17,16 +17,16 @@
 -->
 <button mat-icon-button
         type="button"
-        [ngClass]="{'mini-button': miniButton}"
+        [class.mini-button]="miniButton"
         [color]="color"
         [disabled]="disabled"
         [matTooltip]="matTooltipText"
         [matTooltipPosition]="matTooltipPosition"
         (click)="copy($event)">
-  <tb-icon [ngStyle]="style" *ngIf="!copied; else copiedTemplate">
+  <tb-icon [style]="style" *ngIf="!copied; else copiedTemplate">
     {{  icon || mdiIcon }}
   </tb-icon>
   <ng-template #copiedTemplate>
-    <mat-icon [ngStyle]="style" class="copied">done</mat-icon>
+    <mat-icon [style]="style" class="copied">done</mat-icon>
   </ng-template>
 </button>
diff --git a/ui-ngx/src/app/shared/components/cheatsheet.component.ts b/ui-ngx/src/app/shared/components/cheatsheet.component.ts
index d3cf2a5cee..d9ed4c6c8d 100644
--- a/ui-ngx/src/app/shared/components/cheatsheet.component.ts
+++ b/ui-ngx/src/app/shared/components/cheatsheet.component.ts
@@ -114,7 +114,7 @@ import Mousetrap from 'mousetrap';
     font-size: 1.2em;
   }
 }  `],
-  template : `<div tabindex="-1" class="tb-hotkeys-container fade" [ngClass]="{'in': helpVisible}" style="display:none"><div class="tb-hotkeys">
+  template : `<div tabindex="-1" class="tb-hotkeys-container fade" [class.in]="helpVisible" style="display:none"><div class="tb-hotkeys">
   <h4 class="tb-hotkeys-title">{{ title }}</h4>
   <table *ngIf="helpVisible"><tbody>
     <tr *ngFor="let hotkey of hotkeysList">
diff --git a/ui-ngx/src/app/shared/components/color-input.component.html b/ui-ngx/src/app/shared/components/color-input.component.html
index d57824b443..bf53875b4c 100644
--- a/ui-ngx/src/app/shared/components/color-input.component.html
+++ b/ui-ngx/src/app/shared/components/color-input.component.html
@@ -21,7 +21,7 @@
     <span *ngIf="label">{{label}}</span>
   </mat-label>
   <div matPrefix class="tb-color-preview" (click)="!disabled && showColorPicker($event)">
-    <div class="tb-color-result" [ngStyle]="{background: colorFormGroup.get('color').value}"></div>
+    <div class="tb-color-result" [style.background]="colorFormGroup.get('color').value"></div>
   </div>
   <input matInput formControlName="color" (keydown)="$event.preventDefault();" (click)="openOnInput && showColorPicker($event)" [required]="required">
   <button *ngIf="colorClearButton && !disabled"
@@ -38,11 +38,11 @@
   <button type="button"
           mat-stroked-button
           class="tb-box-button"
-          [ngClass]="{'button-no-border': noBorder}"
+          [class.button-no-border]="noBorder"
           [disabled]="disabled"
           #matButton
           (click)="openColorPickerPopup($event, matButton._elementRef)">
-    <div class="tb-color-preview no-margin box" [ngClass]="{'disabled': disabled}">
+    <div class="tb-color-preview no-margin box" [class.disabled]="disabled">
       <div class="tb-color-result" [style]="!disabled ? {background: colorFormGroup.get('color').value} : {}"></div>
     </div>
   </button>
diff --git a/ui-ngx/src/app/shared/components/entity/entity-list.component.html b/ui-ngx/src/app/shared/components/entity/entity-list.component.html
index bd539911c8..ce55412ad7 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-list.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-list.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="entityListFormGroup" class="mat-block" [ngClass]="{'tb-chip-list': !labelText}" [subscriptSizing]="subscriptSizing">
+<mat-form-field [formGroup]="entityListFormGroup" class="mat-block" [class.tb-chip-list]="!labelText" [subscriptSizing]="subscriptSizing">
   <mat-label *ngIf="labelText">{{ labelText }}</mat-label>
   <mat-chip-grid #chipList formControlName="entities">
     <mat-chip-row
diff --git a/ui-ngx/src/app/shared/components/help-popup.component.html b/ui-ngx/src/app/shared/components/help-popup.component.html
index b2e4a81be3..8f2d15e69b 100644
--- a/ui-ngx/src/app/shared/components/help-popup.component.html
+++ b/ui-ngx/src/app/shared/components/help-popup.component.html
@@ -44,7 +44,7 @@
           <span [style]="triggerStyle" [innerHTML]="triggerSafeHtml"></span>
         </ng-container>
         <mat-icon *ngIf="(!popoverVisible || popoverReady)"
-                  [ngClass]="hintMode ? 'tb-mat-12' : 'tb-mat-16'">open_in_new</mat-icon>
+                  [class]="hintMode ? 'tb-mat-12' : 'tb-mat-16'">open_in_new</mat-icon>
         <mat-spinner *ngIf="popoverVisible && !popoverReady" mode="indeterminate" [diameter]="hintMode ? 12 : 16" strokeWidth="2"></mat-spinner>
       </span>
     </button>
diff --git a/ui-ngx/src/app/shared/components/image-input.component.html b/ui-ngx/src/app/shared/components/image-input.component.html
index 3b7130b634..f2ab8a9f7b 100644
--- a/ui-ngx/src/app/shared/components/image-input.component.html
+++ b/ui-ngx/src/app/shared/components/image-input.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div class="tb-container">
-  <label class="tb-title" *ngIf="label" [ngClass]="{'tb-error': !disabled && (required && !safeImageUrl), 'tb-required': !disabled && required}">{{label}}</label>
+  <label class="tb-title" *ngIf="label" [class]="{'tb-error': !disabled && (required && !safeImageUrl), 'tb-required': !disabled && required}">{{label}}</label>
   <ng-container #flow="flow"
                 [flowConfig]="{singleFile: true, allowDuplicateUploads: true}">
     <div class="tb-image-select-container">
diff --git a/ui-ngx/src/app/shared/components/led-light.component.html b/ui-ngx/src/app/shared/components/led-light.component.html
index 4f197671fb..ca8dc6e86a 100644
--- a/ui-ngx/src/app/shared/components/led-light.component.html
+++ b/ui-ngx/src/app/shared/components/led-light.component.html
@@ -15,4 +15,4 @@
     limitations under the License.
 
 -->
-<div id="canvas_container" [ngStyle]="{width: size + 'px', height: size + 'px'}"></div>
+<div id="canvas_container" [style.width]="size + 'px'" [style.height]="size + 'px'"></div>
diff --git a/ui-ngx/src/app/shared/components/markdown.component.ts b/ui-ngx/src/app/shared/components/markdown.component.ts
index 6ff0c4d48c..667b973d6d 100644
--- a/ui-ngx/src/app/shared/components/markdown.component.ts
+++ b/ui-ngx/src/app/shared/components/markdown.component.ts
@@ -113,7 +113,7 @@ export class TbMarkdownComponent implements OnChanges {
     if (this.markdownClass) {
       markdownClass += ` ${this.markdownClass}`;
     }
-    let template = `<div [ngStyle]="style" class="${markdownClass}">${compiled}</div>`;
+    let template = `<div [style]="style" class="${markdownClass}">${compiled}</div>`;
     if (this.containerClass) {
       template = `<div class="${this.containerClass}" style="width: 100%; height: 100%;">${template}</div>`;
     }
diff --git a/ui-ngx/src/app/shared/components/notification/notification.component.scss b/ui-ngx/src/app/shared/components/notification/notification.component.scss
index 044680109d..23f3f99047 100644
--- a/ui-ngx/src/app/shared/components/notification/notification.component.scss
+++ b/ui-ngx/src/app/shared/components/notification/notification.component.scss
@@ -17,7 +17,6 @@
 
   .notification {
     padding: 10px 0 10px 10px;
-    display: block;
     border: 1px solid;
     border-radius: 4px;
     margin: 4px;
diff --git a/ui-ngx/src/app/shared/components/popover.component.ts b/ui-ngx/src/app/shared/components/popover.component.ts
index f686f5d7a5..32a548ce33 100644
--- a/ui-ngx/src/app/shared/components/popover.component.ts
+++ b/ui-ngx/src/app/shared/components/popover.component.ts
@@ -328,17 +328,17 @@ export class TbPopoverDirective implements OnChanges, OnDestroy, AfterViewInit {
           class="tb-popover"
           [class.strict-position]="strictPosition"
           [class.tb-popover-rtl]="dir === 'rtl'"
-          [ngClass]="classMap"
-          [ngStyle]="tbOverlayStyle"
+          [class]="classMap"
+          [style]="tbOverlayStyle"
         >
           <div class="tb-popover-content">
             <div class="tb-popover-arrow">
               <span class="tb-popover-arrow-content"></span>
             </div>
-            <div class="tb-popover-inner" [ngStyle]="tbPopoverInnerStyle" role="tooltip">
+            <div class="tb-popover-inner" [style]="tbPopoverInnerStyle" role="tooltip">
               <div *ngIf="tbShowCloseButton" class="tb-popover-close-button" (click)="closeButtonClick($event)">×</div>
               <div style="width: 100%; height: 100%;">
-                <div class="tb-popover-inner-content"  [ngStyle]="tbPopoverInnerContentStyle"
+                <div class="tb-popover-inner-content"  [style]="tbPopoverInnerContentStyle"
                      [class.strict-position]="strictPosition">
                   <ng-container *ngIf="tbContent">
                     <ng-container *tbStringTemplateOutlet="tbContent; context: tbComponentContext">
diff --git a/ui-ngx/src/app/shared/components/tb-error.component.ts b/ui-ngx/src/app/shared/components/tb-error.component.ts
index 3322e978fa..b6c94bf483 100644
--- a/ui-ngx/src/app/shared/components/tb-error.component.ts
+++ b/ui-ngx/src/app/shared/components/tb-error.component.ts
@@ -21,7 +21,7 @@ import { coerceBoolean } from '@shared/decorators/coercion';
 @Component({
   selector: 'tb-error',
   template: `
-    <div [@animation]="state" [ngStyle]="{marginTop: noMargin ? '0' : '0.5rem', fontSize: '.75rem'}">
+    <div [@animation]="state" [style.margin-top]="noMargin ? '0' : '0.5rem'" style="font-size: .75rem">
       <mat-error>
         {{message}}
       </mat-error>
diff --git a/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html b/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html
index 3e34bc1c86..ca7894c010 100644
--- a/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html
+++ b/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html
@@ -16,14 +16,14 @@
 
 -->
 <div class="trip-animation-control-panel">
-    <div fxFlex fxLayout="row" fxFlexAlign="center">
+    <div class="flex flex-row">
         <button mat-icon-button class="mat-icon-button" aria-label="Start" (click)="moveStart()">
-            <mat-icon class="material-icons" [ngStyle]="{'color': settings.buttonColor}">fast_rewind</mat-icon>
+            <mat-icon class="material-icons" [style.color]="settings.buttonColor">fast_rewind</mat-icon>
         </button>
         <button mat-icon-button class="mat-icon-button" aria-label="Previous" (click)="movePrev()">
-            <mat-icon class="material-icons" [ngStyle]="{'color': settings.buttonColor}">skip_previous</mat-icon>
+            <mat-icon class="material-icons" [style.color]="settings.buttonColor">skip_previous</mat-icon>
         </button>
-        <div fxLayout="column" fxFlex="100">
+        <div class="flex flex-col flex-[1_1_100%]">
             <mat-slider [min]="minTimeIndex" [max]="maxTimeIndex" #ngSlider><input matSliderThumb [(ngModel)]="index"  (input)="changeIndex({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value}.value)" #ngSliderThumb="matSliderThumb" />
             </mat-slider>
             <div class="panel-timer">
@@ -32,18 +32,18 @@
             </div>
         </div>
         <button mat-icon-button class="mat-icon-button" aria-label="Next" (click)="moveNext()">
-            <mat-icon class="material-icons" [ngStyle]="{'color': settings.buttonColor}">skip_next</mat-icon>
+            <mat-icon class="material-icons" [style.color]="settings.buttonColor">skip_next</mat-icon>
         </button>
         <button mat-icon-button class="mat-icon-button" aria-label="End" (click)="moveEnd()">
-            <mat-icon class="material-icons" [ngStyle]="{'color': settings.buttonColor}">fast_forward</mat-icon>
+            <mat-icon class="material-icons" [style.color]="settings.buttonColor">fast_forward</mat-icon>
         </button>
         <button mat-icon-button class="mat-icon-button" *ngIf="!playing" (click)="play()" aria-label="Play">
-            <mat-icon class="material-icons" [ngStyle]="{'color': settings.buttonColor}">
+            <mat-icon class="material-icons" [style.color]="settings.buttonColor">
                 play_circle_outline
             </mat-icon>
         </button>
         <button mat-icon-button class="mat-icon-button" *ngIf="playing" (click)="pause()" aria-label="Stop">
-            <mat-icon class="material-icons" [ngStyle]="{'color': settings.buttonColor}">
+            <mat-icon class="material-icons" [style.color]="settings.buttonColor">
                 pause_circle_outline
             </mat-icon>
         </button>
diff --git a/ui-ngx/src/app/shared/import-export/export-widgets-bundle-dialog.component.html b/ui-ngx/src/app/shared/import-export/export-widgets-bundle-dialog.component.html
index 27aaeec20b..280035075f 100644
--- a/ui-ngx/src/app/shared/import-export/export-widgets-bundle-dialog.component.html
+++ b/ui-ngx/src/app/shared/import-export/export-widgets-bundle-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2 translate>widgets-bundle.export</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           (click)="cancel()"
           type="button">
@@ -31,7 +31,7 @@
     <mat-checkbox [formControl]="exportWidgetsFormControl">{{ 'widgets-bundle.export-widgets-bundle-widgets-prompt' | translate }}</mat-checkbox>
   </fieldset>
 </div>
-<div mat-dialog-actions fxLayoutAlign="end center">
+<div mat-dialog-actions class="flex justify-end items-center">
   <button mat-button color="primary"
           type="button"
           [disabled]="(isLoading$ | async) && !ignoreLoading"
diff --git a/ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html b/ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html
index 9a5805a233..f102723d9d 100644
--- a/ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html
+++ b/ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html
@@ -16,9 +16,9 @@
 
 -->
 <form>
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2 translate>{{ importTitle }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <div [tb-help]="'entitiesImport'"></div>
     <button mat-icon-button
             (click)="cancel()"
@@ -44,7 +44,7 @@
             </tb-file-input>
           </fieldset>
         </form>
-        <div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="20px">
+        <div class="flex flex-row justify-end items-center gap-5">
           <button mat-button
                   [disabled]="(isLoading$ | async)"
                   (click)="cancel()">{{ 'action.cancel' | translate }}</button>
@@ -57,7 +57,7 @@
       <mat-step [stepControl]="importParametersFormGroup">
         <form [formGroup]="importParametersFormGroup">
           <ng-template matStepLabel>{{ 'import.stepper-text.configuration' | translate }}</ng-template>
-          <fieldset [disabled]="isLoading$ | async" fxLayout="column">
+          <fieldset [disabled]="isLoading$ | async" class="flex flex-col">
             <mat-form-field class="mat-block">
               <mat-label translate>import.csv-delimiter</mat-label>
               <mat-select required formControlName="delim">
@@ -66,7 +66,7 @@
                 </mat-option>
               </mat-select>
             </mat-form-field>
-            <div fxLayout="column" fxLayoutGap="12px">
+            <div class="flex flex-col gap-3">
               <mat-checkbox formControlName="isHeader">
                 {{ 'import.csv-first-line-header' | translate }}
               </mat-checkbox>
@@ -76,11 +76,11 @@
             </div>
           </fieldset>
         </form>
-        <div fxLayout="row wrap" fxLayoutAlign="space-between center">
+        <div class="flex flex-row flex-wrap justify-between items-center">
           <button mat-button
                   [disabled]="(isLoading$ | async)"
                   (click)="previousStep()">{{ 'action.back' | translate }}</button>
-          <div fxLayout="row wrap" fxLayoutGap="20px">
+          <div class="flex flex-row flex-wrap gap-5">
             <button mat-button
                     [disabled]="(isLoading$ | async)"
                     (click)="cancel()">{{ 'action.cancel' | translate }}</button>
@@ -96,11 +96,11 @@
           <ng-template matStepLabel>{{ 'import.stepper-text.column-type' | translate }}</ng-template>
           <tb-table-columns-assignment #columnsAssignmentComponent formControlName="columnsParam" [entityType]="entityType"></tb-table-columns-assignment>
         </form>
-        <div fxLayout="row wrap" fxLayoutAlign="space-between center">
+        <div class="flex flex-row flex-wrap justify-between items-center">
           <button mat-button
                   [disabled]="(isLoading$ | async)"
                   (click)="previousStep()">{{ 'action.back' | translate }}</button>
-          <div fxLayout="row wrap" fxLayoutGap="20px">
+          <div class="flex flex-row flex-wrap gap-5">
             <button mat-button
                     [disabled]="(isLoading$ | async)"
                     (click)="cancel()">{{ 'action.cancel' | translate }}</button>
@@ -118,7 +118,7 @@
       </mat-step>
       <mat-step>
         <ng-template matStepLabel>{{ 'action.done' | translate }}</ng-template>
-        <div fxLayout="column">
+        <div class="flex flex-col">
           <p class="mat-body-2" *ngIf="this.statistical?.created">
             {{ translate.instant('import.message.create-entities', {count: this.statistical.created}) }}
           </p>
@@ -140,7 +140,7 @@
             <div #failureDetailsEditor class="tb-failure-details"></div>
           </mat-expansion-panel>
         </div>
-        <div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="20px">
+        <div class="flex flex-row justify-end items-center gap-5">
           <button mat-raised-button
                   [disabled]="(isLoading$ | async)"
                   color="primary"
diff --git a/ui-ngx/src/app/shared/import-export/import-dialog.component.html b/ui-ngx/src/app/shared/import-export/import-dialog.component.html
index c2264760f6..096f625d77 100644
--- a/ui-ngx/src/app/shared/import-export/import-dialog.component.html
+++ b/ui-ngx/src/app/shared/import-export/import-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="importFormGroup" (ngSubmit)="importFromJson()">
   <mat-toolbar color="primary">
     <h2 translate>{{ importTitle }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -29,7 +29,7 @@
   </mat-progress-bar>
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
-      <div fxFlex fxLayout="column">
+      <div class="flex flex-1 flex-col">
         <tb-file-input
           [contentConvertFunction]="loadDataFromJsonContent"
           formControlName="jsonContent"
@@ -42,7 +42,7 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss
index c8568d91fc..d56d446f65 100644
--- a/ui-ngx/src/styles.scss
+++ b/ui-ngx/src/styles.scss
@@ -23,10 +23,6 @@
 @import './scss/mixins';
 @import './scss/fonts';
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 body, html {
   height: 100%;
   min-height: 100%;
@@ -62,10 +58,6 @@ tb-root {
  * TYPE DEFAULTS
  ***************/
 
-*, ::before, ::after {
-  border-style: none;
-}
-
 body,
 button,
 html,
@@ -78,11 +70,11 @@ th {
   font-size: 16px;
 }
 
-body, button {
+body {
   line-height: normal;
 }
 
-a:not(.mat-mdc-button-base) {
+a:not(.mat-mdc-button-base):not(.mdc-tab) {
   font-weight: 400;
   color: #106cc8;
   text-decoration: none;
@@ -93,7 +85,7 @@ a:not(.mat-mdc-button-base) {
 
 a:hover,
 a:focus {
-  &:not(.mat-mdc-button-base) {
+  &:not(.mat-mdc-button-base):not(.mdc-tab) {
     border-bottom: 1px solid #4054b2;
   }
 }
@@ -1273,3 +1265,11 @@ pre.tb-highlight {
     white-space: nowrap;
   }
 }
+
+/***************
+ * TAILWIND CSS
+ ***************/
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/ui-ngx/tailwind.config.js b/ui-ngx/tailwind.config.js
index be29b4ad98..e14eb06ccf 100644
--- a/ui-ngx/tailwind.config.js
+++ b/ui-ngx/tailwind.config.js
@@ -60,7 +60,14 @@ module.exports = {
         min: '1920px'
       }
     },
-    extend: {},
+    extend: {
+      gap: {
+        '0.75': '0.1875rem'
+      }
+    },
+  },
+  corePlugins: {
+    preflight: false
   },
   plugins: [],
 }

From b48e276f44df6ba686e12329b2dc8f424b7b5e50 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Thu, 10 Oct 2024 16:10:04 +0300
Subject: [PATCH 03/34] Fx flex replacements. Switch to tailwind.css.

---
 .../copy-device-credentials.component.html    |   2 +-
 ...ce-credentials-lwm2m-server.component.html |   4 +-
 .../device/device-credentials.component.html  |   2 +-
 .../device/device-info-filter.component.html  |   6 +-
 .../entity/add-entity-dialog.component.html   |   6 +-
 .../entity/entities-table.component.html      | 153 +++++++++---------
 6 files changed, 91 insertions(+), 82 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/device/copy-device-credentials.component.html b/ui-ngx/src/app/modules/home/components/device/copy-device-credentials.component.html
index 1fe15c534c..5581e3d524 100644
--- a/ui-ngx/src/app/modules/home/components/device/copy-device-credentials.component.html
+++ b/ui-ngx/src/app/modules/home/components/device/copy-device-credentials.component.html
@@ -19,7 +19,7 @@
         ngxClipboard
         [cbContent]="credential"
         (cbOnSuccess)="onCopyCredential()"
-        [fxHide]="hideButton"
+        [class.!hidden]="hideButton"
         [disabled]="disabled || loading">
   <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
   <span>{{ buttonLabel }}</span>
diff --git a/ui-ngx/src/app/modules/home/components/device/device-credentials-lwm2m-server.component.html b/ui-ngx/src/app/modules/home/components/device/device-credentials-lwm2m-server.component.html
index 0f2412b857..31f7fe968a 100644
--- a/ui-ngx/src/app/modules/home/components/device/device-credentials-lwm2m-server.component.html
+++ b/ui-ngx/src/app/modules/home/components/device/device-credentials-lwm2m-server.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section [formGroup]="serverFormGroup" fxLayout="column">
+<section [formGroup]="serverFormGroup" class="flex flex-col">
   <mat-form-field class="mat-block">
     <mat-label translate>device.lwm2m-security-config.mode</mat-label>
     <mat-select formControlName="securityMode">
@@ -24,7 +24,7 @@
       </mat-option>
     </mat-select>
   </mat-form-field>
-  <div [fxShow]="serverFormGroup.get('securityMode').value !== securityConfigLwM2MType.NO_SEC">
+  <div [class.!hidden]="serverFormGroup.get('securityMode').value === securityConfigLwM2MType.NO_SEC">
     <mat-form-field class="mat-block">
       <mat-label>{{ 'device.lwm2m-security-config.client-publicKey-or-id' | translate }}</mat-label>
       <mat-icon class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
diff --git a/ui-ngx/src/app/modules/home/components/device/device-credentials.component.html b/ui-ngx/src/app/modules/home/components/device/device-credentials.component.html
index 6298417df7..4465f8320a 100644
--- a/ui-ngx/src/app/modules/home/components/device/device-credentials.component.html
+++ b/ui-ngx/src/app/modules/home/components/device/device-credentials.component.html
@@ -16,7 +16,7 @@
 
 -->
 <section [formGroup]="deviceCredentialsFormGroup">
-  <section [fxShow]="credentialsTypes?.length > 1" style="margin-bottom: 16px">
+  <section [class.!hidden]="!(credentialsTypes?.length > 1)" style="margin-bottom: 16px">
     <div class="tb-type-title" translate>device.credentials-type</div>
     <tb-toggle-select formControlName="credentialsType" appearance="fill">
       <tb-toggle-option *ngFor="let credentialsType of credentialsTypes" [value]="credentialsType">
diff --git a/ui-ngx/src/app/modules/home/components/device/device-info-filter.component.html b/ui-ngx/src/app/modules/home/components/device/device-info-filter.component.html
index 2590c24699..6852f642e8 100644
--- a/ui-ngx/src/app/modules/home/components/device/device-info-filter.component.html
+++ b/ui-ngx/src/app/modules/home/components/device/device-info-filter.component.html
@@ -30,9 +30,9 @@
   </ng-container>
 </ng-template>
 <ng-template #deviceFilterPanel>
-  <form fxLayout="column" class="mat-content mat-padding" (ngSubmit)="update()">
+  <form class="mat-content mat-padding flex flex-col" (ngSubmit)="update()">
     <ng-container *ngTemplateOutlet="deviceFilter"></ng-container>
-    <div fxLayout="row" class="tb-panel-actions" fxLayoutAlign="end center">
+    <div class="tb-panel-actions flex flex-row justify-end items-center">
       <button type="button"
               mat-button
               (click)="cancel()">
@@ -48,7 +48,7 @@
   </form>
 </ng-template>
 <ng-template #deviceFilter>
-  <div fxLayout="column" fxLayoutGap="16px" style="min-width: 280px;" [formGroup]="deviceInfoFilterForm">
+  <div class="flex flex-col gap-4" style="min-width: 280px;" [formGroup]="deviceInfoFilterForm">
     <tb-device-profile-autocomplete
       subscriptSizing="dynamic"
       formControlName="deviceProfileId"
diff --git a/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html b/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html
index 2238cb99ea..3ee1230c73 100644
--- a/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html
@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<form (ngSubmit)="add()" style="min-width: 400px; width: 750px;" [ngStyle]="entitiesTableConfig.addDialogStyle">
+<form (ngSubmit)="add()" style="min-width: 400px; width: 750px;" [style]="entitiesTableConfig.addDialogStyle">
   <mat-toolbar color="primary">
     <h2 translate>{{ translations.add }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <div [tb-help]="helpLinkId()"></div>
     <button mat-icon-button
             (click)="cancel()"
@@ -32,7 +32,7 @@
   <div mat-dialog-content>
     <tb-anchor #entityDetailsForm></tb-anchor>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
diff --git a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
index 9bf9443404..3103f5dfdb 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
@@ -34,18 +34,18 @@
   </mat-drawer>
   <mat-drawer-content>
     <div class="mat-padding tb-entity-table tb-absolute-fill">
-      <div fxLayout="column" class="tb-entity-table-content tb-outlined-border">
-        <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode && dataSource.selection.isEmpty()">
+      <div class="tb-entity-table-content tb-outlined-border flex flex-col">
+        <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode || !dataSource.selection.isEmpty()">
           <div class="mat-toolbar-tools">
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">
+            <div class="title-container flex flex-row justify-start items-center xs:flex-col xs:justify-center xs:items-start">
               <span *ngIf="entitiesTableConfig.tableTitle" class="tb-entity-table-title">{{ entitiesTableConfig.tableTitle }}</span>
               <tb-anchor #entityTableHeader></tb-anchor>
               <tb-timewindow *ngIf="entitiesTableConfig.useTimePageLink" [(ngModel)]="timewindow"
                               (ngModelChange)="onTimewindowChange()"
                               asButton strokedButton historyOnly [forAllTimeEnabled]="entitiesTableConfig.forAllTimeEnabled"></tb-timewindow>
             </div>
-            <span fxFlex></span>
-            <div [fxShow]="addEnabled()">
+            <span class="flex-1"></span>
+            <div [class.!hidden]="!addEnabled()">
               <button mat-icon-button [disabled]="isLoading$ | async"
                       *ngIf="!entitiesTableConfig.addActionDescriptors.length; else addActions"
                       (click)="addEntity($event)"
@@ -56,7 +56,7 @@
               <ng-template #addActions>
                 <button mat-icon-button [disabled]="isLoading$ | async"
                         *ngIf="entitiesTableConfig.addActionDescriptors.length === 1; else addActionsMenu"
-                        [fxShow]="entitiesTableConfig.addActionDescriptors[0].isEnabled()"
+                        [class.!hidden]="!entitiesTableConfig.addActionDescriptors[0].isEnabled()"
                         (click)="entitiesTableConfig.addActionDescriptors[0].onAction($event)"
                         matTooltip="{{ entitiesTableConfig.addActionDescriptors[0].name }}"
                         matTooltipPosition="above">
@@ -72,7 +72,7 @@
                   <mat-menu #addActionsMenu="matMenu" xPosition="before">
                     <button mat-menu-item *ngFor="let actionDescriptor of entitiesTableConfig.addActionDescriptors"
                             [disabled]="isLoading$ | async"
-                            [fxShow]="actionDescriptor.isEnabled()"
+                            [class.!hidden]="!actionDescriptor.isEnabled()"
                             (click)="actionDescriptor.onAction($event)">
                       <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
                       <span>{{ actionDescriptor.name }}</span>
@@ -82,7 +82,7 @@
               </ng-template>
             </div>
             <button mat-icon-button [disabled]="isLoading$ | async"
-                    [fxShow]="actionDescriptor.isEnabled()" *ngFor="let actionDescriptor of headerActionDescriptors"
+                    [class.!hidden]="!actionDescriptor.isEnabled()" *ngFor="let actionDescriptor of headerActionDescriptors"
                     matTooltip="{{ actionDescriptor.name }}"
                     matTooltipPosition="above"
                     (click)="actionDescriptor.onAction($event)">
@@ -101,14 +101,14 @@
             </button>
           </div>
         </mat-toolbar>
-        <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode && dataSource.selection.isEmpty()">
+        <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode || !dataSource.selection.isEmpty()">
           <div class="mat-toolbar-tools">
             <button mat-icon-button
                     matTooltip="{{ translations.search | translate }}"
                     matTooltipPosition="above">
               <mat-icon>search</mat-icon>
             </button>
-            <mat-form-field fxFlex>
+            <mat-form-field class="flex-1">
               <mat-label>&nbsp;</mat-label>
               <input #searchInput matInput
                      [formControl]="textSearch"
@@ -121,14 +121,14 @@
             </button>
           </div>
         </mat-toolbar>
-        <mat-toolbar *ngIf="entitiesTableConfig.selectionEnabled" class="mat-mdc-table-toolbar" color="primary" [fxShow]="!dataSource.selection.isEmpty()">
+        <mat-toolbar *ngIf="entitiesTableConfig.selectionEnabled" class="mat-mdc-table-toolbar" color="primary" [class.!hidden]="dataSource.selection.isEmpty()">
           <div class="mat-toolbar-tools">
             <span class="tb-entity-table-info">
               {{ translations.selectedEntities | translate:{count: dataSource.selection.selected.length} }}
             </span>
-            <span fxFlex></span>
+            <span class="flex-1"></span>
             <button mat-icon-button [disabled]="isLoading$ | async"
-                    [fxShow]="actionDescriptor.isEnabled" *ngFor="let actionDescriptor of groupActionDescriptors"
+                    [class.!hidden]="!actionDescriptor.isEnabled" *ngFor="let actionDescriptor of groupActionDescriptors"
                     matTooltip="{{ actionDescriptor.name }}"
                     matTooltipPosition="above"
                     (click)="actionDescriptor.onAction($event, dataSource.selection.selected)">
@@ -136,7 +136,7 @@
             </button>
           </div>
         </mat-toolbar>
-        <div fxFlex class="table-container">
+        <div class="table-container flex-1">
           <table mat-table [dataSource]="dataSource" [trackBy]="trackByEntityId"
                      matSort [matSortActive]="pageLink.sortOrder?.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
             <ng-container matColumnDef="select" sticky>
@@ -148,23 +148,23 @@
               </mat-header-cell>
               <mat-cell *matCellDef="let entity">
                 <mat-checkbox (click)="$event.stopPropagation()"
-                              [fxShow]="entitiesTableConfig.entitySelectionEnabled(entity)"
+                              [class.!hidden]="!entitiesTableConfig.entitySelectionEnabled(entity)"
                               (change)="$event ? dataSource.selection.toggle(entity) : null"
                               [checked]="dataSource.selection.isSelected(entity)">
                 </mat-checkbox>
               </mat-cell>
             </ng-container>
             <ng-container [matColumnDef]="column.key" *ngFor="let column of entityColumns; trackBy: trackByColumnKey;">
-              <mat-header-cell [ngClass]="{'mat-number-cell': column.isNumberColumn}"
-                               [fxHide.lt-lg]="column.mobileHide"
-                               *matHeaderCellDef [ngStyle]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable">
+              <mat-header-cell [class.mat-number-cell]="column.isNumberColumn"
+                               [class.lt-lg:!hidden]="column.mobileHide"
+                               *matHeaderCellDef [style]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable">
                 {{ column.ignoreTranslate ? column.title : (column.title | translate) }} </mat-header-cell>
-              <mat-cell [ngClass]="{'mat-number-cell': column.isNumberColumn}"
-                        [fxHide.lt-lg]="column.mobileHide"
+              <mat-cell [class.mat-number-cell]="column.isNumberColumn"
+                        [class.lt-lg:!hidden]="column.mobileHide"
                         *matCellDef="let entity; let row = index"
                         [matTooltip]="cellTooltip(entity, column, row)"
                         matTooltipPosition="above"
-                        [ngStyle]="cellStyle(entity, column, row)">
+                        [style]="cellStyle(entity, column, row)">
                 <ng-container [ngSwitch]="column.type">
                   <ng-template [ngSwitchCase]="'link'">
                     <a *ngIf="column.entityURL(entity) as detailsPageURL; else defaultContent"
@@ -183,7 +183,7 @@
                     <ng-template [ngSwitchCase]="cellActionType.COPY_BUTTON">
                       <tb-copy-button
                         [disabled]="isLoading$ | async"
-                        [fxShow]="column.actionCell.isEnabled(entity)"
+                        [class.!hidden]="!column.actionCell.isEnabled(entity)"
                         [copyText]="column.actionCell.onAction(null, entity)"
                         tooltipText="{{ column.actionCell.nameFunction ? column.actionCell.nameFunction(entity) : column.actionCell.name }}"
                         tooltipPosition="above"
@@ -193,11 +193,11 @@
                     </ng-template>
                     <ng-template ngSwitchDefault>
                       <button mat-icon-button [disabled]="isLoading$ | async"
-                              [fxShow]="column.actionCell.isEnabled(entity)"
+                              [class.!hidden]="!column.actionCell.isEnabled(entity)"
                               matTooltip="{{ column.actionCell.nameFunction ? column.actionCell.nameFunction(entity) : column.actionCell.name }}"
                               matTooltipPosition="above"
                               (click)="column.actionCell.onAction($event, entity)">
-                        <tb-icon [ngStyle]="column.actionCell.style">
+                        <tb-icon [style]="column.actionCell.style">
                           {{column.actionCell.icon}}
                         </tb-icon>
                       </button>
@@ -207,74 +207,83 @@
               </mat-cell>
             </ng-container>
             <ng-container [matColumnDef]="column.key" *ngFor="let column of actionColumns; trackBy: trackByColumnKey;">
-              <mat-header-cell *matHeaderCellDef [ngStyle]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable"> {{ column.title | translate }} </mat-header-cell>
+              <mat-header-cell *matHeaderCellDef [style]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable"> {{ column.title | translate }} </mat-header-cell>
               <mat-cell *matCellDef="let entity; let row = index"
-                        [ngStyle]="cellStyle(entity, column, row)">
+                        [style]="cellStyle(entity, column, row)">
                 <button mat-icon-button [disabled]="isLoading$ | async"
-                        [fxShow]="column.actionDescriptor.isEnabled(entity)"
+                        [class.!hidden]="!column.actionDescriptor.isEnabled(entity)"
                         matTooltip="{{ column.actionDescriptor.nameFunction ? column.actionDescriptor.nameFunction(entity) : column.actionDescriptor.name }}"
                         matTooltipPosition="above"
                         (click)="column.actionDescriptor.onAction($event, entity)">
-                  <tb-icon [ngStyle]="column.actionDescriptor.style">
+                  <tb-icon [style]="column.actionDescriptor.style">
                     {{column.actionDescriptor.iconFunction ? column.actionDescriptor.iconFunction(entity) : column.actionDescriptor.icon}}
                   </tb-icon>
                 </button>
               </mat-cell>
             </ng-container>
             <ng-container matColumnDef="actions" stickyEnd>
-              <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (cellActionDescriptors.length * 48) + 'px',
-                                                                    maxWidth: (cellActionDescriptors.length * 48) + 'px',
-                                                                    width: (cellActionDescriptors.length * 48) + 'px' }">
-                {{ entitiesTableConfig.actionsColumnTitle ? (entitiesTableConfig.actionsColumnTitle | translate) : '' }}
+              <mat-header-cell *matHeaderCellDef>
+                <ng-container *ngIf="cellActionDescriptors.length">
+                  <div class="gt-md:!hidden" style="width: 48px; min-width: 48px; max-width: 48px;">
+                    {{ entitiesTableConfig.actionsColumnTitle ? (entitiesTableConfig.actionsColumnTitle | translate) : '' }}
+                  </div>
+                  <div class="lt-lg:!hidden"
+                       [style.width]="(cellActionDescriptors.length * 48) + 'px'"
+                       [style.min-width]="(cellActionDescriptors.length * 48) + 'px'"
+                       [style.max-width]="(cellActionDescriptors.length * 48) + 'px'">
+                    {{ entitiesTableConfig.actionsColumnTitle ? (entitiesTableConfig.actionsColumnTitle | translate) : '' }}
+                  </div>
+                </ng-container>
               </mat-header-cell>
-              <mat-cell *matCellDef="let entity" [ngStyle.gt-md]="{ minWidth: (cellActionDescriptors.length * 48) + 'px',
-                                                                    maxWidth: (cellActionDescriptors.length * 48) + 'px',
-                                                                    width: (cellActionDescriptors.length * 48) + 'px' }">
-                <div [fxHide]="cellActionDescriptors.length !== 1" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
-                  <button mat-icon-button [disabled]="(isLoading$ | async) || !actionDescriptor.isEnabled(entity)"
-                          *ngFor="let actionDescriptor of cellActionDescriptors"
-                          matTooltip="{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}"
-                          matTooltipPosition="above"
-                          (click)="actionDescriptor.onAction($event, entity)">
-                    <tb-icon [ngStyle]="actionDescriptor.style">
-                      {{actionDescriptor.iconFunction ?  actionDescriptor.iconFunction(entity) : actionDescriptor.icon}}
-                    </tb-icon>
-                  </button>
-                </div>
-                <div fxHide [fxShow.lt-lg]="cellActionDescriptors.length !== 1" *ngIf="cellActionDescriptors.length">
-                  <button mat-icon-button
-                          (click)="$event.stopPropagation()"
-                          [matMenuTriggerFor]="cellActionsMenu">
-                    <mat-icon class="material-icons">more_vert</mat-icon>
-                  </button>
-                  <mat-menu #cellActionsMenu="matMenu" xPosition="before">
-                    <button mat-menu-item *ngFor="let actionDescriptor of cellActionDescriptors"
-                            [disabled]="isLoading$ | async"
-                            [fxShow]="actionDescriptor.isEnabled(entity)"
+              <mat-cell *matCellDef="let entity">
+                <ng-container *ngIf="cellActionDescriptors.length">
+                  <div [class.lt-lg:!hidden]="cellActionDescriptors.length !== 1" class="flex flex-row justify-end items-stretch"
+                       [style.width]="(cellActionDescriptors.length * 48) + 'px'"
+                       [style.min-width]="(cellActionDescriptors.length * 48) + 'px'"
+                       [style.max-width]="(cellActionDescriptors.length * 48) + 'px'">
+                    <button mat-icon-button [disabled]="(isLoading$ | async) || !actionDescriptor.isEnabled(entity)"
+                            *ngFor="let actionDescriptor of cellActionDescriptors"
+                            matTooltip="{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}"
+                            matTooltipPosition="above"
                             (click)="actionDescriptor.onAction($event, entity)">
-                      <tb-icon matMenuItemIcon [ngStyle]="actionDescriptor.style">
+                      <tb-icon [style]="actionDescriptor.style">
                         {{actionDescriptor.iconFunction ?  actionDescriptor.iconFunction(entity) : actionDescriptor.icon}}
                       </tb-icon>
-                      <span>{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}</span>
                     </button>
-                  </mat-menu>
-                </div>
+                  </div>
+                  <div [class.!hidden]="cellActionDescriptors.length === 1" class="gt-md:!hidden">
+                    <button mat-icon-button
+                            (click)="$event.stopPropagation()"
+                            [matMenuTriggerFor]="cellActionsMenu">
+                      <mat-icon class="material-icons">more_vert</mat-icon>
+                    </button>
+                    <mat-menu #cellActionsMenu="matMenu" xPosition="before">
+                      <button mat-menu-item *ngFor="let actionDescriptor of cellActionDescriptors"
+                              [disabled]="isLoading$ | async"
+                              [class.!hidden]="!actionDescriptor.isEnabled(entity)"
+                              (click)="actionDescriptor.onAction($event, entity)">
+                        <tb-icon matMenuItemIcon [style]="actionDescriptor.style">
+                          {{actionDescriptor.iconFunction ?  actionDescriptor.iconFunction(entity) : actionDescriptor.icon}}
+                        </tb-icon>
+                        <span>{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}</span>
+                      </button>
+                    </mat-menu>
+                  </div>
+                </ng-container>
               </mat-cell>
             </ng-container>
-            <mat-header-row [ngClass]="{'mat-row-select': selectionEnabled}" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
-            <mat-row [fxShow]="!dataSource.dataLoading"
-                     [ngClass]="{'mat-row-select': selectionEnabled,
-                                 'mat-selected': dataSource.selection.isSelected(entity),
-                                 'tb-current-entity': dataSource.isCurrentEntity(entity),
-                                 'tb-pointer': entitiesTableConfig.rowPointer}"
+            <mat-header-row [class.mat-row-select]="selectionEnabled" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
+            <mat-row [class.!hidden]="dataSource.dataLoading"
+                     [class.mat-row-select]="selectionEnabled"
+                     [class.mat-selected]="dataSource.selection.isSelected(entity)"
+                     [class.tb-current-entity]="dataSource.isCurrentEntity(entity)"
+                     [class.tb-pointer]="entitiesTableConfig.rowPointer"
                      *matRowDef="let entity; columns: displayedColumns;" (click)="onRowClick($event, entity)"></mat-row>
           </table>
-          <span [fxShow]="!(isLoading$ | async) && (dataSource.isEmpty() | async) && !dataSource.dataLoading"
-                fxLayoutAlign="center center"
-                class="no-data-found">{{ translations.noEntities | translate }}</span>
-          <span [fxShow]="dataSource.dataLoading"
-                fxLayoutAlign="center center"
-                class="no-data-found">{{ 'common.loading' | translate }}</span>
+          <span [class.!hidden]="(isLoading$ | async) || (dataSource.isEmpty() | async) === false || dataSource.dataLoading"
+                class="no-data-found flex justify-center items-center">{{ translations.noEntities | translate }}</span>
+          <span [class.!hidden]="!dataSource.dataLoading"
+                class="no-data-found flex justify-center items-center">{{ 'common.loading' | translate }}</span>
         </div>
         <mat-divider *ngIf="displayPagination"></mat-divider>
         <mat-paginator *ngIf="displayPagination"

From 1ed0a2c6b562f05c033b59fede422040d1c25a7b Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Thu, 10 Oct 2024 17:28:50 +0300
Subject: [PATCH 04/34] Fx flex replacements. Switch to tailwind.css.

---
 .../entity/entity-details-page.component.html | 14 ++++-----
 .../entity-details-panel.component.html       |  4 +--
 .../entity/entity-filter-view.component.html  |  4 +--
 .../entity/entity-filter.component.html       | 30 +++++++++----------
 4 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.html b/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.html
index 221a63e38c..e0b9e7658c 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.html
@@ -17,26 +17,26 @@
 -->
 <mat-card appearance="outlined" class="settings-card">
   <mat-toolbar class="details-toolbar">
-    <div class="mat-toolbar-tools" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div class="mat-toolbar-tools flex flex-row justify-start items-center gap-2">
       <button mat-icon-button
               matTooltip="{{ 'action.back' | translate }}"
               matTooltipPosition="above"
               (click)="goBack()">
         <mat-icon>arrow_back</mat-icon>
       </button>
-      <div class="tb-details-title-header" fxLayout="column" fxLayoutAlign="center start">
+      <div class="tb-details-title-header flex flex-col justify-center items-start">
         <div class="tb-details-title tb-ellipsis">{{ headerTitle }}</div>
         <div class="tb-details-subtitle tb-ellipsis">{{ headerSubtitle }}</div>
       </div>
       <div class="tb-help" [tb-help]="helpLinkId()"></div>
-      <span fxFlex></span>
-      <section *ngIf="!isReadOnly" fxLayout="row" class="tb-header-button" fxLayoutGap="8px">
+      <span class="flex-1"></span>
+      <section *ngIf="!isReadOnly" class="tb-header-button flex flex-row gap-2">
         <button [disabled]="(isLoading$ | async) || detailsForm.invalid || !detailsForm.dirty"
                 mat-fab
                 matTooltip="{{ 'action.apply-changes' | translate }}"
                 matTooltipPosition="above"
                 color="accent" class="tb-btn-header"
-                [ngClass]="{'tb-hide': !isEdit}"
+                [class.tb-hide]="!isEdit"
                 (click)="onApplyDetails()">
           <mat-icon class="material-icons">done</mat-icon>
         </button>
@@ -51,8 +51,8 @@
       </section>
     </div>
   </mat-toolbar>
-  <mat-card-content fxFlex="100">
-    <mat-tab-group mat-stretch-tabs="false" class="tb-absolute-fill" [ngClass]="{'tb-headless': hideDetailsTabs()}" [(selectedIndex)]="selectedTab" fxFill>
+  <mat-card-content class="flex-[1_1_100%]">
+    <mat-tab-group mat-stretch-tabs="false" class="tb-absolute-fill w-full h-full" [class.tb-headless]="hideDetailsTabs()" [(selectedIndex)]="selectedTab">
       <mat-tab label="{{ 'details.details' | translate }}">
         <tb-anchor #entityDetailsForm></tb-anchor>
       </mat-tab>
diff --git a/ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.html b/ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.html
index 407f41c0c1..391c4bb0d0 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<tb-details-panel fxFlex
+<tb-details-panel class="flex-1"
                    [headerTitle]="entitiesTableConfig.entityTitle(entity)"
                    headerSubtitle="{{ translations.details | translate }}"
                    [isReadOnly]="entitiesTableConfig.detailsReadonly(entity)"
@@ -27,7 +27,7 @@
   <div class="details-buttons">
     <div [tb-help]="helpLinkId()"></div>
   </div>
-  <mat-tab-group mat-stretch-tabs="false" class="tb-absolute-fill" [ngClass]="{'tb-headless': hideDetailsTabs()}" fxFlex [(selectedIndex)]="selectedTab">
+  <mat-tab-group mat-stretch-tabs="false" class="tb-absolute-fill flex-1" [class.tb-headless]="hideDetailsTabs()" [(selectedIndex)]="selectedTab">
     <mat-tab label="{{ 'details.details' | translate }}">
       <tb-anchor #entityDetailsForm></tb-anchor>
     </mat-tab>
diff --git a/ui-ngx/src/app/modules/home/components/entity/entity-filter-view.component.html b/ui-ngx/src/app/modules/home/components/entity/entity-filter-view.component.html
index 5c0321c1e2..c262ef1dc3 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entity-filter-view.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-filter-view.component.html
@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" class="tb-entity-filter-view">
+<div class="tb-entity-filter-view flex flex-col">
   <div *ngIf="!filter || !filter.type; else filterView" class="entity-filter-empty" translate>alias.no-entity-filter-specified</div>
   <ng-template #filterView>
-    <div fxLayout="column">
+    <div class="flex flex-col">
       <div class="entity-filter-value">{{ filterDisplayValue }}</div>
     </div>
   </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.html b/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.html
index d1b39a8748..41ae0c938e 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" [formGroup]="entityFilterFormGroup" class="tb-entity-filter">
+<div [formGroup]="entityFilterFormGroup" class="tb-entity-filter flex flex-col">
   <mat-form-field class="mat-block">
     <mat-label translate>alias.filter-type</mat-label>
     <mat-select required formControlName="type">
@@ -27,7 +27,7 @@
       {{ 'alias.filter-type-required' | translate }}
     </mat-error>
   </mat-form-field>
-  <section fxLayout="column" [formGroup]="filterFormGroup" [ngSwitch]="entityFilterFormGroup.get('type').value">
+  <section class="flex flex-col" [formGroup]="filterFormGroup" [ngSwitch]="entityFilterFormGroup.get('type').value">
     <ng-template [ngSwitchCase]="aliasFilterType.singleEntity">
       <tb-entity-select required
                         useAliasEntityTypes="true"
@@ -78,9 +78,9 @@
         <input matInput formControlName="stateEntityParamName"
                placeholder="{{ 'alias.default-entity-parameter-name' | translate }}">
       </mat-form-field>
-      <div fxLayout="column">
+      <div class="flex flex-col">
         <label class="tb-small">{{ 'alias.default-state-entity' | translate }}</label>
-        <tb-entity-select fxFlex
+        <tb-entity-select class="flex-1"
                           useAliasEntityTypes="true"
                           formControlName="defaultStateEntity">
         </tb-entity-select>
@@ -192,42 +192,42 @@
                                  entityFilterFormGroup.get('type').value === aliasFilterType.entityViewSearchQuery ?
                                  entityFilterFormGroup.get('type').value : ''">
       <label class="tb-small">{{ 'alias.root-entity' | translate }}</label>
-      <section class="tb-root-state-entity-switch" fxLayout="row" fxLayoutAlign="start center" style="padding-left: 0;">
+      <section class="tb-root-state-entity-switch flex flex-row justify-start items-center" style="padding-left: 0;">
         <mat-slide-toggle class="root-state-entity-switch"
                           formControlName="rootStateEntity">
         </mat-slide-toggle>
         <label class="tb-small root-state-entity-label" translate>alias.root-state-entity</label>
       </section>
-      <div fxFlex fxLayout="row" *ngIf="!filterFormGroup.get('rootStateEntity').value">
-        <tb-entity-select fxFlex
+      <div class="flex-1 flex flex-row" *ngIf="!filterFormGroup.get('rootStateEntity').value">
+        <tb-entity-select class="flex-1"
                           required
                           useAliasEntityTypes="true"
                           formControlName="rootEntity">
         </tb-entity-select>
       </div>
-      <div fxFlex fxLayout="column" fxLayout.gt-sm="row" *ngIf="filterFormGroup.get('rootStateEntity').value">
+      <div class="flex-1 flex flex-col gt-sm:flex-row" *ngIf="filterFormGroup.get('rootStateEntity').value">
         <mat-form-field floatLabel="always" class="mat-block" style="margin-top: 24px; padding-right: 8px;">
           <mat-label translate>alias.state-entity-parameter-name</mat-label>
           <input matInput formControlName="stateEntityParamName"
                  placeholder="{{ 'alias.default-entity-parameter-name' | translate }}">
         </mat-form-field>
-        <div fxFlex fxLayout="column">
+        <div class="flex-1 flex flex-col">
           <label class="tb-small">{{ 'alias.default-state-entity' | translate }}</label>
-          <tb-entity-select fxFlex
+          <tb-entity-select class="flex-1"
                             useAliasEntityTypes="true"
                             formControlName="defaultStateEntity">
           </tb-entity-select>
         </div>
       </div>
-      <div fxFlex fxLayout="row">
-        <section class="tb-root-state-entity-switch" fxLayout="row" fxLayoutAlign="start center" style="padding-left: 0;">
+      <div class="flex-1 flex flex-row">
+        <section class="tb-root-state-entity-switch flex flex-row justify-start items-center" style="padding-left: 0;">
           <mat-slide-toggle class="root-state-entity-switch"
                             formControlName="fetchLastLevelOnly">
           </mat-slide-toggle>
           <label class="tb-small root-state-entity-label" translate>alias.last-level-relation</label>
         </section>
       </div>
-      <div fxFlex fxLayoutGap="8px" fxLayout="row" fxLayout.xs="column">
+      <div class="flex-1 flex flex-row xs:flex-col gap-2">
         <mat-form-field class="mat-block" style="min-width: 100px;">
           <mat-label translate>relation.direction</mat-label>
           <mat-select required formControlName="direction">
@@ -236,7 +236,7 @@
             </mat-option>
           </mat-select>
         </mat-form-field>
-        <mat-form-field fxFlex floatLabel="always" class="mat-block">
+        <mat-form-field floatLabel="always" class="mat-block flex-1">
           <mat-label translate>alias.max-relation-level</mat-label>
           <input matInput
                  type="number"
@@ -248,7 +248,7 @@
       </div>
       <div class="mat-caption" style="color: rgba(0,0,0,0.57);" translate>relation.relation-type</div>
       <tb-relation-type-autocomplete
-        fxFlex
+        class="flex-1"
         formControlName="relationType">
       </tb-relation-type-autocomplete>
     </ng-template>

From 408327b8da161d587757f0b899f2aca7bac4dc9d Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Fri, 11 Oct 2024 16:46:38 +0300
Subject: [PATCH 05/34] Flex layout replacements. Switch to tailwind.css.

---
 .../entity-aliases-dialog.component.html      | 18 ++++----
 .../entity/entity-details-page.component.html |  2 +-
 .../event/event-content-dialog.component.html | 10 ++---
 .../event/event-filter-panel.component.html   |  8 ++--
 .../boolean-filter-predicate.component.html   |  6 +--
 ...lex-filter-predicate-dialog.component.html |  6 +--
 .../complex-filter-predicate.component.html   |  2 +-
 .../filter/filter-dialog.component.html       | 12 +++---
 .../filter-predicate-list.component.html      | 42 +++++++++----------
 .../filter-predicate-value.component.html     | 16 +++----
 .../filter/filter-predicate.component.html    |  6 +--
 .../filter-user-info-dialog.component.html    | 10 ++---
 .../filter/filters-dialog.component.html      | 33 +++++++--------
 .../filter/filters-edit-panel.component.html  |  6 +--
 .../filter/filters-edit.component.html        |  4 +-
 .../filter/key-filter-dialog.component.html   | 29 ++++++++-----
 .../filter/key-filter-list.component.html     | 38 ++++++++---------
 .../numeric-filter-predicate.component.html   |  6 +--
 .../string-filter-predicate.component.html    | 10 ++---
 .../filter/user-filter-dialog.component.html  |  4 +-
 .../history-selector.component.html           |  2 +-
 ui-ngx/tailwind.config.js                     | 42 +++++++++++++++++++
 22 files changed, 180 insertions(+), 132 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html b/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html
index 1c63fe12e5..3fe25965c1 100644
--- a/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html
@@ -27,14 +27,14 @@
   </mat-toolbar>
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  <div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
   <div mat-dialog-content>
     <div class="tb-aliases-header flex flex-row justify-start items-center">
-      <span class="flex-[1_1_5%]"></span>
-      <div class="flex-[1_1_95%] flex flex-row justify-start items-center">
-        <span class="tb-header-label flex-1 gt-sm:flex-[1_1_208px] gt-sm:min-w-52 gt-sm:max-w-52" translate>alias.name</span>
+      <span class="flex-full max-w-5%"></span>
+      <div class="flex-full max-w-95% flex flex-row justify-start items-center">
+        <span class="tb-header-label flex-1 gt-sm:basis-52 gt-sm:min-w-52 gt-sm:max-w-52" translate>alias.name</span>
         <span class="tb-header-label flex-1" translate style="padding-left: 10px;">alias.entity-filter</span>
-        <span class="tb-header-label flex-[1_1_128px] min-w-32 max-w-32" translate style="padding-left: 10px;">alias.resolve-multiple</span>
+        <span class="tb-header-label flex-1 basis-32 min-w-32 max-w-32" translate style="padding-left: 10px;">alias.resolve-multiple</span>
         <span style="min-width: 80px;"></span>
       </div>
     </div>
@@ -43,9 +43,9 @@
       <div class="flex-1 flex flex-row justify-start items-center"
            formArrayName="entityAliases"
            *ngFor="let entityAliasControl of entityAliasesFormArray().controls; let $index = index">
-        <span class="flex-[1_1_5%]">{{$index + 1}}.</span>
-        <div class="mat-elevation-z4 tb-alias flex-[1_1_95%] flex flex-row justify-start items-center">
-          <mat-form-field class="mat-block flex-1 gt-sm:flex-[1_1_208px] gt-sm:min-w-52 gt-sm:max-w-52" style="padding-top: 20px;">
+        <span class="flex-full max-w-5%">{{$index + 1}}.</span>
+        <div class="mat-elevation-z4 tb-alias flex-full max-w-95% flex flex-row justify-start items-center">
+          <mat-form-field class="mat-block flex-1 gt-sm:basis-52 gt-sm:min-w-52 gt-sm:max-w-52" style="padding-top: 20px;">
             <input matInput [formControl]="entityAliasControl.get('alias')" required placeholder="{{ 'entity.alias' | translate }}">
             <mat-error *ngIf="entityAliasControl.get('alias').hasError('required')">
               {{ 'entity.alias-required' | translate }}
@@ -54,7 +54,7 @@
           <tb-entity-filter-view class="flex-1" style="padding-left: 10px;" [formControl]="entityAliasControl.get('filter')">
           </tb-entity-filter-view>
           <section style="padding-left: 10px;"
-                   class="tb-resolve-multiple-switch flex-[1_1_128px] min-w-32 max-w-32 flex flex-col justify-center items-center">
+                   class="tb-resolve-multiple-switch flex-1 basis-32 min-w-32 max-w-32 flex flex-col justify-center items-center">
             <mat-slide-toggle class="resolve-multiple-switch"
                    [formControl]="entityAliasControl.get('resolveMultiple')">
             </mat-slide-toggle>
diff --git a/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.html b/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.html
index e0b9e7658c..0d79d338b3 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.html
@@ -51,7 +51,7 @@
       </section>
     </div>
   </mat-toolbar>
-  <mat-card-content class="flex-[1_1_100%]">
+  <mat-card-content class="flex-full">
     <mat-tab-group mat-stretch-tabs="false" class="tb-absolute-fill w-full h-full" [class.tb-headless]="hideDetailsTabs()" [(selectedIndex)]="selectedTab">
       <mat-tab label="{{ 'details.details' | translate }}">
         <tb-anchor #entityDetailsForm></tb-anchor>
diff --git a/ui-ngx/src/app/modules/home/components/event/event-content-dialog.component.html b/ui-ngx/src/app/modules/home/components/event/event-content-dialog.component.html
index 4f0b916545..87cd22b7d8 100644
--- a/ui-ngx/src/app/modules/home/components/event/event-content-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/event/event-content-dialog.component.html
@@ -15,21 +15,21 @@
     limitations under the License.
 
 -->
-<mat-toolbar fxLayout="row" color="primary">
+<mat-toolbar class="flex flex-row" color="primary">
   <h2 translate>{{ title }}</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           [mat-dialog-close]="false"
           type="button">
     <mat-icon class="material-icons">close</mat-icon>
   </button>
 </mat-toolbar>
-<div mat-dialog-content fxLayout="column">
+<div mat-dialog-content class="flex flex-col">
   <div #eventContentEditor class="tb-event-content">
   </div>
 </div>
-<div mat-dialog-actions fxLayout="row">
-  <span fxFlex></span>
+<div mat-dialog-actions class="flex flex-row">
+  <span class="flex-1"></span>
   <button mat-button color="primary"
           type="button"
           [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html b/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html
index 51e7269550..91879f5f51 100644
--- a/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<form fxLayout="column" class="tb-filter" [formGroup]="eventFilterFormGroup" (ngSubmit)="update()">
-  <div fxLayout="column" class="tb-filter-container mat-padding">
+<form class="tb-filter flex flex-col" [formGroup]="eventFilterFormGroup" (ngSubmit)="update()">
+  <div class="tb-filter-container mat-padding flex flex-col">
     <ng-container *ngFor="let column of showColumns">
       <ng-container [ngSwitch]="column.key">
         <ng-template [ngSwitchCase]="isSelector(column.key)">
@@ -46,7 +46,7 @@
           </tb-checkbox>
         </ng-template>
         <ng-template [ngSwitchCase]="'errorStr'">
-          <mat-form-field fxHide [fxShow]="showErrorMsgFields()">
+          <mat-form-field [class.!hidden]="!showErrorMsgFields()">
             <mat-label>{{ column.title | translate}}</mat-label>
             <input matInput type="text" name="errorSearchText" formControlName="errorStr">
           </mat-form-field>
@@ -60,7 +60,7 @@
       </ng-container>
     </ng-container>
   </div>
-  <div fxLayout="row" class="tb-panel-actions mat-padding" fxLayoutAlign="end center">
+  <div class="tb-panel-actions mat-padding flex flex-row justify-end items-center">
     <button type="button"
             mat-button
             (click)="cancel()">
diff --git a/ui-ngx/src/app/modules/home/components/filter/boolean-filter-predicate.component.html b/ui-ngx/src/app/modules/home/components/filter/boolean-filter-predicate.component.html
index a499300dea..68f107dd65 100644
--- a/ui-ngx/src/app/modules/home/components/filter/boolean-filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/boolean-filter-predicate.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="8px" [formGroup]="booleanFilterPredicateFormGroup">
-  <mat-form-field hideRequiredMarker fxFlex="30" class="mat-block">
+<div class="flex-1 flex flex-row justify-start items-start gap-2" [formGroup]="booleanFilterPredicateFormGroup">
+  <mat-form-field hideRequiredMarker class="mat-block flex-full max-w-30%">
     <mat-select required formControlName="operation" placeholder="{{'filter.operation.operation' | translate}}">
       <mat-option *ngFor="let operation of booleanOperations" [value]="operation">
         {{booleanOperationTranslations.get(booleanOperationEnum[operation]) | translate}}
@@ -25,7 +25,7 @@
   </mat-form-field>
   <tb-filter-predicate-value [allowUserDynamicSource]="allowUserDynamicSource"
                              [onlyUserDynamicSource]="onlyUserDynamicSource"
-                             fxFlex="70"
+                             class="flex-full max-w-70%"
                              [valueType]="valueTypeEnum.BOOLEAN"
                              formControlName="value">
   </tb-filter-predicate-value>
diff --git a/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.html
index 2d9ae17eb9..088e5e6a31 100644
--- a/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="complexFilterFormGroup" (ngSubmit)="save()" style="width: 1200px;">
   <mat-toolbar color="primary">
     <h2 translate>filter.complex-filter</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -26,7 +26,7 @@
     </button>
   </mat-toolbar>
   <div mat-dialog-content>
-    <fieldset [disabled]="isLoading$ | async" fxLayout="column">
+    <fieldset [disabled]="isLoading$ | async"  class="flex flex-col">
       <mat-form-field class="mat-block">
         <mat-label translate>filter.operation.operation</mat-label>
         <mat-select required formControlName="operation">
@@ -46,7 +46,7 @@
       </tb-filter-predicate-list>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate.component.html b/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate.component.html
index 57224e434f..d12d989277 100644
--- a/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+<div class="flex-1 flex flex-row justify-start items-center gap-2">
   <mat-label translate>filter.complex-filter</mat-label>
   <button mat-icon-button color="primary"
           class="tb-mat-32"
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.html
index f71ee78e5e..1b93e92649 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="filterFormGroup" (ngSubmit)="save()" style="width: 700px;">
   <mat-toolbar color="primary">
     <h2>{{ (isAdd ? 'filter.add' : 'filter.edit') | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -29,9 +29,9 @@
   </mat-progress-bar>
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
-      <div fxFlex fxLayout="column">
-        <div fxLayout="row">
-          <mat-form-field fxFlex class="mat-block">
+      <div class="flex-1 flex flex-col">
+        <div class="flex flex-row">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>filter.name</mat-label>
             <input matInput formControlName="filter" required>
             <mat-error *ngIf="filterFormGroup.get('filter').hasError('required')">
@@ -41,7 +41,7 @@
               {{ 'filter.duplicate-filter' | translate }}
             </mat-error>
           </mat-form-field>
-          <section class="tb-editable-switch" fxLayout="column" fxLayoutAlign="start center">
+          <section class="tb-editable-switch flex flex-col justify-start items-center">
             <label class="tb-small editable-label" translate>filter.editable</label>
             <mat-slide-toggle class="editable-switch"
                               formControlName="editable">
@@ -54,7 +54,7 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions  class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-list.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-list.component.html
index c664967b3e..3708938cad 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-list.component.html
@@ -15,41 +15,41 @@
     limitations under the License.
 
 -->
-<section fxLayout="column" [formGroup]="filterListFormGroup">
+<section class="flex flex-col" [formGroup]="filterListFormGroup">
   <mat-expansion-panel [expanded]="true">
     <mat-expansion-panel-header>
       <mat-panel-title>
         <div translate>filter.filters</div>
       </mat-panel-title>
     </mat-expansion-panel-header>
-    <div fxLayout="row">
-      <span fxFlex="8"></span>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" fxFlex="92">
-        <div fxFlex fxLayout="row" fxLayoutGap="8px">
-          <div fxFlex="30" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-            <label fxFlex translate class="tb-title no-padding">filter.operation.operation</label>
+    <div class="flex flex-row">
+      <span class="flex-full max-w-8%"></span>
+      <div class="flex-full max-w-92% flex flex-row justify-start items-center gap-2">
+        <div class="flex-1 flex flex-row gap-2">
+          <div class="flex-full max-w-30% flex flex-row justify-start items-center gap-2">
+            <label translate class="tb-title no-padding flex-1">filter.operation.operation</label>
             <label *ngIf="valueType === valueTypeEnum.STRING"
                    translate class="tb-title no-padding" style="min-width: 70px;">filter.ignore-case</label>
           </div>
-          <label fxFlex="70" translate class="tb-title no-padding">filter.value</label>
+          <label translate class="tb-title no-padding flex-full max-w-70%">filter.value</label>
         </div>
         <label *ngIf="displayUserParameters"
                translate class="tb-title no-padding" style="width: 60px;">filter.user-parameters</label>
-        <span [fxShow]="!disabled" style="min-width: 40px;">&nbsp;</span>
+        <span [class.!hidden]="disabled" style="min-width: 40px;">&nbsp;</span>
       </div>
     </div>
     <mat-divider style="padding-bottom: 5px;"></mat-divider>
     <div class="predicate-list">
-      <div fxLayout="row" fxLayoutAlign="start" style="height: 76px;"
+      <div class="flex flex-row justify-start items-stretch" style="height: 76px;"
            formArrayName="predicates"
            *ngFor="let predicateControl of predicatesFormArray.controls; let $index = index">
-        <div fxFlex="8" fxLayout="row" fxLayoutAlign="center" class="filters-operation">
+        <div class="filters-operation flex-full max-w-8% flex flex-row justify-center items-stretch">
           <span *ngIf="$index > 0">{{ complexOperationTranslations.get(operation) | translate }}</span>
         </div>
-        <div fxLayout="column" fxFlex="92">
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" fxFlex>
+        <div class="flex-full max-w-92% flex flex-col">
+          <div class="flex-1 flex flex-row justify-start items-center gap-2">
             <tb-filter-predicate
-              fxFlex
+              class="flex-1"
               [valueType]="valueType"
               [displayUserParameters]="displayUserParameters"
               [allowUserDynamicSource]="allowUserDynamicSource"
@@ -58,7 +58,7 @@
               [formControl]="predicateControl">
             </tb-filter-predicate>
             <button mat-icon-button color="primary"
-                    [fxShow]="!disabled"
+                    [class.!hidden]="disabled"
                     type="button"
                     (click)="removePredicate($index)"
                     matTooltip="{{ 'filter.remove-filter' | translate }}"
@@ -68,13 +68,13 @@
           </div>
         </div>
       </div>
-      <span [fxShow]="!predicatesFormArray.length"
-            fxLayoutAlign="center center" [ngClass]="{'disabled': disabled}"
-            class="no-data-found" translate>filter.no-filters</span>
+      <span [class.!hidden]="!!predicatesFormArray.length"
+            [class.disabled]="disabled"
+            class="no-data-found flex justify-center items-center" translate>filter.no-filters</span>
     </div>
-    <div style="margin-top: 16px;" fxLayout="row" fxLayoutGap="8px">
+    <div style="margin-top: 16px;" class="flex flex-row gap-2">
       <button mat-button mat-raised-button color="primary"
-              [fxShow]="!disabled"
+              [class.!hidden]="disabled"
               (click)="addPredicate(false)"
               type="button"
               matTooltip="{{ 'filter.add-filter' | translate }}"
@@ -82,7 +82,7 @@
         {{ 'action.add' | translate }}
       </button>
       <button mat-button mat-raised-button color="primary"
-              [fxShow]="!disabled"
+              [class.!hidden]="disabled"
               (click)="addPredicate(true)"
               type="button"
               matTooltip="{{ 'filter.add-complex-filter' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html
index c6ae39f295..6c7906d327 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" [formGroup]="filterPredicateValueFormGroup">
-  <div fxFlex fxLayout="column" [fxShow]="!dynamicMode && !onlyUserDynamicSource">
-    <div fxLayout="column" [ngSwitch]="valueType">
+<div class="flex-1 flex flex-row justify-start items-center gap-2" [formGroup]="filterPredicateValueFormGroup">
+  <div class="flex-1 flex flex-col" [class.!hidden]="dynamicMode || onlyUserDynamicSource">
+    <div class="flex flex-col" [ngSwitch]="valueType">
       <ng-template [ngSwitchCase]="valueTypeEnum.STRING">
         <mat-form-field hideRequiredMarker class="mat-block">
           <input matInput formControlName="defaultValue" placeholder="{{'filter.value' | translate}}">
@@ -43,9 +43,9 @@
     </div>
     <div class="tb-hint">{{ hintText | translate }}</div>
   </div>
-  <div fxFlex fxLayout="column" [fxShow]="dynamicMode || onlyUserDynamicSource">
-    <div formGroupName="dynamicValue" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-      <div fxFlex="35" fxLayout="column">
+  <div class="flex flex-col" [class.!hidden]="!dynamicMode && !onlyUserDynamicSource">
+    <div formGroupName="dynamicValue" class="flex flex-row justify-start items-center gap-2">
+      <div class="flex-full max-w-35% flex flex-col">
         <mat-form-field hideRequiredMarker class="mat-block">
           <mat-select formControlName="sourceType" placeholder="{{'filter.dynamic-source-type' | translate}}">
             <mat-option [value]="null">
@@ -58,14 +58,14 @@
         </mat-form-field>
         <div class="tb-hint" translate>filter.dynamic-source-type</div>
       </div>
-      <div fxFlex fxLayout="column">
+      <div class="flex-1 flex flex-col">
         <mat-form-field hideRequiredMarker class="mat-block">
           <input matInput formControlName="sourceAttribute" placeholder="{{'filter.source-attribute' | translate}}">
         </mat-form-field>
         <div class="tb-hint" translate>filter.source-attribute</div>
       </div>
       <div *ngIf="!allow && inheritMode"
-           fxLayout="column"
+           class="flex flex-col"
            style="padding-top: 6px">
         <mat-checkbox formControlName="inherit">
           {{ 'filter.inherit-owner' | translate}}
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-predicate.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-predicate.component.html
index 0faced041e..d4157ac25b 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-predicate.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" [formGroup]="filterPredicateFormGroup">
-  <div fxFlex fxLayout="column" [ngSwitch]="type">
+<div class="flex-1 flex flex-row justify-start items-center gap-2" [formGroup]="filterPredicateFormGroup">
+  <div class="flex-1 flex flex-col" [ngSwitch]="type">
     <ng-template [ngSwitchCase]="filterPredicateType.STRING">
       <tb-string-filter-predicate
         [allowUserDynamicSource]="allowUserDynamicSource"
@@ -52,7 +52,7 @@
   </div>
   <tb-filter-user-info *ngIf="type !== filterPredicateType.COMPLEX && displayUserParameters"
                        style="width: 60px;"
-                       fxLayout="row" fxLayoutAlign="center"
+                       class="flex flex-row justify-center items-stretch"
                        [valueType]="valueType"
                        [operation]="filterPredicateFormGroup.get('predicate').value?.operation"
                        [key]="key"
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html
index 9c037a5195..37b70e9244 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="filterUserInfoFormGroup" (ngSubmit)="save()" style="width: 500px;">
   <mat-toolbar color="primary">
     <h2>{{(data.readonly ? 'filter.filter-user-params' : 'filter.edit-filter-user-params') | translate}}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -26,12 +26,12 @@
     </button>
   </mat-toolbar>
   <div mat-dialog-content>
-    <fieldset [disabled]="isLoading$ | async" fxLayout="column">
+    <fieldset [disabled]="isLoading$ | async" class="flex flex-col">
       <mat-checkbox formControlName="editable" style="margin-bottom: 16px;">
         {{ 'filter.editable' | translate }}
       </mat-checkbox>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row justify-start items-center gap-2">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>filter.display-label</mat-label>
           <input matInput formControlName="label">
         </mat-form-field>
@@ -45,7 +45,7 @@
       </mat-form-field>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html
index dafcd7900c..1a0e7688e5 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="filtersFormGroup" (ngSubmit)="save()" style="width: 700px;">
   <mat-toolbar color="primary">
     <h2>{{ title | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -27,30 +27,27 @@
   </mat-toolbar>
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  <div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
   <div mat-dialog-content>
-    <div class="tb-filters-header" fxLayout="row" fxLayoutAlign="start center">
-      <span fxFlex="5"></span>
-      <div fxFlex="95" fxLayout="row" fxLayoutAlign="start center">
-        <div class="tb-header-label" translate fxFlex>filter.filter</div>
-        <div class="tb-header-label" translate fxFlex="80px"
-             fxLayout="column" fxLayoutAlign="center center"
+    <div class="tb-filters-header flex flex-row justify-start items-center">
+      <span class="flex-full max-w-5%"></span>
+      <div class="flex-full max-w-95% flex flex-row justify-start items-center">
+        <div class="tb-header-label flex-1" translate>filter.filter</div>
+        <div class="tb-header-label flex-1 basis-20 min-w-20 max-w-20 flex flex-col justify-center items-center" translate
              style="padding-left: 5px;">filter.editable</div>
         <div style="min-width: 132px;"></div>
       </div>
     </div>
     <fieldset [disabled]="isLoading$ | async">
       <mat-divider></mat-divider>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center"
+      <div class="flex-1 flex flex-row justify-start items-center"
            formArrayName="filters"
            *ngFor="let filterControl of filtersFormArray().controls; let $index = index">
-        <span fxFlex="5">{{$index + 1}}.</span>
-        <div class="mat-elevation-z4 tb-filter" fxFlex="95" fxLayout="row" fxLayoutAlign="start center">
-          <mat-label fxFlex>{{filterControl.get('filter').value}}</mat-label>
-          <section fxFlex="80px" style="padding-left: 10px;"
-                   class="tb-editable-switch"
-                   fxLayout="column"
-                   fxLayoutAlign="center center">
+        <span class="flex-full max-w-5%">{{$index + 1}}.</span>
+        <div class="mat-elevation-z4 tb-filter flex-full max-w-5% flex flex-row justify-start items-center">
+          <mat-label class="flex-1">{{filterControl.get('filter').value}}</mat-label>
+          <section style="padding-left: 10px;"
+                   class="tb-editable-switch flex-1 basis-20 min-w-20 max-w-20 flex flex-col justify-center items-center">
             <mat-slide-toggle class="editable-switch"
                               [formControl]="filterControl.get('editable')">
             </mat-slide-toggle>
@@ -90,13 +87,13 @@
     <button mat-raised-button color="primary"
             type="button"
             (click)="addFilter()"
-            [fxShow]="!disableAdd"
+            [class.!hidden]="disableAdd"
             [disabled]="isLoading$ | async"
             matTooltip="{{ 'filter.add' | translate }}"
             matTooltipPosition="above">
       {{ 'filter.add' | translate }}
     </button>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/filter/filters-edit-panel.component.html b/ui-ngx/src/app/modules/home/components/filter/filters-edit-panel.component.html
index 0264381e82..d2a1110479 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filters-edit-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filters-edit-panel.component.html
@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" class="mat-content mat-padding">
+<div class="mat-content mat-padding flex flex-col">
   <div *ngFor="let filter of filtersInfo | keyvalue; let last = last">
-    <div fxLayout="row" fxLayoutAlign="start center">
-      <mat-label fxFlex>{{filter.value.filter}}</mat-label>
+    <div class="flex flex-row justify-start items-center">
+      <mat-label class="flex-1">{{filter.value.filter}}</mat-label>
       <button mat-icon-button color="primary"
               style="min-width: 40px;"
               type="button"
diff --git a/ui-ngx/src/app/modules/home/components/filter/filters-edit.component.html b/ui-ngx/src/app/modules/home/components/filter/filters-edit.component.html
index 4f475bdf7a..4ad6ccf06b 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filters-edit.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filters-edit.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-filters-edit" fxLayout="row" fxLayoutAlign="start center" *ngIf="hasEditableFilters">
+<section class="tb-filters-edit flex flex-row justify-start items-center" *ngIf="hasEditableFilters">
   <button mat-icon-button
           cdkOverlayOrigin #filtersEditPanelOrigin="cdkOverlayOrigin"
           (click)="openEditMode()"
@@ -23,7 +23,7 @@
           [matTooltipPosition]="tooltipPosition">
     <mat-icon>filter_list</mat-icon>
   </button>
-  <span fxHide.lt-lg
+  <span class="lt-lg:!hidden"
         (click)="openEditMode()"
         matTooltip="{{ 'filter.filters' | translate }}"
         [matTooltipPosition]="tooltipPosition">
diff --git a/ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html
index 6692189704..3ce82ebc2a 100644
--- a/ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="keyFilterFormGroup" (ngSubmit)="save()" style="width: 1200px;">
   <mat-toolbar color="primary">
     <h2>{{(data.isAdd ? 'filter.add-key-filter' : (data.readonly ? 'filter.key-filter' : 'filter.edit-key-filter')) | translate}}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -26,10 +26,15 @@
     </button>
   </mat-toolbar>
   <div mat-dialog-content>
-    <fieldset [disabled]="isLoading$ | async" fxLayout="column">
-      <section fxLayout="row" fxLayoutGap="8px" class="entity-key">
-        <section [fxFlex]="isConstantKeyType ? 45 : 70" fxLayout="row" formGroupName="key" fxLayoutGap="8px">
-          <mat-form-field fxFlex="40" class="mat-block">
+    <fieldset [disabled]="isLoading$ | async" class="flex flex-col">
+      <section class="entity-key flex flex-row gap-2">
+        <section class="flex-full flex flex-row gap-2"
+                 [class]="{
+                    'max-w-45%': isConstantKeyType,
+                    'max-w-70%': !isConstantKeyType
+                 }"
+                 formGroupName="key">
+          <mat-form-field class="mat-block flex-full max-w-40%">
             <mat-label translate>filter.key-type.key-type</mat-label>
             <mat-select required formControlName="type">
               <mat-option *ngFor="let type of entityKeyTypes" [value]="type">
@@ -37,7 +42,7 @@
               </mat-option>
             </mat-select>
           </mat-form-field>
-          <mat-form-field fxFlex="60" class="mat-block">
+          <mat-form-field class="mat-block flex-full max-w-60%">
             <mat-label translate>filter.key-name</mat-label>
             <input matInput required formControlName="key"
                    #keyNameInput
@@ -60,7 +65,11 @@
             </mat-error>
           </mat-form-field>
         </section>
-        <mat-form-field [fxFlex]="isConstantKeyType ? 20 : 30" class="mat-block tb-value-type">
+        <mat-form-field class="mat-block tb-value-type flex-full"
+                        [class]="{
+                          'max-w-20%': isConstantKeyType,
+                          'max-w-30%': !isConstantKeyType
+                        }">
           <mat-label translate>filter.value-type.value-type</mat-label>
           <mat-select formControlName="valueType">
             <mat-select-trigger>
@@ -76,8 +85,8 @@
             {{ 'filter.value-type-required' | translate }}
           </mat-error>
         </mat-form-field>
-        <div fxFlex *ngIf="isConstantKeyType">
-          <div fxLayout="column" [ngSwitch]="keyFilterFormGroup.get('valueType').value">
+        <div class="flex-1" *ngIf="isConstantKeyType">
+          <div class="flex flex-col" [ngSwitch]="keyFilterFormGroup.get('valueType').value">
             <ng-template [ngSwitchCase]="entityKeyValueTypeEnum.STRING">
               <mat-form-field class="mat-block">
                 <mat-label translate>filter.value</mat-label>
@@ -114,7 +123,7 @@
       </tb-filter-predicate-list>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.html b/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.html
index df14546754..31afdddb62 100644
--- a/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section fxLayout="column" [formGroup]="keyFilterListFormGroup">
+<section class="flex flex-col" [formGroup]="keyFilterListFormGroup">
   <mat-accordion [multi]="true">
     <mat-expansion-panel [expanded]="true">
       <mat-expansion-panel-header>
@@ -23,27 +23,27 @@
           <div translate>filter.key-filters</div>
         </mat-panel-title>
       </mat-expansion-panel-header>
-      <div fxLayout="row">
-        <span fxFlex="8"></span>
-        <div fxLayout="row" fxLayoutAlign="start center" fxFlex="92">
-          <label fxFlex translate class="tb-title no-padding">filter.key-name</label>
-          <label fxFlex translate class="tb-title no-padding">filter.key-type.key-type</label>
-          <span [fxShow]="!disabled" style="min-width: 80px;">&nbsp;</span>
-          <span [fxShow]="disabled" style="min-width: 40px;">&nbsp;</span>
+      <div class="flex flex-row">
+        <span class="flex-full max-w-8%"></span>
+        <div class="flex-full max-w-92% flex flex-row justify-start items-center">
+          <label translate class="tb-title no-padding flex-1">filter.key-name</label>
+          <label translate class="tb-title no-padding flex-1">filter.key-type.key-type</label>
+          <span [class.!hidden]="disabled" style="min-width: 80px;">&nbsp;</span>
+          <span [class.!hidden]="!disabled" style="min-width: 40px;">&nbsp;</span>
         </div>
       </div>
       <mat-divider></mat-divider>
       <div class="key-filter-list">
-        <div fxLayout="row" fxLayoutAlign="start" style="max-height: 76px;"
+        <div class="flex flex-row justify-start items-stretch" style="max-height: 76px;"
              formArrayName="keyFilters"
              *ngFor="let keyFilterControl of keyFiltersFormArray.controls; let $index = index">
-          <div fxFlex="8" class="filters-operation">
+          <div class="filters-operation flex-full max-w-8%">
             <span *ngIf="$index > 0" translate>filter.operation.and</span>
           </div>
-          <div fxLayout="column" fxFlex="92">
-            <div fxLayout="row" fxLayoutAlign="start center">
-              <div fxFlex>{{ keyFilterControl.value.key.key }}</div>
-              <div fxFlex>{{ entityKeyTypeTranslations.get(keyFilterControl.value.key.type) | translate }}</div>
+          <div class="flex-full max-w-92% flex flex-col">
+            <div class="flex flex-row justify-start items-center">
+              <div class="flex-1">{{ keyFilterControl.value.key.key }}</div>
+              <div class="flex-1">{{ entityKeyTypeTranslations.get(keyFilterControl.value.key.type) | translate }}</div>
               <button mat-icon-button color="primary"
                       type="button"
                       (click)="editKeyFilter($index)"
@@ -52,7 +52,7 @@
                 <mat-icon>{{disabled ? 'more_vert' : 'edit'}}</mat-icon>
               </button>
               <button mat-icon-button color="primary"
-                      [fxShow]="!disabled"
+                      [class.!hidden]="disabled"
                       type="button"
                       (click)="removeKeyFilter($index)"
                       matTooltip="{{ 'filter.remove-key-filter' | translate }}"
@@ -63,13 +63,13 @@
             <mat-divider></mat-divider>
           </div>
         </div>
-        <span [fxShow]="!keyFiltersFormArray.length"
-              fxLayoutAlign="center center" [ngClass]="{'disabled': disabled}"
-              class="no-data-found" translate>filter.no-key-filters</span>
+        <span [class.!hidden]="!!keyFiltersFormArray.length"
+              [class.disabled]="disabled"
+              class="no-data-found flex justify-center items-center" translate>filter.no-key-filters</span>
       </div>
       <div style="margin-top: 16px;">
         <button mat-button mat-raised-button color="primary"
-                [fxShow]="!disabled"
+                [class.!hidden]="disabled"
                 (click)="addKeyFilter()"
                 type="button"
                 matTooltip="{{ 'filter.add-key-filter' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.html b/ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.html
index e2bec1a194..87ac3649bc 100644
--- a/ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="8px" [formGroup]="numericFilterPredicateFormGroup">
-  <mat-form-field hideRequiredMarker fxFlex="30" class="mat-block">
+<div class="flex-1 flex flex-row justify-start items-start gap-2" [formGroup]="numericFilterPredicateFormGroup">
+  <mat-form-field hideRequiredMarker class="mat-block flex-full max-w-30%">
     <mat-select required formControlName="operation" placeholder="{{'filter.operation.operation' | translate}}">
       <mat-option *ngFor="let operation of numericOperations" [value]="operation">
         {{numericOperationTranslations.get(numericOperationEnum[operation]) | translate}}
@@ -25,7 +25,7 @@
   </mat-form-field>
   <tb-filter-predicate-value [allowUserDynamicSource]="allowUserDynamicSource"
                              [onlyUserDynamicSource]="onlyUserDynamicSource"
-                             fxFlex="70"
+                             class="flex-full max-w-70%"
                              [valueType]="valueType"
                              formControlName="value">
   </tb-filter-predicate-value>
diff --git a/ui-ngx/src/app/modules/home/components/filter/string-filter-predicate.component.html b/ui-ngx/src/app/modules/home/components/filter/string-filter-predicate.component.html
index c2888fa06f..6957d5cdd8 100644
--- a/ui-ngx/src/app/modules/home/components/filter/string-filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/string-filter-predicate.component.html
@@ -15,21 +15,21 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="8px" [formGroup]="stringFilterPredicateFormGroup">
-  <div fxFlex="30" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-    <mat-form-field hideRequiredMarker fxFlex class="mat-block">
+<div class="flex-1 flex flex-row justify-start items-start gap-2" [formGroup]="stringFilterPredicateFormGroup">
+  <div class="flex-full max-w-30% flex flex-row justify-start items-center gap-2">
+    <mat-form-field hideRequiredMarker class="mat-block flex-1">
       <mat-select required formControlName="operation" placeholder="{{'filter.operation.operation' | translate}}">
         <mat-option *ngFor="let operation of stringOperations" [value]="operation">
           {{stringOperationTranslations.get(stringOperationEnum[operation]) | translate}}
         </mat-option>
       </mat-select>
     </mat-form-field>
-    <mat-checkbox fxLayout="row" fxLayoutAlign="center" formControlName="ignoreCase" style="min-width: 70px;">
+    <mat-checkbox class="flex flex-row justify-center items-stretch" formControlName="ignoreCase" style="min-width: 70px;">
     </mat-checkbox>
   </div>
   <tb-filter-predicate-value [allowUserDynamicSource]="allowUserDynamicSource"
                              [onlyUserDynamicSource]="onlyUserDynamicSource"
-                             fxFlex="70"
+                             class="flex-full max-w-70%"
                              [valueType]="valueTypeEnum.STRING"
                              [operation]="stringFilterPredicateFormGroup.get('operation').value"
                              formControlName="value">
diff --git a/ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.html
index 03c42e788d..3b0b389859 100644
--- a/ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="userFilterFormGroup" (ngSubmit)="save()" style="width: 400px;">
   <mat-toolbar color="primary">
     <h2>{{ filter.filter }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -60,7 +60,7 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html b/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html
index ca7894c010..2119f7d7d8 100644
--- a/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html
+++ b/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html
@@ -23,7 +23,7 @@
         <button mat-icon-button class="mat-icon-button" aria-label="Previous" (click)="movePrev()">
             <mat-icon class="material-icons" [style.color]="settings.buttonColor">skip_previous</mat-icon>
         </button>
-        <div class="flex flex-col flex-[1_1_100%]">
+        <div class="flex flex-col flex-full">
             <mat-slider [min]="minTimeIndex" [max]="maxTimeIndex" #ngSlider><input matSliderThumb [(ngModel)]="index"  (input)="changeIndex({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value}.value)" #ngSliderThumb="matSliderThumb" />
             </mat-slider>
             <div class="panel-timer">
diff --git a/ui-ngx/tailwind.config.js b/ui-ngx/tailwind.config.js
index e14eb06ccf..8a397b4272 100644
--- a/ui-ngx/tailwind.config.js
+++ b/ui-ngx/tailwind.config.js
@@ -61,11 +61,53 @@ module.exports = {
       }
     },
     extend: {
+      flex: {
+        full: '1 1 100%'
+      },
       gap: {
         '0.75': '0.1875rem'
+      },
+      maxWidth: {
+        '5%': '5%',
+        '8%': '8%',
+        '10%': '10%',
+        '15%': '15%',
+        '20%': '20%',
+        '25%': '25%',
+        '30%': '30%',
+        '35%': '35%',
+        '40%': '40%',
+        '45%': '45%',
+        '50%': '50%',
+        '55%': '55%',
+        '60%': '60%',
+        '65%': '65%',
+        '70%': '70%',
+        '75%': '75%',
+        '80%': '80%',
+        '85%': '85%',
+        '90%': '90%',
+        '92%': '92%',
+        '95%': '95%',
+        '1/2': '50%',
+        '1/3': '33.333333%',
+        '2/3': '66.666667%',
+        '1/6': '16.666667%',
+        '2/6': '33.333333%',
+        '4/6': '66.666667%',
+        '5/6': '83.333333%',
+        '1/12': '8.333333%',
+        '2/12': '16.666667%',
+        '4/12': '33.333333%',
+        '5/12': '41.666667%',
+        '7/12': '58.333333%',
+        '8/12': '66.666667%',
+        '10/12': '83.333333%',
+        '11/12': '91.666667%'
       }
     },
   },
+  safelist: [],
   corePlugins: {
     preflight: false
   },

From 54941bbaf3a7c90ca6fad6d22b4dcd1dc58f1ad2 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Fri, 11 Oct 2024 18:26:03 +0300
Subject: [PATCH 06/34] Flex layout replacements. Switch to tailwind.css.

---
 .../send-notification-button.component.html   |  6 ++--
 .../show-notification-popover.component.html  |  6 ++--
 .../add-device-profile-dialog.component.html  | 14 ++++----
 ...rm-duration-predicate-value.component.html | 14 ++++----
 .../alarm/alarm-dynamic-value.component.html  | 16 +++++-----
 ...alarm-rule-condition-dialog.component.html | 13 ++++----
 .../alarm/alarm-rule-condition.component.html |  6 ++--
 .../profile/alarm/alarm-rule.component.html   |  7 ++--
 .../alarm-schedule-dialog.component.html      |  4 +--
 .../alarm/alarm-schedule-info.component.html  |  2 +-
 .../alarm/alarm-schedule.component.html       | 32 +++++++++----------
 .../alarm/create-alarm-rules.component.html   | 12 +++----
 .../alarm/device-profile-alarm.component.html | 30 ++++++++---------
 .../device-profile-alarms.component.html      |  8 ++---
 .../edit-alarm-details-dialog.component.html  |  6 ++--
 .../asset-profile-autocomplete.component.html |  2 +-
 .../asset-profile-dialog.component.html       |  4 +--
 .../profile/asset-profile.component.html      | 18 +++++------
 ...device-profile-autocomplete.component.html |  2 +-
 .../device-profile-dialog.component.html      |  4 +--
 ...ile-provision-configuration.component.html |  8 ++---
 .../profile/device-profile.component.html     | 20 ++++++------
 ...tenant-profile-autocomplete.component.html |  2 +-
 .../tenant-profile-dialog.component.html      |  4 +--
 .../profile/tenant-profile.component.html     | 16 +++++-----
 ui-ngx/tailwind.config.js                     | 14 +++++++-
 26 files changed, 141 insertions(+), 129 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/notification/send-notification-button.component.html b/ui-ngx/src/app/modules/home/components/notification/send-notification-button.component.html
index 6ad39f1a91..0dc3af27ea 100644
--- a/ui-ngx/src/app/modules/home/components/notification/send-notification-button.component.html
+++ b/ui-ngx/src/app/modules/home/components/notification/send-notification-button.component.html
@@ -15,12 +15,12 @@
     limitations under the License.
 
 -->
-<div *ngIf="show()" fxLayout="row" fxLayoutAlign="end end" style="height: 100%; padding: 0 16px;">
-  <button fxHide.lt-md mat-flat-button color="primary" (click)="sendNotification($event)">
+<div *ngIf="show()" class="flex flex-row justify-end items-end" style="height: 100%; padding: 0 16px;">
+  <button class="lt-md:!hidden" mat-flat-button color="primary" (click)="sendNotification($event)">
     <mat-icon>send</mat-icon>
     <span translate>notification.send-notification</span>
   </button>
-  <button class="mat-elevation-z0" fxHide.gt-sm mat-mini-fab color="primary" (click)="sendNotification($event)">
+  <button class="mat-elevation-z0 gt-sm:!hidden" mat-mini-fab color="primary" (click)="sendNotification($event)">
     <mat-icon>send</mat-icon>
   </button>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html b/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html
index d96739a5cf..29e49e52bc 100644
--- a/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html
+++ b/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section fxLayout="row" fxLayoutAlign="space-between center" style="margin: 0 10px 4px; min-height: 36px">
+<section class="flex flex-row justify-between items-center" style="margin: 0 10px 4px; min-height: 36px">
   <div style="font-weight: 500; letter-spacing: .25px" translate>notification.notification</div>
   <button mat-button color="primary"
           *ngIf="(notifications$ | async).length"
@@ -37,8 +37,8 @@
     </section>
   </div>
   <mat-divider *ngIf="(notifications$ | async).length"></mat-divider>
-  <section fxLayoutAlign="center center" *ngIf="(notifications$ | async).length">
-    <button fxFlex mat-button color="primary" (click)="viewAll($event)">
+  <section class="flex justify-center items-center" *ngIf="(notifications$ | async).length">
+    <button class="flex-1" mat-button color="primary" (click)="viewAll($event)">
       {{ 'notification.view-all' | translate }}
     </button>
   </section>
diff --git a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html
index 3b45e4dcfb..524456a8c8 100644
--- a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2 translate>device-profile.add</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <div [tb-help]="'deviceProfiles'"></div>
   <button mat-icon-button
           (click)="cancel()"
@@ -27,7 +27,7 @@
 </mat-toolbar>
 <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
 </mat-progress-bar>
-<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+<div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
 <div mat-dialog-content>
   <mat-horizontal-stepper [linear]="true"
                           #addDeviceProfileStepper
@@ -67,7 +67,7 @@
             [ruleChainType]="edgeRuleChainType">
             <span tb-hint>{{'device-profile.default-edge-rule-chain-hint' | translate}}</span>
           </tb-rule-chain-autocomplete>
-          <mat-form-field fxHide class="mat-block">
+          <mat-form-field class="mat-block !hidden">
             <mat-label translate>device-profile.type</mat-label>
             <mat-select formControlName="type" required>
               <mat-option *ngFor="let type of deviceProfileTypes" [value]="type">
@@ -78,7 +78,7 @@
               {{ 'device-profile.type-required' | translate }}
             </mat-error>
           </mat-form-field>
-          <tb-gallery-image-input fxFlex
+          <tb-gallery-image-input class="flex-1"
                           label="{{'device-profile.image' | translate}}"
                           formControlName="image">
           </tb-gallery-image-input>
@@ -134,11 +134,11 @@
   </mat-horizontal-stepper>
 </div>
 <div mat-dialog-actions style="padding: 0">
-  <div class="dialog-actions-row" fxFlex fxLayout="row" fxLayoutAlign="end center">
+  <div class="dialog-actions-row flex-1 flex flex-row justify-end items-center">
     <button mat-stroked-button *ngIf="selectedIndex > 0"
             [disabled]="(isLoading$ | async)"
             (click)="previousStep()">{{ 'action.back' | translate }}</button>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-stroked-button
             color="primary"
             *ngIf="showNext"
@@ -146,7 +146,7 @@
             (click)="nextStep()">{{ 'action.next-with-label' | translate:{label: (getFormLabel(this.selectedIndex+1) | translate)} }}</button>
   </div>
   <mat-divider style="width: 100%"></mat-divider>
-  <div class="dialog-actions-row" fxFlex fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="end center">
+  <div class="dialog-actions-row flex-1 flex flex-row justify-end items-center gap-2">
     <button mat-button
             [disabled]="(isLoading$ | async)"
             (click)="cancel()">{{ 'action.cancel' | translate }}</button>
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html
index 4de4aa5764..6f3ee1eead 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" [formGroup]="alarmDurationPredicateValueFormGroup">
-  <div fxFlex fxLayout="column" [fxShow]="!dynamicMode">
+<div class="flex-1 flex flex-row justify-start items-center gap-2" [formGroup]="alarmDurationPredicateValueFormGroup">
+  <div class="flex-1 flex flex-col" [class.!hidden]="dynamicMode">
     <mat-form-field class="mat-block" subscriptSizing="dynamic">
       <input required type="number" matInput
              step="1" min="1" max="2147483647"
@@ -36,9 +36,9 @@
       </mat-error>
     </mat-form-field>
   </div>
-  <div fxFlex fxLayout="column" [fxShow]="dynamicMode">
-    <div formGroupName="dynamicValue" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-      <div fxFlex="40" fxLayout="column">
+  <div class="flex-1 flex flex-col" [class.!hidden]="!dynamicMode">
+    <div formGroupName="dynamicValue" class="flex flex-row justify-start items-center gap-2">
+      <div class="flex-full max-w-40% flex flex-col">
         <mat-form-field class="mat-block" subscriptSizing="dynamic">
           <mat-select formControlName="sourceType" placeholder="{{'filter.dynamic-source-type' | translate}}">
             <mat-option [value]="null">
@@ -50,13 +50,13 @@
           </mat-select>
         </mat-form-field>
       </div>
-      <div fxFlex fxLayout="column">
+      <div class="flex-1 flex flex-col">
         <mat-form-field class="mat-block source-attribute" subscriptSizing="dynamic">
           <input matInput formControlName="sourceAttribute" placeholder="{{'filter.source-attribute' | translate}}">
         </mat-form-field>
       </div>
       <div *ngIf="inheritMode"
-           fxLayout="column"
+           class="flex flex-col"
            style="padding-top: 6px">
         <mat-checkbox formControlName="inherit">
           {{ 'filter.inherit-owner' | translate}}
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-dynamic-value.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-dynamic-value.component.html
index 066398877f..99114f1aa0 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-dynamic-value.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-dynamic-value.component.html
@@ -15,21 +15,21 @@
     limitations under the License.
 
 -->
-<mat-expansion-panel [formGroup] = "dynamicValue" class="device-profile-alarm" style = "margin-bottom: 26px;" fxFlex>
+<mat-expansion-panel [formGroup] = "dynamicValue" class="device-profile-alarm flex-1" style = "margin-bottom: 26px;">
   <mat-expansion-panel-header>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+    <div class="flex-1 flex flex-row justify-start items-center">
       <mat-panel-title>
-        <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+        <div class="flex-1 flex flex-row justify-start items-center">
           {{'filter.dynamic-value' | translate}}
         </div>
       </mat-panel-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
     </div>
   </mat-expansion-panel-header>
   <ng-template matExpansionPanelContent>
-    <div fxFlex fxLayout="column">
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <div fxFlex="40" fxLayout="column">
+    <div class="flex-1 flex flex-col">
+      <div class="flex flex-row justify-start items-center gap-2">
+        <div class="flex-full max-w-40% flex flex-col">
           <mat-form-field class="mat-block">
             <mat-select formControlName="sourceType" placeholder="{{'filter.dynamic-source-type' | translate}}">
               <mat-option [value]="null">
@@ -41,7 +41,7 @@
             </mat-select>
           </mat-form-field>
         </div>
-        <div fxFlex fxLayout="column">
+        <div class="flex-1 flex flex-col">
           <mat-form-field class="mat-block source-attribute">
             <input matInput formControlName="sourceAttribute" placeholder="{{'filter.source-attribute' | translate}}">
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html
index a159202485..1a7aa46f01 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="conditionFormGroup" (ngSubmit)="save()" style="width: 900px;">
   <mat-toolbar color="primary">
     <h2>{{ (readonly ? 'device-profile.alarm-rule-condition' : 'device-profile.edit-alarm-rule-condition') | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -29,7 +29,7 @@
   </mat-progress-bar>
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
-      <div fxFlex fxLayout="column">
+      <div class="flex-1 flex flex-col">
         <tb-key-filter-list
           [displayUserParameters]="false"
           [allowUserDynamicSource]="false"
@@ -49,13 +49,14 @@
               {{ 'device-profile.condition-type-required' | translate }}
             </mat-error>
           </mat-form-field>
-          <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" *ngIf="conditionFormGroup.get('spec.type').value != AlarmConditionType.SIMPLE">
+          <div class="flex flex-row xs:flex-col gt-xs:gap-4" *ngIf="conditionFormGroup.get('spec.type').value != AlarmConditionType.SIMPLE">
             <tb-alarm-duration-predicate-value
-              fxLayout="row" fxFlex formControlName="predicate"
+              class="flex-1 flex flex-row"
+              formControlName="predicate"
               [alarmConditionType]="conditionFormGroup.get('spec.type').value"
             >
             </tb-alarm-duration-predicate-value>
-            <div fxFlex="23" *ngIf="conditionFormGroup.get('spec.type').value == AlarmConditionType.DURATION">
+            <div class="flex-full max-w-23%" *ngIf="conditionFormGroup.get('spec.type').value == AlarmConditionType.DURATION">
               <mat-form-field class="mat-block" subscriptSizing="dynamic">
                 <mat-select formControlName="unit" required
                             placeholder="{{ 'device-profile.condition-duration-time-unit' | translate }}">
@@ -73,7 +74,7 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition.component.html
index ae94002037..d7432ac303 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition.component.html
@@ -15,15 +15,15 @@
     limitations under the License.
 
 -->
-<div fxLayout="row" fxLayoutAlign="start center" [formGroup]="alarmRuleConditionFormGroup" (click)="openFilterDialog($event)" style="min-width: 0;">
+<div class="flex flex-row justify-start items-center" [formGroup]="alarmRuleConditionFormGroup" (click)="openFilterDialog($event)" style="min-width: 0;">
   <span class="tb-alarm-rule-condition title">{{('device-profile.condition' | translate) + ': '}}</span>
-  <div class="tb-alarm-rule-condition" fxFlex fxLayout="column" fxLayoutAlign="center">
+  <div class="tb-alarm-rule-condition flex-1 flex flex-col justify-center items-stretch">
     <tb-filter-text formControlName="condition"
                     [nowrap]="true"
                     required
                     addFilterPrompt="{{'device-profile.enter-alarm-rule-condition-prompt' | translate}}">
     </tb-filter-text>
-    <span *ngIf="specText" class="tb-alarm-rule-condition-spec" [ngClass]="{disabled: this.disabled}" [innerHTML]="specText">
+    <span *ngIf="specText" class="tb-alarm-rule-condition-spec" [class.disabled]="disabled" [innerHTML]="specText">
     </span>
   </div>
   <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.html
index 1282821ca7..d279ce99d3 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.html
@@ -15,12 +15,12 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" [formGroup]="alarmRuleFormGroup">
+<div class="flex flex-col" [formGroup]="alarmRuleFormGroup">
   <tb-alarm-rule-condition formControlName="condition" [deviceProfileId]="deviceProfileId">
   </tb-alarm-rule-condition>
   <tb-alarm-schedule-info formControlName="schedule">
   </tb-alarm-schedule-info>
-  <div *ngIf="!disabled || alarmRuleFormGroup.get('alarmDetails').value" fxLayout="row" fxLayoutAlign="start center">
+  <div *ngIf="!disabled || alarmRuleFormGroup.get('alarmDetails').value" class="flex flex-row justify-start items-center">
     <span class="tb-alarm-rule-details title" (click)="openEditDetailsDialog($event)">
       {{ ('device-profile.alarm-rule-additional-info' | translate) + ': ' }}
     </span>
@@ -35,8 +35,7 @@
       <mat-icon>{{ disabled ? 'visibility' : (alarmRuleFormGroup.get('alarmDetails').value ? 'edit' : 'add') }}</mat-icon>
     </button>
   </div>
-  <div *ngIf="!disabled || alarmRuleFormGroup.get('dashboardId').value" fxLayout="column" fxLayoutAlign="start start"
-       fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="start center">
+  <div *ngIf="!disabled || alarmRuleFormGroup.get('dashboardId').value" class="flex flex-col justify-start items-start gt-sm:flex-row gt-sm:items-center">
     <span class="tb-alarm-rule-dashboard title">
       {{ ('device-profile.alarm-rule-mobile-dashboard' | translate) + ': ' }}
     </span>
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-dialog.component.html
index 99807094cb..aecae6275a 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="alarmScheduleFormGroup" (ngSubmit)="save()" style="width: 900px;">
   <mat-toolbar color="primary">
     <h2>{{ (readonly ? 'device-profile.schedule' : 'device-profile.edit-schedule') | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -32,7 +32,7 @@
       formControlName="alarmSchedule">
     </tb-alarm-schedule>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-info.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-info.component.html
index 4255a4c90b..4914d9d53b 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-info.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-info.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div fxLayout="row" fxLayoutAlign="start center" style="min-width: 0;">
+<div class="flex flex-row justify-start items-center" style="min-width: 0;">
   <span class="tb-alarm-rule-schedule title" (click)="openScheduleDialog($event)">{{('device-profile.schedule' | translate) + ': '}}</span>
   <span class="tb-alarm-rule-schedule" (click)="openScheduleDialog($event)"
        [innerHTML]="scheduleText">
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.html
index e9f46a8f90..8876b113c9 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section [formGroup]="alarmScheduleForm" fxLayout="column">
+<section [formGroup]="alarmScheduleForm" class="flex flex-col">
   <mat-form-field class="mat-block">
     <mat-select formControlName="type" required placeholder="{{ 'device-profile.schedule-type' | translate }}">
       <mat-option *ngFor="let alarmScheduleType of alarmScheduleTypes" [value]="alarmScheduleType">
@@ -35,13 +35,13 @@
     <section *ngIf="alarmScheduleForm.get('type').value === alarmScheduleType.SPECIFIC_TIME">
       <tb-alarm-dynamic-value formControlName = 'dynamicValue' helpId = 'device-profile/alarm_specific_schedule_format'></tb-alarm-dynamic-value>
       <div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-days</div>
-      <div fxLayout="column" fxLayout.gt-md="row" fxLayoutGap="8px">
-        <div fxLayout="row" fxLayoutGap="8px">
+      <div class="flex flex-col gt-md:flex-row gap-2">
+        <div class="flex flex-row gap-2">
           <mat-checkbox *ngFor="let day of firstRowDays" [formControl]="weeklyRepeatControl(day)">
             {{ dayOfWeekTranslationsArray[day] | translate }}
           </mat-checkbox>
         </div>
-        <div fxLayout="row" fxLayoutGap="8px">
+        <div class="flex flex-row gap-2">
           <mat-checkbox *ngFor="let day of secondRowDays" [formControl]="weeklyRepeatControl(day)">
             {{ dayOfWeekTranslationsArray[day] | translate }}
           </mat-checkbox>
@@ -50,22 +50,22 @@
       <tb-error style="display: block;" [error]="alarmScheduleForm.get('daysOfWeek').hasError('dayOfWeeks')
                   ? ('device-profile.schedule-days-of-week-required' | translate) : ''"></tb-error>
       <div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-time</div>
-      <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-        <div fxLayout="row" fxLayoutGap="8px" fxFlex.gt-md>
-          <mat-form-field fxFlex.xs fxFlex.sm="150px" fxFlex.md="150px" fxFlex.gt-md>
+      <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+        <div class="flex flex-row gap-2 gt-md:flex-1">
+          <mat-form-field class="flex-1 sm:basis-37.5 sm:min-w-37.5 sm:max-w-37.5 md:basis-37.5 md:min-w-37.5 md:max-w-37.5">
             <mat-label translate>device-profile.schedule-time-from</mat-label>
             <mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle>
             <mat-datetimepicker #startTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
             <input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker">
           </mat-form-field>
-          <mat-form-field fxFlex.xs fxFlex.sm="150px" fxFlex.md="150px" fxFlex.gt-md>
+          <mat-form-field class="flex-1 sm:basis-37.5 sm:min-w-37.5 sm:max-w-37.5 md:basis-37.5 md:min-w-37.5 md:max-w-37.5">
             <mat-label translate>device-profile.schedule-time-to</mat-label>
             <mat-datetimepicker-toggle [for]="endTimePicker" matPrefix></mat-datetimepicker-toggle>
             <mat-datetimepicker #endTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
             <input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker">
           </mat-form-field>
         </div>
-        <div fxFlex fxLayoutAlign="center center" style="margin: auto">
+        <div class="flex-1 flex justify-center items-center" style="margin: auto">
           <div style="text-align: center"
                [innerHTML]="getSchedulerRangeText(alarmScheduleForm)">
           </div>
@@ -75,26 +75,26 @@
     <section *ngIf="alarmScheduleForm.get('type').value === alarmScheduleType.CUSTOM">
       <tb-alarm-dynamic-value formControlName = 'dynamicValue' helpId = 'device-profile/alarm_custom_schedule_format'></tb-alarm-dynamic-value>
       <div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-days</div>
-      <div *ngFor="let day of allDays" fxLayout="column" formArrayName="items" fxLayoutGap="1em">
-        <div fxLayout.xs="column" fxLayout="row" fxLayoutGap="8px" [formGroupName]="''+day" fxLayoutAlign="start center" fxLayoutAlign.xs="center start">
-          <mat-checkbox formControlName="enabled" fxFlex="17" (change)="changeCustomScheduler($event, day)">
+      <div *ngFor="let day of allDays" class="flex flex-col gap-4" formArrayName="items">
+        <div class="flex flex-row justify-start items-center xs:flex-col xs:justify-center xs:items-start gap-2" [formGroupName]="''+day">
+          <mat-checkbox formControlName="enabled" class="flex-full max-w-17%" (change)="changeCustomScheduler($event, day)">
             {{ dayOfWeekTranslationsArray[day] | translate }}
           </mat-checkbox>
-          <div fxLayout="row" fxLayoutGap="8px" fxFlex>
-            <mat-form-field fxFlex.xs fxFlex.sm="100px" fxFlex.md="100px">
+          <div class="flex-1 flex flex-row gap-2">
+            <mat-form-field class="xs:flex-1 sm:flex-1 sm:basis-25 sm:min-w-25 sm:max-w-25 md:flex-1 md:basis-25 md:min-w-25 md:max-w-25">
               <mat-label translate>device-profile.schedule-time-from</mat-label>
               <mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle>
               <mat-datetimepicker #startTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
               <input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker">
             </mat-form-field>
-            <mat-form-field fxFlex.xs fxFlex.sm="100px" fxFlex.md="100px">
+            <mat-form-field class="xs:flex-1 sm:flex-1 sm:basis-25 sm:min-w-25 sm:max-w-25 md:flex-1 md:basis-25 md:min-w-25 md:max-w-25">
               <mat-label translate>device-profile.schedule-time-to</mat-label>
               <mat-datetimepicker-toggle [for]="endTimePicker" matPrefix></mat-datetimepicker-toggle>
               <mat-datetimepicker #endTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
               <input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker">
             </mat-form-field>
           </div>
-          <div fxFlex fxLayoutAlign="center center"
+          <div class="flex-1 flex justify-center items-center"
                style="text-align: center"
                [innerHTML]="getSchedulerRangeText(itemsSchedulerForm.at(day))">
           </div>
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.html
index ec3d40e09e..0948964b43 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.html
@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="column">
+<div class="flex-1 flex flex-col">
   <div *ngFor="let createAlarmRuleControl of createAlarmRulesFormArray().controls; let $index = index;
-               last as isLast;" fxLayout="row" fxLayoutAlign="start center"
-               fxLayoutGap="8px" style="padding-bottom: 8px;" [formGroup]="createAlarmRuleControl">
-    <div class="create-alarm-rule" fxFlex fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start">
+               last as isLast;" class="flex flex-row justify-start items-center gap-2"
+               style="padding-bottom: 8px;" [formGroup]="createAlarmRuleControl">
+    <div class="create-alarm-rule flex-1 flex flex-row justify-start items-stretch gap-2">
       <mat-form-field class="severity mat-block" floatLabel="always" hideRequiredMarker>
         <mat-label translate>alarm.severity</mat-label>
         <mat-select formControlName="severity"
@@ -35,7 +35,7 @@
         </mat-error>
       </mat-form-field>
       <mat-divider vertical></mat-divider>
-      <tb-alarm-rule formControlName="alarmRule" [deviceProfileId]="deviceProfileId" required fxFlex>
+      <tb-alarm-rule formControlName="alarmRule" [deviceProfileId]="deviceProfileId" required class="flex-1">
       </tb-alarm-rule>
     </div>
     <button *ngIf="!disabled"
@@ -48,7 +48,7 @@
     </button>
   </div>
   <div *ngIf="!createAlarmRulesFormArray().controls.length && !disabled">
-      <span translate fxLayoutAlign="center center" style="margin: 16px 0"
+      <span translate class="flex justify-center items-center" style="margin: 16px 0"
             class="tb-prompt required">device-profile.add-create-alarm-rule-prompt</span>
   </div>
   <div *ngIf="!disabled">
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html
index 502d80fb31..72fd44e1e8 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html
@@ -15,15 +15,15 @@
     limitations under the License.
 
 -->
-<mat-expansion-panel class="device-profile-alarm" fxFlex [formGroup]="alarmFormGroup" [(expanded)]="expanded">
+<mat-expansion-panel class="device-profile-alarm flex-1" [formGroup]="alarmFormGroup" [(expanded)]="expanded">
   <mat-expansion-panel-header>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+    <div class="flex-1 flex flex-row justify-start items-center">
       <mat-panel-title>
-        <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+        <div class="flex-1 flex flex-row justify-start items-center">
           {{ alarmTypeTitle }}
         </div>
       </mat-panel-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
               type="button"
               (click)="removeAlarm.emit()"
@@ -34,9 +34,9 @@
     </div>
   </mat-expansion-panel-header>
   <ng-template matExpansionPanelContent>
-    <div fxLayout="column" fxLayoutGap="0.5em">
+    <div class="flex flex-col gap-2">
       <mat-divider></mat-divider>
-      <mat-form-field fxFlex floatLabel="always">
+      <mat-form-field class="flex-1" floatLabel="always">
         <mat-label>{{'device-profile.alarm-type' | translate}}</mat-label>
         <input required matInput formControlName="alarmType" placeholder="Enter alarm type">
         <mat-error *ngIf="alarmFormGroup.get('alarmType').hasError('required')">
@@ -53,7 +53,7 @@
     <mat-expansion-panel class="advanced-settings" [expanded]="false">
       <mat-expansion-panel-header>
         <mat-panel-title>
-          <div fxFlex fxLayout="row" fxLayoutAlign="end center">
+          <div class="flex-1 flex flex-row justify-end items-center">
             <div class="tb-small" translate>device-profile.advanced-settings</div>
           </div>
         </mat-panel-title>
@@ -89,18 +89,18 @@
         </mat-checkbox>
       </ng-template>
     </mat-expansion-panel>
-    <div fxFlex fxLayout="column">
+    <div class="flex-1 flex flex-col">
       <div translate class="tb-small" style="padding-bottom: 8px;">device-profile.create-alarm-rules</div>
       <tb-create-alarm-rules formControlName="createRules"
                              style="padding-bottom: 16px;"
                              [deviceProfileId]="deviceProfileId">
       </tb-create-alarm-rules>
       <div translate class="tb-small" style="padding-bottom: 8px;">device-profile.clear-alarm-rule</div>
-      <div fxLayout="row" fxLayoutGap="8px;" fxLayoutAlign="start center"
-           [fxShow]="alarmFormGroup.get('clearRule').value"
+      <div class="flex flex-row justify-start items-center gap-2"
+           [class.!hidden]="!alarmFormGroup.get('clearRule').value"
            style="padding-bottom: 8px;">
-        <div class="clear-alarm-rule" fxFlex fxLayout="row">
-          <tb-alarm-rule formControlName="clearRule" fxFlex [deviceProfileId]="deviceProfileId">
+        <div class="clear-alarm-rule flex-1 flex flex-row">
+          <tb-alarm-rule formControlName="clearRule" class="flex-1" [deviceProfileId]="deviceProfileId">
           </tb-alarm-rule>
         </div>
         <button *ngIf="!disabled"
@@ -113,10 +113,10 @@
         </button>
       </div>
       <div *ngIf="disabled && !alarmFormGroup.get('clearRule').value">
-        <span translate fxLayoutAlign="center center" style="margin: 16px 0"
-              class="tb-prompt">device-profile.no-clear-alarm-rule</span>
+        <span translate style="margin: 16px 0"
+              class="tb-prompt flex justify-center items-center">device-profile.no-clear-alarm-rule</span>
       </div>
-      <div *ngIf="!disabled" [fxShow]="!alarmFormGroup.get('clearRule').value">
+      <div *ngIf="!disabled" [class.!hidden]="alarmFormGroup.get('clearRule').value">
         <button mat-stroked-button color="primary"
                 type="button"
                 (click)="addClearAlarmRule()"
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.html
index db3433da8a..84c2f5bbda 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.html
@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<div fxLayout="column">
+<div class="flex flex-col">
   <div class="tb-device-profile-alarms">
     <div *ngFor="let alarmControl of alarmsFormArray.controls; trackBy: trackByAlarm;
                  let $index = index; last as isLast;"
-         fxLayout="column" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+         class="flex flex-col" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
       <tb-device-profile-alarm [formControl]="alarmControl"
                                [expanded]="$index === 0"
                                [deviceProfileId]="deviceProfileId"
@@ -28,8 +28,8 @@
     </div>
   </div>
   <div *ngIf="!alarmsFormArray.controls.length">
-      <span translate fxLayoutAlign="center center"
-            class="tb-prompt">device-profile.no-alarm-rules</span>
+      <span translate
+            class="tb-prompt flex justify-center items-center">device-profile.no-alarm-rules</span>
   </div>
   <div *ngIf="!disabled" style="padding-top: 16px;">
     <button mat-raised-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/edit-alarm-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/edit-alarm-details-dialog.component.html
index 50e7c5cb69..d03f5d2cef 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/edit-alarm-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/edit-alarm-details-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="editDetailsFormGroup" (ngSubmit)="save()" style="width: 800px;">
   <mat-toolbar color="primary">
     <h2>{{ 'device-profile.edit-alarm-rule-additional-info' | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -29,7 +29,7 @@
   </mat-progress-bar>
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
-      <div fxFlex fxLayout="column">
+      <div class="flex-1 flex flex-col">
         <mat-form-field class="mat-block">
           <textarea matInput formControlName="alarmDetails" rows="5"
             placeholder="{{ 'device-profile.alarm-rule-additional-info-placeholder' | translate }}"></textarea>
@@ -38,7 +38,7 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.html b/ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.html
index 50cca1710e..f55fbfb001 100644
--- a/ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.html
@@ -25,7 +25,7 @@
          (keydown)="assetProfileEnter($event)"
          (keypress)="assetProfileEnter($event)"
          [matAutocomplete]="assetProfileAutocomplete"
-         [fxShow]="!showDetailsPageLink || !useAssetProfileLink || !disabled || !selectAssetProfileFormGroup.get('assetProfile').value">
+         [class.!hidden]="showDetailsPageLink && useAssetProfileLink && disabled && selectAssetProfileFormGroup.get('assetProfile').value">
   <a *ngIf="showDetailsPageLink && useAssetProfileLink && selectAssetProfileFormGroup.get('assetProfile').value && disabled"
      aria-label="Open asset profile" [routerLink]=assetProfileURL>
     {{ displayAssetProfileFn(selectAssetProfileFormGroup.get('assetProfile').value) }}
diff --git a/ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.html
index 4c3893732e..f8a3a9de2f 100644
--- a/ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.html
@@ -18,7 +18,7 @@
 <form (ngSubmit)="save()" style="width: 600px;">
   <mat-toolbar color="primary">
     <h2>{{ (isAdd ? 'asset-profile.add' : 'asset-profile.edit' ) | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -36,7 +36,7 @@
       [isEdit]="true">
     </tb-asset-profile>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
diff --git a/ui-ngx/src/app/modules/home/components/profile/asset-profile.component.html b/ui-ngx/src/app/modules/home/components/profile/asset-profile.component.html
index 67f3bcdf13..ae90421cb0 100644
--- a/ui-ngx/src/app/modules/home/components/profile/asset-profile.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/asset-profile.component.html
@@ -15,43 +15,43 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column" *ngIf="!standalone">
+<div class="tb-details-buttons xs:flex xs:flex-col" *ngIf="!standalone">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'export')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'asset-profile.export' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'setDefault')"
-          [fxShow]="!isEdit && !entity?.default">
+          [class.!hidden]="isEdit || entity?.default">
     {{'asset-profile.set-default' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'asset-profile.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onAssetProfileIdCopied($event)"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>asset-profile.copyId</span>
     </button>
   </div>
 </div>
-<div [ngClass]="{'mat-padding': !standalone}" fxLayout="column">
+<div [class.mat-padding]="!standalone" class="flex flex-col">
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit" style="min-width: 0;">
       <mat-form-field class="mat-block">
@@ -83,7 +83,7 @@
         [ruleChainType]="edgeRuleChainType">
         <span tb-hint>{{'asset-profile.default-edge-rule-chain-hint' | translate}}</span>
       </tb-rule-chain-autocomplete>
-      <tb-gallery-image-input fxFlex
+      <tb-gallery-image-input class="flex-1"
                       label="{{'asset-profile.image' | translate}}"
                       formControlName="image">
       </tb-gallery-image-input>
diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.html b/ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.html
index cae46d2864..fc24273b78 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.html
@@ -25,7 +25,7 @@
          (keydown)="deviceProfileEnter($event)"
          (keypress)="deviceProfileEnter($event)"
          [matAutocomplete]="deviceProfileAutocomplete"
-         [fxShow]="!showDetailsPageLink || !useDeviceProfileLink || !disabled || !selectDeviceProfileFormGroup.get('deviceProfile').value">
+         [class.!hidden]="showDetailsPageLink && useDeviceProfileLink && disabled && selectDeviceProfileFormGroup.get('deviceProfile').value">
   <a *ngIf="showDetailsPageLink && useDeviceProfileLink && selectDeviceProfileFormGroup.get('deviceProfile').value && disabled"
      aria-label="Open device profile" [routerLink]=deviceProfileURL>
     {{ displayDeviceProfileFn(selectDeviceProfileFormGroup.get('deviceProfile').value) }}
diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/device-profile-dialog.component.html
index ed1704e47d..79e0939dd7 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device-profile-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile-dialog.component.html
@@ -18,7 +18,7 @@
 <form (ngSubmit)="save()" style="width: 1000px;">
   <mat-toolbar color="primary">
     <h2>{{ (isAdd ? 'device-profile.add' : 'device-profile.edit' ) | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -36,7 +36,7 @@
       [isEdit]="true">
     </tb-device-profile>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html
index dd184a36e6..5001968224 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html
@@ -35,7 +35,7 @@
       <ng-container *ngTemplateOutlet="default"></ng-container>
     </ng-template>
     <ng-template [ngSwitchCase]="deviceProvisionType.X509_CERTIFICATE_CHAIN">
-      <div fxFlex fxLayoutAlign="start center" class="tb-hint">
+      <div class="tb-hint flex-1 flex justify-start items-center">
         <span [innerHTML]="'device-profile.provision-strategy-x509.certificate-chain-hint' | translate"></span>
         <span tb-help-popup="device-profile/x509-chain-hint"
              tb-help-popup-placement="top"
@@ -69,8 +69,8 @@
       </mat-form-field>
     </ng-template>
     <ng-template #default>
-      <section fxLayoutGap.gt-xs="8px" fxLayout="row" fxLayout.xs="column">
-        <mat-form-field fxFlex class="mat-block">
+      <section class="flex flex-row xs:flex-col gt-xs:gap-2">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>device-profile.provision-device-key</mat-label>
           <input matInput formControlName="provisionDeviceKey" required/>
           <button matSuffix mat-icon-button
@@ -85,7 +85,7 @@
             {{ 'device-profile.provision-device-key-required' | translate }}
           </mat-error>
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>device-profile.provision-device-secret</mat-label>
           <input matInput formControlName="provisionDeviceSecret" required/>
           <button matSuffix mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile.component.html b/ui-ngx/src/app/modules/home/components/profile/device-profile.component.html
index 10c1349b40..ef5f4809ae 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device-profile.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile.component.html
@@ -15,43 +15,43 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column" *ngIf="!standalone">
+<div class="tb-details-buttons xs:flex xs:flex-col" *ngIf="!standalone">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'export')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'device-profile.export' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'setDefault')"
-          [fxShow]="!isEdit && !entity?.default">
+          [class.!hidden]="isEdit || entity?.default">
     {{'device-profile.set-default' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'device-profile.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onDeviceProfileIdCopied($event)"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>device-profile.copyId</span>
     </button>
   </div>
 </div>
-<div [ngClass]="{'mat-padding': !standalone}" fxLayout="column">
+<div [class.mat-padding]="!standalone" class="flex flex-col">
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit" style="min-width: 0;">
       <mat-form-field class="mat-block">
@@ -97,7 +97,7 @@
         [deviceProfileId]="deviceProfileId?.id"
         formControlName="softwareId">
       </tb-ota-package-autocomplete>
-      <mat-form-field fxHide class="mat-block">
+      <mat-form-field class="mat-block !hidden">
         <mat-label translate>device-profile.type</mat-label>
         <mat-select formControlName="type" required>
           <mat-option *ngFor="let type of deviceProfileTypes" [value]="type">
@@ -108,7 +108,7 @@
           {{ 'device-profile.type-required' | translate }}
         </mat-error>
       </mat-form-field>
-      <tb-gallery-image-input fxFlex
+      <tb-gallery-image-input class="flex-1"
                       label="{{'device-profile.image' | translate}}"
                       formControlName="image">
       </tb-gallery-image-input>
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant-profile-autocomplete.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant-profile-autocomplete.component.html
index 75ea30c884..b49fe5fbfe 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant-profile-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant-profile-autocomplete.component.html
@@ -25,7 +25,7 @@
          (keydown)="tenantProfileEnter($event)"
          (keypress)="tenantProfileEnter($event)"
          [matAutocomplete]="tenantProfileAutocomplete"
-         [fxShow]="!showDetailsPageLink || !disabled || !selectTenantProfileFormGroup.get('tenantProfile').value">
+         [class.!hidden]="showDetailsPageLink && disabled && selectTenantProfileFormGroup.get('tenantProfile').value">
   <a *ngIf="showDetailsPageLink && selectTenantProfileFormGroup.get('tenantProfile').value && disabled" aria-label="Open tenant profile" [routerLink]=tenantProfileURL>
     {{ displayTenantProfileFn(selectTenantProfileFormGroup.get('tenantProfile').value) }}
   </a>
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.html
index 1d8c0ce26d..b3c3e4504a 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.html
@@ -18,7 +18,7 @@
 <form (ngSubmit)="save()" style="width: 650px;">
   <mat-toolbar color="primary">
     <h2>{{ (isAdd ? 'tenant-profile.add' : 'tenant-profile.edit' ) | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -36,7 +36,7 @@
       [isEdit]="true">
     </tb-tenant-profile>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.html
index 8c18506680..267b56c4db 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.html
@@ -15,37 +15,37 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column" *ngIf="!standalone">
+<div class="tb-details-buttons xs:flex xs:flex-col" *ngIf="!standalone">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'setDefault')"
-          [fxShow]="!isEdit && !entity?.default">
+          [class.!hidden]="isEdit || entity?.default">
     {{'tenant-profile.set-default' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'tenant-profile.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onTenantProfileIdCopied($event)"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>tenant-profile.copyId</span>
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block" appearance="fill">
@@ -58,7 +58,7 @@
           {{ 'tenant-profile.name-max-length' | translate }}
         </mat-error>
       </mat-form-field>
-      <div fxLayout="column">
+      <div class="flex flex-col">
         <mat-checkbox class="hinted-checkbox" formControlName="isolatedTbRuleEngine">
           <div>{{ 'tenant.isolated-tb-rule-engine' | translate }}</div>
           <div class="tb-hint">{{'tenant.isolated-tb-rule-engine-details' | translate}}</div>
diff --git a/ui-ngx/tailwind.config.js b/ui-ngx/tailwind.config.js
index 8a397b4272..f29ff314b4 100644
--- a/ui-ngx/tailwind.config.js
+++ b/ui-ngx/tailwind.config.js
@@ -61,18 +61,28 @@ module.exports = {
       }
     },
     extend: {
+      flexBasis: {
+        '25': '6.25rem',
+        '37.5': '9.375rem'
+      },
       flex: {
         full: '1 1 100%'
       },
       gap: {
         '0.75': '0.1875rem'
       },
+      minWidth: {
+        '25': '6.25rem',
+        '37.5': '9.375rem'
+      },
       maxWidth: {
         '5%': '5%',
         '8%': '8%',
         '10%': '10%',
         '15%': '15%',
+        '17%': '17%',
         '20%': '20%',
+        '23%': '23%',
         '25%': '25%',
         '30%': '30%',
         '35%': '35%',
@@ -103,7 +113,9 @@ module.exports = {
         '7/12': '58.333333%',
         '8/12': '66.666667%',
         '10/12': '83.333333%',
-        '11/12': '91.666667%'
+        '11/12': '91.666667%',
+        '25': '6.25rem',
+        '37.5': '9.375rem'
       }
     },
   },

From 2f5a42ff19ff9bb473e9d481f0d94eafde289605 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Fri, 11 Oct 2024 18:29:40 +0300
Subject: [PATCH 07/34] Add license header

---
 ui-ngx/tailwind.config.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/ui-ngx/tailwind.config.js b/ui-ngx/tailwind.config.js
index f29ff314b4..1349db7af8 100644
--- a/ui-ngx/tailwind.config.js
+++ b/ui-ngx/tailwind.config.js
@@ -1,3 +1,18 @@
+/*
+ * Copyright © 2016-2024 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   important: ".tb-default",

From 116611393ca53baaddaaee62a666527574e6dcec Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Fri, 11 Oct 2024 18:57:23 +0300
Subject: [PATCH 08/34] Flex layout replacements. Switch to tailwind.css.

---
 ...ile-transport-configuration.component.html | 14 ++++----
 .../common/power-mode-setting.component.html  |  4 +--
 .../common/time-unit-select.component.html    |  6 ++--
 .../lwm2m-attributes-dialog.component.html    |  4 +--
 .../lwm2m-attributes-key-list.component.html  | 27 ++++++++--------
 .../lwm2m/lwm2m-attributes.component.html     |  2 +-
 ...ap-add-config-server-dialog.component.html | 12 +++----
 ...2m-bootstrap-config-servers.component.html |  6 ++--
 .../lwm2m-device-config-server.component.html | 32 +++++++++----------
 ...ile-transport-configuration.component.html | 12 +++----
 ...object-add-instances-dialog.component.html |  6 ++--
 ...ve-attr-telemetry-instances.component.html | 12 +++----
 ...ve-attr-telemetry-resources.component.html | 28 ++++++++--------
 ...wm2m-observe-attr-telemetry.component.html |  4 +--
 ...ile-transport-configuration.component.html | 22 ++++++-------
 ...rofile-communication-config.component.html | 10 +++---
 ...snmp-device-profile-mapping.component.html | 28 ++++++++--------
 ...ile-transport-configuration.component.html |  6 ++--
 ui-ngx/tailwind.config.js                     |  3 ++
 19 files changed, 120 insertions(+), 118 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/profile/device/coap-device-profile-transport-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/device/coap-device-profile-transport-configuration.component.html
index 89cc3d8be9..b3ef45c672 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/coap-device-profile-transport-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/coap-device-profile-transport-configuration.component.html
@@ -19,7 +19,7 @@
   <section formGroupName="coapDeviceTypeConfiguration">
     <fieldset class="fields-group">
       <legend class="group-title" translate>device-profile.coap-device-type</legend>
-      <div fxLayoutGap="8px" fxLayout="column">
+      <div class="flex flex-col gap-2">
         <mat-form-field class="mat-block">
           <mat-select formControlName="coapDeviceType" required>
             <mat-option *ngFor="let type of coapTransportDeviceTypes" [value]="type">
@@ -35,7 +35,7 @@
     <div *ngIf="coapDeviceTypeDefault" formGroupName="transportPayloadTypeConfiguration">
       <fieldset class="fields-group">
         <legend class="group-title" translate>device-profile.coap-device-payload-type</legend>
-        <div fxLayoutGap="8px" fxLayout="column">
+        <div class="flex flex-col gap-2">
           <mat-form-field class="mat-block">
             <mat-select formControlName="transportPayloadType" required>
               <mat-option *ngFor="let type of transportPayloadTypes" [value]="type">
@@ -46,10 +46,10 @@
               {{ 'device-profile.mqtt-payload-type-required' | translate }}
             </mat-error>
           </mat-form-field>
-          <div *ngIf="protoPayloadType" fxLayout="column">
+          <div *ngIf="protoPayloadType" class="flex flex-col">
             <ng-container>
               <tb-protobuf-content
-                fxFlex
+                class="flex-1"
                 formControlName="deviceTelemetryProtoSchema"
                 label="{{ 'device-profile.telemetry-proto-schema' | translate }}"
                 [fillHeight]="true">
@@ -60,7 +60,7 @@
             </ng-container>
             <ng-container>
               <tb-protobuf-content
-                fxFlex
+                class="flex-1"
                 formControlName="deviceAttributesProtoSchema"
                 label="{{ 'device-profile.attributes-proto-schema' | translate }}"
                 [fillHeight]="true">
@@ -71,7 +71,7 @@
             </ng-container>
             <ng-container>
               <tb-protobuf-content
-                fxFlex
+                class="flex-1"
                 formControlName="deviceRpcRequestProtoSchema"
                 label="{{ 'device-profile.rpc-request-proto-schema' | translate }}"
                 [fillHeight]="true">
@@ -82,7 +82,7 @@
             </ng-container>
             <ng-container>
               <tb-protobuf-content
-                fxFlex
+                class="flex-1"
                 formControlName="deviceRpcResponseProtoSchema"
                 label="{{ 'device-profile.rpc-response-proto-schema' | translate }}"
                 [fillHeight]="true">
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/common/power-mode-setting.component.html b/ui-ngx/src/app/modules/home/components/profile/device/common/power-mode-setting.component.html
index 2b8dc0023c..237aad2d1a 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/common/power-mode-setting.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/common/power-mode-setting.component.html
@@ -16,7 +16,7 @@
 
 -->
 <section [formGroup]="parentForm">
-  <mat-form-field class="mat-block" fxFlex>
+  <mat-form-field class="mat-block flex-1">
     <mat-label *ngIf="isDeviceSetting">{{ "device-profile.power-saving-mode" | translate }}</mat-label>
     <mat-select formControlName="powerMode">
       <mat-option [value]="null" *ngIf="isDeviceSetting">{{ "device-profile.power-saving-mode-type.default" | translate }}</mat-option>
@@ -25,7 +25,7 @@
       </mat-option>
     </mat-select>
   </mat-form-field>
-  <section class="mat-block" fxFlex *ngIf="parentForm.get('powerMode').value === 'E_DRX'">
+  <section class="mat-block flex-1" *ngIf="parentForm.get('powerMode').value === 'E_DRX'">
     <tb-time-unit-select [labelText]="'device-profile.edrx-cycle'"
                          [requiredText]="'device-profile.edrx-cycle-required'"
                          [patternText]="'device-profile.edrx-cycle-pattern'"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/common/time-unit-select.component.html b/ui-ngx/src/app/modules/home/components/profile/device/common/time-unit-select.component.html
index e21d7b67a0..b69af5fa30 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/common/time-unit-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/common/time-unit-select.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<section [formGroup]="timeUnitSelectFormGroup" fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-  <mat-form-field class="mat-block" fxFlex>
+<section [formGroup]="timeUnitSelectFormGroup" class="flex flex-row xs:flex-col gt-xs:gap-2">
+  <mat-form-field class="mat-block flex-1">
     <mat-label>{{ labelText | translate }}</mat-label>
     <input matInput type="number" min="0" formControlName="time" required>
     <mat-error *ngIf="timeUnitSelectFormGroup.get('time').hasError('required')">
@@ -29,7 +29,7 @@
       {{ (minText || patternText) | translate : {min: minTime/1000} }}
     </mat-error>
   </mat-form-field>
-  <mat-form-field class="mat-block" fxFlex>
+  <mat-form-field class="mat-block flex-1">
     <mat-label translate>device-profile.condition-duration-time-unit</mat-label>
     <mat-select formControlName="unit">
       <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-dialog.component.html
index 1dd9d4ccfd..65e4e63538 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-dialog.component.html
@@ -20,7 +20,7 @@
     <h2>
       {{ (readonly ? 'device-profile.lwm2m.view-attributes' : 'device-profile.lwm2m.edit-attributes') | translate : {name: name} }}
     </h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -35,7 +35,7 @@
       formControlName="attributes">
     </tb-lwm2m-attributes-key-list>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-key-list.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-key-list.component.html
index 107ea8e15f..61d6b4793c 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-key-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-key-list.component.html
@@ -15,17 +15,17 @@
     limitations under the License.
 
 -->
-<section fxLayout="column" class="name-value-map" [formGroup]="attributesValueFormGroup">
-  <div fxLayout="row" fxLayoutGap="8px" style="max-height: 40px; margin-top: 8px;">
-    <label fxFlex="40" class="tb-title no-padding" style="min-width: 230px;" translate>device-profile.lwm2m.attribute-name</label>
-    <label fxFlex="60" class="tb-title no-padding" translate>device-profile.lwm2m.attribute-value</label>
-    <span [fxShow]="!disabled" style="width: 40px;"></span>
+<section class="name-value-map flex flex-col" [formGroup]="attributesValueFormGroup">
+  <div class="flex flex-row gap-2" style="max-height: 40px; margin-top: 8px;">
+    <label class="tb-title no-padding flex-full max-w-40%" style="min-width: 230px;" translate>device-profile.lwm2m.attribute-name</label>
+    <label class="tb-title no-padding flex-full max-w-60%" translate>device-profile.lwm2m.attribute-value</label>
+    <span [class.!hidden]="disabled" style="width: 40px;"></span>
   </div>
-  <div fxLayout="column" class="map-list"
+  <div class="map-list flex flex-col"
        *ngFor="let nameValueControl of attributesValueFormArray().controls; let $index = index"
         [formGroup]="nameValueControl">
-    <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-      <mat-form-field fxFlex="40">
+    <div class="flex flex-row justify-start items-center gap-2">
+      <mat-form-field class="flex-full max-w-40%">
         <mat-select formControlName="name" required>
           <mat-option *ngFor="let attributeName of attributeNames" [value]="attributeName"
                       [disabled]="isDisabledAttributeName(attributeName, $index)">
@@ -36,13 +36,13 @@
           {{ 'device-profile.lwm2m.attribute-name-required' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex="60">
+      <mat-form-field class="flex-full max-w-60%">
         <input formControlName="value" matInput required type="number"
                placeholder="{{ 'key-val.value' | translate }}">
-        <mat-error fxLayout="row" *ngIf="nameValueControl.get('value').hasError('required')">
+        <mat-error class="flex flex-row" *ngIf="nameValueControl.get('value').hasError('required')">
           {{ 'device-profile.lwm2m.attribute-value-required' | translate }}
         </mat-error>
-        <mat-error fxLayout="row" *ngIf="nameValueControl.get('value').hasError('min') ||
+        <mat-error class="flex flex-row" *ngIf="nameValueControl.get('value').hasError('min') ||
                                           nameValueControl.get('value').hasError('pattern')">
           {{ 'device-profile.lwm2m.attribute-value-pattern' | translate }}
         </mat-error>
@@ -57,9 +57,8 @@
       </button>
     </div>
   </div>
-  <div [fxShow]="!attributesValueFormArray().length"
-        fxLayoutAlign="center center"
-        class="map-list" translate>device-profile.lwm2m.no-attributes-set</div>
+  <div [class.!hidden]="attributesValueFormArray().length"
+        class="map-list flex justify-center items-center" translate>device-profile.lwm2m.no-attributes-set</div>
   <div style="margin-top: 9px;" *ngIf="!disabled && isAddEnabled">
     <button mat-stroked-button color="primary"
             [disabled]="isLoading$ | async"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes.component.html
index c2337b53f6..e8c7175b85 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div [fxHide]="disabled && isEmpty()" matTooltip="{{ tooltipSetAttributesTelemetry | translate }}" matTooltipPosition="above">
+<div [class.!hidden]="disabled && isEmpty()" matTooltip="{{ tooltipSetAttributesTelemetry | translate }}" matTooltipPosition="above">
   <button type="button"
           [disabled]="isDisableBtn()"
           mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-add-config-server-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-add-config-server-dialog.component.html
index de728f7c6b..4bf371bd86 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-add-config-server-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-add-config-server-dialog.component.html
@@ -16,17 +16,17 @@
 
 -->
 <form [formGroup]="addConfigServerFormGroup" style="width: 400px;">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2 translate>device-profile.lwm2m.add-new-server-title</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button (click)="cancel()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-  <div mat-dialog-content fxLayout="column">
+  <div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
+  <div mat-dialog-content class="flex flex-col">
     <mat-form-field>
       <mat-label>{{ 'device-profile.lwm2m.server-type' | translate }}</mat-label>
       <mat-select formControlName="serverType">
@@ -37,8 +37,8 @@
       </mat-select>
     </mat-form-field>
   </div>
-  <div mat-dialog-actions fxLayout="row">
-    <span fxFlex></span>
+  <div mat-dialog-actions class="flex flex-row">
+    <span class="flex-1"></span>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-config-servers.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-config-servers.component.html
index ce07156e2c..e190d38d6b 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-config-servers.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-config-servers.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div fxLayout="column">
+<div class="flex flex-col">
   <mat-accordion multi="true">
     <div *ngFor="let serverConfig of serverConfigsFromArray.controls; trackBy: trackByParams; let $index = index;">
       <tb-profile-lwm2m-device-config-server
@@ -27,8 +27,8 @@
     </div>
   </mat-accordion>
   <div *ngIf="!serverConfigsFromArray.controls.length" style="margin:32px 0">
-      <span translate fxLayoutAlign="center center"
-            class="tb-prompt">device-profile.lwm2m.no-config-servers</span>
+      <span translate
+            class="tb-prompt flex justify-center items-center">device-profile.lwm2m.no-config-servers</span>
   </div>
   <div *ngIf="!disabled" style="padding-top: 16px;">
     <button mat-raised-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-config-server.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-config-server.component.html
index 43ff1078af..9b9dff6217 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-config-server.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-config-server.component.html
@@ -17,12 +17,12 @@
 -->
 <mat-expansion-panel [formGroup]="serverFormGroup" #serverPanel>
   <mat-expansion-panel-header>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+    <div class="flex-1 flex flex-row justify-start items-center">
       <mat-panel-title>
-        <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+        <div class="flex-1 flex flex-row justify-start items-center">
           <div style="min-width:150px">{{ (serverFormGroup.get('bootstrapServerIs').value ?
             'device-profile.lwm2m.bootstrap-server' : 'device-profile.lwm2m.lwm2m-server') | translate }}</div>
-          <div *ngIf="!serverPanel.expanded" fxLayout="row" style="font-size:14px" class="no-wrap">
+          <div *ngIf="!serverPanel.expanded" style="font-size:14px" class="no-wrap flex flex-row">
             <div style="margin-left:32px">{{ ('device-profile.lwm2m.short-id' | translate) + ': ' }}
               <span style="font-style: italic">{{ serverFormGroup.get('shortServerId').value }}</span>
             </div>
@@ -32,7 +32,7 @@
           </div>
         </div>
       </mat-panel-title>
-      <span fxFlex="100"></span>
+      <span class="flex-full"></span>
       <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
               type="button"
               (click)="removeServer.emit($event)"
@@ -44,8 +44,8 @@
   </mat-expansion-panel-header>
   <ng-template matExpansionPanelContent>
     <section>
-      <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px" fxLayoutGap.xs="0px">
-        <mat-form-field fxFlex>
+      <div class="flex flex-row xs:flex-col gap-2 xs:gap-0">
+        <mat-form-field class="flex-1">
           <mat-label>{{ 'device-profile.lwm2m.mode' | translate }}</mat-label>
           <mat-select formControlName="securityMode">
             <mat-option *ngFor="let securityMode of securityConfigLwM2MTypes"
@@ -54,7 +54,7 @@
             </mat-option>
           </mat-select>
         </mat-form-field>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>{{ 'device-profile.lwm2m.short-id' | translate }}</mat-label>
           <mat-icon *ngIf="!disabled" class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
                     matTooltip="{{ (isBootstrap ? 'device-profile.lwm2m.short-id-tooltip-bootstrap': 'device-profile.lwm2m.short-id-tooltip') | translate }}">help</mat-icon>
@@ -71,15 +71,15 @@
           </mat-error>
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px" fxLayoutGap.xs="0px">
-        <mat-form-field fxFlex>
+      <div class="flex flex-row xs:flex-col gap-2 xs:gap-0">
+        <mat-form-field class="flex-1">
           <mat-label>{{ 'device-profile.lwm2m.server-host' | translate }}</mat-label>
           <input matInput type="text" formControlName="host" required>
           <mat-error *ngIf="serverFormGroup.get('host').hasError('required')">
             {{ 'device-profile.lwm2m.server-host-required' | translate }}
           </mat-error>
         </mat-form-field>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>{{ 'device-profile.lwm2m.server-port' | translate }}</mat-label>
           <input matInput type="number" formControlName="port" required min="0" max="65535" readonly>
           <mat-error *ngIf="serverFormGroup.get('port').hasError('required')">
@@ -94,8 +94,8 @@
           </mat-error>
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px" fxLayoutGap.xs="0px">
-        <mat-form-field fxFlex>
+      <div class="flex flex-row xs:flex-col gap-2 xs:gap-0">
+        <mat-form-field class="flex-1">
           <mat-label>{{ 'device-profile.lwm2m.client-hold-off-time' | translate }}</mat-label>
           <mat-icon *ngIf="!disabled" class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
                     matTooltip="{{'device-profile.lwm2m.client-hold-off-time-tooltip' | translate }}">help</mat-icon>
@@ -108,7 +108,7 @@
             {{ 'device-profile.lwm2m.client-hold-off-time-pattern' | translate }}
           </mat-error>
         </mat-form-field>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>{{ 'device-profile.lwm2m.account-after-timeout' | translate }}</mat-label>
           <mat-icon *ngIf="!disabled" class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
                     matTooltip="{{'device-profile.lwm2m.account-after-timeout-tooltip' | translate }}">help</mat-icon>
@@ -140,8 +140,8 @@
           </mat-error>
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px" fxLayoutGap.xs="0px">
-        <mat-form-field fxFlex>
+      <div class="flex flex-row xs:flex-col gap-2 xs:gap-0">
+        <mat-form-field class="flex-1">
           <mat-label>{{ 'device-profile.lwm2m.lifetime' | translate }}</mat-label>
           <input matInput type="number" min="0" formControlName="lifetime" required>
           <mat-error *ngIf="serverFormGroup.get('lifetime').hasError('required')">
@@ -152,7 +152,7 @@
             {{ 'device-profile.lwm2m.lifetime-pattern' | translate }}
           </mat-error>
         </mat-form-field>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>{{ 'device-profile.lwm2m.default-min-period' | translate }}</mat-label>
           <mat-icon *ngIf="!disabled" class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
                     matTooltip="{{'device-profile.lwm2m.default-min-period-tooltip' | translate }}">help</mat-icon>
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-profile-transport-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-profile-transport-configuration.component.html
index 22920a609c..203b8fbff2 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-profile-transport-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-profile-transport-configuration.component.html
@@ -33,7 +33,7 @@
     </mat-tab>
     <mat-tab label="{{ 'device-profile.lwm2m.bootstrap-tab' | translate }}">
       <section [formGroup]="lwm2mDeviceProfileFormGroup">
-        <div *ngIf="!isTransportWasRunWithBootstrap" style="padding:16px 0 0 8px;" fxLayout="row" fxLayoutAlign="start end">
+        <div *ngIf="!isTransportWasRunWithBootstrap" style="padding:16px 0 0 8px;" class="flex flex-row justify-start items-end">
           <mat-icon color="warn" class="material-icons" style="margin-right:8px;">warning</mat-icon>
           <span style="font-weight:500">LwM2M transport was run without bootstrap server</span>
         </div>
@@ -53,7 +53,7 @@
         <section formGroupName="clientLwM2mSettings">
           <fieldset class="fields-group">
             <legend class="group-title" translate>device-profile.lwm2m.fw-update</legend>
-            <mat-form-field class="mat-block" fxFlex>
+            <mat-form-field class="mat-block flex-1">
               <mat-label>{{ 'device-profile.lwm2m.fw-update-strategy' | translate }}</mat-label>
               <mat-select formControlName="fwUpdateStrategy">
                 <mat-option [value]=1>{{ 'device-profile.lwm2m.fw-update-strategy-package' | translate }}</mat-option>
@@ -61,7 +61,7 @@
                 <mat-option [value]=3>{{ 'device-profile.lwm2m.fw-update-strategy-data' | translate }}</mat-option>
               </mat-select>
             </mat-form-field>
-            <mat-form-field class="mat-block" fxFlex *ngIf="lwm2mDeviceProfileFormGroup.get('clientLwM2mSettings.fwUpdateStrategy').value === 2">
+            <mat-form-field class="mat-block flex-1" *ngIf="lwm2mDeviceProfileFormGroup.get('clientLwM2mSettings.fwUpdateStrategy').value === 2">
               <mat-label>{{ 'device-profile.lwm2m.fw-update-resource' | translate }}</mat-label>
               <input matInput formControlName="fwUpdateResource" required>
               <mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('clientLwM2mSettings.fwUpdateResource').hasError('required')">
@@ -71,14 +71,14 @@
           </fieldset>
           <fieldset class="fields-group">
             <legend class="group-title" translate>device-profile.lwm2m.sw-update</legend>
-            <mat-form-field class="mat-block" fxFlex>
+            <mat-form-field class="mat-block flex-1">
               <mat-label>{{ 'device-profile.lwm2m.sw-update-strategy' | translate }}</mat-label>
               <mat-select formControlName="swUpdateStrategy">
                 <mat-option [value]=1>{{ 'device-profile.lwm2m.sw-update-strategy-package' | translate }}</mat-option>
                 <mat-option [value]=2>{{ 'device-profile.lwm2m.sw-update-strategy-package-uri' | translate }}</mat-option>
               </mat-select>
             </mat-form-field>
-            <mat-form-field class="mat-block" fxFlex *ngIf="lwm2mDeviceProfileFormGroup.get('clientLwM2mSettings.swUpdateStrategy').value === 2">
+            <mat-form-field class="mat-block flex-1" *ngIf="lwm2mDeviceProfileFormGroup.get('clientLwM2mSettings.swUpdateStrategy').value === 2">
               <mat-label>{{ 'device-profile.lwm2m.sw-update-resource' | translate }}</mat-label>
               <input matInput formControlName="swUpdateResource" required>
               <mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('clientLwM2mSettings.swUpdateResource').hasError('required')">
@@ -93,7 +93,7 @@
           </fieldset>
           <fieldset class="fields-group">
             <legend class="group-title" translate>device-profile.lwm2m.default-object-id</legend>
-            <mat-form-field fxFlex>
+            <mat-form-field class="flex-1">
               <mat-select formControlName="defaultObjectIDVer">
                 <mat-option *ngFor="let objectIDVer of objectIDVers" [value]="objectIDVer">
                   {{ objectIDVerTranslationMap.get(objectIDVer) | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-dialog.component.html
index db65feed15..207999546f 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-dialog.component.html
@@ -16,9 +16,9 @@
 
 -->
 <form [formGroup]="instancesFormGroup" (ngSubmit)="add()" style="min-width: 400px;">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <span style="font-weight: 500">{{data.objectName}}</span>&nbsp;#{{data.objectId}}
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -36,7 +36,7 @@
       </tb-profile-lwm2m-object-add-instances-list>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex flex-row justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-instances.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-instances.component.html
index ef973c37ee..34a1d19f62 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-instances.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-instances.component.html
@@ -24,11 +24,11 @@
       [expanded]="isExpend"
       [disabled]="isExpend">
       <mat-expansion-panel-header>
-        <mat-panel-title class="tb-panel" fxLayout="row">
-          <div fxFlex="30" fxLayoutAlign="start center">
+        <mat-panel-title class="tb-panel flex flex-row">
+          <div class="flex-full max-w-30% flex justify-start items-center">
             <span class="tb-panel-title">{{ 'device-profile.lwm2m.instance' | translate }}</span>&nbsp;#{{instances.get('id').value}}
           </div>
-          <div fxLayoutAlign="center center" fxFlex="10">
+          <div class="flex-full max-w-10% flex justify-center items-center">
             <mat-checkbox color="warn"
                           [disabled]="this.disabled"
                           [checked]="getChecked(instances, 'attribute')"
@@ -37,7 +37,7 @@
                           [indeterminate]="getIndeterminate(instances, 'attribute')">
             </mat-checkbox>
           </div>
-          <div fxLayoutAlign="center center" fxFlex="10">
+          <div class="flex-full max-w-10% flex justify-center items-center">
             <mat-checkbox color="primary"
                           [disabled]="this.disabled"
                           [checked]="getChecked(instances, 'telemetry')"
@@ -46,7 +46,7 @@
                           [indeterminate]="getIndeterminate(instances, 'telemetry')">
             </mat-checkbox>
           </div>
-          <div fxLayoutAlign="center center" fxFlex="10">
+          <div class="flex-full max-w-10% flex justify-center items-center">
             <mat-checkbox color="primary"
                           [disabled]="disableObserve(instances)"
                           [checked]="getChecked(instances, 'observe')"
@@ -55,7 +55,7 @@
                           [indeterminate]="getIndeterminate(instances, 'observe')">
             </mat-checkbox>
           </div>
-          <span fxFlex></span>
+          <span class="flex-1"></span>
           <tb-profile-lwm2m-attributes
             formControlName="attributes"
             [isAttributeTelemetry]="disableObserveInstance(instances)"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-resources.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-resources.component.html
index e4a6f0877f..34e299f1f7 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-resources.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-resources.component.html
@@ -16,53 +16,53 @@
 
 -->
 <section [formGroup]="resourcesFormGroup">
-  <div fxLayout="row" fxLayoutAlign="start center">
-    <div fxFlex="30">
+  <div class="flex flex-row justify-start items-center">
+    <div class="flex-full max-w-30%">
       <mat-label translate>device-profile.lwm2m.resource-label</mat-label>
     </div>
-    <div fxFlex="10" class="checkbox-column-title">
+    <div class="checkbox-column-title flex-full max-w-10%">
       <mat-label translate>device-profile.lwm2m.attribute-label</mat-label>
     </div>
-    <div fxFlex="10" class="checkbox-column-title">
+    <div class="checkbox-column-title flex-full max-w-10%">
       <mat-label translate>device-profile.lwm2m.telemetry-label</mat-label>
     </div>
-    <div fxFlex="10" class="checkbox-column-title">
+    <div class="checkbox-column-title flex-full max-w-10%">
       <mat-label translate>device-profile.lwm2m.observe-label</mat-label>
     </div>
-    <div fxFlex>
+    <div class="flex-1">
       <mat-label translate>device-profile.lwm2m.key-name</mat-label>
     </div>
   </div>
   <mat-divider></mat-divider>
   <div formArrayName="resources"
     *ngFor="let resourceLwM2M of resourcesFormArray.controls; let $index = index; trackBy: trackByParams">
-    <div [formGroupName]="$index" fxLayout="row" fxLayoutAlign="start center" class="resource-list">
-      <div class="resource-name" fxFlex="30">
+    <div [formGroupName]="$index" class="resource-list flex flex-row justify-start items-center">
+      <div class="resource-name flex-full max-w-30%">
         #{{resourceLwM2M.get('id').value}} <span class="name">{{resourceLwM2M.get('name').value}}</span>
       </div>
-      <div fxFlex="10" fxLayoutAlign="center center">
+      <div class="flex-full max-w-10% flex justify-center items-center">
         <mat-checkbox formControlName="attribute" color="warn">
         </mat-checkbox>
       </div>
-      <div fxFlex="10" fxLayoutAlign="center center">
+      <div class="flex-full max-w-10% flex justify-center items-center">
         <mat-checkbox formControlName="telemetry" color="primary">
         </mat-checkbox>
       </div>
-      <div fxFlex="10" fxLayoutAlign="center center">
-        <mat-checkbox fxFlex="10" formControlName="observe" color="primary"
+      <div class="flex-full max-w-10% flex justify-center items-center">
+        <mat-checkbox class="flex-full max-w-10%" formControlName="observe" color="primary"
                       matTooltip="{{ 'device-profile.lwm2m.edit-observe-select'  | translate }}"
                       [matTooltipDisabled]="disabled || !isDisabledObserve($index)"
                       matTooltipPosition="above">
         </mat-checkbox>
       </div>
-      <mat-form-field fxFlex="33">
+      <mat-form-field class="flex-full max-w-33%">
         <input matInput type="text" formControlName="keyName" required>
         <mat-error *ngIf="resourceLwM2M.get('keyName').hasError('required') ||
                             resourceLwM2M.get('keyName').hasError('pattern')">
           {{ 'device-profile.lwm2m.key-name-required' | translate }}
         </mat-error>
       </mat-form-field>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <tb-profile-lwm2m-attributes
         formControlName="attributes"
         [isAttributeTelemetry]="isDisabledObserve($index)"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry.component.html
index 90a574271e..0b3b6ca5fe 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry.component.html
@@ -21,9 +21,9 @@
       *ngFor="let objectLwM2M of modelsFormArray.controls; let $index = index; trackBy: trackByParams"
       [formGroupName]="$index">
       <mat-expansion-panel-header >
-        <mat-panel-title fxLayoutAlign="start center" >
+        <mat-panel-title class="flex justify-start items-center">
           <span class="tb-panel-title">{{ objectLwM2M.get('name').value}}</span>&nbsp;#{{ objectLwM2M.get('keyId').value}}
-          <span fxFlex></span>
+          <span class="flex-1"></span>
           <tb-profile-lwm2m-attributes
             formControlName="attributes"
             [modelName]="getNameObject(objectLwM2M.value)">
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html
index 433a4f8d0d..cc408de91e 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html
@@ -34,9 +34,9 @@
 <form [formGroup]="mqttDeviceProfileTransportConfigurationFormGroup" style="padding-bottom: 16px;" *ngIf="!mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplug').value">
   <fieldset class="fields-group">
     <legend class="group-title" translate>device-profile.mqtt-device-topic-filters</legend>
-    <div fxLayoutGap="8px" fxLayout="column">
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column">
-        <mat-form-field fxFlex>
+    <div class="flex flex-col gap-2">
+      <div class="flex flex-row xs:flex-col gap-2">
+        <mat-form-field class="flex-1">
           <mat-label translate>device-profile.telemetry-topic-filter</mat-label>
           <input matInput required
                  formControlName="deviceTelemetryTopic"
@@ -51,7 +51,7 @@
             {{ 'device-profile.not-valid-multi-character' | translate}}
           </mat-error>
         </mat-form-field>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label translate>device-profile.attributes-topic-filter</mat-label>
           <input matInput required
                  formControlName="deviceAttributesTopic"
@@ -66,7 +66,7 @@
             {{ 'device-profile.not-valid-multi-character' | translate}}
           </mat-error>
         </mat-form-field>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label translate>device-profile.attributes-subscribe-topic-filter</mat-label>
           <input matInput required
                  formControlName="deviceAttributesSubscribeTopic"
@@ -93,7 +93,7 @@
   <section formGroupName="transportPayloadTypeConfiguration">
     <fieldset class="fields-group">
       <legend class="group-title" translate>device-profile.mqtt-device-payload-type</legend>
-      <div fxLayoutGap="8px" fxLayout="column">
+      <div class="flex flex-col gap-2">
         <mat-form-field class="mat-block">
           <mat-select formControlName="transportPayloadType" required>
             <mat-option *ngFor="let type of transportPayloadTypes" [value]="type">
@@ -116,10 +116,10 @@
             <div class="tb-hint" innerHTML="{{ 'device-profile.mqtt-use-json-format-for-default-downlink-topics-hint' | translate }}"></div>
           </div>
         </div>
-        <div *ngIf="protoPayloadType" fxLayout="column">
+        <div *ngIf="protoPayloadType" class="flex flex-col">
           <ng-container>
             <tb-protobuf-content
-              fxFlex
+              class="flex-1"
               formControlName="deviceTelemetryProtoSchema"
               label="{{ 'device-profile.telemetry-proto-schema' | translate }}"
               [fillHeight]="true">
@@ -130,7 +130,7 @@
           </ng-container>
           <ng-container>
             <tb-protobuf-content
-              fxFlex
+              class="flex-1"
               formControlName="deviceAttributesProtoSchema"
               label="{{ 'device-profile.attributes-proto-schema' | translate }}"
               [fillHeight]="true">
@@ -141,7 +141,7 @@
           </ng-container>
           <ng-container>
             <tb-protobuf-content
-              fxFlex
+              class="flex-1"
               formControlName="deviceRpcRequestProtoSchema"
               label="{{ 'device-profile.rpc-request-proto-schema' | translate }}"
               [fillHeight]="true">
@@ -152,7 +152,7 @@
           </ng-container>
           <ng-container>
             <tb-protobuf-content
-              fxFlex
+              class="flex-1"
               formControlName="deviceRpcResponseProtoSchema"
               label="{{ 'device-profile.rpc-response-proto-schema' | translate }}"
               [fillHeight]="true">
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-communication-config.component.html b/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-communication-config.component.html
index de80b9f238..82265d225b 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-communication-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-communication-config.component.html
@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<div fxLayout="column">
+<div class="flex flex-col">
   <div *ngFor="let deviceProfileCommunication of communicationConfigFormArray.controls; let $index = index;
-               last as isLast;" fxLayout="row" fxLayoutAlign="start center"
-       fxLayoutGap="8px" class="scope-row" [formGroup]="deviceProfileCommunication">
+               last as isLast;"
+       class="scope-row flex flex-row justify-start items-center gap-2" [formGroup]="deviceProfileCommunication">
     <div class="communication-config">
       <mat-form-field class="spec mat-block" floatLabel="always" hideRequiredMarker>
         <mat-label translate>device-profile.snmp.scope</mat-label>
@@ -33,7 +33,7 @@
         </mat-error>
       </mat-form-field>
       <mat-divider vertical></mat-divider>
-      <section fxFlex fxLayout="column">
+      <section class="flex-1 flex flex-col">
         <mat-form-field *ngIf="isShowFrequency(deviceProfileCommunication.get('spec').value)">
           <mat-label translate>device-profile.snmp.querying-frequency</mat-label>
           <input matInput formControlName="queryingFrequencyMs" type="number" min="0" required/>
@@ -59,7 +59,7 @@
     </button>
   </div>
   <div *ngIf="!communicationConfigFormArray.controls.length && !disabled">
-      <span fxLayoutAlign="center center" class="tb-prompt required required-text" translate>device-profile.snmp.please-add-communication-config</span>
+      <span class="tb-prompt required required-text flex justify-center items-center" translate>device-profile.snmp.please-add-communication-config</span>
   </div>
   <div *ngIf="!disabled && isAddEnabled">
     <button mat-stroked-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.html b/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.html
index 8b4b656c02..e04d64f674 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.html
@@ -15,21 +15,21 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="column" class="mapping-config">
-  <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" fxFlex="100">
-    <div fxFlex fxLayout="row" fxLayoutGap="8px">
-      <label fxFlex="26" class="tb-title no-padding" translate>device-profile.snmp.data-type</label>
-      <label fxFlex="37" class="tb-title tb-required no-padding" translate>device-profile.snmp.data-key</label>
-      <label fxFlex="37" class="tb-title tb-required no-padding" translate>device-profile.snmp.oid</label>
-      <span style="min-width: 40px" [fxShow]="!disabled"></span>
+<div class="mapping-config flex-1 flex flex-col">
+  <div class="flex-full flex flex-row justify-start items-center gap-2">
+    <div class="flex-1 flex flex-row gap-2">
+      <label class="tb-title no-padding flex-full max-w-26%" translate>device-profile.snmp.data-type</label>
+      <label class="tb-title tb-required no-padding flex-full max-w-37%" translate>device-profile.snmp.data-key</label>
+      <label class="tb-title tb-required no-padding flex-full max-w-37%" translate>device-profile.snmp.oid</label>
+      <span style="min-width: 40px" [class.!hidden]="disabled"></span>
     </div>
   </div>
   <mat-divider></mat-divider>
   <div *ngFor="let mappingConfig of mappingsConfigFormArray.controls; let $index = index;
-               last as isLast;" fxLayout="row" fxLayoutAlign="start center"
-       fxLayoutGap="8px" [formGroup]="mappingConfig" class="mapping-list">
-    <div class="tb-layout-fill" fxFlex fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start">
-      <mat-form-field fxFlex="26">
+               last as isLast;"
+       [formGroup]="mappingConfig" class="mapping-list flex flex-row justify-start items-center gap-2">
+    <div class="tb-layout-fill flex-1 flex flex-row justify-start items-stretch gap-2">
+      <mat-form-field class="flex-full max-w-26%">
         <mat-select formControlName="dataType" required>
           <mat-option *ngFor="let dataType of dataTypes" [value]="dataType">
             {{ dataTypesTranslationMap.get(dataType) | translate }}
@@ -39,13 +39,13 @@
           {{ 'device-profile.snmp.data-type-required' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex="37">
+      <mat-form-field class="flex-full max-w-37%">
         <input matInput formControlName="key" required/>
         <mat-error *ngIf="mappingConfig.get('key').hasError('required')">
           {{ 'device-profile.snmp.data-key-required' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex="37">
+      <mat-form-field class="flex-full max-w-37%">
         <input matInput formControlName="oid" required/>
         <mat-error *ngIf="mappingConfig.get('oid').hasError('required')">
           {{ 'device-profile.snmp.oid-required' | translate }}
@@ -65,7 +65,7 @@
     </div>
   </div>
   <div *ngIf="!mappingsConfigFormArray.controls.length && !disabled">
-      <span fxLayoutAlign="center center" class="tb-prompt required required-text" translate>device-profile.snmp.please-add-mapping-config</span>
+      <span class="tb-prompt required required-text flex justify-center items-center" translate>device-profile.snmp.please-add-mapping-config</span>
   </div>
   <div *ngIf="!disabled">
     <button mat-stroked-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-transport-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-transport-configuration.component.html
index be9d8e0973..729ca64c4d 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-transport-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-transport-configuration.component.html
@@ -16,8 +16,8 @@
 
 -->
 <form [formGroup]="snmpDeviceProfileTransportConfigurationFormGroup" style="padding: 8px 0 16px;">
-  <section fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column">
-    <mat-form-field fxFlex>
+  <section class="flex flex-row xs:flex-col gap-2">
+    <mat-form-field class="flex-1">
       <mat-label translate>device-profile.snmp.timeout-ms</mat-label>
       <input matInput formControlName="timeoutMs" type="number" min="0" required/>
       <mat-error *ngIf="snmpDeviceProfileTransportConfigurationFormGroup.get('timeoutMs').hasError('required')">
@@ -28,7 +28,7 @@
         {{ 'device-profile.snmp.timeout-ms-invalid-format' | translate }}
       </mat-error>
     </mat-form-field>
-    <mat-form-field fxFlex>
+    <mat-form-field class="flex-1">
       <mat-label translate>device-profile.snmp.retries</mat-label>
       <input matInput formControlName="retries" type="number" min="0" required/>
       <mat-error *ngIf="snmpDeviceProfileTransportConfigurationFormGroup.get('retries').hasError('required')">
diff --git a/ui-ngx/tailwind.config.js b/ui-ngx/tailwind.config.js
index 1349db7af8..6135c8fc9a 100644
--- a/ui-ngx/tailwind.config.js
+++ b/ui-ngx/tailwind.config.js
@@ -99,8 +99,11 @@ module.exports = {
         '20%': '20%',
         '23%': '23%',
         '25%': '25%',
+        '26%': '26%',
         '30%': '30%',
+        '33%': '33%',
         '35%': '35%',
+        '37%': '37%',
         '40%': '40%',
         '45%': '45%',
         '50%': '50%',

From ae8cf7d2e531a66f3abbee136cc162fe23eac36c Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Fri, 11 Oct 2024 19:23:41 +0300
Subject: [PATCH 09/34] Flex layout replacements. Switch to tailwind.css.

---
 .../tenant-profile-queues.component.html      |  14 +-
 ...enant-profile-configuration.component.html | 188 +++++++++---------
 .../rate-limits-details-dialog.component.html |   4 +-
 .../rate-limits-list.component.html           |  10 +-
 .../rate-limits/rate-limits.component.html    |   4 +-
 5 files changed, 110 insertions(+), 110 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/profile/queue/tenant-profile-queues.component.html b/ui-ngx/src/app/modules/home/components/profile/queue/tenant-profile-queues.component.html
index 89e1e91c3c..ff85dabe76 100644
--- a/ui-ngx/src/app/modules/home/components/profile/queue/tenant-profile-queues.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/queue/tenant-profile-queues.component.html
@@ -15,18 +15,18 @@
     limitations under the License.
 
 -->
-<div fxLayout="column">
+<div class="flex flex-col">
   <div class="tb-tenant-profile-queues"
        *ngFor="let queuesControl of queuesFormArray.controls; trackBy: trackByQueue;
        let $index = index; last as isLast;"
-       [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
-    <mat-expansion-panel fxFlex [expanded]="true">
+       [class.pb-2]="!isLast">
+    <mat-expansion-panel class="flex-1" [expanded]="true">
       <mat-expansion-panel-header>
-        <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+        <div class="flex-1 flex flex-row justify-start items-center">
           <mat-panel-title>
             {{ getTitle(queuesControl.value.name) }}
           </mat-panel-title>
-          <span fxFlex></span>
+          <span class="flex-1"></span>
           <button *ngIf="!($index === 0) && !disabled" mat-icon-button style="min-width: 40px;"
                   type="button"
                   (click)="removeQueue($index)"
@@ -42,8 +42,8 @@
     </mat-expansion-panel>
   </div>
   <div *ngIf="!queuesFormArray.controls.length">
-      <span translate fxLayoutAlign="center center"
-            class="tb-prompt">tenant-profile.no-queue</span>
+      <span translate
+            class="tb-prompt flex justify-center items-center">tenant-profile.no-queue</span>
   </div>
   <div *ngIf="!disabled" style="padding-top: 16px;">
     <button mat-raised-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html
index 31724191cf..2a9e9a66f0 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html
@@ -15,13 +15,13 @@
     limitations under the License.
 
 -->
-<section [formGroup]="defaultTenantProfileConfigurationFormGroup" fxLayout="column">
+<section [formGroup]="defaultTenantProfileConfigurationFormGroup" class="flex flex-col">
   <fieldset class="fields-group">
     <legend class="group-title">
       {{ 'tenant-profile.entities' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
-    <div class="fields-element" fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+    <div class="fields-element flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.maximum-devices</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxDevices"
@@ -34,7 +34,7 @@
         </mat-error>
         <mat-hint></mat-hint>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.maximum-dashboards</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxDashboards"
@@ -48,8 +48,8 @@
         <mat-hint></mat-hint>
       </mat-form-field>
     </div>
-    <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+    <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.maximum-assets</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxAssets"
@@ -62,7 +62,7 @@
         </mat-error>
         <mat-hint></mat-hint>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.maximum-users</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxUsers"
@@ -78,13 +78,13 @@
     </div>
     <mat-expansion-panel class="configuration-panel">
       <mat-expansion-panel-header>
-        <mat-panel-description fxLayoutAlign="end" translate>
+        <mat-panel-description class="flex justify-end items-stretch" translate>
           tenant-profile.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+          <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.maximum-customers</mat-label>
             <input matInput required min="0" step="1"
                    formControlName="maxCustomers"
@@ -97,7 +97,7 @@
             </mat-error>
             <mat-hint></mat-hint>
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+          <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.maximum-rule-chains</mat-label>
             <input matInput required min="0" step="1"
                    formControlName="maxRuleChains"
@@ -119,8 +119,8 @@
     <legend class="group-title">
       {{ 'tenant-profile.rule-engine' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
-    <div class="fields-element" fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+    <div class="fields-element flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.max-r-e-executions</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxREExecutions"
@@ -133,7 +133,7 @@
         </mat-error>
         <mat-hint></mat-hint>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.max-transport-messages</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxTransportMessages"
@@ -149,13 +149,13 @@
     </div>
     <mat-expansion-panel class="configuration-panel">
       <mat-expansion-panel-header>
-        <mat-panel-description fxLayoutAlign="end" translate>
+        <mat-panel-description class="flex justify-end items-stretch" translate>
           tenant-profile.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+          <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.max-j-s-executions</mat-label>
             <input matInput required min="0" step="1"
                    formControlName="maxJSExecutions"
@@ -168,7 +168,7 @@
             </mat-error>
             <mat-hint></mat-hint>
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+          <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.max-tbel-executions</mat-label>
             <input matInput required min="0" step="1"
                    formControlName="maxTbelExecutions"
@@ -182,8 +182,8 @@
             <mat-hint></mat-hint>
           </mat-form-field>
         </div>
-        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+          <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.max-rule-node-executions-per-message</mat-label>
             <input matInput required min="0" step="1"
                    formControlName="maxRuleNodeExecutionsPerMessage"
@@ -196,7 +196,7 @@
             </mat-error>
             <mat-hint></mat-hint>
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+          <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.max-transport-data-points</mat-label>
             <input matInput required min="0" step="1"
                    formControlName="maxTransportDataPoints"
@@ -218,8 +218,8 @@
     <legend class="group-title">
       {{ 'tenant-profile.time-to-live' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
-    <div class="fields-element" fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+    <div class="fields-element flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.max-d-p-storage-days</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxDPStorageDays"
@@ -232,7 +232,7 @@
         </mat-error>
         <mat-hint></mat-hint>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.alarms-ttl-days</mat-label>
         <input matInput required min="0" step="1"
                formControlName="alarmsTtlDays"
@@ -246,8 +246,8 @@
         <mat-hint></mat-hint>
       </mat-form-field>
     </div>
-    <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+    <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.default-storage-ttl-days</mat-label>
         <input matInput required min="0" step="1"
                formControlName="defaultStorageTtlDays"
@@ -260,7 +260,7 @@
         </mat-error>
         <mat-hint></mat-hint>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.rpc-ttl-days</mat-label>
         <input matInput required min="0" step="1"
                formControlName="rpcTtlDays"
@@ -274,8 +274,8 @@
         <mat-hint></mat-hint>
       </mat-form-field>
     </div>
-    <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+    <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.queue-stats-ttl-days</mat-label>
         <input matInput required min="0" step="1"
                formControlName="queueStatsTtlDays"
@@ -288,7 +288,7 @@
         </mat-error>
         <mat-hint></mat-hint>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.rule-engine-exceptions-ttl-days</mat-label>
         <input matInput required min="0" step="1"
                formControlName="ruleEngineExceptionsTtlDays"
@@ -308,10 +308,10 @@
     <legend class="group-title">
       {{ 'tenant-profile.alarms-and-notifications' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
-    <mat-slide-toggle class="slide-toggle-element" fxFlex formControlName="smsEnabled">
+    <mat-slide-toggle class="slide-toggle-element flex-1" formControlName="smsEnabled">
       {{ 'tenant-profile.sms-enabled' | translate }}
     </mat-slide-toggle>
-    <mat-form-field *ngIf="defaultTenantProfileConfigurationFormGroup.get('smsEnabled').value" fxFlex class="mat-block"
+    <mat-form-field *ngIf="defaultTenantProfileConfigurationFormGroup.get('smsEnabled').value" class="mat-block flex-1"
                     appearance="fill" subscriptSizing="dynamic">
       <mat-label translate>tenant-profile.max-sms</mat-label>
       <input matInput required min="0" step="1"
@@ -324,8 +324,8 @@
         {{ 'tenant-profile.max-sms-range' | translate}}
       </mat-error>
     </mat-form-field>
-    <div class="fields-element" fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+    <div class="fields-element flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.max-emails</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxEmails"
@@ -338,7 +338,7 @@
         </mat-error>
         <mat-hint></mat-hint>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.max-created-alarms</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxCreatedAlarms"
@@ -358,8 +358,8 @@
     <legend class="group-title">
       {{ 'tenant-profile.ota-files-in-bytes' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
-    <div class="fields-element" fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+    <div class="fields-element flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.maximum-resources-sum-data-size</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxResourcesInBytes"
@@ -372,7 +372,7 @@
         </mat-error>
         <mat-hint></mat-hint>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.maximum-ota-packages-sum-data-size</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxOtaPackagesInBytes"
@@ -386,8 +386,8 @@
         <mat-hint></mat-hint>
       </mat-form-field>
     </div>
-    <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <mat-form-field fxFlex class="mat-block" appearance="fill">
+    <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+      <mat-form-field class="mat-block flex-1" appearance="fill">
         <mat-label translate>tenant-profile.maximum-resource-size</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxResourceSize"
@@ -400,7 +400,7 @@
         </mat-error>
         <mat-hint></mat-hint>
       </mat-form-field>
-      <div fxFlex></div>
+      <div class="flex-1"></div>
     </div>
   </fieldset>
 
@@ -408,15 +408,15 @@
     <legend class="group-title">
       {{ 'tenant-profile.ws-title' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
-    <div class="fields-element" fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <mat-form-field fxFlex class="mat-block" appearance="fill">
+    <div class="fields-element flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+      <mat-form-field class="mat-block flex-1" appearance="fill">
         <mat-label translate>tenant-profile.ws-limit-max-sessions-per-tenant</mat-label>
         <input matInput type="number" formControlName="maxWsSessionsPerTenant">
         <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSessionsPerTenant').hasError('min')">
           {{ 'tenant-profile.too-small-value-zero' | translate}}
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block" appearance="fill">
+      <mat-form-field class="mat-block flex-1" appearance="fill">
         <mat-label translate>tenant-profile.ws-limit-max-subscriptions-per-tenant</mat-label>
         <input matInput type="number" formControlName="maxWsSubscriptionsPerTenant">
         <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSubscriptionsPerTenant').hasError('min')">
@@ -424,15 +424,15 @@
         </mat-error>
       </mat-form-field>
     </div>
-    <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <mat-form-field fxFlex class="mat-block" appearance="fill">
+    <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+      <mat-form-field class="mat-block flex-1" appearance="fill">
         <mat-label translate>tenant-profile.ws-limit-max-sessions-per-customer</mat-label>
         <input matInput type="number" formControlName="maxWsSessionsPerCustomer">
         <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSessionsPerCustomer').hasError('min')">
           {{ 'tenant-profile.too-small-value-zero' | translate}}
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block" appearance="fill">
+      <mat-form-field class="mat-block flex-1" appearance="fill">
         <mat-label translate>tenant-profile.ws-limit-max-subscriptions-per-customer</mat-label>
         <input matInput type="number" formControlName="maxWsSubscriptionsPerCustomer">
         <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSubscriptionsPerCustomer').hasError('min')">
@@ -442,20 +442,20 @@
     </div>
     <mat-expansion-panel class="configuration-panel">
       <mat-expansion-panel-header>
-        <mat-panel-description fxLayoutAlign="end" translate>
+        <mat-panel-description class="flex justify-end items-stretch" translate>
           tenant-profile.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <mat-form-field fxFlex class="mat-block" appearance="fill">
+        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+          <mat-form-field class="mat-block flex-1" appearance="fill">
             <mat-label translate>tenant-profile.ws-limit-max-sessions-per-public-user</mat-label>
             <input matInput type="number" formControlName="maxWsSessionsPerPublicUser">
             <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSessionsPerPublicUser').hasError('min')">
               {{ 'tenant-profile.too-small-value-zero' | translate}}
             </mat-error>
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block" appearance="fill">
+          <mat-form-field class="mat-block flex-1" appearance="fill">
             <mat-label translate>tenant-profile.ws-limit-max-subscriptions-per-public-user</mat-label>
             <input matInput type="number" formControlName="maxWsSubscriptionsPerPublicUser">
             <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSubscriptionsPerPublicUser').hasError('min')">
@@ -463,15 +463,15 @@
             </mat-error>
           </mat-form-field>
         </div>
-        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <mat-form-field fxFlex class="mat-block" appearance="fill">
+        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+          <mat-form-field class="mat-block flex-1" appearance="fill">
             <mat-label translate>tenant-profile.ws-limit-max-sessions-per-regular-user</mat-label>
             <input matInput type="number" formControlName="maxWsSessionsPerRegularUser">
             <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSessionsPerRegularUser').hasError('min')">
               {{ 'tenant-profile.too-small-value-zero' | translate}}
             </mat-error>
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block" appearance="fill">
+          <mat-form-field class="mat-block flex-1" appearance="fill">
             <mat-label translate>tenant-profile.ws-limit-max-subscriptions-per-regular-user</mat-label>
             <input matInput type="number" formControlName="maxWsSubscriptionsPerRegularUser">
             <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSubscriptionsPerRegularUser').hasError('min')">
@@ -479,8 +479,8 @@
             </mat-error>
           </mat-form-field>
         </div>
-        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <mat-form-field fxFlex class="mat-block" appearance="fill">
+        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+          <mat-form-field class="mat-block flex-1" appearance="fill">
             <mat-label translate>tenant-profile.ws-limit-queue-per-session</mat-label>
             <input matInput type="number" formControlName="wsMsgQueueLimitPerSession">
             <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('wsMsgQueueLimitPerSession').hasError('min')">
@@ -490,7 +490,7 @@
               {{ 'tenant-profile.queue-size-is-limited-by-system-configuration' | translate}}
             </mat-hint>
           </mat-form-field>
-          <div fxFlex></div>
+          <div class="flex-1"></div>
         </div>
       </ng-template>
     </mat-expansion-panel>
@@ -500,106 +500,106 @@
     <legend class="group-title">
       {{ 'tenant-profile.rate-limits.rate-limits' | translate }}
     </legend>
-    <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <tb-rate-limits fxFlex formControlName="transportTenantMsgRateLimit"
+    <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+      <tb-rate-limits class="flex-1" formControlName="transportTenantMsgRateLimit"
                       [type]="rateLimitsType.TENANT_MESSAGES">
       </tb-rate-limits>
-      <tb-rate-limits fxFlex formControlName="transportDeviceMsgRateLimit"
+      <tb-rate-limits class="flex-1" formControlName="transportDeviceMsgRateLimit"
                       [type]="rateLimitsType.DEVICE_MESSAGES">
       </tb-rate-limits>
     </div>
-    <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <tb-rate-limits fxFlex formControlName="transportTenantTelemetryMsgRateLimit"
+    <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+      <tb-rate-limits class="flex-1" formControlName="transportTenantTelemetryMsgRateLimit"
                       [type]="rateLimitsType.TENANT_TELEMETRY_MESSAGES">
       </tb-rate-limits>
-      <tb-rate-limits fxFlex formControlName="transportDeviceTelemetryMsgRateLimit"
+      <tb-rate-limits class="flex-1" formControlName="transportDeviceTelemetryMsgRateLimit"
                       [type]="rateLimitsType.DEVICE_TELEMETRY_MESSAGES">
       </tb-rate-limits>
     </div>
-    <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <tb-rate-limits fxFlex formControlName="transportGatewayMsgRateLimit"
+    <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+      <tb-rate-limits class="flex-1" formControlName="transportGatewayMsgRateLimit"
                       [type]="rateLimitsType.GATEWAY_MESSAGES">
       </tb-rate-limits>
-      <tb-rate-limits fxFlex formControlName="transportGatewayDeviceMsgRateLimit"
+      <tb-rate-limits class="flex-1" formControlName="transportGatewayDeviceMsgRateLimit"
                       [type]="rateLimitsType.GATEWAY_DEVICE_MESSAGES">
       </tb-rate-limits>
     </div>
-    <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <tb-rate-limits fxFlex formControlName="transportGatewayTelemetryMsgRateLimit"
+    <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+      <tb-rate-limits class="flex-1" formControlName="transportGatewayTelemetryMsgRateLimit"
                       [type]="rateLimitsType.GATEWAY_TELEMETRY_MESSAGES">
       </tb-rate-limits>
-      <tb-rate-limits fxFlex formControlName="transportGatewayDeviceTelemetryMsgRateLimit"
+      <tb-rate-limits class="flex-1" formControlName="transportGatewayDeviceTelemetryMsgRateLimit"
                       [type]="rateLimitsType.GATEWAY_DEVICE_TELEMETRY_MESSAGES">
       </tb-rate-limits>
     </div>
     <mat-expansion-panel class="configuration-panel">
       <mat-expansion-panel-header>
-        <mat-panel-description fxLayoutAlign="end" translate>
+        <mat-panel-description class="flex justify-end items-stretch" translate>
           tenant-profile.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <tb-rate-limits fxFlex formControlName="transportTenantTelemetryDataPointsRateLimit"
+        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+          <tb-rate-limits class="flex-1" formControlName="transportTenantTelemetryDataPointsRateLimit"
                           [type]="rateLimitsType.TENANT_TELEMETRY_DATA_POINTS">
           </tb-rate-limits>
-          <tb-rate-limits fxFlex formControlName="transportDeviceTelemetryDataPointsRateLimit"
+          <tb-rate-limits class="flex-1" formControlName="transportDeviceTelemetryDataPointsRateLimit"
                           [type]="rateLimitsType.DEVICE_TELEMETRY_DATA_POINTS">
           </tb-rate-limits>
         </div>
-        <div fxFlex fxLayout="row"  fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <tb-rate-limits fxFlex formControlName="transportGatewayTelemetryDataPointsRateLimit"
+        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+          <tb-rate-limits class="flex-1" formControlName="transportGatewayTelemetryDataPointsRateLimit"
                           [type]="rateLimitsType.GATEWAY_TELEMETRY_DATA_POINTS">
           </tb-rate-limits>
-          <tb-rate-limits fxFlex formControlName="transportGatewayDeviceTelemetryDataPointsRateLimit"
+          <tb-rate-limits class="flex-1" formControlName="transportGatewayDeviceTelemetryDataPointsRateLimit"
                           [type]="rateLimitsType.GATEWAY_DEVICE_TELEMETRY_DATA_POINTS">
           </tb-rate-limits>
         </div>
-        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <tb-rate-limits fxFlex formControlName="tenantServerRestLimitsConfiguration"
+        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+          <tb-rate-limits class="flex-1" formControlName="tenantServerRestLimitsConfiguration"
                           [type]="rateLimitsType.TENANT_SERVER_REST_LIMITS_CONFIGURATION">
           </tb-rate-limits>
-          <tb-rate-limits fxFlex formControlName="customerServerRestLimitsConfiguration"
+          <tb-rate-limits class="flex-1" formControlName="customerServerRestLimitsConfiguration"
                           [type]="rateLimitsType.CUSTOMER_SERVER_REST_LIMITS_CONFIGURATION">
           </tb-rate-limits>
         </div>
-        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <tb-rate-limits fxFlex formControlName="tenantEntityExportRateLimit"
+        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+          <tb-rate-limits class="flex-1" formControlName="tenantEntityExportRateLimit"
                           [type]="rateLimitsType.TENANT_ENTITY_EXPORT_RATE_LIMIT">
           </tb-rate-limits>
-          <tb-rate-limits fxFlex formControlName="tenantEntityImportRateLimit"
+          <tb-rate-limits class="flex-1" formControlName="tenantEntityImportRateLimit"
                           [type]="rateLimitsType.TENANT_ENTITY_IMPORT_RATE_LIMIT">
           </tb-rate-limits>
         </div>
-        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <tb-rate-limits fxFlex formControlName="wsUpdatesPerSessionRateLimit"
+        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+          <tb-rate-limits class="flex-1" formControlName="wsUpdatesPerSessionRateLimit"
                           [type]="rateLimitsType.WS_UPDATE_PER_SESSION_RATE_LIMIT">
           </tb-rate-limits>
-          <tb-rate-limits fxFlex formControlName="cassandraQueryTenantRateLimitsConfiguration"
+          <tb-rate-limits class="flex-1" formControlName="cassandraQueryTenantRateLimitsConfiguration"
                           [type]="rateLimitsType.CASSANDRA_QUERY_TENANT_RATE_LIMITS_CONFIGURATION">
           </tb-rate-limits>
         </div>
-        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <tb-rate-limits fxFlex="50" formControlName="tenantNotificationRequestsRateLimit"
+        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+          <tb-rate-limits class="flex-1" formControlName="tenantNotificationRequestsRateLimit"
                           [type]="rateLimitsType.TENANT_NOTIFICATION_REQUEST_RATE_LIMIT">
           </tb-rate-limits>
-          <tb-rate-limits fxFlex="50" formControlName="tenantNotificationRequestsPerRuleRateLimit"
+          <tb-rate-limits class="flex-1" formControlName="tenantNotificationRequestsPerRuleRateLimit"
                           [type]="rateLimitsType.TENANT_NOTIFICATION_REQUESTS_PER_RULE_RATE_LIMIT">
           </tb-rate-limits>
         </div>
-        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <tb-rate-limits fxFlex="50" formControlName="edgeEventRateLimits"
+        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+          <tb-rate-limits class="flex-1" formControlName="edgeEventRateLimits"
                           [type]="rateLimitsType.EDGE_EVENTS_RATE_LIMIT">
           </tb-rate-limits>
-          <tb-rate-limits fxFlex="50" formControlName="edgeEventRateLimitsPerEdge"
+          <tb-rate-limits class="flex-1" formControlName="edgeEventRateLimitsPerEdge"
                           [type]="rateLimitsType.EDGE_EVENTS_PER_EDGE_RATE_LIMIT">
           </tb-rate-limits>
         </div>
-        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <tb-rate-limits fxFlex="50" formControlName="edgeUplinkMessagesRateLimits"
+        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+          <tb-rate-limits class="flex-1" formControlName="edgeUplinkMessagesRateLimits"
                           [type]="rateLimitsType.EDGE_UPLINK_MESSAGES_RATE_LIMIT">
           </tb-rate-limits>
-          <tb-rate-limits fxFlex="50" formControlName="edgeUplinkMessagesRateLimitsPerEdge"
+          <tb-rate-limits class="flex-1" formControlName="edgeUplinkMessagesRateLimitsPerEdge"
                           [type]="rateLimitsType.EDGE_UPLINK_MESSAGES_PER_EDGE_RATE_LIMIT">
           </tb-rate-limits>
         </div>
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component.html
index 8c8c261a14..ee2d2b9ecf 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="editDetailsFormGroup">
   <mat-toolbar color="primary">
     <h2>{{ title | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             [matDialogClose]="undefined"
             type="button">
@@ -28,7 +28,7 @@
   <div mat-dialog-content>
     <tb-rate-limits-list formControlName="rateLimits"></tb-rate-limits-list>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [matDialogClose]="undefined"
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.html
index 75c8ef07a7..e72fdc13f3 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.html
@@ -16,12 +16,12 @@
 
 -->
 <section class="tb-rate-limits-form" [formGroup]="rateLimitsListFormGroup">
-  <div fxFlex [formGroup]="rateLimit" *ngFor="let rateLimit of rateLimitsFormArray.controls; let $index = index">
+  <div class="flex-1" [formGroup]="rateLimit" *ngFor="let rateLimit of rateLimitsFormArray.controls; let $index = index">
     <div class="tb-rate-limits-operation" *ngIf="$index > 0 && rateLimitsFormArray.controls.length > 1" translate>
       tenant-profile.rate-limits.but-less-than
     </div>
-    <div fxFlex fxLayout="row" fxLayoutGap="8px">
-      <mat-form-field fxFlex hideRequiredMarker appearance="fill" class="mat-block">
+    <div class="flex-1 flex flex-row gap-2">
+      <mat-form-field hideRequiredMarker appearance="fill" class="mat-block flex-1">
         <mat-label translate>tenant-profile.rate-limits.number-of-messages</mat-label>
         <input matInput placeholder="{{ 'tenant-profile.rate-limits.number-of-messages' | translate }}"
                type="number" min="1" step="1" formControlName="value" required>
@@ -32,7 +32,7 @@
           {{ 'tenant-profile.rate-limits.number-of-messages-min' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex hideRequiredMarker appearance="fill" class="mat-block">
+      <mat-form-field hideRequiredMarker appearance="fill" class="mat-block flex-1">
         <mat-label translate>tenant-profile.rate-limits.per-seconds</mat-label>
         <input matInput placeholder="{{ 'tenant-profile.rate-limits.per-seconds' | translate }}"
                type="number" min="1" step="1" formControlName="time" required>
@@ -59,7 +59,7 @@
           [matTooltip]="'tenant-profile.rate-limits.add-limit' | translate" matTooltipPosition="above">
     <span translate>tenant-profile.rate-limits.add-limit</span>
   </button>
-  <div fxFlex fxLayoutGap="8px" fxLayout="column" class="tb-rate-limits-preview" [ngClass]="{'tb-rate-limits-preview-short': !disabled}">
+  <div class="tb-rate-limits-preview flex-1 flex flex-col gap-2" [class.tb-rate-limits-preview-short]="!disabled">
     <span translate>tenant-profile.rate-limits.preview</span>
     <tb-rate-limits-text [rateLimitsArray]="rateLimitsArray" [disabled]="disabled"></tb-rate-limits-text>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.component.html
index 9f4d514f60..629276a3ed 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.component.html
@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="row" fxLayoutGap="8px">
+<div class="flex-1 flex flex-row gap-2">
   <fieldset class="fieldset-element">
     <legend class="legend-element">{{ label | translate }}</legend>
-    <div [formGroup]="rateLimitsFormGroup" fxFlex fxLayout="row" fxLayoutGap="8px"
+    <div [formGroup]="rateLimitsFormGroup" class="flex-1 flex flex-row gap-2"
          (click)="onClick($event)"
          [matTooltip]="'tenant-profile.rate-limits.edit-limit' | translate" matTooltipPosition="above">
       <tb-rate-limits-text [rateLimitsArray]="rateLimitsArray" [disabled]="disabled"></tb-rate-limits-text>

From 7d5235d615ed960114719dee3127df24b7317b26 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Mon, 14 Oct 2024 13:00:40 +0300
Subject: [PATCH 10/34] Flex layout replacements. Switch to tailwind.css.

---
 .../queue/queue-form.component.html           | 38 +++++++++---------
 .../relation/relation-dialog.component.html   |  8 ++--
 .../relation/relation-filters.component.html  |  4 +-
 .../relation/relation-table.component.html    | 31 +++++++-------
 .../rule-chain-autocomplete.component.html    |  2 +-
 ...-sms-provider-configuration.component.html | 14 +++----
 .../vc/auto-commit-settings.component.html    | 38 +++++++++---------
 .../vc/complex-version-create.component.html  | 18 ++++-----
 .../vc/complex-version-load.component.html    | 12 +++---
 ...entity-types-version-create.component.html | 40 +++++++++----------
 .../entity-types-version-load.component.html  | 34 ++++++++--------
 .../vc/entity-version-create.component.html   | 12 +++---
 .../vc/entity-version-diff.component.html     | 17 ++++----
 .../vc/entity-version-restore.component.html  | 10 ++---
 .../vc/entity-versions-table.component.html   | 38 +++++++++---------
 ...move-other-entities-confirm.component.html |  2 +-
 .../vc/repository-settings.component.html     | 24 +++++------
 ui-ngx/tailwind.config.js                     |  3 ++
 18 files changed, 172 insertions(+), 173 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/queue/queue-form.component.html b/ui-ngx/src/app/modules/home/components/queue/queue-form.component.html
index 38e2860cd5..26c74a5a34 100644
--- a/ui-ngx/src/app/modules/home/components/queue/queue-form.component.html
+++ b/ui-ngx/src/app/modules/home/components/queue/queue-form.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form [formGroup]="queueFormGroup" fxLayout="column">
+<form [formGroup]="queueFormGroup" class="flex flex-col">
   <mat-form-field class="mat-block" appearance="fill">
     <mat-label translate>admin.queue-name</mat-label>
     <input matInput formControlName="name" required>
@@ -37,10 +37,10 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div fxFlex fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="16px" formGroupName="submitStrategy">
-          <div fxFlex>
+        <div class="flex-1 flex flex-row lt-md:flex-col gap-4" formGroupName="submitStrategy">
+          <div class="flex-1">
             <label class="group-label" translate>queue.submit-strategy</label>
-            <mat-radio-group fxFlex fxLayout="column" formControlName="type" required>
+            <mat-radio-group class="flex-1 flex flex-col" formControlName="type" required>
               <mat-radio-button *ngFor="let strategy of submitStrategies" [value]="strategy">
                 {{ queueSubmitStrategyTypesMap.get(queueSubmitStrategyTypes[strategy]).label | translate }}
                 <mat-icon
@@ -51,7 +51,7 @@
               </mat-radio-button>
             </mat-radio-group>
           </div>
-          <div fxFlex *ngIf="hideBatchSize">
+          <div class="flex-1" *ngIf="hideBatchSize">
             <label class="group-label" translate>queue.grouping-parameter</label>
             <mat-form-field class="mat-block">
               <mat-label translate>queue.batch-size</mat-label>
@@ -75,10 +75,10 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div fxFlex fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="16px" formGroupName="processingStrategy">
-          <div fxFlex>
+        <div class="flex-1 flex flex-row lt-md:flex-col gap-4" formGroupName="processingStrategy">
+          <div class="flex-1">
             <label class="group-label" translate>queue.processing-strategy</label>
-              <mat-radio-group fxFlex fxLayout="column" formControlName="type" required>
+              <mat-radio-group class="flex-1 flex flex-col" formControlName="type" required>
                 <mat-radio-button *ngFor="let strategy of processingStrategies" [value]="strategy">
                   {{ queueProcessingStrategyTypesMap.get(queueProcessingStrategyTypes[strategy]).label | translate }}
                   <mat-icon
@@ -89,7 +89,7 @@
                 </mat-radio-button>
               </mat-radio-group>
           </div>
-          <div fxFlex>
+          <div class="flex-1">
             <label class="group-label" translate>queue.retries-settings</label>
             <mat-form-field class="mat-block" subscriptSizing="dynamic">
               <mat-label translate>queue.retries</mat-label>
@@ -156,11 +156,11 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div fxFlex fxLayout="column" fxLayoutGap="10px">
-          <div fxFlex>
+        <div class="flex-1 flex flex-col gap-2.5">
+          <div class="flex-1">
             <label class="group-label" translate>queue.batch-processing</label>
-            <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap="10px">
-              <mat-form-field fxFlex class="mat-block">
+            <div class="flex-1 flex flex-row xs:flex-col gap-2.5">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>queue.poll-interval</mat-label>
                 <input type="number" matInput formControlName="pollInterval" required>
                 <mat-error *ngIf="queueFormGroup.get('pollInterval').hasError('required')">
@@ -171,7 +171,7 @@
                   {{ 'queue.poll-interval-min-value' | translate }}
                 </mat-error>
               </mat-form-field>
-              <mat-form-field fxFlex class="mat-block">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>queue.partitions</mat-label>
                 <input type="number" matInput formControlName="partitions" required>
                 <mat-error *ngIf="queueFormGroup.get('partitions').hasError('required')">
@@ -184,13 +184,13 @@
               </mat-form-field>
             </div>
           </div>
-          <div fxFlex>
+          <div class="flex-1">
             <label class="group-label" translate>queue.immediate-processing</label>
-            <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap="10px">
-              <mat-checkbox fxFlex fxFlexAlign.gt-xs="center" formControlName="consumerPerPartition">
+            <div class="flex-1 flex flex-row xs:flex-col gap-2.5">
+              <mat-checkbox class="flex-1 gt-xs:flex gt-xs:justify-center gt-xs:items-stretch" formControlName="consumerPerPartition">
                 {{ 'queue.consumer-per-partition' | translate }}
               </mat-checkbox>
-              <mat-form-field fxFlex class="mat-block">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>queue.processing-timeout</mat-label>
                 <input type="number" matInput formControlName="packProcessingTimeout" required>
                 <mat-error *ngIf="queueFormGroup.get('packProcessingTimeout').hasError('required')">
@@ -208,7 +208,7 @@
     </mat-expansion-panel>
   </mat-accordion>
   <div formGroupName="additionalInfo">
-    <mat-checkbox fxFlex formControlName="duplicateMsgToAllPartitions" style="padding-bottom: 16px;">
+    <mat-checkbox class="flex-1" formControlName="duplicateMsgToAllPartitions" style="padding-bottom: 16px;">
       {{ 'queue.duplicate-msg-to-all-partitions' | translate }}
     </mat-checkbox>
     <mat-form-field class="mat-block" subscriptSizing="dynamic">
diff --git a/ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.html b/ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.html
index 435f5a42ee..b6bb288b9f 100644
--- a/ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.html
@@ -16,9 +16,9 @@
 
 -->
 <form [formGroup]="relationFormGroup" (ngSubmit)="save()" style="min-width: 600px;">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>{{ (isAdd ? 'relation.add' : 'relation.edit' ) | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -51,8 +51,8 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayout="row">
-    <span fxFlex></span>
+  <div mat-dialog-actions class="flex flex-row">
+    <span class="flex-1"></span>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html b/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html
index 6973a6a32d..7ca3705364 100644
--- a/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html
+++ b/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html
@@ -52,8 +52,8 @@
           </button>
         </div>
       </div>
-      <div [fxShow]="!relationFiltersFormArray.length">
-        <span fxLayoutAlign="center center" class="tb-prompt" translate>relation.any-relation</span>
+      <div [class.!hidden]="relationFiltersFormArray.length">
+        <span class="tb-prompt flex justify-center items-center" translate>relation.any-relation</span>
       </div>
     </div>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/relation/relation-table.component.html b/ui-ngx/src/app/modules/home/components/relation/relation-table.component.html
index 5be9f4932c..08002e6e0f 100644
--- a/ui-ngx/src/app/modules/home/components/relation/relation-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/relation/relation-table.component.html
@@ -16,10 +16,10 @@
 
 -->
 <div class="mat-padding tb-entity-table tb-absolute-fill">
-  <div fxFlex fxLayout="column" class="tb-entity-table-content tb-outlined-border">
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode && dataSource.selection.isEmpty()">
+  <div class="tb-entity-table-content tb-outlined-border flex-1 flex flex-col">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode || !dataSource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">
+        <div class="title-container flex flex-row justify-start items-center xs:flex-col xs:justify-center xs:items-start">
           <span class="tb-entity-table-title">
             {{(direction == directions.FROM ? 'relation.from-relations' : 'relation.to-relations') | translate}}
           </span>
@@ -33,7 +33,7 @@
             </mat-select>
           </mat-form-field>
         </div>
-        <span fxFlex></span>
+        <span class="flex-1"></span>
         <button mat-icon-button [disabled]="isLoading$ | async"
                 (click)="addRelation($event)"
                 matTooltip="{{ 'action.add' | translate }}"
@@ -52,14 +52,14 @@
         </button>
       </div>
     </mat-toolbar>
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode && dataSource.selection.isEmpty()">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode || !dataSource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
         <button mat-icon-button
                 matTooltip="{{ 'action.search' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>search</mat-icon>
         </button>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>&nbsp;</mat-label>
           <input #searchInput matInput
                  [formControl]="textSearch"
@@ -72,8 +72,8 @@
         </button>
       </div>
     </mat-toolbar>
-    <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [fxShow]="!dataSource.selection.isEmpty()">
-      <div class="mat-toolbar-tools" fxLayoutAlign="space-between center">
+    <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [class.!hidden]="dataSource.selection.isEmpty()">
+      <div class="mat-toolbar-tools flex justify-between items-center">
         <span class="tb-entity-table-info">
           {{ 'relation.selected-relations' | translate:{count: dataSource.selection.selected.length} }}
         </span>
@@ -85,7 +85,7 @@
         </button>
       </div>
     </mat-toolbar>
-    <div fxFlex class="table-container">
+    <div class="table-container flex-1">
       <table mat-table [dataSource]="dataSource"
                  matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
         <ng-container matColumnDef="select" sticky>
@@ -140,7 +140,7 @@
           <mat-header-cell *matHeaderCellDef style="min-width: 80px; max-width: 80px; width: 80px">
           </mat-header-cell>
           <mat-cell *matCellDef="let relation">
-            <div fxFlex fxLayout="row" fxLayoutAlign="end">
+            <div class="flex-1 flex flex-row justify-end items-stretch">
               <button mat-icon-button [disabled]="isLoading$ | async"
                       matTooltip="{{ 'relation.edit' | translate }}"
                       matTooltipPosition="above"
@@ -156,14 +156,13 @@
             </div>
           </mat-cell>
         </ng-container>
-        <mat-header-row [ngClass]="{'mat-row-select': true}" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
-        <mat-row [ngClass]="{'mat-row-select': true,
-                             'mat-selected': dataSource.selection.isSelected(relation)}"
+        <mat-header-row class="mat-row-select" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
+        <mat-row class="mat-row-select"
+                 [class.mat-selected]="dataSource.selection.isSelected(relation)"
                  *matRowDef="let relation; columns: displayedColumns;" (click)="dataSource.selection.toggle(relation)"></mat-row>
       </table>
-      <span [fxShow]="dataSource.isEmpty() | async"
-            fxLayoutAlign="center center"
-            class="no-data-found" translate>{{ 'relation.no-relations-text' }}</span>
+      <span [class.!hidden]="(dataSource.isEmpty() | async) === false"
+            class="no-data-found flex justify-center items-center" translate>{{ 'relation.no-relations-text' }}</span>
     </div>
     <mat-divider></mat-divider>
     <mat-paginator [length]="dataSource.total() | async"
diff --git a/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.html b/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.html
index c74e324c26..255ad06c48 100644
--- a/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.html
@@ -23,7 +23,7 @@
          (focusin)="onFocus()"
          [required]="required"
          [matAutocomplete]="ruleChainAutocomplete"
-         [fxShow]="!disabled || !selectRuleChainFormGroup.get('ruleChainId').value">
+         [class.!hidden]="disabled && selectRuleChainFormGroup.get('ruleChainId').value">
   <a *ngIf="selectRuleChainFormGroup.get('ruleChainId').value && disabled" aria-label="Open device profile" [routerLink]=ruleChainURL>
     {{ displayRuleChainFn(selectRuleChainFormGroup.get('ruleChainId').value) }}
   </a>
diff --git a/ui-ngx/src/app/modules/home/components/sms/smpp-sms-provider-configuration.component.html b/ui-ngx/src/app/modules/home/components/sms/smpp-sms-provider-configuration.component.html
index 5392ce8ce8..7621f9a575 100644
--- a/ui-ngx/src/app/modules/home/components/sms/smpp-sms-provider-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/sms/smpp-sms-provider-configuration.component.html
@@ -16,8 +16,8 @@
 
 -->
 <form [formGroup]="smppSmsProviderConfigurationFormGroup" style="padding-bottom: 16px;">
-  <div fxLayout="row wrap" fxLayoutGap="6px">
-    <mat-form-field fxFlex.lt-sm="100" fxFlex.gt-xs="25" class="mat-block">
+  <div class="flex flex-row flex-wrap gap-1.5">
+    <mat-form-field class="mat-block lt-sm:flex-full gt-xs:flex-full gt-xs:max-w-25%">
       <mat-label translate>admin.smpp-provider.smpp-version</mat-label>
       <mat-select formControlName="protocolVersion">
         <mat-option *ngFor="let smppVersion of smppVersions" [value]="smppVersion.value">
@@ -25,14 +25,14 @@
         </mat-option>
       </mat-select>
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>admin.smpp-provider.smpp-host</mat-label>
       <input required matInput formControlName="host">
       <mat-error *ngIf="smppSmsProviderConfigurationFormGroup.get('host').hasError('required')">
         {{'admin.smpp-provider.smpp-host-required' | translate}}
       </mat-error>
     </mat-form-field>
-    <mat-form-field fxFlex.lt-sm="100" fxFlex.gt-xs="25" class="mat-block">
+    <mat-form-field class="mat-block lt-sm:flex-full gt-xs:flex-full gt-xs:max-w-25%">
       <mat-label translate>admin.smpp-provider.smpp-port</mat-label>
       <input required matInput type="number" formControlName="port">
       <mat-error *ngIf="smppSmsProviderConfigurationFormGroup.get('port').hasError('required')">
@@ -40,15 +40,15 @@
       </mat-error>
     </mat-form-field>
   </div>
-  <div fxLayout="row wrap" fxLayoutGap="6px">
-    <mat-form-field fxFlex class="mat-block">
+  <div class="flex flex-row flex-wrap gap-1.5">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>admin.smpp-provider.system-id</mat-label>
       <input required matInput formControlName="systemId">
       <mat-error *ngIf="smppSmsProviderConfigurationFormGroup.get('systemId').hasError('required')">
         {{'admin.smpp-provider.system-id-required' | translate}}
       </mat-error>
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>admin.smpp-provider.password</mat-label>
       <input required matInput type="password" autocomplete="new-password" formControlName="password">
       <tb-toggle-password matSuffix></tb-toggle-password>
diff --git a/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html b/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html
index 22ab888e80..cabadf231f 100644
--- a/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html
@@ -21,7 +21,7 @@
       <mat-card-title>
         <span class="mat-headline-5" translate>admin.auto-commit-settings</span>
       </mat-card-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <div tb-help="autoCommitSettings"></div>
     </mat-card-header>
     <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@@ -31,19 +31,19 @@
       <form [formGroup]="autoCommitSettingsForm" #formDirective="ngForm" (ngSubmit)="save()">
         <fieldset class="fields-group" [disabled]="(isLoading$ | async) || (isReadOnly | async)">
           <legend class="group-title" translate>admin.auto-commit-entities</legend>
-          <div fxLayout="column">
+          <div class="flex flex-col">
             <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
                let $index = index; last as isLast;"
-                 fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
-              <mat-expansion-panel class="entity-type-config" fxFlex [formGroup]="entityTypeFormGroup" [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)">
+                 class="flex flex-row justify-start items-center" [class.pb-2]="!isLast">
+              <mat-expansion-panel class="entity-type-config flex-1" [formGroup]="entityTypeFormGroup" [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)">
                 <mat-expansion-panel-header>
-                  <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+                  <div class="flex-1 flex flex-row justify-start items-center">
                     <mat-panel-title>
-                      <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+                      <div class="flex-1 flex flex-row justify-start items-center">
                         <div [innerHTML]="entityTypeText(entityTypeFormGroup)"></div>
                       </div>
                     </mat-panel-title>
-                    <span fxFlex></span>
+                    <span class="flex-1"></span>
                     <button mat-icon-button style="min-width: 40px;"
                             type="button"
                             (click)="removeEntityType($index)"
@@ -54,10 +54,10 @@
                   </div>
                 </mat-expansion-panel-header>
                 <ng-template matExpansionPanelContent>
-                  <div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em">
+                  <div class="entity-type-config-content flex flex-col gap-2">
                     <mat-divider></mat-divider>
-                    <div fxLayout="column" fxLayout.gt-lg="row" fxLayoutGap.gt-lg="16px">
-                      <div fxLayout="row" fxLayoutGap="16px" fxLayout.xs="column" fxLayoutGap.xs="0px">
+                    <div class="flex flex-col gt-lg:flex-row gt-lg:gap-4">
+                      <div class="flex flex-row gap-4 xs:flex-col xs:gap-0">
                         <tb-entity-type-select
                           showLabel
                           formControlName="entityType"
@@ -73,8 +73,8 @@
                           </tb-branch-autocomplete>
                         </div>
                       </div>
-                      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px"
-                           fxLayout.xs="column" fxLayoutAlign.xs="start start" fxLayoutGap.xs="0px"  formGroupName="config">
+                      <div class="flex-1 flex flex-row justify-start items-center gap-4 xs:flex-col xs:justify-start xs:items-start xs:gap-0"
+                           formGroupName="config">
                         <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="saveCredentials">
                           {{ 'version-control.export-credentials' | translate }}
                         </mat-checkbox>
@@ -91,17 +91,17 @@
               </mat-expansion-panel>
             </div>
             <div *ngIf="!entityTypesFormGroupArray().length">
-              <span translate fxLayoutAlign="center center"
-                    class="tb-prompt">admin.no-auto-commit-entities-prompt</span>
+              <span translate
+                    class="tb-prompt flex justify-center items-center">admin.no-auto-commit-entities-prompt</span>
             </div>
-            <div style="padding-top: 16px;" fxLayout="row">
+            <div style="padding-top: 16px;"  class="flex flex-row">
               <button mat-raised-button color="primary"
                       type="button"
                       [disabled]="!addEnabled()"
                       (click)="addEntityType()">
                 <span translate>version-control.add-entity-type</span>
               </button>
-              <span fxFlex></span>
+              <span class="flex-1"></span>
               <button mat-raised-button color="primary"
                       type="button"
                       [disabled]="!entityTypesFormGroupArray().length"
@@ -112,12 +112,12 @@
           </div>
         </fieldset>
         <div class="tb-hint" *ngIf="isReadOnly | async" translate>version-control.auto-commit-settings-read-only-hint</div>
-        <div fxLayout="row" fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end" fxLayoutGap="16px">
-          <button mat-raised-button color="warn" type="button" [fxShow]="settings !== null"
+        <div class="flex flex-row justify-end items-center gap-4 xs:flex-col xs:justify-end xs:items-stretch">
+          <button mat-raised-button color="warn" type="button" [class.!hidden]="!settings"
                   [disabled]="(isLoading$ | async) || (isReadOnly | async)" (click)="delete(formDirective)">
             {{'action.delete' | translate}}
           </button>
-          <span fxFlex></span>
+          <span class="flex-1"></span>
           <button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || (isReadOnly | async) || autoCommitSettingsForm.invalid || !autoCommitSettingsForm.dirty"
                   type="submit">{{'action.save' | translate}}
           </button>
diff --git a/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html b/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html
index 163b13a393..327620355f 100644
--- a/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html
@@ -15,22 +15,22 @@
     limitations under the License.
 
 -->
-<section *ngIf="!versionCreateResult$" fxLayout="column" style="height: 100%;">
+<section *ngIf="!versionCreateResult$" class="flex flex-col" style="height: 100%;">
   <mat-toolbar>
     <h2>{{ 'version-control.create-entities-version' | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
   </mat-toolbar>
   <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
                     *ngIf="isLoading$ | async">
   </mat-progress-bar>
-  <form [formGroup]="createVersionFormGroup" fxLayout="column" style="flex: 1; padding-top: 16px; overflow: auto;">
-    <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">
+  <form [formGroup]="createVersionFormGroup" class="flex flex-col" style="flex: 1; padding-top: 16px; overflow: auto;">
+    <div class="flex flex-col gt-sm:flex-row gt-sm:gap-2">
       <tb-branch-autocomplete
-        fxFlex
+        class="flex-1"
         required
         formControlName="branch">
       </tb-branch-autocomplete>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>version-control.version-name</mat-label>
         <input required matInput formControlName="versionName">
         <mat-error *ngIf="createVersionFormGroup.get('versionName').hasError('required') ||
@@ -52,7 +52,7 @@
       formControlName="entityTypes">
     </tb-entity-types-version-create>
   </form>
-  <div fxLayoutAlign="end center" fxLayoutGap="8px" style="padding-top: 16px;">
+  <div class="flex justify-end items-center gap-2" style="padding-top: 16px;">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -71,7 +71,7 @@
   <section *ngIf="resultMessage">
     <div class="mat-headline-6 vc-result-message" [innerHtml]="resultMessage"></div>
   </section>
-  <div *ngIf="(versionCreateResult$ | async)?.done || hasError; else progress" fxLayoutAlign="end center" fxLayoutGap="8px">
+  <div *ngIf="(versionCreateResult$ | async)?.done || hasError; else progress" class="flex justify-end items-center gap-2">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -80,7 +80,7 @@
     </button>
   </div>
   <ng-template #progress>
-    <section fxLayout="column" fxLayoutAlign="center center">
+    <section class="flex flex-col justify-center items-center">
       <div class="mat-headline-6 vc-result-message progress">
         <span translate>version-control.creating-version</span>
         <mat-progress-bar mode="indeterminate"></mat-progress-bar>
diff --git a/ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html b/ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html
index ccab83b9aa..516f10934b 100644
--- a/ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html
@@ -15,15 +15,15 @@
     limitations under the License.
 
 -->
-<section *ngIf="!versionLoadResult$" fxLayout="column" style="height: 100%;">
+<section *ngIf="!versionLoadResult$" class="flex flex-col" style="height: 100%;">
   <mat-toolbar>
     <h2>{{ 'version-control.restore-entities-from-version' | translate: {versionName} }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
   </mat-toolbar>
   <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
                     *ngIf="isLoading$ | async">
   </mat-progress-bar>
-  <form [formGroup]="loadVersionFormGroup" fxLayout="column" style="flex: 1; padding: 16px 0; overflow-y: auto; overflow-x: hidden">
+  <form [formGroup]="loadVersionFormGroup" class="flex flex-col" style="flex: 1; padding: 16px 0; overflow-y: auto; overflow-x: hidden">
     <tb-entity-types-version-load
       formControlName="entityTypes">
     </tb-entity-types-version-load>
@@ -33,7 +33,7 @@
       {{ 'version-control.rollback-on-error' | translate }}
     </mat-slide-toggle>
   </div>
-  <div fxLayoutAlign="end center" fxLayoutGap="8px" style="padding-top: 16px;">
+  <div class="flex justify-end items-center gap-2" style="padding-top: 16px;">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -54,7 +54,7 @@
   </div>
   <div *ngIf="errorMessage" class="mat-headline-6 vc-result-message error" [innerHTML]="errorMessage"></div>
   <div *ngFor="let entityTypeLoadResult of entityTypeLoadResults" class="mat-headline-6 vc-result-message">{{ entityTypeLoadResultMessage(entityTypeLoadResult) }}</div>
-  <div *ngIf="(versionLoadResult$ | async)?.done || hasError; else progress"  fxLayoutAlign="end center" fxLayoutGap="8px">
+  <div *ngIf="(versionLoadResult$ | async)?.done || hasError; else progress" class="flex justify-end items-center gap-2">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -63,7 +63,7 @@
     </button>
   </div>
   <ng-template #progress>
-    <section fxLayout="column" fxLayoutAlign="center center">
+    <section class="flex flex-col justify-center items-center">
       <div class="mat-headline-6 vc-result-message progress">
         <span translate>version-control.restoring-entities-from-version</span>
         <mat-progress-bar mode="indeterminate"></mat-progress-bar>
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
index c237d2291a..c988746e48 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
@@ -15,22 +15,22 @@
     limitations under the License.
 
 -->
-<fieldset [formGroup]="entityTypesVersionCreateFormGroup" class="fields-group" fxLayout="column">
+<fieldset [formGroup]="entityTypesVersionCreateFormGroup" class="fields-group flex flex-col">
   <legend class="group-title" translate>version-control.entities-to-export</legend>
-  <div fxLayout="column" style="flex: 1; overflow: auto;">
+  <div class="flex flex-col" style="flex: 1; overflow: auto;">
     <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
              let $index = index; last as isLast;"
-         fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
-      <mat-expansion-panel class="entity-type-config" [ngClass]="{'load': loading}" fxFlex [formGroup]="entityTypeFormGroup"
+         class="flex flex-row justify-start items-center" [class.pb-2]="!isLast">
+      <mat-expansion-panel class="entity-type-config flex-1" [class.load]="loading" [formGroup]="entityTypeFormGroup"
                            [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)" (opened)="loading = false">
         <mat-expansion-panel-header>
-          <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+          <div class="flex-1 flex flex-row justify-start items-center">
             <mat-panel-title>
-              <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+              <div class="flex-1 flex flex-row justify-start items-center">
                 <div>{{ entityTypeText(entityTypeFormGroup) }}</div>
               </div>
             </mat-panel-title>
-            <span fxFlex></span>
+            <span class="flex-1"></span>
             <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
                     type="button"
                     (click)="removeEntityType($index)"
@@ -40,9 +40,9 @@
             </button>
           </div>
         </mat-expansion-panel-header>
-        <div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em">
+        <div class="entity-type-config-content flex flex-col gap-2">
           <mat-divider></mat-divider>
-          <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
+          <div class="flex flex-row xs:flex-col gt-xs:gap-4">
             <tb-entity-type-select
               showLabel
               formControlName="entityType"
@@ -50,8 +50,8 @@
               [filterAllowedEntityTypes]="false"
               [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
             </tb-entity-type-select>
-            <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" formGroupName="config">
-              <mat-form-field fxFlex class="mat-block">
+            <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4" formGroupName="config">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>version-control.sync-strategy</mat-label>
                 <mat-select formControlName="syncStrategy">
                   <mat-option [value]="'default'">
@@ -62,7 +62,7 @@
                   </mat-option>
                 </mat-select>
               </mat-form-field>
-              <div fxFlex fxLayout="column">
+              <div class="flex-1 flex flex-col">
                 <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="saveCredentials">
                   {{ 'version-control.export-credentials' | translate }}
                 </mat-checkbox>
@@ -75,14 +75,14 @@
               </div>
             </div>
           </div>
-          <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" fxLayoutAlign.gt-xs="start center"
-               formGroupName="config" ngStyle.gt-xs="min-height: 76px;">
+          <div class="flex flex-row xs:flex-col gt-xs:gap-4 gt-xs:justify-start gt-xs:items-center gt-xs:min-h-19"
+               formGroupName="config">
             <mat-slide-toggle formControlName="allEntities">
               {{ 'version-control.all-entities' | translate }}
             </mat-slide-toggle>
             <tb-entity-list
-              fxFlex
-              [fxShow]="!entityTypeFormGroup.get('config').get('allEntities').value"
+              class="flex-1"
+              [class.!hidden]="entityTypeFormGroup.get('config').get('allEntities').value"
               [entityType]="entityTypeFormGroup.get('entityType').value"
               required
               formControlName="entityIds">
@@ -92,18 +92,18 @@
       </mat-expansion-panel>
     </div>
     <div *ngIf="!entityTypesFormGroupArray().length">
-          <span translate fxLayoutAlign="center center"
-                class="tb-prompt">version-control.no-entities-to-export-prompt</span>
+          <span translate
+                class="tb-prompt flex justify-center items-center">version-control.no-entities-to-export-prompt</span>
     </div>
   </div>
-  <div style="padding-top: 16px;" fxLayout="row">
+  <div style="padding-top: 16px;" class="flex flex-row">
     <button mat-raised-button color="primary"
             type="button"
             [disabled]="!addEnabled()"
             (click)="addEntityType()">
       <span translate>version-control.add-entity-type</span>
     </button>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-raised-button color="primary"
             type="button"
             [disabled]="!entityTypesFormGroupArray().length"
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html
index 620d406132..0179c1c0f8 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html
@@ -15,22 +15,22 @@
     limitations under the License.
 
 -->
-<fieldset class="fields-group" [formGroup]="entityTypesVersionLoadFormGroup" fxLayout="column">
+<fieldset class="fields-group flex flex-col" [formGroup]="entityTypesVersionLoadFormGroup">
   <legend class="group-title" translate>version-control.entities-to-restore</legend>
-  <div fxLayout="column" style="flex: 1; overflow: auto;">
+  <div class="flex flex-col" style="flex: 1; overflow: auto;">
     <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
              let $index = index; last as isLast;"
-         fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
-      <mat-expansion-panel class="entity-type-config" [ngClass]="{'load': loading}" fxFlex [formGroup]="entityTypeFormGroup"
+         class="flex flex-row justify-start items-center" [class.pb-2]="!isLast">
+      <mat-expansion-panel class="entity-type-config flex-1" [class.load]="loading" [formGroup]="entityTypeFormGroup"
                            [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)" (opened)="loading = false">
         <mat-expansion-panel-header>
-          <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+          <div class="flex-1 flex flex-row justify-start items-center">
             <mat-panel-title>
-              <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+              <div class="flex-1 flex flex-row justify-start items-center">
                 <div>{{ entityTypeText(entityTypeFormGroup) }}</div>
               </div>
             </mat-panel-title>
-            <span fxFlex></span>
+            <span class="flex-1"></span>
             <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
                     type="button"
                     (click)="removeEntityType($index)"
@@ -40,19 +40,19 @@
             </button>
           </div>
         </mat-expansion-panel-header>
-        <div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em">
+        <div class="entity-type-config-content flex flex-col gap-2">
           <mat-divider></mat-divider>
-          <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="32px">
+          <div class="flex flex-row xs:flex-col gt-xs:gap-8">
             <tb-entity-type-select
-              fxFlex
+              class="flex-1"
               showLabel
               formControlName="entityType"
               required
               [filterAllowedEntityTypes]="false"
               [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
             </tb-entity-type-select>
-            <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" fxLayoutGap.xs="8px" formGroupName="config">
-              <div fxFlex fxLayout="column">
+            <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4 xs:gap-2" formGroupName="config">
+              <div class="flex-1 flex flex-col">
                 <mat-checkbox #removeOtherEntitiesCheckbox
                               formControlName="removeOtherEntities"
                               (change)="onRemoveOtherEntities(removeOtherEntitiesCheckbox, entityTypeFormGroup)">
@@ -62,7 +62,7 @@
                   {{ 'version-control.find-existing-entity-by-name' | translate }}
                 </mat-checkbox>
               </div>
-              <div fxFlex fxLayout="column">
+              <div class="flex-1 flex flex-col">
                 <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="loadCredentials">
                   {{ 'version-control.load-credentials' | translate }}
                 </mat-checkbox>
@@ -79,18 +79,18 @@
       </mat-expansion-panel>
     </div>
     <div *ngIf="!entityTypesFormGroupArray().length">
-          <span translate fxLayoutAlign="center center"
-                class="tb-prompt">version-control.no-entities-to-restore-prompt</span>
+          <span translate
+                class="tb-prompt flex justify-center items-center">version-control.no-entities-to-restore-prompt</span>
     </div>
   </div>
-  <div style="padding-top: 16px;" fxLayout="row">
+  <div style="padding-top: 16px;" class="flex flex-row">
     <button mat-raised-button color="primary"
             type="button"
             [disabled]="!addEnabled()"
             (click)="addEntityType()">
       <span translate>version-control.add-entity-type</span>
     </button>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-raised-button color="primary"
             type="button"
             [disabled]="!entityTypesFormGroupArray().length"
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html
index f4717c2fb3..73565b07ff 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html
@@ -18,19 +18,19 @@
 <section *ngIf="!versionCreateResult$">
   <mat-toolbar>
     <h2>{{ 'version-control.create-entity-version' | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
   </mat-toolbar>
   <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
                     *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <form [formGroup]="createVersionFormGroup" style="padding-top: 16px;">
     <fieldset [disabled]="isLoading$ | async">
-      <div fxFlex fxLayout="column">
+      <div class="flex-1 flex flex-col">
         <tb-branch-autocomplete
           required
           formControlName="branch">
         </tb-branch-autocomplete>
-        <mat-form-field class="mat-block" fxFlex>
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>version-control.version-name</mat-label>
           <input required matInput formControlName="versionName">
           <mat-error *ngIf="createVersionFormGroup.get('versionName').hasError('required') ||
@@ -50,7 +50,7 @@
       </div>
     </fieldset>
   </form>
-  <div fxLayoutAlign="end center" fxLayoutGap="8px">
+  <div class="flex justify-end items-center gap-2">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -69,7 +69,7 @@
   <section *ngIf="(versionCreateResult$ | async)?.done || resultMessage; else progress">
     <section *ngIf="resultMessage">
       <div class="mat-headline-6 vc-result-message">{{ resultMessage }}</div>
-      <div fxLayoutAlign="end center" fxLayoutGap="8px">
+      <div class="flex justify-end items-center gap-2">
         <button mat-button color="primary"
                 type="button"
                 [disabled]="(isLoading$ | async)"
@@ -80,7 +80,7 @@
     </section>
   </section>
   <ng-template #progress>
-    <section fxLayout="column" fxLayoutAlign="center center">
+    <section class="flex flex-col justify-center items-center">
       <div class="mat-headline-6 vc-result-message progress">
         <span translate>version-control.creating-version</span>
         <mat-progress-bar mode="indeterminate"></mat-progress-bar>
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.html
index 1c4f72e623..273207ca24 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.html
@@ -15,13 +15,12 @@
     limitations under the License.
 
 -->
-<section class="entity-version-diff-view" [ngClass]="{'content-ready': contentReady}"
+<section class="entity-version-diff-view flex flex-col" [class.content-ready]="contentReady"
          tb-fullscreen [fullscreen]="isFullscreen" (fullscreenChanged)="onFullscreenChanged($event)"
-         [ngStyle]="isFullscreen || !contentReady ? {} : {height: preferredDiffHeight}"
-         fxLayout="column">
+         [style]="isFullscreen || !contentReady ? {} : {height: preferredDiffHeight}">
   <mat-toolbar *ngIf="contentReady">
     <h2>{{ 'version-control.diff-entity-with-version' | translate: {versionName} }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             matTooltip="{{'version-control.previous-difference' | translate}}"
             matTooltipPosition="below"
@@ -54,14 +53,14 @@
       <mat-icon>{{ isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
     </button>
   </mat-toolbar>
-  <div fxLayout="row" *ngIf="contentReady">
-    <div class="version-title" fxFlex>{{ 'version-control.current' | translate }}</div>
+  <div class="flex flex-row" *ngIf="contentReady">
+    <div class="version-title flex-1">{{ 'version-control.current' | translate }}</div>
     <div style="width: 58px;"></div>
-    <div class="version-title" fxFlex>{{ versionIdContent() }}</div>
+    <div class="version-title flex-1">{{ versionIdContent() }}</div>
   </div>
   <mat-spinner *ngIf="!contentReady" mode="indeterminate" diameter="80"></mat-spinner>
-  <div fxFlex [fxShow]="contentReady" class="diff-viewer" #diffViewer></div>
-  <div class="bottom-panel" *ngIf="contentReady" fxLayoutAlign="end center" fxLayoutGap="8px">
+  <div [class.!hidden]="!contentReady" class="diff-viewer flex-1" #diffViewer></div>
+  <div class="bottom-panel flex justify-end items-center gap-2" *ngIf="contentReady">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html
index 14b1ac6b59..fa670c9ae0 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html
@@ -18,7 +18,7 @@
 <section *ngIf="!versionLoadResult$">
   <mat-toolbar *ngIf="entityDataInfo">
     <h2>{{ 'version-control.restore-entity-from-version' | translate: {versionName} }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
   </mat-toolbar>
   <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
                     *ngIf="entityDataInfo && (isLoading$ | async)">
@@ -26,7 +26,7 @@
   <mat-spinner *ngIf="!entityDataInfo" mode="indeterminate" diameter="80"></mat-spinner>
   <form *ngIf="entityDataInfo" [formGroup]="restoreFormGroup" style="padding-top: 16px;">
     <fieldset [disabled]="isLoading$ | async">
-      <div fxFlex fxLayout="column">
+      <div class="flex-1 flex flex-col">
         <mat-checkbox *ngIf="entityDataInfo.hasCredentials" formControlName="loadCredentials" style="margin-bottom: 16px;">
           {{ 'version-control.load-credentials' | translate }}
         </mat-checkbox>
@@ -39,7 +39,7 @@
       </div>
     </fieldset>
   </form>
-  <div *ngIf="entityDataInfo"  fxLayoutAlign="end center" fxLayoutGap="8px">
+  <div *ngIf="entityDataInfo"  class="flex justify-end items-center gap-2">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -58,7 +58,7 @@
   <section *ngIf="(versionLoadResult$ | async)?.done || errorMessage; else progress">
     <section *ngIf="errorMessage">
       <div class="mat-headline-6 vc-result-message error" [innerHTML]="errorMessage"></div>
-      <div fxLayoutAlign="end center" fxLayoutGap="8px">
+      <div class="flex justify-end items-center gap-2">
         <button mat-button color="primary"
                 type="button"
                 [disabled]="(isLoading$ | async)"
@@ -69,7 +69,7 @@
     </section>
   </section>
   <ng-template #progress>
-    <section fxLayout="column" fxLayoutAlign="center center">
+    <section class="flex flex-col justify-center items-center">
       <div class="mat-headline-6 vc-result-message progress">
         <span translate>version-control.restoring-entity-version</span>
         <mat-progress-bar mode="indeterminate"></mat-progress-bar>
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html
index 948fdb5190..b2818368e2 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html
@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<div class="mat-padding tb-entity-table tb-absolute-fill" [ngClass]="{'tb-popover-mode': popoverComponent}">
-  <div fxFlex fxLayout="column" class="tb-entity-table-content" [ngClass]="{'tb-outlined-border': !popoverComponent}">
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode">
+<div class="mat-padding tb-entity-table tb-absolute-fill" [class.tb-popover-mode]="popoverComponent">
+  <div class="tb-entity-table-content flex-1 flex flex-col" [class.tb-outlined-border]="!popoverComponent">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode">
       <div class="mat-toolbar-tools">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">
+        <div class="title-container flex flex-row justify-start items-center xs:flex-col xs:justify-center xs:items-start">
           <span class="tb-entity-table-title">{{(singleEntityMode ? 'version-control.entity-versions' : 'version-control.versions') | translate}}</span>
           <tb-branch-autocomplete
             #branchAutocompleteComponent
@@ -31,8 +31,8 @@
             (ngModelChange)="branchChanged($event)">
           </tb-branch-autocomplete>
         </div>
-        <span fxFlex></span>
-        <div fxLayout="row" fxLayoutAlign="center center" fxLayout.xs="column" fxLayoutAlign.xs="center end">
+        <span class="flex-1"></span>
+        <div class="flex flex-row justify-center items-center xs:flex-col xs:justify-center xs:items-end">
           <button *ngIf="singleEntityMode" mat-stroked-button color="primary"
                   #createVersionButton
                   [disabled]="(isLoading$ | async) || (isReadOnly | async)"
@@ -47,7 +47,7 @@
             <mat-icon>update</mat-icon>
             {{'version-control.create-entities-version' | translate }}
           </button>
-          <div fxLayout="row">
+          <div class="flex flex-row">
             <button mat-icon-button [disabled]="isLoading$ | async" (click)="updateData()"
                     matTooltip="{{ 'action.refresh' | translate }}"
                     matTooltipPosition="above">
@@ -64,14 +64,14 @@
         </div>
       </div>
     </mat-toolbar>
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode">
       <div class="mat-toolbar-tools">
         <button mat-icon-button
                 matTooltip="{{ 'action.search' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>search</mat-icon>
         </button>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>&nbsp;</mat-label>
           <input #searchInput matInput
                  [formControl]="textSearch"
@@ -84,7 +84,7 @@
         </button>
       </div>
     </mat-toolbar>
-    <div fxFlex class="table-container">
+    <div class="table-container flex-1">
       <table mat-table [dataSource]="dataSource"
              matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
         <ng-container matColumnDef="timestamp">
@@ -124,11 +124,11 @@
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="actions" stickyEnd>
-          <mat-header-cell *matHeaderCellDef [ngStyle]="singleEntityMode ? {minWidth: '80px', maxWidth: '80px', width: '80px'} :
-                                                                           {minWidth: '40px', maxWidth: '40px', width: '40px'}">
+          <mat-header-cell *matHeaderCellDef [class.min-w-20]="singleEntityMode" [class.max-w-20]="singleEntityMode" [class.w-20]="singleEntityMode"
+                                             [class.min-w-10]="!singleEntityMode" [class.max-w-10]="!singleEntityMode" [class.w-10]="!singleEntityMode">
           </mat-header-cell>
           <mat-cell *matCellDef="let entityVersion">
-            <div fxFlex fxLayout="row" fxLayoutAlign="end">
+            <div class="flex-1 flex flex-row justify-end items-stretch">
               <button *ngIf="singleEntityMode" mat-icon-button [disabled]="isLoading$ | async"
                       matTooltip="{{ 'version-control.compare-with-current' | translate }}"
                       matTooltipPosition="above"
@@ -154,18 +154,16 @@
           </mat-cell>
         </ng-container>
         <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
-        <mat-row [fxShow]="!dataSource.dataLoading" *matRowDef="let entityVersion; columns: displayedColumns;"></mat-row>
+        <mat-row [class.!hidden]="dataSource.dataLoading" *matRowDef="let entityVersion; columns: displayedColumns;"></mat-row>
       </table>
-      <span [fxShow]="!(isLoading$ | async) && (dataSource.isEmpty() | async) && !dataSource.dataLoading"
-            fxLayoutAlign="center center"
-            class="no-data-found" translate>{{
+      <span [class.!hidden]="(isLoading$ | async) || (dataSource.isEmpty() | async) === false || dataSource.dataLoading"
+            class="no-data-found flex justify-center items-center" translate>{{
         singleEntityMode
           ? 'version-control.no-entity-versions-text'
           : 'version-control.no-versions-text'
         }}</span>
-      <span [fxShow]="dataSource.dataLoading"
-            fxLayoutAlign="center center"
-            class="no-data-found">{{ 'common.loading' | translate }}</span>
+      <span [class.!hidden]="!dataSource.dataLoading"
+            class="no-data-found flex justify-center items-center">{{ 'common.loading' | translate }}</span>
     </div>
     <mat-divider></mat-divider>
     <mat-paginator [length]="dataSource.total() | async"
diff --git a/ui-ngx/src/app/modules/home/components/vc/remove-other-entities-confirm.component.html b/ui-ngx/src/app/modules/home/components/vc/remove-other-entities-confirm.component.html
index ce414bdb48..15060f44bc 100644
--- a/ui-ngx/src/app/modules/home/components/vc/remove-other-entities-confirm.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/remove-other-entities-confirm.component.html
@@ -24,7 +24,7 @@
       </mat-form-field>
     </fieldset>
   </form>
-  <div fxLayoutAlign="end center" fxLayoutGap="8px">
+  <div class="flex justify-end items-center gap-2">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/vc/repository-settings.component.html b/ui-ngx/src/app/modules/home/components/vc/repository-settings.component.html
index 2fda773889..78f12d5c20 100644
--- a/ui-ngx/src/app/modules/home/components/vc/repository-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/repository-settings.component.html
@@ -17,18 +17,18 @@
 -->
 <div style="height: min-content; max-height: 80vh;">
   <mat-card appearance="outlined" class="repository-settings"
-            [ngClass]="{'settings-card': !detailsMode}"
-            [ngStyle]="popoverComponent ? {boxShadow: 'none', maxWidth: '100%', minWidth: '100%', width: '800px'} : {}">
+            [class.settings-card]="!detailsMode"
+            [style]="popoverComponent ? {boxShadow: 'none', maxWidth: '100%', minWidth: '100%', width: '800px'} : {}">
     <mat-card-header>
       <mat-card-title>
         <span class="mat-headline-5" translate>admin.repository-settings</span>
       </mat-card-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <div tb-help="repositorySettings"></div>
     </mat-card-header>
     <mat-progress-bar color="warn" mode="indeterminate" *ngIf="!hideLoadingBar && isLoading$ | async">
     </mat-progress-bar>
-    <div style="height: 4px;" *ngIf="hideLoadingBar || !(isLoading$ | async)"></div>
+    <div style="height: 4px;" *ngIf="hideLoadingBar || (isLoading$ | async) === false"></div>
     <mat-card-content style="padding-top: 16px;">
       <form [formGroup]="repositorySettingsForm" #formDirective="ngForm" (ngSubmit)="save()">
         <fieldset [disabled]="isLoading$ | async">
@@ -43,7 +43,7 @@
             <mat-label translate>admin.default-branch</mat-label>
             <input matInput formControlName="defaultBranch">
           </mat-form-field>
-          <div fxLayout="column">
+          <div class="flex flex-col">
             <mat-checkbox formControlName="readOnly">
               {{ 'admin.repository-read-only' | translate }}
             </mat-checkbox>
@@ -53,7 +53,7 @@
           </div>
           <fieldset [disabled]="isLoading$ | async" class="fields-group">
             <legend class="group-title" translate>admin.authentication-settings</legend>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="mat-block flex-1">
               <mat-label translate>admin.auth-method</mat-label>
               <mat-select required formControlName="authMethod">
                 <mat-option *ngFor="let method of repositoryAuthMethods" [value]="method">
@@ -61,8 +61,8 @@
                 </mat-option>
               </mat-select>
             </mat-form-field>
-            <section [fxShow]="repositorySettingsForm.get('authMethod').value === repositoryAuthMethod.USERNAME_PASSWORD" fxLayout="column">
-              <mat-form-field fxFlex class="mat-block">
+            <section [class.!hidden]="repositorySettingsForm.get('authMethod').value !== repositoryAuthMethod.USERNAME_PASSWORD" class="flex flex-col">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>common.username</mat-label>
                 <input matInput formControlName="username" placeholder="{{ 'common.enter-username' | translate }}"
                        autocomplete="new-username"/>
@@ -79,7 +79,7 @@
                 <mat-hint [innerHTML] = "'admin.auth-method-username-password-hint' | translate"></mat-hint>
               </mat-form-field>
             </section>
-            <section [fxShow]="repositorySettingsForm.get('authMethod').value === repositoryAuthMethod.PRIVATE_KEY" fxLayout="column">
+            <section [class.!hidden]="repositorySettingsForm.get('authMethod').value !== repositoryAuthMethod.PRIVATE_KEY" class="flex flex-col">
               <tb-file-input [existingFileName]="repositorySettingsForm.get('privateKeyFileName').value"
                              required
                              formControlName="privateKey"
@@ -99,12 +99,12 @@
               </mat-form-field>
             </section>
           </fieldset>
-          <div fxLayout="row" fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end" fxLayoutGap="16px">
-            <button mat-raised-button color="warn" type="button" [fxShow]="settings !== null"
+          <div class="flex flex-row justify-end items-center gap-4 xs:flex-col xs:justify-end xs:items-stretch">
+            <button mat-raised-button color="warn" type="button" [class.!hidden]="!settings"
                     [disabled]="(isLoading$ | async)" (click)="delete(formDirective)">
               {{'action.delete' | translate}}
             </button>
-            <span fxFlex></span>
+            <span class="flex-1"></span>
             <button mat-raised-button type="button"
                     [disabled]="(isLoading$ | async) || repositorySettingsForm.invalid" (click)="checkAccess()">
               {{'admin.check-access' | translate}}
diff --git a/ui-ngx/tailwind.config.js b/ui-ngx/tailwind.config.js
index 6135c8fc9a..fa7b2f8798 100644
--- a/ui-ngx/tailwind.config.js
+++ b/ui-ngx/tailwind.config.js
@@ -86,6 +86,9 @@ module.exports = {
       gap: {
         '0.75': '0.1875rem'
       },
+      minHeight: {
+        '19': '4.75rem'
+      },
       minWidth: {
         '25': '6.25rem',
         '37.5': '9.375rem'

From 6fbc7b6875165ab5f853313224096ab84045fc14 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Mon, 14 Oct 2024 15:03:03 +0300
Subject: [PATCH 11/34] Flex layout replacements. Switch to tailwind.css.

---
 ...anage-widget-actions-dialog.component.html |  4 +-
 .../manage-widget-actions.component.html      | 19 ++++---
 .../widget-action-dialog.component.html       | 15 +++---
 .../alarm-count-basic-config.component.html   |  2 +-
 .../alarms-table-basic-config.component.html  |  8 +--
 .../action-button-basic-config.component.html |  6 +--
 ...command-button-basic-config.component.html |  4 +-
 .../power-button-basic-config.component.html  | 32 +++++------
 .../toggle-button-basic-config.component.html | 25 +++++----
 .../aggregated-data-key-row.component.html    |  4 +-
 .../aggregated-data-keys-panel.component.html |  5 +-
 ...ted-value-card-basic-config.component.html | 16 +++---
 .../label-card-basic-config.component.html    |  6 +--
 ...bel-value-card-basic-config.component.html | 10 ++--
 ...le-app-qr-code-basic-config.component.html |  2 +-
 .../progress-bar-basic-config.component.html  | 14 ++---
 .../simple-card-basic-config.component.html   |  2 +-
 ...meseries-table-basic-config.component.html |  6 +--
 ...d-notification-basic-config.component.html |  8 +--
 .../value-card-basic-config.component.html    | 18 +++----
 ...lue-chart-card-basic-config.component.html | 10 ++--
 ...rt-with-labels-basic-config.component.html | 30 +++++------
 .../comparison-keys-table.component.html      |  5 +-
 .../chart/flot-basic-config.component.html    | 11 ++--
 .../latest-chart-basic-config.component.html  | 54 +++++++++----------
 .../range-chart-basic-config.component.html   | 30 +++++------
 ...e-series-chart-basic-config.component.html | 36 ++++++-------
 .../basic/common/data-key-row.component.html  |  4 +-
 .../common/data-keys-panel.component.html     | 11 ++--
 .../widget-actions-panel.component.html       |  4 +-
 ...entities-table-basic-config.component.html |  6 +--
 .../analog-gauge-basic-config.component.html  | 10 ++--
 .../compass-gauge-basic-config.component.html | 12 ++---
 ...l-simple-gauge-basic-config.component.html | 10 ++--
 .../data-key-config-dialog.component.html     |  4 +-
 .../config/data-key-config.component.html     | 15 +++---
 .../widget/config/data-keys.component.html    |  8 +--
 .../widget/config/datasource.component.html   | 12 ++---
 .../widget/config/datasources.component.html  | 12 ++---
 .../config/target-device.component.html       |  2 +-
 .../timewindow-config-panel.component.html    |  4 +-
 .../timewindow-style-panel.component.html     |  4 +-
 .../widget/widget-config.component.html       | 26 ++++-----
 .../widget/widget-container.component.html    |  6 +--
 .../components/widget/widget.component.html   | 11 ++--
 45 files changed, 263 insertions(+), 280 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.html
index ba37ff19f4..6e4cb4c1e8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="actionsSettings" style="width: 900px;">
   <mat-toolbar color="primary">
     <h2>{{ data.widgetTitle }}: {{ 'widget-config.actions' | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -36,7 +36,7 @@
       formControlName="actions">
     </tb-manage-widget-actions>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html
index 708cf396b0..36504791dd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html
@@ -16,11 +16,11 @@
 
 -->
 <div class="tb-entity-table tb-absolute-fill">
-  <div fxFlex fxLayout="column" class="tb-entity-table-content">
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode">
+  <div class="tb-entity-table-content flex-1 flex flex-col">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode">
       <div class="mat-toolbar-tools">
         <span class="tb-entity-table-title" translate>widget-config.actions</span>
-        <span fxFlex></span>
+        <span class="flex-1"></span>
         <button mat-icon-button [disabled]="isLoading$ | async"
                 type="button"
                 (click)="addAction($event)"
@@ -36,7 +36,7 @@
         </button>
       </div>
     </mat-toolbar>
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode">
       <div class="mat-toolbar-tools">
         <button mat-icon-button
                 type="button"
@@ -44,7 +44,7 @@
                 matTooltipPosition="above">
           <mat-icon>search</mat-icon>
         </button>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>&nbsp;</mat-label>
           <input #searchInput matInput
                  [(ngModel)]="pageLink.textSearch"
@@ -58,7 +58,7 @@
         </button>
       </div>
     </mat-toolbar>
-    <div fxFlex class="table-container">
+    <div class="table-container flex-1">
       <table mat-table
              [dataSource]="dataSource"
              matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear
@@ -109,7 +109,7 @@
           <mat-header-cell *matHeaderCellDef style="min-width: 80px; max-width: 80px; width: 80px">
           </mat-header-cell>
           <mat-cell *matCellDef="let action">
-            <div fxFlex fxLayout="row" fxLayoutAlign="end">
+            <div class="flex-1 flex flex-row justify-end items-stretch">
               <button mat-icon-button [disabled]="isLoading$ | async"
                       type="button"
                       matTooltip="{{ 'widget-config.edit-action' | translate }}"
@@ -132,9 +132,8 @@
                  *matRowDef="let action; columns: displayedColumns;"
                  cdkDrag [cdkDragData]="action"></mat-row>
       </table>
-      <span [fxShow]="dataSource.isEmpty() | async"
-            fxLayoutAlign="center center"
-            class="no-data-found" translate>{{ 'widget-config.no-actions-text' }}</span>
+      <span [class.!hidden]="(dataSource.isEmpty() | async) === false"
+            class="no-data-found flex justify-center items-center" translate>{{ 'widget-config.no-actions-text' }}</span>
     </div>
     <mat-divider></mat-divider>
     <mat-paginator [length]="dataSource.total() | async"
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html
index 0330ad5621..a4a4baa0da 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="widgetActionFormGroup" (ngSubmit)="save()" style="width: 900px;">
   <mat-toolbar color="primary">
     <h2>{{ (isAdd ? 'widget-config.add-action' : 'widget-config.edit-action' ) | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -33,7 +33,7 @@
       <div class="tb-form-panel no-padding no-border">
         <div class="tb-form-row">
           <div class="fixed-title-width">{{'widget-config.action-source' | translate}}*</div>
-          <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select required formControlName="actionSourceId" placeholder="{{ 'widget-config.select-action-source' | translate }}">
               <mat-option *ngFor="let actionSourceItem of data.actionsData.actionSources | keyvalue" [value]="actionSourceItem.key">
                 {{ actionSourceName(actionSourceItem.value) }}
@@ -52,7 +52,7 @@
         </div>
         <div class="tb-form-row" *ngIf="widgetActionFormGroup.get('actionSourceId').value === 'cellClick'">
           <div class="fixed-title-width">{{'widget-config.column-index' | translate}}*</div>
-          <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select #columnIndexSelect formControlName="columnIndex" placeholder="{{ columnIndexPlaceholderText }}">
               <mat-option *ngFor="let column of configuredColumns; let $index = index"
                           [value]="$index"
@@ -73,7 +73,7 @@
         </div>
         <div class="tb-form-row">
           <div class="fixed-title-width">{{'widget-config.action-name' | translate}}*</div>
-          <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <input required matInput formControlName="name" placeholder="{{ 'widget-config.set' | translate }}">
             <mat-icon matSuffix
                       matTooltipPosition="above"
@@ -97,10 +97,9 @@
         <div class="tb-form-panel stroked tb-slide-toggle" *ngIf="displayShowWidgetActionForm()">
           <mat-expansion-panel class="tb-settings" [expanded]="widgetActionFormGroup.get('useShowWidgetActionFunction').value"
                                [disabled]="!widgetActionFormGroup.get('useShowWidgetActionFunction').value">
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex flex-row flex-wrap">
               <mat-panel-title>
-                <mat-slide-toggle class="mat-slide" formControlName="useShowWidgetActionFunction" (click)="$event.stopPropagation()"
-                                  fxLayoutAlign="center">
+                <mat-slide-toggle class="mat-slide flex justify-center items-stretch" formControlName="useShowWidgetActionFunction" (click)="$event.stopPropagation()">
                   {{ 'widget-config.show-hide-action-using-function' | translate }}
                 </mat-slide-toggle>
               </mat-panel-title>
@@ -126,7 +125,7 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/alarm/alarm-count-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/alarm/alarm-count-basic-config.component.html
index 334bdc6966..861f302109 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/alarm/alarm-count-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/alarm/alarm-count-basic-config.component.html
@@ -17,7 +17,7 @@
 -->
 <ng-container [formGroup]="alarmCountWidgetConfigForm">
   <div class="tb-form-panel">
-    <div fxLayout="row" fxLayoutAlign="space-between center">
+    <div class="flex flex-row justify-between items-center">
       <div class="tb-form-panel-title" translate>alarm.filter</div>
       <button mat-button color="primary"
               (click)="alarmFilterConfig.reset()">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/alarm/alarms-table-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/alarm/alarms-table-basic-config.component.html
index dd4ab68895..5ca931b083 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/alarm/alarms-table-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/alarm/alarms-table-basic-config.component.html
@@ -24,7 +24,7 @@
     formControlName="datasources">
   </tb-datasources>
   <div class="tb-form-panel">
-    <div fxLayout="row" fxLayoutAlign="space-between center">
+    <div class="flex flex-row justify-between items-center">
       <div class="tb-form-panel-title" translate>alarm.filter</div>
       <button mat-button color="primary"
         (click)="alarmFilterConfig.reset()">
@@ -55,8 +55,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.card-title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-font-settings formControlName="titleFont"
@@ -74,7 +74,7 @@
       <mat-slide-toggle class="mat-slide"  formControlName="showTitleIcon">
         {{ 'widget-config.card-icon' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row justify-start items-center gap-2">
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="alarmsTableWidgetConfigForm.get('iconColor').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/action-button-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/action-button-basic-config.component.html
index 49a50afc30..39e690b8bc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/action-button-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/action-button-basic-config.component.html
@@ -28,7 +28,7 @@
     <div class="tb-form-panel-title" translate>widgets.action-button.behavior</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.action-button.on-click-hint' | translate}}" translate>widgets.action-button.on-click</div>
-      <tb-widget-action-settings fxFlex
+      <tb-widget-action-settings class="flex-1"
                                  panelTitle="{{ 'widgets.action-button.on-click' | translate }}"
                                  [callbacks]="callbacks"
                                  [widgetType]="widgetType"
@@ -37,7 +37,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.activated-state-hint' | translate}}" translate>widgets.button-state.activated-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.button-state.activated-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.button-state.activated' | translate }}"
@@ -48,7 +48,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.disabled-state-hint' | translate}}" translate>widgets.button-state.disabled-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.button-state.disabled-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.button-state.disabled' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/command-button-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/command-button-basic-config.component.html
index b49cf84512..84ca3592d5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/command-button-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/command-button-basic-config.component.html
@@ -21,7 +21,7 @@
     <div class="tb-form-panel-title" translate>widgets.command-button.behavior</div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.command-button.on-click-hint' | translate}}" translate>widgets.command-button.on-click</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.command-button.on-click' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -30,7 +30,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.disabled-state-hint' | translate}}" translate>widgets.button-state.disabled-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.button-state.disabled-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.button-state.disabled' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html
index b16bcfef67..9ce93c7f24 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html
@@ -21,7 +21,7 @@
     <div class="tb-form-panel-title" translate>widgets.power-button.behavior</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}" translate>widgets.rpc-state.initial-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.initial-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     trueLabel="{{ 'widgets.rpc-state.on' | translate }}"
@@ -34,7 +34,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.power-button.power-on-hint' | translate}}" translate>widgets.power-button.power-on</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.power-button.power-on' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -43,7 +43,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.power-button.power-off-hint' | translate}}" translate>widgets.power-button.power-off</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.power-button.power-off' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -52,7 +52,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
@@ -81,7 +81,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -100,11 +100,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widget-config.card-icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="powerButtonWidgetConfigForm.get('iconColor').value"
@@ -118,15 +118,15 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.power-button.power-on-colors' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row justify-start items-center gap-3">
+        <div class="flex flex-row justify-start items-center gap-2">
           <div translate>widgets.power-button.main</div>
           <tb-color-input asBoxInput
                           formControlName="mainColorOn">
           </tb-color-input>
         </div>
         <mat-divider vertical></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row justify-start items-center gap-2">
           <div translate>widgets.power-button.background</div>
           <tb-color-input asBoxInput
                           formControlName="backgroundColorOn">
@@ -136,15 +136,15 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.power-button.power-off-colors' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row justify-start items-center gap-3">
+        <div class="flex flex-row justify-start items-center gap-2">
           <div translate>widgets.power-button.main</div>
           <tb-color-input asBoxInput
                           formControlName="mainColorOff">
           </tb-color-input>
         </div>
         <mat-divider vertical></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row justify-start items-center gap-2">
           <div translate>widgets.power-button.background</div>
           <tb-color-input asBoxInput
                           formControlName="backgroundColorOff">
@@ -154,15 +154,15 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.power-button.disabled-colors' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row justify-start items-center gap-3">
+        <div class="flex flex-row justify-start items-center gap-2">
           <div translate>widgets.power-button.main</div>
           <tb-color-input asBoxInput
                           formControlName="mainColorDisabled">
           </tb-color-input>
         </div>
         <mat-divider vertical></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row justify-start items-center gap-2">
           <div translate>widgets.power-button.background</div>
           <tb-color-input asBoxInput
                           formControlName="backgroundColorDisabled">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.html
index fae01253bb..72af4e50f1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.html
@@ -21,7 +21,7 @@
     <div class="tb-form-panel-title" translate>widgets.toggle-button.behavior</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}" translate>widgets.rpc-state.initial-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.initial-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     trueLabel="{{ 'widgets.toggle-button.checked' | translate }}"
@@ -34,7 +34,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.toggle-button.check-hint' | translate}}" translate>widgets.toggle-button.check</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.toggle-button.check' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -43,7 +43,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.toggle-button.uncheck-hint' | translate}}" translate>widgets.toggle-button.uncheck</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.toggle-button.uncheck' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -52,7 +52,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
@@ -66,10 +66,9 @@
     <div class="tb-form-panel-title" translate>widget-config.appearance</div>
     <div class="tb-form-panel stroked tb-slide-toggle">
       <mat-expansion-panel class="tb-settings" [expanded]="!toggleButtonWidgetConfigForm.get('autoScale').value" disabled>
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide" formControlName="autoScale" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle class="mat-slide flex justify-center items-stretch" formControlName="autoScale" (click)="$event.stopPropagation()">
               {{ 'widgets.toggle-button.auto-scale' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
@@ -92,7 +91,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -111,11 +110,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widget-config.card-icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="toggleButtonWidgetConfigForm.get('iconColor').value"
@@ -129,7 +128,7 @@
     </div>
   </div>
   <div class="tb-form-panel">
-    <div fxLayout="row" fxLayoutAlign="space-between center">
+    <div class="flex flex-row justify-between items-center">
       <div class="tb-form-panel-title" translate>widgets.toggle-button.button-appearance</div>
       <tb-toggle-select [(ngModel)]="buttonAppearanceType" [ngModelOptions]="{standalone: true}">
         <tb-toggle-option value="checked">{{ 'widgets.toggle-button.checked' | translate }}</tb-toggle-option>
@@ -137,14 +136,14 @@
       </tb-toggle-select>
     </div>
     <tb-widget-button-appearance
-        [fxShow]="buttonAppearanceType === 'checked'"
+        [class.!hidden]="buttonAppearanceType !== 'checked'"
         withBorderRadius
         [withAutoScale]="false"
         [autoScale]="toggleButtonWidgetConfigForm.get('autoScale').value"
         formControlName="checkedAppearance">
     </tb-widget-button-appearance>
     <tb-widget-button-appearance
-        [fxShow]="buttonAppearanceType === 'unchecked'"
+      [class.!hidden]="buttonAppearanceType !== 'unchecked'"
         withBorderRadius
         [withAutoScale]="false"
         [autoScale]="toggleButtonWidgetConfigForm.get('autoScale').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.html
index 40d16b6034..1a9db0a1c3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.html
@@ -26,7 +26,7 @@
   <mat-form-field class="tb-inline-field tb-aggregation-field" subscriptSizing="dynamic">
     <mat-chip-grid #chipList>
       <mat-chip-row class="tb-datakey-chip">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="4px" class="tb-attribute-chip">
+        <div class="tb-attribute-chip flex flex-row justify-start items-center gap-1">
           <div class="tb-chip-labels">
             <div class="tb-chip-label tb-chip-text">
               <ng-container *ngTemplateOutlet="keyName"></ng-container>
@@ -41,7 +41,7 @@
     </mat-chip-grid>
     <input matInput
            type="text"
-           fxHide
+           class="!hidden"
            readonly
            [matChipInputFor]="chipList"
     />
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.html
index d648f07155..4030ccf0cf 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.html
@@ -30,7 +30,7 @@
     </div>
     <div *ngIf="keysFormArray().controls.length; else noKeys" class="tb-form-table-body">
       <div *ngFor="let keyControl of keysFormArray().controls; trackBy: trackByKey; let $index = index;">
-        <tb-aggregated-data-key-row fxFlex
+        <tb-aggregated-data-key-row class="flex-1"
                          [formControl]="keyControl"
                          [index]="$index"
                          [datasourceType]="datasourceType"
@@ -47,6 +47,5 @@
   </div>
 </div>
 <ng-template #noKeys>
-  <span fxLayoutAlign="center center"
-        class="tb-prompt">{{ 'widgets.aggregated-value-card.no-values' | translate }}</span>
+  <span class="tb-prompt flex justify-center items-center">{{ 'widgets.aggregated-value-card.no-values' | translate }}</span>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html
index 8044dcfc79..8e1eb658e8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html
@@ -38,7 +38,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -57,11 +57,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.value-card.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="aggregatedValueCardWidgetConfigForm.get('iconColor').value"
@@ -77,7 +77,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showSubtitle">
         {{ 'widgets.aggregated-value-card.subtitle' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="subtitle" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -95,8 +95,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showDate">
         {{ 'widgets.value-card.date' | translate }}
       </mat-slide-toggle>
-      <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-date-format-select fxFlex formControlName="dateFormat"></tb-date-format-select>
+      <div class="gt-xs:flex-1 flex flex-row justify-start items-center gap-2">
+        <tb-date-format-select class="flex-1" formControlName="dateFormat"></tb-date-format-select>
         <tb-font-settings formControlName="dateFont"
                           [previewText]="datePreviewFn">
         </tb-font-settings>
@@ -110,11 +110,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showChart">
         {{ 'widgets.aggregated-value-card.chart' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <tb-unit-input class="flex" formControlName="chartUnits"></tb-unit-input>
         <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput formControlName="chartDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-          <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+          <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
         </mat-form-field>
         <tb-color-input asBoxInput
                         colorClearButton
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-card-basic-config.component.html
index 271865728f..8b97a5262a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-card-basic-config.component.html
@@ -25,7 +25,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" translate>widgets.label-card.label</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -42,11 +42,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.label-card.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="labelCardWidgetConfigForm.get('iconColor').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.html
index e0d301344e..b87596d39a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.html
@@ -40,7 +40,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
         {{ 'widgets.label-card.label' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -55,11 +55,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.label-card.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="labelValueCardWidgetConfigForm.get('iconColor').value?.color"
@@ -71,11 +71,11 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" translate>widgets.label-value-card.value</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <tb-unit-input class="flex" formControlName="units"></tb-unit-input>
         <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-          <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+          <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
         </mat-form-field>
         <tb-font-settings formControlName="valueFont"
                           [previewText]="valuePreviewFn">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/mobile-app-qr-code-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/mobile-app-qr-code-basic-config.component.html
index f4b5290777..071401a9bb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/mobile-app-qr-code-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/mobile-app-qr-code-basic-config.component.html
@@ -71,7 +71,7 @@
           <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
             <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
           </mat-form-field>
-          <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+          <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
           <tb-material-icon-select asBoxInput
                                    iconClearButton
                                    [color]="mobileAppQrCodeWidgetConfigForm.get('iconColor').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html
index c9821f1a88..39b5e6e4a6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html
@@ -51,7 +51,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -70,11 +70,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.progress-bar.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="progressBarWidgetConfigForm.get('iconColor').value"
@@ -90,11 +90,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValue">
         {{ 'widgets.progress-bar.value' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <tb-unit-input class="flex" formControlName="units"></tb-unit-input>
         <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-          <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+          <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
         </mat-form-field>
         <tb-font-settings formControlName="valueFont"
                           [previewText]="valuePreviewFn">
@@ -108,7 +108,7 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.progress-bar.range' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row justify-start items-center gap-2">
         <div class="tb-small-label" translate>widgets.progress-bar.min</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="tickMin" type="number" placeholder="{{ 'widget-config.set' | translate }}">
@@ -123,7 +123,7 @@
       <mat-slide-toggle class="mat-slide" formControlName="showTicks">
         {{ 'widgets.progress-bar.range-ticks' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row justify-start items-center gap-2">
         <tb-font-settings formControlName="ticksFont"
                           previewText="100">
         </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/simple-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/simple-card-basic-config.component.html
index 2ffa954531..9597cb93f9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/simple-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/simple-card-basic-config.component.html
@@ -32,7 +32,7 @@
     <div class="tb-form-panel-title" translate>widget-config.appearance</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" translate>widgets.simple-card.label</div>
-      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
         <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/timeseries-table-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/timeseries-table-basic-config.component.html
index f5607ae0be..296cc80545 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/timeseries-table-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/timeseries-table-basic-config.component.html
@@ -43,8 +43,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width"  formControlName="showTitle">
         {{ 'widget-config.card-title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-font-settings formControlName="titleFont"
@@ -62,7 +62,7 @@
       <mat-slide-toggle class="mat-slide"  formControlName="showTitleIcon">
         {{ 'widget-config.card-icon' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row justify-start items-center gap-2">
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="timeseriesTableWidgetConfigForm.get('iconColor').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/unread-notification-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/unread-notification-basic-config.component.html
index d09121ed13..66c7e08658 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/unread-notification-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/unread-notification-basic-config.component.html
@@ -23,7 +23,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -42,11 +42,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.notification.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="unreadNotificationWidgetConfigForm.get('iconColor').value"
@@ -74,7 +74,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div>{{ 'widgets.notification.counter-value' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row justify-start items-center gap-2">
         <tb-font-settings formControlName="counterValueFont"
                           clearButton
                           [previewText]="countPreviewFn"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
index c1f0d7e635..81209d8b5e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
@@ -52,7 +52,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
         {{ 'widgets.value-card.label' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -63,15 +63,15 @@
         </tb-color-settings>
       </div>
     </div>
-    <div [fxShow]="iconEnabled" class="tb-form-row">
+    <div [class.!hidden]="!iconEnabled" class="tb-form-row">
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.value-card.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="valueCardWidgetConfigForm.get('iconColor').value?.color"
@@ -83,11 +83,11 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" translate>widgets.value-card.value</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <tb-unit-input class="flex" formControlName="units"></tb-unit-input>
         <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-          <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+          <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
         </mat-form-field>
         <tb-font-settings formControlName="valueFont"
                           [previewText]="valuePreviewFn">
@@ -96,12 +96,12 @@
         </tb-color-settings>
       </div>
     </div>
-    <div [fxShow]="dateEnabled" class="tb-form-row column-xs">
+    <div [class.!hidden]="!dateEnabled" class="tb-form-row column-xs">
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showDate">
         {{ 'widgets.value-card.date' | translate }}
       </mat-slide-toggle>
-      <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-date-format-select fxFlex formControlName="dateFormat"></tb-date-format-select>
+      <div class="gt-xs:flex-1 flex flex-row justify-start items-center gap-2">
+        <tb-date-format-select class="flex-1" formControlName="dateFormat"></tb-date-format-select>
         <tb-font-settings formControlName="dateFont"
                           [previewText]="datePreviewFn">
         </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.html
index e8b173fde1..df14c54cf0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.html
@@ -50,7 +50,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -69,11 +69,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.value-chart-card.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="valueChartCardWidgetConfigForm.get('iconColor').value"
@@ -89,11 +89,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValue">
         {{ 'widgets.value-chart-card.value' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <tb-unit-input class="flex" formControlName="units"></tb-unit-input>
         <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-          <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+          <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
         </mat-form-field>
         <tb-font-settings formControlName="valueFont"
                           [autoScale]="valueChartCardWidgetConfigForm.get('autoScale').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html
index 76b458e4e4..d0b8ed4096 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html
@@ -48,7 +48,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -67,11 +67,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widget-config.card-icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="barChartWidgetConfigForm.get('iconColor').value"
@@ -113,7 +113,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showBarLabel">
         {{ 'widgets.bar-chart.label-on-bar' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row justify-start items-center gap-2">
         <tb-font-settings formControlName="barLabelFont"
                           disabledLineHeight
                           forceSizeUnit="px"
@@ -129,7 +129,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showBarValue">
         {{ 'widgets.bar-chart.value-on-bar' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row justify-start items-center gap-2">
         <tb-font-settings formControlName="barValueFont"
                           disabledLineHeight
                           forceSizeUnit="px"
@@ -194,10 +194,9 @@
   </tb-time-series-chart-thresholds-panel>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="barChartWidgetConfigForm.get('showLegend').value" [disabled]="!barChartWidgetConfigForm.get('showLegend').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex justify-center items-stretch" formControlName="showLegend" (click)="$event.stopPropagation()">
             {{ 'widget-config.legend' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -215,7 +214,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'legend.label' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row justify-start items-center gap-2">
             <tb-font-settings formControlName="legendLabelFont"
                               previewText="Humidity">
             </tb-font-settings>
@@ -230,10 +229,9 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="barChartWidgetConfigForm.get('showTooltip').value" [disabled]="!barChartWidgetConfigForm.get('showTooltip').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex justify-center items-stretch" formControlName="showTooltip" (click)="$event.stopPropagation()">
             {{ 'widget-config.tooltip' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -241,7 +239,7 @@
       <ng-template matExpansionPanelContent>
         <div class="tb-form-row space-between">
           <div>{{ 'tooltip.label' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row justify-start items-center gap-2">
             <tb-font-settings formControlName="tooltipLabelFont"
                               [initialPreviewStyle]="{ color: barChartWidgetConfigForm.get('tooltipLabelColor').value }"
                               previewText="Temperature">
@@ -254,7 +252,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'tooltip.value' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row justify-start items-center gap-2">
             <tb-font-settings formControlName="tooltipValueFont"
                               [initialPreviewStyle]="{ color: barChartWidgetConfigForm.get('tooltipValueColor').value }"
                               [previewText]="tooltipValuePreviewFn">
@@ -269,8 +267,8 @@
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="tooltipShowDate">
             {{ 'tooltip.date' | translate }}
           </mat-slide-toggle>
-          <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-            <tb-date-format-select fxFlex excludeLastUpdateAgo includeAuto
+          <div class="gt-xs:flex-1 flex flex-row justify-start items-center gap-2">
+            <tb-date-format-select class="flex-1" excludeLastUpdateAgo includeAuto
                                    formControlName="tooltipDateFormat"></tb-date-format-select>
             <tb-font-settings formControlName="tooltipDateFont"
                               [initialPreviewStyle]="{ color: barChartWidgetConfigForm.get('tooltipDateColor').value }"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/comparison-keys-table.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/comparison-keys-table.component.html
index a202a81cf6..5b528baa7b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/comparison-keys-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/comparison-keys-table.component.html
@@ -25,7 +25,7 @@
   <div *ngIf="keysFormArray().controls.length; else noKeys" class="tb-form-table-body">
     <div *ngFor="let keyControl of keysFormArray().controls; trackBy: trackByKey; let $index = index;">
       <tb-comparison-key-row
-          fxFlex
+          class="flex-1"
           [datasourceType]="datasourceType"
           [formControl]="keyControl">
       </tb-comparison-key-row>
@@ -33,6 +33,5 @@
   </div>
 </div>
 <ng-template #noKeys>
-  <span fxLayoutAlign="center center"
-        class="tb-prompt">{{ 'widgets.chart.no-series' | translate }}</span>
+  <span class="tb-prompt flex justify-center items-center">{{ 'widgets.chart.no-series' | translate }}</span>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/flot-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/flot-basic-config.component.html
index 0c6dc11bda..4637deceeb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/flot-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/flot-basic-config.component.html
@@ -43,8 +43,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width"  formControlName="showTitle">
         {{ 'widget-config.card-title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-font-settings formControlName="titleFont"
@@ -62,7 +62,7 @@
       <mat-slide-toggle class="mat-slide"  formControlName="showTitleIcon">
         {{ 'widget-config.card-icon' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row justify-start items-center gap-2">
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="flotWidgetConfigForm.get('iconColor').value"
@@ -109,10 +109,9 @@
     </div>
     <div class="tb-form-panel tb-slide-toggle">
       <mat-expansion-panel class="tb-settings" [expanded]="flotWidgetConfigForm.get('showLegend').value" [disabled]="!flotWidgetConfigForm.get('showLegend').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle class="mat-slide flex justify-center items-stretch" formControlName="showLegend" (click)="$event.stopPropagation()">
               {{ 'widget-config.legend' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html
index 520ad98e75..d77a806677 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html
@@ -49,8 +49,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width"  formControlName="showTitle">
         {{ 'widget-config.card-title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-font-settings formControlName="titleFont"
@@ -68,7 +68,7 @@
       <mat-slide-toggle class="mat-slide"  formControlName="showTitleIcon">
         {{ 'widget-config.card-icon' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row justify-start items-center gap-2">
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="latestChartWidgetConfigForm.get('iconColor').value"
@@ -101,10 +101,9 @@
   <ng-container *ngTemplateOutlet="latestChartConfigTemplate()"></ng-container>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="latestChartWidgetConfigForm.get('showLegend').value" [disabled]="!latestChartWidgetConfigForm.get('showLegend').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex justify-center items-stretch" formControlName="showLegend" (click)="$event.stopPropagation()">
             {{ 'widget-config.legend' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -122,7 +121,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'legend.label' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row justify-start items-center gap-2">
             <tb-font-settings formControlName="legendLabelFont"
                               previewText="Wind">
             </tb-font-settings>
@@ -134,7 +133,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'legend.value' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row justify-start items-center gap-2">
             <tb-font-settings formControlName="legendValueFont"
                               [previewText]="valuePreviewFn">
             </tb-font-settings>
@@ -149,10 +148,9 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="latestChartWidgetConfigForm.get('showTooltip').value" [disabled]="!latestChartWidgetConfigForm.get('showTooltip').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex justify-center items-stretch" formControlName="showTooltip" (click)="$event.stopPropagation()">
             {{ 'widget-config.tooltip' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -160,7 +158,7 @@
       <ng-template matExpansionPanelContent>
         <div class="tb-form-row space-between column-xs">
           <div>{{ 'tooltip.value' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row justify-start items-center gap-2">
             <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
               <mat-select formControlName="tooltipValueType">
                 <mat-option *ngFor="let type of latestChartTooltipValueTypes" [value]="type">
@@ -170,7 +168,7 @@
             </mat-form-field>
             <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
               <input matInput formControlName="tooltipValueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-              <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+              <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
             </mat-form-field>
             <tb-font-settings formControlName="tooltipValueFont"
                               [previewText]="tooltipValuePreviewFn">
@@ -240,8 +238,8 @@
         <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
           {{ 'widgets.pie-chart.label' | translate }}
         </mat-slide-toggle>
-        <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-          <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+        <div class="flex-1 flex flex-row justify-start items-center gap-2">
+          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="labelPosition">
               <mat-option *ngFor="let position of pieChartLabelPositions" [value]="position">
                 {{ pieChartLabelPositionTranslationMap.get(position) | translate }}
@@ -261,7 +259,7 @@
       </div>
       <div class="tb-form-row space-between">
         <div>{{ 'widgets.pie-chart.border' | translate }}</div>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row justify-start items-center gap-2">
           <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
             <input matInput formControlName="borderWidth" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}">
             <div matSuffix>px</div>
@@ -274,7 +272,7 @@
       </div>
       <div class="tb-form-row space-between">
         <div>{{ 'widgets.pie-chart.radius' | translate }}</div>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row justify-start items-center gap-2">
           <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
             <input matInput formControlName="radius" type="number" min="0" max="100" step="1" placeholder="{{ 'widget-config.set' | translate }}">
             <div matSuffix>%</div>
@@ -316,9 +314,9 @@
           {{ 'widgets.latest-chart.clockwise-layout' | translate }}
         </mat-slide-toggle>
       </div>
-      <div [fxShow]="doughnutTotalEnabled" class="tb-form-row space-between">
+      <div [class.!hidden]="!doughnutTotalEnabled" class="tb-form-row space-between">
         <div>{{ 'widgets.doughnut.central-total-value' | translate }}</div>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row justify-start items-center gap-2">
           <tb-font-settings formControlName="totalValueFont"
                             [previewText]="valuePreviewFn">
           </tb-font-settings>
@@ -343,7 +341,7 @@
       <div class="tb-form-panel-title" translate>widgets.bar-chart.bar-axis</div>
       <div class="tb-form-row space-between column-xs">
         <div translate>widgets.chart.chart-axis.scale</div>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row justify-start items-center gap-2">
           <div class="tb-small-label" translate>widgets.chart.chart-axis.scale-min</div>
           <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
             <input matInput formControlName="axisMin"
@@ -383,7 +381,7 @@
       <div class="tb-form-panel-title" translate>widgets.polar-area-chart.polar-axis</div>
       <div class="tb-form-row space-between column-xs">
         <div translate>widgets.chart.chart-axis.scale</div>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row justify-start items-center gap-2">
           <div class="tb-small-label" translate>widgets.chart.chart-axis.scale-min</div>
           <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
             <input matInput formControlName="axisMin"
@@ -440,8 +438,8 @@
         <mat-slide-toggle class="mat-slide" formControlName="showLine">
           {{ 'widgets.radar-chart.line' | translate }}
         </mat-slide-toggle>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-          <mat-form-field class="medium-width" fxFlex.xs appearance="outline" subscriptSizing="dynamic">
+        <div class="flex flex-row justify-start items-center gap-2">
+          <mat-form-field class="medium-width xs:flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="lineType">
               <mat-option *ngFor="let type of chartLineTypes" [value]="type">
                 {{ chartLineTypeTranslations.get(type) | translate }}
@@ -458,8 +456,8 @@
         <mat-slide-toggle class="mat-slide" formControlName="showPoints">
           {{ 'widgets.radar-chart.points' | translate }}
         </mat-slide-toggle>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-          <mat-form-field class="medium-width" fxFlex.xs appearance="outline" subscriptSizing="dynamic">
+        <div class="flex flex-row justify-start items-center gap-2">
+          <mat-form-field class="medium-width xs:flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="pointShape">
               <mat-option *ngFor="let shape of chartShapes" [value]="shape">
                 {{ chartShapeTranslations.get(shape) | translate }}
@@ -476,8 +474,8 @@
         <mat-slide-toggle class="mat-slide" formControlName="showLabel">
           {{ 'widgets.radar-chart.points-label' | translate }}
         </mat-slide-toggle>
-        <div fxLayout="row" fxFlex.lt-md fxLayoutAlign="start center" fxLayoutGap="8px">
-          <mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
+        <div class="lt-md:flex-1 flex flex-row justify-start items-center gap-2">
+          <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="labelPosition">
               <mat-option *ngFor="let position of chartLabelPositions" [value]="position">
                 {{ chartLabelPositionTranslations.get(position) | translate }}
@@ -517,7 +515,7 @@
         <mat-slide-toggle class="mat-slide" formControlName="axisShowTickLabels">
           {{ 'widgets.radar-chart.ticks-label' | translate }}
         </mat-slide-toggle>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row justify-start items-center gap-2">
           <tb-font-settings formControlName="axisTickLabelFont"
                             clearButton
                             disabledLineHeight
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html
index eb1b2298a7..213b08bcfe 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html
@@ -32,7 +32,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -51,11 +51,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widget-config.card-icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="rangeChartWidgetConfigForm.get('iconColor').value"
@@ -183,8 +183,8 @@
             {{ 'widgets.time-series-chart.series.point.point-label' | translate }}
           </div>
         </mat-slide-toggle>
-        <div fxLayout="row" fxFlex.lt-md fxLayoutAlign="start center" fxLayoutGap="8px">
-          <mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
+        <div class="lt-md:flex-1 flex flex-row justify-start items-center gap-2">
+          <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="pointLabelPosition">
               <mat-option *ngFor="let position of chartLabelPositions" [value]="position">
                 {{ chartLabelPositionTranslations.get(position) | translate }}
@@ -256,10 +256,9 @@
   </tb-time-series-chart-thresholds-panel>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="rangeChartWidgetConfigForm.get('showLegend').value" [disabled]="!rangeChartWidgetConfigForm.get('showLegend').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex justify-center items-stretch" formControlName="showLegend" (click)="$event.stopPropagation()">
             {{ 'widget-config.legend' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -277,7 +276,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'legend.label' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row justify-start items-center gap-2">
             <tb-font-settings formControlName="legendLabelFont"
                               previewText="20 - 30">
             </tb-font-settings>
@@ -292,10 +291,9 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="rangeChartWidgetConfigForm.get('showTooltip').value" [disabled]="!rangeChartWidgetConfigForm.get('showTooltip').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex justify-center items-stretch" formControlName="showTooltip" (click)="$event.stopPropagation()">
             {{ 'widget-config.tooltip' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -303,7 +301,7 @@
       <ng-template matExpansionPanelContent>
         <div class="tb-form-row space-between">
           <div>{{ 'tooltip.label' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row justify-start items-center gap-2">
             <tb-font-settings formControlName="tooltipLabelFont"
                               [initialPreviewStyle]="{ color: rangeChartWidgetConfigForm.get('tooltipLabelColor').value }"
                               previewText="Temperature">
@@ -316,7 +314,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'tooltip.value' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row justify-start items-center gap-2">
             <tb-font-settings formControlName="tooltipValueFont"
                               [initialPreviewStyle]="{ color: rangeChartWidgetConfigForm.get('tooltipValueColor').value }"
                               [previewText]="tooltipValuePreviewFn">
@@ -330,8 +328,8 @@
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="tooltipShowDate">
             {{ 'tooltip.date' | translate }}
           </mat-slide-toggle>
-          <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-            <tb-date-format-select fxFlex excludeLastUpdateAgo includeAuto
+          <div class="gt-xs:flex-1 flex flex-row justify-start items-center gap-2">
+            <tb-date-format-select class="flex-1" excludeLastUpdateAgo includeAuto
                                    formControlName="tooltipDateFormat"></tb-date-format-select>
             <tb-font-settings formControlName="tooltipDateFont"
                               [initialPreviewStyle]="{ color: rangeChartWidgetConfigForm.get('tooltipDateColor').value }"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html
index 51ef353a10..d3c327e19d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html
@@ -26,7 +26,7 @@
       formControlName="datasources">
   </tb-datasources>
   <div class="tb-form-panel">
-    <div fxLayout="row" fxLayoutAlign="space-between center">
+    <div class="flex flex-row justify-between items-center">
       <div class="tb-form-panel-title" tb-hint-tooltip-icon="{{ seriesMode === 'comparison' ? ('widgets.time-series-chart.comparison.comparison-hint' | translate) : null }}">
         {{ 'widgets.chart.series' | translate }}
       </div>
@@ -58,7 +58,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="comparisonEnabled">
         {{ 'widgets.time-series-chart.comparison.comparison' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <mat-select formControlName="timeForComparison">
             <mat-option [value]="'previousInterval'">
@@ -81,7 +81,7 @@
             </mat-option>
           </mat-select>
         </mat-form-field>
-        <mat-form-field [fxShow]="timeSeriesChartWidgetConfigForm.get('timeForComparison').value === 'customInterval'"
+        <mat-form-field [class.!hidden]="timeSeriesChartWidgetConfigForm.get('timeForComparison').value !== 'customInterval'"
                         appearance="outline" class="number flex-lt-md" subscriptSizing="dynamic">
           <input matInput formControlName="comparisonCustomIntervalValue" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -120,7 +120,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -139,11 +139,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widget-config.card-icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="timeSeriesChartWidgetConfigForm.get('iconColor').value"
@@ -188,10 +188,9 @@
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="timeSeriesChartWidgetConfigForm.get('showLegend').value"
                          [disabled]="!timeSeriesChartWidgetConfigForm.get('showLegend').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex justify-center items-stretch" formControlName="showLegend" (click)="$event.stopPropagation()">
             {{ 'widget-config.legend' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -199,7 +198,7 @@
       <ng-template matExpansionPanelContent>
         <div class="tb-form-row space-between">
           <div>{{ 'legend.label' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row justify-start items-center gap-2">
             <tb-font-settings formControlName="legendLabelFont"
                               [initialPreviewStyle]="{color: timeSeriesChartWidgetConfigForm.get('legendLabelColor').value}"
                               previewText="Temperature">
@@ -212,7 +211,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'legend.value' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row justify-start items-center gap-2">
             <tb-font-settings formControlName="legendValueFont"
                               [initialPreviewStyle]="{color: timeSeriesChartWidgetConfigForm.get('legendValueColor').value}"
                               previewText="22 °C">
@@ -225,7 +224,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'legend.column-title' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row justify-start items-center gap-2">
             <tb-font-settings formControlName="legendColumnTitleFont"
                               [initialPreviewStyle]="{color: timeSeriesChartWidgetConfigForm.get('legendColumnTitleColor').value}"
                               previewText="{{ 'legend.Avg' | translate }}">
@@ -245,10 +244,9 @@
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="timeSeriesChartWidgetConfigForm.get('showTooltip').value"
                          [disabled]="!timeSeriesChartWidgetConfigForm.get('showTooltip').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex justify-center items-stretch" formControlName="showTooltip" (click)="$event.stopPropagation()">
             {{ 'widget-config.tooltip' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -265,7 +263,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'tooltip.label' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row justify-start items-center gap-2">
             <tb-font-settings formControlName="tooltipLabelFont"
                               [initialPreviewStyle]="{ color: timeSeriesChartWidgetConfigForm.get('tooltipLabelColor').value }"
                               previewText="Temperature">
@@ -278,7 +276,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'tooltip.value' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row justify-start items-center gap-2">
             <tb-font-settings formControlName="tooltipValueFont"
                               [initialPreviewStyle]="{ color: timeSeriesChartWidgetConfigForm.get('tooltipValueColor').value }"
                               [previewText]="tooltipValuePreviewFn">
@@ -293,8 +291,8 @@
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="tooltipShowDate">
             {{ 'tooltip.date' | translate }}
           </mat-slide-toggle>
-          <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-            <tb-date-format-select fxFlex excludeLastUpdateAgo includeAuto
+          <div class="gt-xs:flex-1 flex flex-row justify-start items-center gap-2">
+            <tb-date-format-select class="flex-1" excludeLastUpdateAgo includeAuto
                                    formControlName="tooltipDateFormat"></tb-date-format-select>
             <tb-font-settings formControlName="tooltipDateFont"
                               [initialPreviewStyle]="{ color: timeSeriesChartWidgetConfigForm.get('tooltipDateColor').value }"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.html
index 0c8be80bf6..ceb75487c6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.html
@@ -75,11 +75,11 @@
   <div *ngIf="!hideDecimals && !hideDataKeyDecimals && (!singleRow || displayUnitsOrDigits)" class="tb-decimals-field">
     <mat-form-field *ngIf="displayUnitsOrDigits" appearance="outline" class="tb-inline-field number" subscriptSizing="dynamic">
       <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-      <div *ngIf="singleRow" matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+      <div *ngIf="singleRow" matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
     </mat-form-field>
   </div>
   <div *ngIf="!singleRow" class="tb-form-table-row-cell-buttons">
-    <div fxHide.lt-lg class="tb-settings-button">
+    <div class="tb-settings-button lt-lg:!hidden">
       <button *ngIf="modelValue"
               type="button"
               mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.html
index 59a3bcb3cb..96b4ad2813 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.html
@@ -38,7 +38,7 @@
       <div cdkDrag [cdkDragDisabled]="!dragEnabled"
            class="tb-draggable-form-table-row"
            *ngFor="let keyControl of keysFormArray().controls; trackBy: trackByKey; let $index = index;">
-        <tb-data-key-row fxFlex
+        <tb-data-key-row class="flex-1"
                          [formControl]="keyControl"
                          required
                          [datasourceType]="datasourceType"
@@ -60,11 +60,11 @@
                          (keyRemoved)="removeKey($index)">
         </tb-data-key-row>
         <div class="tb-form-table-row-cell-buttons">
-          <button fxHide.lt-lg
-                  mat-icon-button
+          <button mat-icon-button
                   type="button"
                   cdkDragHandle
-                  [ngClass]="{'tb-hidden': !dragEnabled}"
+                  class="lt-lg:!hidden"
+                  [class.tb-hidden]="!dragEnabled"
                   matTooltip="{{ 'action.drag' | translate }}"
                   matTooltipPosition="above">
             <mat-icon>drag_indicator</mat-icon>
@@ -81,6 +81,5 @@
   </div>
 </div>
 <ng-template #noKeys>
-  <span fxLayoutAlign="center center"
-        class="tb-prompt">{{ noKeysText }}</span>
+  <span class="tb-prompt flex justify-center items-center">{{ noKeysText }}</span>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/widget-actions-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/widget-actions-panel.component.html
index d2a2e59cb2..45dd4c050c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/widget-actions-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/widget-actions-panel.component.html
@@ -16,9 +16,9 @@
 
 -->
 <div class="tb-form-panel" (click)="manageWidgetActions()" style="cursor: pointer;">
-  <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
+  <div class="flex flex-row justify-start items-center gap-4">
     <div class="tb-form-panel-title" translate style="padding-right: 48px;">widget-config.actions</div>
-    <mat-chip-listbox fxFlex>
+    <mat-chip-listbox class="flex-1">
       <ng-container *ngFor="let actionSourceId of widgetActionSourceIds">
         <mat-chip *ngFor="let widgetAction of widgetActionsByActionSourceId(actionSourceId)">
           <tb-icon matChipAvatar>{{ widgetAction.icon }}</tb-icon>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entities-table-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entities-table-basic-config.component.html
index 1c3cd26863..1ff1770f4f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entities-table-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entities-table-basic-config.component.html
@@ -43,8 +43,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.card-title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-font-settings formControlName="titleFont"
@@ -62,7 +62,7 @@
       <mat-slide-toggle class="mat-slide"  formControlName="showTitleIcon">
         {{ 'widget-config.card-icon' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row justify-start items-center gap-2">
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="entitiesTableWidgetConfigForm.get('iconColor').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.html
index 9550bf4fa3..4de408ebfe 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.html
@@ -34,7 +34,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showUnitTitle">
         {{ 'widgets.gauge.units-title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="unitTitle" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -51,7 +51,7 @@
 
     <div class="tb-form-row space-between">
       <div translate>widget-config.units-short</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row justify-start items-center gap-2">
         <tb-unit-input
           formControlName="units">
         </tb-unit-input>
@@ -70,10 +70,10 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="valueBox">
         {{ 'widgets.gauge.value' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row justify-start items-center gap-2">
         <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput formControlName="valueInt" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-          <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+          <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
         </mat-form-field>
         <tb-font-settings formControlName="valueFont"
                           disabledLineHeight
@@ -88,7 +88,7 @@
 
     <div class="tb-form-row space-between column-xs">
       <div translate>widgets.gauge.ticks</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row justify-start items-center gap-2">
         <div class="tb-small-label" translate>widgets.gauge.min-value-short</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="minValue" type="number" step="1" placeholder="{{ 'widget-config.set' | translate }}">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.html
index 02e47db0f8..aff6ed4444 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.html
@@ -35,8 +35,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width"  formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-font-settings formControlName="titleFont"
@@ -54,7 +54,7 @@
       <mat-slide-toggle class="mat-slide"  formControlName="showTitleIcon">
         {{ 'widget-config.icon' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row justify-start items-center gap-2">
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="compassGaugeWidgetConfigForm.get('iconColor').value"
@@ -72,10 +72,10 @@
     <div class="tb-form-panel-title" translate>widgets.gauge.compass-appearance</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" translate>widgets.gauge.labels</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <tb-string-items-list
           style="display: flex"
-          fxFlex
+          class="flex-1"
           appearance="outline"
           subscriptSizing="dynamic"
           editable
@@ -85,7 +85,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div translate>widgets.gauge.label-style</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row justify-start items-center gap-2">
         <tb-font-settings formControlName="majorTickFont"
                           disabledLineHeight>
         </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html
index 11e0d6abc2..a924dffa9b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html
@@ -55,7 +55,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showMinMax">
         {{ 'widgets.gauge.min-and-max-label' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row justify-start items-center gap-2">
         <tb-font-settings formControlName="minMaxFont"
                           disabledLineHeight
                           [previewText]="previewFn">
@@ -68,7 +68,7 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div class="fixed-title-width">{{ 'widgets.gauge.min-and-max-value' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row justify-start items-center gap-2">
         <div class="tb-small-label" translate>widgets.gauge.min-value-short</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="minValue" type="number" step="1" placeholder="{{ 'widget-config.set' | translate }}">
@@ -92,14 +92,14 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValue">
         {{ 'widgets.gauge.value' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <tb-unit-input
           class="flex"
           formControlName="units">
         </tb-unit-input>
         <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-          <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+          <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
         </mat-form-field>
         <tb-font-settings formControlName="valueFont"
                           disabledLineHeight
@@ -116,7 +116,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widgets.gauge.label' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/data-key-config-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/config/data-key-config-dialog.component.html
index a7ada72321..f2bb7b6f9d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/data-key-config-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/data-key-config-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="dataKeyFormGroup" (ngSubmit)="save()" style="width: 900px;">
   <mat-toolbar color="primary">
     <h2>{{ 'datakey.configuration' | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <tb-toggle-select *ngIf="hasAdvanced"
                       appearance="fill-invert" selectMediaBreakpoint="xs" [options]="dataKeyConfigHeaderOptions"
                       [(ngModel)]="dataKeyConfigMode" [ngModelOptions]="{ standalone: true }">
@@ -53,7 +53,7 @@
       formControlName="dataKey">
     </tb-data-key-config>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/data-key-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/data-key-config.component.html
index f4b1272812..8e479436b0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/data-key-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/data-key-config.component.html
@@ -17,7 +17,7 @@
 -->
 <div *ngIf="dataKeyConfigMode === dataKeyConfigModes.general; else advanced"
      [formGroup]="dataKeyFormGroup">
-  <div class="mat-padding" fxLayout="column" style="gap: 16px;">
+  <div class="mat-padding flex flex-col gap-4">
     <div class="tb-form-panel">
       <div class="tb-form-panel-title" translate>datakey.general</div>
       <mat-form-field *ngIf="modelValue.type !== dataKeyTypes.function && !hideDataKeyName" subscriptSizing="dynamic">
@@ -65,7 +65,7 @@
                         formControlName="color">
         </tb-color-input>
       </div>
-      <section fxLayout="column" *ngIf="modelValue.type === dataKeyTypes.function">
+      <section class="flex flex-col" *ngIf="modelValue.type === dataKeyTypes.function">
         <span translate>datakey.data-generation-func</span>
         <br/>
         <tb-js-func #funcBodyEdit
@@ -103,8 +103,8 @@
       <div class="tb-form-panel-title" translate>datakey.delta-calculation</div>
       <div class="tb-form-panel stroked tb-slide-toggle">
         <mat-expansion-panel class="tb-settings" [expanded]="dataKeyFormGroup.get('comparisonEnabled').value" [disabled]="!dataKeyFormGroup.get('comparisonEnabled').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
-          <mat-panel-title fxLayout="column" fxLayoutAlign="center start" fxLayoutGap="8px">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
+          <mat-panel-title class="flex flex-col justify-center items-start gap-2">
             <mat-slide-toggle class="mat-slide" formControlName="comparisonEnabled" (click)="$event.stopPropagation()">
               {{ 'datakey.enable-delta-calculation' | translate }}
             </mat-slide-toggle>
@@ -162,10 +162,9 @@
     <div class="tb-form-panel tb-slide-toggle"
          *ngIf="(modelValue.type === dataKeyTypes.timeseries || modelValue.type === dataKeyTypes.attribute || modelValue.type === dataKeyTypes.count) && showPostProcessing">
       <mat-expansion-panel class="tb-settings" [expanded]="dataKeyFormGroup.get('usePostProcessing').value" [disabled]="!dataKeyFormGroup.get('usePostProcessing').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide" formControlName="usePostProcessing" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle class="mat-slide flex justify-center items-stretch" formControlName="usePostProcessing" (click)="$event.stopPropagation()">
               {{ 'datakey.use-data-post-processing-func' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
@@ -192,7 +191,7 @@
   </div>
 </div>
 <ng-template #advanced>
-  <div class="mat-padding" fxLayout="column" [formGroup]="dataKeySettingsFormGroup">
+  <div class="mat-padding flex flex-col" [formGroup]="dataKeySettingsFormGroup">
     <tb-widget-settings
       [dashboard]="dashboard"
       [aliasController]="aliasController"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.html b/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.html
index b5ae7b9dd9..22c24af920 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.html
@@ -40,8 +40,8 @@
                     dndDraggingSourceClass="tb-chip-dragging"
                     [removable]="!disabled && !isCountDatasource"
                     (removed)="remove(key)">
-        <div dndDragImageRef fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="4px" class="tb-attribute-chip"
-             [ngClass]="{'tb-dragging-chip-image': $index === dragIndex}">
+        <div dndDragImageRef class="tb-attribute-chip flex flex-row justify-start items-center gap-1"
+             [class.tb-dragging-chip-image]="$index === dragIndex">
           <div class="tb-absolute-fill tb-dragging-chip-image-fill"></div>
           <div dndHandle *ngIf="!disabled && !dragDisabled" class="tb-chip-drag-handle">
             <mat-icon class="tb-mat-18">drag_indicator</mat-icon>
@@ -71,7 +71,7 @@
               </strong>
             </div>
           </div>
-          <div *ngIf="!hideDataKeyColor" fxHide.xs style="padding: 3px;">
+          <div *ngIf="!hideDataKeyColor" class="xs:!hidden" style="padding: 3px;">
             <div #keyColorButton class="tb-color-preview small box" (click)="openColorPickerPopup(key, $event, keyColorButton)">
               <div class="tb-color-result" [style]="{background: key.color}"></div>
             </div>
@@ -89,7 +89,7 @@
         </div>
       </mat-chip-row>
       <input matInput type="text" placeholder="{{ !disabled && (!maxDataKeysSet || keys.length < maxDataKeys) ? secondaryPlaceholder : '' }}"
-             [ngClass]="{'tb-dragging': dragIndex > -1}"
+             [class.tb-dragging]="dragIndex > -1"
              style="max-width: 200px;"
              #keyInput
              formControlName="key"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/datasource.component.html b/ui-ngx/src/app/modules/home/components/widget/config/datasource.component.html
index a5fb98a1ab..d8d14ca953 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/datasource.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/datasource.component.html
@@ -24,9 +24,9 @@
       </mat-option>
     </mat-select>
   </mat-form-field>
-  <section fxLayout="column" [ngSwitch]="datasourceFormGroup.get('type').value">
+  <section class="flex flex-col" [ngSwitch]="datasourceFormGroup.get('type').value">
     <ng-template [ngSwitchCase]="datasourceType.function">
-      <mat-form-field *ngIf="!hideDatasourceLabel" fxFlex>
+      <mat-form-field *ngIf="!hideDatasourceLabel" class="flex-1">
         <mat-label translate>datasource.label</mat-label>
         <input matInput
                formControlName="name">
@@ -55,15 +55,15 @@
         [callbacks]="entityAliasSelectCallbacks">
       </tb-entity-alias-select>
       <mat-form-field *ngIf="!hideDatasourceLabel && [datasourceType.entityCount, datasourceType.alarmCount].includes(datasourceFormGroup.get('type').value)"
-                      fxFlex>
+                      class="flex-1">
         <input matInput
                placeholder="{{ 'datasource.label' | translate }}"
                formControlName="name">
       </mat-form-field>
     </ng-template>
   </section>
-  <section *ngIf="!hideDataKeys" fxLayout="column" fxLayoutAlign="stretch" fxFlex>
-    <tb-data-keys class="tb-data-keys" fxFlex
+  <section *ngIf="!hideDataKeys" class="flex-1 flex flex-col justify-start items-stretch">
+    <tb-data-keys class="tb-data-keys flex-1"
                   [widgetType]="widgetType"
                   [datasourceType]="datasourceFormGroup.get('type').value"
                   [maxDataKeys]="maxDataKeys"
@@ -80,7 +80,7 @@
                   [deviceId]="datasourceFormGroup.get('deviceId').value"
                   formControlName="dataKeys">
     </tb-data-keys>
-    <tb-data-keys *ngIf="hasAdditionalLatestDataKeys" class="tb-data-keys" fxFlex
+    <tb-data-keys *ngIf="hasAdditionalLatestDataKeys" class="tb-data-keys flex-1"
                   [widgetType]="widgetTypes.latest"
                   [datasourceType]="datasourceFormGroup.get('type').value"
                   latestDataKeys
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.html b/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.html
index a97997cebb..453f0c2b4d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.html
@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<div [formGroup]="datasourcesFormGroup" class="tb-form-panel tb-datasources" [ngClass]="{'no-padding-bottom': !showAddDatasource}">
-  <div fxLayout="column">
-    <div fxLayout="row" fxLayoutAlign="space-between center">
+<div [formGroup]="datasourcesFormGroup" class="tb-form-panel tb-datasources" [class.no-padding-bottom]="!showAddDatasource">
+  <div class="flex flex-col">
+    <div class="flex flex-row justify-between items-center">
       <div class="tb-form-panel-title">{{ (singleDatasource ? (isAlarmSource ? 'widget-config.alarm-source' : 'widget-config.datasource') : 'widget-config.datasources') | translate }}</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="center center" *ngIf="timeseriesKeyError">
+      <div class="flex-1 flex flex-row justify-center items-center" *ngIf="timeseriesKeyError">
         <mat-error >{{ 'widget-config.timeseries-key-error' | translate }}</mat-error>
       </div>
       <tb-toggle-select *ngIf="basicMode && !hideDatasourcesMode" [ngModel]="datasourcesMode" (ngModelChange)="datasourcesModeChange($event)"
@@ -32,8 +32,8 @@
          class="tb-form-panel-hint">{{ 'widget-config.maximum-datasources' | translate:{count: maxDatasources} }}</div>
   </div>
   <div *ngIf="datasourcesFormArray.length === 0; else datasourcesTemplate">
-                <span translate fxLayoutAlign="center center"
-                      class="tb-prompt">datasource.add-datasource-prompt</span>
+                <span translate
+                      class="tb-prompt flex justify-center items-center">datasource.add-datasource-prompt</span>
   </div>
   <ng-template #datasourcesTemplate>
     <div style="overflow: auto;">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/target-device.component.html b/ui-ngx/src/app/modules/home/components/widget/config/target-device.component.html
index 7adea38000..952a482fd1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/target-device.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/target-device.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div [formGroup]="targetDeviceFormGroup" class="tb-form-panel">
-  <div fxLayout="row" fxLayoutAlign="space-between center">
+  <div class="flex flex-row justify-between items-center">
     <div class="tb-form-panel-title" translate>widget-config.target-device</div>
     <tb-toggle-select formControlName="type">
       <tb-toggle-option [value]="targetDeviceType.device">{{ 'device.device' | translate }}</tb-toggle-option>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/timewindow-config-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/config/timewindow-config-panel.component.html
index 9a8676e72e..f2e1ab04e5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/timewindow-config-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/timewindow-config-panel.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div [formGroup]="timewindowConfig" class="tb-form-panel">
-  <div fxLayout="row" fxLayoutAlign="space-between center">
+  <div class="flex flex-row justify-between items-center">
     <div class="tb-form-panel-title" translate>timewindow.timewindow</div>
     <tb-toggle-select formControlName="useDashboardTimewindow" selectMediaBreakpoint="xs">
       <tb-toggle-option [value]="true">{{ 'widget-config.use-dashboard-timewindow' | translate }}</tb-toggle-option>
@@ -27,7 +27,7 @@
     <mat-slide-toggle class="mat-slide" formControlName="displayTimewindow">
       {{ 'widget-config.display-timewindow' | translate }}
     </mat-slide-toggle>
-    <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
+    <div class="flex-1 flex flex-row justify-between items-center">
       <tb-timewindow asButton="true"
                      strokedButton
                      noMargin
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/timewindow-style-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/config/timewindow-style-panel.component.html
index 5d5773b061..e47b836061 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/timewindow-style-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/timewindow-style-panel.component.html
@@ -21,7 +21,7 @@
     <mat-slide-toggle class="mat-slide" formControlName="showIcon">
       {{ 'timewindow.icon' | translate }}
     </mat-slide-toggle>
-    <div fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div class="flex justify-start items-center gap-2">
       <mat-form-field appearance="outline" subscriptSizing="dynamic">
         <input matInput formControlName="iconSize">
       </mat-form-field>
@@ -33,7 +33,7 @@
   </div>
   <div class="tb-form-row">
     <div class="fixed-title-width" translate>timewindow.icon-position</div>
-    <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
       <mat-select formControlName="iconPosition" placeholder="{{ 'widget-config.set' | translate }}">
         <mat-option [value]="'left'">
           {{ 'timewindow.icon-position-left' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
index 3babbfe13f..63d054f778 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
@@ -26,13 +26,13 @@
     </div>
   </div>
   <div *ngIf="widgetConfigMode === widgetConfigModes.advanced; else basicMode" class="tb-widget-config-content">
-    <div *ngIf="widgetType !== widgetTypes.static" [fxShow]="selectedOption === 'data'" class="mat-content">
+    <div *ngIf="widgetType !== widgetTypes.static" [class.!hidden]="selectedOption !== 'data'" class="mat-content">
       <ng-container *ngTemplateOutlet="data"></ng-container>
     </div>
-    <div [fxShow]="selectedOption === 'appearance'" class="mat-content">
+    <div [class.!hidden]="selectedOption !== 'appearance'" class="mat-content">
       <ng-container *ngTemplateOutlet="appearance"></ng-container>
     </div>
-    <div [fxShow]="selectedOption === 'card'" [formGroup]="widgetSettings" class="mat-content">
+    <div [class.!hidden]="selectedOption !== 'card'" [formGroup]="widgetSettings" class="mat-content">
       <div class="tb-form-panel">
         <div class="tb-form-panel-title" translate>widget-config.card-title</div>
         <mat-slide-toggle class="mat-slide" formControlName="showTitle">
@@ -40,8 +40,8 @@
         </mat-slide-toggle>
         <div class="tb-form-row">
           <div class="fixed-title-width" translate>widget-config.title</div>
-          <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-            <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+          <div class="flex-1 flex flex-row justify-start items-center gap-2">
+            <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
               <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
             </mat-form-field>
             <tb-font-settings formControlName="titleFont"
@@ -57,7 +57,7 @@
         </div>
         <div class="tb-form-row">
           <div class="fixed-title-width" translate>widget-config.title-tooltip</div>
-          <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <input matInput formControlName="titleTooltip" placeholder="{{ 'widget-config.set' | translate }}">
           </mat-form-field>
         </div>
@@ -65,7 +65,7 @@
           <mat-slide-toggle class="mat-slide"  formControlName="showTitleIcon">
             {{ 'widget-config.display-icon' | translate }}
           </mat-slide-toggle>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row justify-start items-center gap-2">
             <mat-form-field appearance="outline" subscriptSizing="dynamic">
               <input matInput formControlName="iconSize">
             </mat-form-field>
@@ -82,7 +82,7 @@
         </div>
         <mat-expansion-panel class="tb-settings">
           <mat-expansion-panel-header>
-            <mat-panel-description fxLayoutAlign="start" translate>
+            <mat-panel-description class="flex justify-start items-stretch" translate>
               widget-config.advanced-title-style
             </mat-panel-description>
           </mat-expansion-panel-header>
@@ -134,7 +134,7 @@
         </mat-slide-toggle>
         <mat-expansion-panel class="tb-settings">
           <mat-expansion-panel-header>
-            <mat-panel-description fxLayoutAlign="start" translate>
+            <mat-panel-description class="flex justify-start items-stretch" translate>
               widget-config.advanced-widget-style
             </mat-panel-description>
           </mat-expansion-panel-header>
@@ -158,7 +158,7 @@
         </mat-slide-toggle>
       </div>
     </div>
-    <div [fxShow]="selectedOption === 'actions'" [formGroup]="actionsSettings" class="mat-content" style="height: 100%;">
+    <div [class.!hidden]="selectedOption !== 'actions'" [formGroup]="actionsSettings" class="mat-content" style="height: 100%;">
       <div class="tb-form-panel" style="height: 100%;">
         <tb-manage-widget-actions
           [callbacks]="widgetConfigCallbacks"
@@ -168,7 +168,7 @@
         </tb-manage-widget-actions>
       </div>
     </div>
-    <div [fxShow]="selectedOption === 'layout'" [formGroup]="layoutSettings" class="mat-content">
+    <div [class.!hidden]="selectedOption !== 'layout'" [formGroup]="layoutSettings" class="mat-content">
       <div class="tb-form-panel" *ngIf="!showLayoutConfig || isDefaultBreakpoint">
         <div class="tb-form-panel-title" translate>widget-config.resize-options</div>
         <div class="tb-form-row">
@@ -236,7 +236,7 @@
       </tb-timewindow-config-panel>
     </ng-container>
     <div *ngIf="widgetType === widgetTypes.alarm" [formGroup]="dataSettings" class="tb-form-panel">
-      <div fxLayout="row" fxLayoutAlign="space-between center">
+      <div class="flex flex-row justify-between items-center">
         <div class="tb-form-panel-title" translate>alarm.filter</div>
         <button mat-button color="primary"
                 (click)="alarmFilterConfig.reset()">
@@ -294,7 +294,7 @@
       </div>
       <div *ngIf="displayNoDataDisplayMessageConfig" class="tb-form-row column-xs">
         <div class="fixed-title-width" translate>widget-config.no-data-display-message</div>
-        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="noDataDisplayMessage" placeholder="{{ 'widget-config.set-message' | translate }}">
         </mat-form-field>
       </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
index 43223de4b6..5c81563ed8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
@@ -40,21 +40,21 @@
          [class]="{'tb-widget-actions-absolute': !(widget.showWidgetTitlePanel && !widgetComponent.widgetContext?.embedTitlePanel && (widget.showTitle||widget.hasAggregation))}"
          (mousedown)="$event.stopPropagation()">
       <button mat-icon-button *ngFor="let action of widget.customHeaderActions"
-              [fxShow]="!isEdit"
+              [class.!hidden]="isEdit"
               (click)="action.onAction($event)"
               matTooltip="{{ action.displayName }}"
               matTooltipPosition="above">
         <tb-icon>{{ action.icon }}</tb-icon>
       </button>
       <button mat-icon-button *ngFor="let action of widget.widgetActions"
-              [fxShow]="!isEdit && action.show"
+              [class.!hidden]="isEdit || !action.show"
               (click)="action.onAction($event)"
               matTooltip="{{ action.name | translate }}"
               matTooltipPosition="above">
         <tb-icon>{{ action.icon }}</tb-icon>
       </button>
       <button mat-icon-button
-              [fxShow]="!isEdit && widget.enableFullscreen"
+              [class.!hidden]="isEdit || !widget.enableFullscreen"
               (click)="$event.stopPropagation(); widget.isFullscreen = !widget.isFullscreen; updateEditWidgetActionsTooltipState()"
               matTooltip="{{(widget.isFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
               matTooltipPosition="above">
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget.component.html b/ui-ngx/src/app/modules/home/components/widget/widget.component.html
index dd4faf837f..7357f2398e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<div class="tb-absolute-fill" fxLayout="column" tb-toast
+<div class="tb-absolute-fill flex flex-col" tb-toast
      toastTarget="{{ toastTargetId }}">
-  <div fxFlex id="widget-container">
+  <div class="flex-1" id="widget-container">
     <ng-container #widgetContent></ng-container>
   </div>
 </div>
@@ -25,10 +25,9 @@
   <span [innerHtml]="('Widget Error:<br/><br/>' + widgetErrorData.message) | safe:'html'"></span>
 </div>
 <div class="tb-absolute-fill tb-widget-no-data" *ngIf="displayNoData">
-  <span fxLayoutAlign="center center"
-        style="display: flex;"
-        class="tb-absolute-fill">{{ noDataDisplayMessageText }}</span>
+  <span style="display: flex;"
+        class="tb-absolute-fill flex justify-center items-center">{{ noDataDisplayMessageText }}</span>
 </div>
-<div class="tb-absolute-fill tb-widget-loading" [fxShow]="loadingData" fxLayout="column" fxLayoutAlign="center center">
+<div class="tb-absolute-fill tb-widget-loading flex flex-col justify-center items-center" [class.!hidden]="!loadingData">
   <mat-spinner color="accent" mode="indeterminate" diameter="40"></mat-spinner>
 </div>

From 06eb4656cbb875beacdceaf6f47a7760f1309813 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Mon, 14 Oct 2024 17:18:04 +0300
Subject: [PATCH 12/34] UI: Remove flex layout in gateway widgets

---
 ...eway-advanced-configuration.component.html |   3 +-
 ...gateway-basic-configuration.component.html |   7 +-
 .../mapping-data-keys-panel.component.html    |  92 ++++----
 .../mapping-table.component.html              |  36 +--
 .../modbus-basic-config.component.html        |   2 +-
 .../modbus-data-keys-panel.component.html     | 211 ++++++++----------
 .../modbus-master-table.component.html        |  36 +--
 .../modbus-security-config.component.html     |   2 +-
 .../modbus-slave-config.component.html        |  74 ++----
 .../modbus-slave-dialog.component.html        |  94 +++-----
 .../modbus-values.component.html              |   4 +-
 .../broker-config-control.component.html      | 106 ++++-----
 .../workers-config-control.component.html     |  68 +++---
 .../opc-server-config.component.html          | 172 +++++++-------
 .../report-strategy.component.html            |  16 +-
 .../modbus-rpc-parameters.component.html      |  18 +-
 .../opc-rpc-parameters.component.html         |  12 +-
 .../type-value-panel.component.html           |  44 ++--
 .../add-connector-dialog.component.html       |  34 +--
 .../dialog/mapping-dialog.component.html      | 138 +++++-------
 .../gateway/gateway-connectors.component.html |  43 ++--
 .../lib/gateway/gateway-form.component.html   | 102 +++++----
 .../lib/gateway/gateway-form.component.ts     |  12 +-
 .../lib/gateway/gateway-logs.component.html   |   7 +-
 .../gateway-remote-configuration-dialog.html  |   6 +-
 ...service-rpc-connector-template-dialog.html |   7 +-
 ...ice-rpc-connector-templates.component.html |  11 +-
 ...teway-service-rpc-connector.component.html | 110 +++++----
 .../gateway-service-rpc.component.html        |  14 +-
 .../gateway-service-rpc.component.scss        |   6 +
 .../gateway/gateway-statistics.component.html |  18 +-
 ui-ngx/tailwind.config.js                     |   3 +-
 32 files changed, 677 insertions(+), 831 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/advanced/gateway-advanced-configuration.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/advanced/gateway-advanced-configuration.component.html
index 843e67b0fe..1a3f358fd1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/advanced/gateway-advanced-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/advanced/gateway-advanced-configuration.component.html
@@ -17,8 +17,7 @@
 -->
 <tb-json-object-edit
   fillHeight="true"
-  class="tb-flex config-container"
-  fxLayout="column"
+  class="flex flex-col config-container"
   jsonRequired
   label="{{ 'gateway.configuration' | translate }}"
   [formControl]="advancedFormControl"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/basic/gateway-basic-configuration.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/basic/gateway-basic-configuration.component.html
index af8dc3119c..ef9d7e8b87 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/basic/gateway-basic-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/basic/gateway-basic-configuration.component.html
@@ -152,12 +152,11 @@
                 </mat-icon>
               </mat-form-field>
             </section>
-            <tb-error style="margin-top: -12px; display: block;" fxFlex="100"
+            <tb-error style="margin-top: -12px; display: block;"
                       *ngIf="basicFormGroup.get('thingsboard.security.type').value === 'usernamePassword'"
                       [error]="basicFormGroup.get('thingsboard.security').hasError('atLeastOne') ?
           ('device.client-id-or-user-name-necessary' | translate) : ''"></tb-error>
             <tb-file-input
-              fxFlex="100"
               hint="{{ 'gateway.hints.ca-cert' | translate }}"
               *ngIf="basicFormGroup.get('thingsboard.security.type').value.toLowerCase().includes('tls')"
               formControlName="caCert"
@@ -175,7 +174,7 @@
     <ng-template matTabContent>
       <div formGroupName="logs" class="mat-content mat-padding configuration-block">
         <div class="tb-form-panel no-padding-bottom">
-          <div fxLayout="column">
+          <div class="flex flex-col">
             <mat-form-field appearance="outline">
               <mat-label translate>gateway.logs.date-format</mat-label>
               <input matInput formControlName="dateFormat"/>
@@ -594,7 +593,7 @@
           <div class="tb-form-panel-title" translate>gateway.statistics.commands</div>
           <div class="tb-form-panel-hint" translate>gateway.hints.commands</div>
           <ng-container formGroupName="statistics">
-            <div fxLayout="row" formArrayName="commands" class="statistics-container"
+            <div formArrayName="commands" class="flex flex-row statistics-container"
                  *ngFor="let commandControl of commandFormArray().controls; let $index = index">
               <section [formGroupName]="$index" class="tb-form-panel stroked no-padding-bottom no-gap command-container">
                 <section class="tb-form-row no-border no-padding tb-standard-fields column-xs">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel/mapping-data-keys-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel/mapping-data-keys-panel.component.html
index 736d9c83c6..b129cef3f8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel/mapping-data-keys-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel/mapping-data-keys-panel.component.html
@@ -24,7 +24,7 @@
         <div class="tb-form-panel stroked tb-flex">
           <ng-container [formGroup]="keyControl">
             <mat-expansion-panel class="tb-settings" [expanded]="last">
-              <mat-expansion-panel-header fxLayout="row wrap">
+              <mat-expansion-panel-header class="flex flex-row flex-wrap">
                 <mat-panel-title>
                   <ng-container *ngIf="keysType !== MappingKeysType.RPC_METHODS">
                     <div tbTruncateWithTooltip class="title-container">
@@ -40,25 +40,23 @@
                      *ngIf="keysType !== MappingKeysType.CUSTOM && keysType !== MappingKeysType.RPC_METHODS">
                   <div class="tb-form-panel stroked">
                     <div class="tb-form-panel-title" translate>gateway.platform-side</div>
-                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                    <div class="tb-form-row column-xs">
                       <div class="fixed-title-width tb-required"
                            tb-hint-tooltip-icon="{{ 'gateway.JSONPath-hint' | translate }}">
                         {{ 'gateway.key' | translate }}
                       </div>
-                      <div class="tb-flex no-gap">
-                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                          <input matInput name="value" formControlName="key" placeholder="{{ 'gateway.set' | translate }}"/>
-                          <mat-icon matSuffix
-                                    matTooltipPosition="above"
-                                    matTooltipClass="tb-error-tooltip"
-                                    [matTooltip]="('gateway.key-required') | translate"
-                                    *ngIf="keyControl.get('key').hasError('required') &&
-                                           keyControl.get('key').touched"
-                                    class="tb-error">
-                            warning
-                          </mat-icon>
-                        </mat-form-field>
-                      </div>
+                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                        <input matInput name="value" formControlName="key" placeholder="{{ 'gateway.set' | translate }}"/>
+                        <mat-icon matSuffix
+                                  matTooltipPosition="above"
+                                  matTooltipClass="tb-error-tooltip"
+                                  [matTooltip]="('gateway.key-required') | translate"
+                                  *ngIf="keyControl.get('key').hasError('required') &&
+                                         keyControl.get('key').touched"
+                                  class="tb-error">
+                          warning
+                        </mat-icon>
+                      </mat-form-field>
                     </div>
                   </div>
                   <div class="tb-form-panel stroked">
@@ -98,12 +96,12 @@
                         </mat-select>
                       </mat-form-field>
                     </div>
-                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                    <div class="tb-form-row column-xs">
                       <div class="fixed-title-width tb-required"
                            tb-hint-tooltip-icon="{{ 'gateway.JSONPath-hint' | translate }}">
                         {{ 'gateway.value' | translate }}
                       </div>
-                      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-flex no-gap">
+                      <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-flex no-gap">
                         <input matInput required formControlName="value"
                                placeholder="{{ 'gateway.set' | translate }}"/>
                         <mat-icon matSuffix
@@ -127,25 +125,23 @@
                   </div>
                 </div>
                 <div class="tb-form-panel no-border no-padding" *ngIf="keysType === MappingKeysType.CUSTOM">
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                  <div class="tb-form-row column-xs">
                     <div class="fixed-title-width tb-required" translate>gateway.key</div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                        <input matInput name="value" formControlName="key" placeholder="{{ 'gateway.set' | translate }}"/>
-                        <mat-icon matSuffix
-                                  matTooltipPosition="above"
-                                  matTooltipClass="tb-error-tooltip"
-                                  [matTooltip]="('gateway.key-required') | translate"
-                                  *ngIf="keyControl.get('key').hasError('required') && keyControl.get('key').touched"
-                                  class="tb-error">
-                          warning
-                        </mat-icon>
-                      </mat-form-field>
-                    </div>
+                    <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                      <input matInput name="value" formControlName="key" placeholder="{{ 'gateway.set' | translate }}"/>
+                      <mat-icon matSuffix
+                                matTooltipPosition="above"
+                                matTooltipClass="tb-error-tooltip"
+                                [matTooltip]="('gateway.key-required') | translate"
+                                *ngIf="keyControl.get('key').hasError('required') && keyControl.get('key').touched"
+                                class="tb-error">
+                        warning
+                      </mat-icon>
+                    </mat-form-field>
                   </div>
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                  <div class="tb-form-row column-xs">
                     <div class="fixed-title-width tb-required" translate>gateway.value</div>
-                    <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute">
+                    <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute">
                       <input matInput required formControlName="value"
                              placeholder="{{ 'gateway.set' | translate }}"/>
                       <mat-icon matSuffix
@@ -160,27 +156,25 @@
                   </div>
                 </div>
                 <div class="tb-form-panel no-border no-padding" *ngIf="keysType === MappingKeysType.RPC_METHODS">
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                  <div class="tb-form-row column-xs">
                     <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.method-name' | translate }}">
                       {{ 'gateway.method-name' | translate }}
                     </div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                        <input matInput name="value" formControlName="method" placeholder="{{ 'gateway.set' | translate }}"/>
-                        <mat-icon matSuffix
-                                  matTooltipPosition="above"
-                                  matTooltipClass="tb-error-tooltip"
-                                  [matTooltip]="('gateway.method-required') | translate"
-                                  *ngIf="keyControl.get('method').hasError('required') && keyControl.get('method').touched"
-                                  class="tb-error">
-                          warning
-                        </mat-icon>
-                      </mat-form-field>
-                    </div>
+                    <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                      <input matInput name="value" formControlName="method" placeholder="{{ 'gateway.set' | translate }}"/>
+                      <mat-icon matSuffix
+                                matTooltipPosition="above"
+                                matTooltipClass="tb-error-tooltip"
+                                [matTooltip]="('gateway.method-required') | translate"
+                                *ngIf="keyControl.get('method').hasError('required') && keyControl.get('method').touched"
+                                class="tb-error">
+                        warning
+                      </mat-icon>
+                    </mat-form-field>
                   </div>
                   <div class="tb-form-panel stroked tb-flex">
                     <mat-expansion-panel class="tb-settings">
-                      <mat-expansion-panel-header fxLayout="row wrap">
+                      <mat-expansion-panel-header class="flex flex-wrap">
                         <mat-panel-title>
                           <div class="title-container" tb-hint-tooltip-icon="{{ 'gateway.hints.arguments' | translate }}">
                             {{ 'gateway.arguments' | translate }}{{' (' + keyControl.get('arguments').value?.length + ')'}}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.html
index 7e1ab2bb62..a0bb6c4734 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.html
@@ -16,13 +16,13 @@
 
 -->
 <div class="tb-mapping-table tb-absolute-fill">
-  <div fxFlex fxLayout="column" class="tb-mapping-table-content">
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode">
+  <div class="tb-mapping-table-content flex flex-col">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode">
       <div class="mat-toolbar-tools" *ngIf="(dataSource.isEmpty() | async) === false">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">
+        <div class="title-container">
           <span class="tb-mapping-table-title">{{mappingTypeTranslationsMap.get(mappingType) | translate}}</span>
         </div>
-        <span fxFlex></span>
+        <span class="flex-1"></span>
         <button mat-icon-button
                 (click)="manageMapping($event)"
                 matTooltip="{{ 'action.add' | translate }}"
@@ -37,14 +37,14 @@
         </button>
       </div>
     </mat-toolbar>
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode">
       <div class="mat-toolbar-tools">
         <button mat-icon-button
                 matTooltip="{{ 'action.search' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>search</mat-icon>
         </button>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>&nbsp;</mat-label>
           <input #searchInput matInput
                  [formControl]="textSearch"
@@ -70,11 +70,11 @@
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="actions" stickyEnd>
-          <mat-header-cell *matHeaderCellDef
-                           [ngStyle.gt-md]="{ minWidth: '96px', maxWidth: '96px', width: '96px', textAlign: 'center'}">
+          <mat-header-cell *matHeaderCellDef>
+            <div class="gt-md:!hidden" style="width: 48px; min-width: 48px; max-width: 48px;"></div>
+            <div class="lt-lg:!hidden" [style]="{ minWidth: '96px', textAlign: 'center'}"></div>
           </mat-header-cell>
-          <mat-cell *matCellDef="let mapping; let i = index"
-                    [ngStyle.gt-md]="{ minWidth: '96px', maxWidth: '96px', width: '96px'}">
+          <mat-cell *matCellDef="let mapping; let i = index">
             <ng-template #rowActions>
               <button mat-icon-button
                       matTooltip="{{ 'action.edit' | translate }}"
@@ -89,10 +89,11 @@
                 <tb-icon>delete</tb-icon>
               </button>
             </ng-template>
-            <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
+            <div class="flex flex-1 flex-row justify-end items-stretch lt-lg:!hidden"
+                 [style]="{ minWidth: '96px', textAlign: 'center'}">
               <ng-container [ngTemplateOutlet]="rowActions"></ng-container>
             </div>
-            <div fxHide fxShow.lt-lg fxFlex fxLayout="row" fxLayoutAlign="end">
+            <div class="gt-md:!hidden">
               <button mat-icon-button
                       (click)="$event.stopPropagation()"
                       [matMenuTriggerFor]="cellActionsMenu">
@@ -104,11 +105,11 @@
             </div>
           </mat-cell>
         </ng-container>
-        <mat-header-row [ngClass]="{'mat-row-select': true}" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
+        <mat-header-row class="mat-row-select" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
         <mat-row *matRowDef="let mapping; columns: displayedColumns;"></mat-row>
       </table>
-      <section [fxShow]="!textSearchMode && (dataSource.isEmpty() | async)" fxLayoutAlign="center center"
-               class="mat-headline-5 tb-absolute-fill tb-add-new">
+      <section [class.!hidden]="textSearchMode || (dataSource.isEmpty() | async) === false"
+               class="mat-headline-5 tb-absolute-fill tb-add-new justify-center items-center">
         <button mat-button class="connector"
                 (click)="manageMapping($event)">
           <mat-icon class="tb-mat-96">add</mat-icon>
@@ -116,9 +117,8 @@
         </button>
       </section>
     </div>
-    <span [fxShow]="textSearchMode && (dataSource.isEmpty() | async)"
-          fxLayoutAlign="center center"
-          class="no-data-found" translate>
+    <span [class.!hidden]="!textSearchMode || (dataSource.isEmpty() | async) === false"
+          class="no-data-found justify-center items-center" translate>
       widget.no-data-found
     </span>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.html
index 76098288b8..337e07da83 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.html
@@ -25,7 +25,7 @@
   <mat-tab label="{{ 'gateway.server-config' | translate }}">
     <div class="tb-form-panel no-border no-padding padding-top">
       <div class="tb-form-hint tb-primary-fill tb-flex center">{{ 'gateway.hints.modbus-server' | translate }}</div>
-      <div class="tb-form-row" fxLayoutAlign="space-between center">
+      <div class="tb-form-row">
         <mat-slide-toggle class="mat-slide" [formControl]="enableSlaveControl">
           <mat-label>
             {{ 'gateway.enable' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.html
index 890c0428f0..7ce388e3b8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.html
@@ -24,7 +24,7 @@
         <div class="tb-form-panel stroked tb-flex">
           <ng-container [formGroup]="keyControl">
             <mat-expansion-panel class="tb-settings" [expanded]="last">
-              <mat-expansion-panel-header fxLayout="row wrap">
+              <mat-expansion-panel-header class="flex-wrap">
                 <mat-panel-title>
                   <div *ngIf="isMaster else tagName" class="title-container" tbTruncateWithTooltip>
                     {{ keyControl.get('tag').value }}{{ '-' }}{{ keyControl.get('value').value }}
@@ -56,104 +56,93 @@
                 </div>
                 <div class="tb-form-panel stroked">
                   <div class="tb-form-panel-title" translate>gateway.platform-side</div>
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                  <div class="tb-form-row column-xs">
                     <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.key' | translate }}" translate>
                       gateway.key
                     </div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                        <input matInput name="value" formControlName="tag" placeholder="{{ 'gateway.set' | translate }}"/>
-                        <mat-icon matSuffix
-                                  matTooltipPosition="above"
-                                  matTooltipClass="tb-error-tooltip"
-                                  [matTooltip]="('gateway.key-required') | translate"
-                                  *ngIf="keyControl.get('tag').hasError('required') &&
-                                           keyControl.get('tag').touched"
-                                  class="tb-error">
-                          warning
-                        </mat-icon>
-                      </mat-form-field>
-                    </div>
+                    <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                      <input matInput name="value" formControlName="tag" placeholder="{{ 'gateway.set' | translate }}"/>
+                      <mat-icon matSuffix
+                                matTooltipPosition="above"
+                                matTooltipClass="tb-error-tooltip"
+                                [matTooltip]="('gateway.key-required') | translate"
+                                *ngIf="keyControl.get('tag').hasError('required') &&
+                                         keyControl.get('tag').touched"
+                                class="tb-error">
+                        warning
+                      </mat-icon>
+                    </mat-form-field>
                   </div>
                 </div>
                 <div class="tb-form-panel stroked">
                   <div class="tb-form-panel-title" translate>gateway.connector-side</div>
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                  <div class="tb-form-row column-xs">
                     <div class="fixed-title-width" translate>
                       gateway.type
                     </div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                        <mat-select formControlName="type">
-                          <mat-option *ngFor="let type of modbusDataTypes" [value]="type">{{ type }}</mat-option>
-                        </mat-select>
-                      </mat-form-field>
-                    </div>
+                    <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                      <mat-select formControlName="type">
+                        <mat-option *ngFor="let type of modbusDataTypes" [value]="type">{{ type }}</mat-option>
+                      </mat-select>
+                    </mat-form-field>
                   </div>
-                  <div *ngIf="withFunctionCode" class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                  <div *ngIf="withFunctionCode" class="tb-form-row column-xs">
                     <div class="fixed-title-width" translate>gateway.function-code</div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                        <mat-select formControlName="functionCode">
-                          <mat-option
-                            *ngFor="let code of functionCodesMap.get(keyControl.get('id').value) || defaultFunctionCodes"
-                            [value]="code"
-                          >
-                            {{ ModbusFunctionCodeTranslationsMap.get(code) | translate }}
-                          </mat-option>
-                        </mat-select>
-                      </mat-form-field>
-                    </div>
+                    <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                      <mat-select formControlName="functionCode">
+                        <mat-option
+                          *ngFor="let code of functionCodesMap.get(keyControl.get('id').value) || defaultFunctionCodes"
+                          [value]="code"
+                        >
+                          {{ ModbusFunctionCodeTranslationsMap.get(code) | translate }}
+                        </mat-option>
+                      </mat-select>
+                    </mat-form-field>
                   </div>
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                  <div class="tb-form-row column-xs">
                     <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.objects-count' | translate }}" translate>gateway.objects-count</div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                        <input
-                          matInput
-                          type="number"
-                          min="1"
-                          max="50000"
-                          name="value"
-                          formControlName="objectsCount"
-                          placeholder="{{ 'gateway.set' | translate }}"
-                          [readonly]="!ModbusEditableDataTypes.includes(keyControl.get('type').value)"
-                        />
-                        <mat-icon matSuffix
-                                  matTooltipPosition="above"
-                                  matTooltipClass="tb-error-tooltip"
-                                  [matTooltip]="('gateway.objects-count-required') | translate"
-                                  *ngIf="keyControl.get('objectsCount').hasError('required') &&
-                                           keyControl.get('objectsCount').touched"
-                                  class="tb-error">
-                          warning
-                        </mat-icon>
-                      </mat-form-field>
-                    </div>
+                    <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                      <input
+                        matInput
+                        type="number"
+                        min="1"
+                        max="50000"
+                        name="value"
+                        formControlName="objectsCount"
+                        placeholder="{{ 'gateway.set' | translate }}"
+                        [readonly]="!ModbusEditableDataTypes.includes(keyControl.get('type').value)"
+                      />
+                      <mat-icon matSuffix
+                                matTooltipPosition="above"
+                                matTooltipClass="tb-error-tooltip"
+                                [matTooltip]="('gateway.objects-count-required') | translate"
+                                *ngIf="keyControl.get('objectsCount').hasError('required') &&
+                                         keyControl.get('objectsCount').touched"
+                                class="tb-error">
+                        warning
+                      </mat-icon>
+                    </mat-form-field>
                   </div>
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                  <div class="tb-form-row column-xs">
                     <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.address' | translate }}" translate>gateway.address</div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                        <input matInput type="number" min="0" max="50000" name="value" formControlName="address" placeholder="{{ 'gateway.set' | translate }}"/>
-                        <mat-icon matSuffix
-                                  matTooltipPosition="above"
-                                  matTooltipClass="tb-error-tooltip"
-                                  [matTooltip]="('gateway.address-required') | translate"
-                                  *ngIf="keyControl.get('address').hasError('required') &&
-                                           keyControl.get('address').touched"
-                                  class="tb-error">
-                          warning
-                        </mat-icon>
-                      </mat-form-field>
-                    </div>
+                    <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                      <input matInput type="number" min="0" max="50000" name="value" formControlName="address" placeholder="{{ 'gateway.set' | translate }}"/>
+                      <mat-icon matSuffix
+                                matTooltipPosition="above"
+                                matTooltipClass="tb-error-tooltip"
+                                [matTooltip]="('gateway.address-required') | translate"
+                                *ngIf="keyControl.get('address').hasError('required') &&
+                                         keyControl.get('address').touched"
+                                class="tb-error">
+                        warning
+                      </mat-icon>
+                    </mat-form-field>
                   </div>
                   <div *ngIf="showModifiersMap.get(keyControl.get('id').value)" class="tb-form-panel stroked tb-slide-toggle">
                     <mat-expansion-panel class="tb-settings" [expanded]="enableModifiersControlMap.get(keyControl.get('id').value).value">
-                      <mat-expansion-panel-header fxLayout="row wrap">
+                      <mat-expansion-panel-header class="flex-wrap">
                         <mat-panel-title>
                           <mat-slide-toggle
-                            fxLayoutAlign="center"
                             [formControl]="enableModifiersControlMap.get(keyControl.get('id').value)"
                             class="mat-slide"
                             (click)="$event.stopPropagation()"
@@ -165,30 +154,28 @@
                         </mat-panel-title>
                       </mat-expansion-panel-header>
                       <div class="tb-flex no-gap">
-                        <div class="tb-form-row column-xs tb-flex full-width" fxLayoutAlign="space-between center">
+                        <div class="tb-form-row column-xs tb-flex full-width">
                           <div class="fixed-title-width" translate>gateway.type</div>
-                          <div class="tb-flex no-gap">
-                            <mat-form-field class="tb-flex no-gap fill-width" appearance="outline" subscriptSizing="dynamic">
-                              <mat-select formControlName="modifierType">
-                                <mat-select-trigger>
-                                  <div class="tb-flex align-center">
-                                    <mat-icon class="tb-mat-18" [svgIcon]="ModifierTypesMap.get(keyControl.get('modifierType').value)?.icon"></mat-icon>
-                                    <span>{{ ModifierTypesMap.get(keyControl.get('modifierType').value)?.name | translate}}</span>
-                                  </div>
-                                </mat-select-trigger>
-                                <mat-option *ngFor="let modifierType of modifierTypes" [value]="modifierType">
-                                  <mat-icon class="tb-mat-20" svgIcon="{{ ModifierTypesMap.get(modifierType).icon }}">
-                                  </mat-icon>
-                                  <span>{{ ModifierTypesMap.get(modifierType).name | translate }}</span>
-                                </mat-option>
-                              </mat-select>
-                            </mat-form-field>
-                          </div>
+                          <mat-form-field class="tb-flex no-gap fill-width" appearance="outline" subscriptSizing="dynamic">
+                            <mat-select formControlName="modifierType">
+                              <mat-select-trigger>
+                                <div class="tb-flex align-center">
+                                  <mat-icon class="tb-mat-18" [svgIcon]="ModifierTypesMap.get(keyControl.get('modifierType').value)?.icon"></mat-icon>
+                                  <span>{{ ModifierTypesMap.get(keyControl.get('modifierType').value)?.name | translate}}</span>
+                                </div>
+                              </mat-select-trigger>
+                              <mat-option *ngFor="let modifierType of modifierTypes" [value]="modifierType">
+                                <mat-icon class="tb-mat-20" svgIcon="{{ ModifierTypesMap.get(modifierType).icon }}">
+                                </mat-icon>
+                                <span>{{ ModifierTypesMap.get(modifierType).name | translate }}</span>
+                              </mat-option>
+                            </mat-select>
+                          </mat-form-field>
                         </div>
                       </div>
-                      <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                      <div class="tb-form-row column-xs">
                         <div class="fixed-title-width" translate>gateway.value</div>
-                        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute">
+                        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute">
                           <input matInput required formControlName="modifierValue" step="0.1" type="number"
                                  placeholder="{{ 'gateway.set' | translate }}" />
                           <mat-icon matSuffix
@@ -204,22 +191,20 @@
                       </div>
                     </mat-expansion-panel>
                   </div>
-                  <div *ngIf="isMaster" class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                  <div *ngIf="isMaster" class="tb-form-row column-xs">
                     <div class="fixed-title-width tb-required" translate>gateway.value</div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                        <input matInput name="value" formControlName="value" placeholder="{{ 'gateway.set' | translate }}"/>
-                        <mat-icon matSuffix
-                                  matTooltipPosition="above"
-                                  matTooltipClass="tb-error-tooltip"
-                                  [matTooltip]="('gateway.value-required') | translate"
-                                  *ngIf="keyControl.get('value').hasError('required') &&
-                                           keyControl.get('value').touched"
-                                  class="tb-error">
-                          warning
-                        </mat-icon>
-                      </mat-form-field>
-                    </div>
+                    <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                      <input matInput name="value" formControlName="value" placeholder="{{ 'gateway.set' | translate }}"/>
+                      <mat-icon matSuffix
+                                matTooltipPosition="above"
+                                matTooltipClass="tb-error-tooltip"
+                                [matTooltip]="('gateway.value-required') | translate"
+                                *ngIf="keyControl.get('value').hasError('required') &&
+                                         keyControl.get('value').touched"
+                                class="tb-error">
+                        warning
+                      </mat-icon>
+                    </mat-form-field>
                   </div>
                   <tb-report-strategy
                     *ngIf="withReportStrategy"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.html
index 0bdfc9ab87..dc64372d05 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.html
@@ -19,13 +19,13 @@
   <div class="tb-form-panel no-border no-padding padding-top">
     <div class="tb-form-hint tb-primary-fill tb-flex center">{{ 'gateway.hints.modbus-master' | translate }}</div>
   </div>
-  <div fxFlex fxLayout="column" class="tb-master-table-content">
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode">
+  <div class="tb-master-table-content flex flex-col">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode">
       <div class="mat-toolbar-tools" *ngIf="(dataSource.isEmpty() | async) === false">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">
+        <div class="title-container">
           <span class="tb-master-table-title">{{ 'gateway.servers-slaves' | translate}}</span>
         </div>
-        <span fxFlex></span>
+        <span class="flex-1"></span>
         <button mat-icon-button
                 (click)="manageSlave($event)"
                 matTooltip="{{ 'action.add' | translate }}"
@@ -40,14 +40,14 @@
         </button>
       </div>
     </mat-toolbar>
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode">
       <div class="mat-toolbar-tools">
         <button mat-icon-button
                 matTooltip="{{ 'action.search' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>search</mat-icon>
         </button>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>&nbsp;</mat-label>
           <input #searchInput matInput
                  [formControl]="textSearch"
@@ -95,11 +95,11 @@
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="actions" stickyEnd>
-          <mat-header-cell *matHeaderCellDef
-                           [ngStyle.gt-md]="{ minWidth: '96px', maxWidth: '96px', width: '96px', textAlign: 'center'}">
+          <mat-header-cell *matHeaderCellDef>
+            <div class="gt-md:!hidden" style="width: 48px; min-width: 48px; max-width: 48px;"></div>
+            <div class="lt-lg:!hidden" [style]="{ minWidth: '96px', textAlign: 'center'}"></div>
           </mat-header-cell>
-          <mat-cell *matCellDef="let slave; let i = index"
-                    [ngStyle.gt-md]="{ minWidth: '96px', maxWidth: '96px', width: '96px'}">
+          <mat-cell *matCellDef="let slave; let i = index">
             <ng-template #rowActions>
               <button mat-icon-button
                       matTooltip="{{ 'action.edit' | translate }}"
@@ -114,10 +114,11 @@
                 <tb-icon>delete</tb-icon>
               </button>
             </ng-template>
-            <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
+            <div class="flex flex-1 flex-row justify-end items-stretch lt-lg:!hidden"
+                 [style]="{ minWidth: '96px', textAlign: 'center'}">
               <ng-container [ngTemplateOutlet]="rowActions"></ng-container>
             </div>
-            <div fxHide fxShow.lt-lg fxFlex fxLayout="row" fxLayoutAlign="end">
+            <div class="gt-md:!hidden">
               <button mat-icon-button
                       (click)="$event.stopPropagation()"
                       [matMenuTriggerFor]="cellActionsMenu">
@@ -129,11 +130,11 @@
             </div>
           </mat-cell>
         </ng-container>
-        <mat-header-row [ngClass]="{'mat-row-select': true}" *matHeaderRowDef="['deviceName', 'info', 'unitId', 'type', 'actions']; sticky: true"></mat-header-row>
+        <mat-header-row class="mat-row-select" *matHeaderRowDef="['deviceName', 'info', 'unitId', 'type', 'actions']; sticky: true"></mat-header-row>
         <mat-row *matRowDef="let slave; columns: ['deviceName', 'info', 'unitId', 'type', 'actions']"></mat-row>
       </table>
-      <section [fxShow]="!textSearchMode && (dataSource.isEmpty() | async)" fxLayoutAlign="center center"
-               class="mat-headline-5 tb-absolute-fill tb-add-new">
+      <section [class.!hidden]="textSearchMode || (dataSource.isEmpty() | async) === false"
+               class="mat-headline-5 tb-absolute-fill tb-add-new justify-center items-center">
         <button mat-button class="connector"
                 (click)="manageSlave($event)">
           <mat-icon class="tb-mat-96">add</mat-icon>
@@ -141,9 +142,8 @@
         </button>
       </section>
     </div>
-    <span [fxShow]="textSearchMode && (dataSource.isEmpty() | async)"
-          fxLayoutAlign="center center"
-          class="no-data-found" translate>
+    <span [class.!hidden]="!textSearchMode || (dataSource.isEmpty() | async) === false"
+          class="no-data-found justify-center items-center" translate>
       widget.no-data-found
     </span>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-security-config/modbus-security-config.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-security-config/modbus-security-config.component.html
index 3fc3e33ad0..44f6424dcd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-security-config/modbus-security-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-security-config/modbus-security-config.component.html
@@ -56,7 +56,7 @@
       </mat-form-field>
     </div>
   </div>
-  <div *ngIf="isMaster" class="tb-form-row" fxLayoutAlign="space-between center">
+  <div *ngIf="isMaster" class="tb-form-row">
     <mat-slide-toggle class="mat-slide" formControlName="reqclicert">
       <mat-label>
         {{ 'gateway.request-client-certificate' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.html
index 7008f3c70a..56dfac19b9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.html
@@ -25,11 +25,8 @@
     </div>
     <div class="tb-form-panel no-border no-padding padding-top">
       <div *ngIf="protocolType !== ModbusProtocolType.Serial"
-           class="tb-form-row column-xs"
-           fxLayoutAlign="space-between center"
-      >
+           class="tb-form-row column-xs">
         <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.host' | translate }}" translate>gateway.host</div>
-        <div class="tb-flex no-gap">
           <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
             <input matInput name="value" formControlName="host" placeholder="{{ 'gateway.set' | translate }}"/>
             <mat-icon matSuffix
@@ -42,14 +39,10 @@
               warning
             </mat-icon>
           </mat-form-field>
-        </div>
       </div>
       <div *ngIf="protocolType !== ModbusProtocolType.Serial else serialPort"
-           class="tb-form-row column-xs"
-           fxLayoutAlign="space-between center"
-      >
+           class="tb-form-row column-xs">
         <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.port' | translate }}" translate>gateway.port</div>
-        <div class="tb-flex no-gap">
           <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
             <input matInput type="number" min="{{portLimits.MIN}}" max="{{portLimits.MAX}}"
                    name="value" formControlName="port" placeholder="{{ 'gateway.set' | translate }}"/>
@@ -65,12 +58,10 @@
               warning
             </mat-icon>
           </mat-form-field>
-        </div>
       </div>
       <ng-template #serialPort>
-        <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+        <div class="tb-form-row column-xs">
           <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.serial-port' | translate }}" translate>gateway.port</div>
-          <div class="tb-flex no-gap">
             <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
               <input matInput name="value" formControlName="serialPort" placeholder="{{ 'gateway.set' | translate }}"/>
               <mat-icon matSuffix
@@ -82,26 +73,22 @@
                 warning
               </mat-icon>
             </mat-form-field>
-          </div>
         </div>
       </ng-template>
-      <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+      <div class="tb-form-row column-xs">
         <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.framer-type' | translate }}" translate>
           gateway.method
         </div>
-        <div class="tb-flex no-gap">
           <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="method">
               <mat-option *ngFor="let method of protocolType === ModbusProtocolType.Serial ? modbusSerialMethodTypes : modbusMethodTypes"
                           [value]="method">{{ ModbusMethodLabelsMap.get(method) }}</mat-option>
             </mat-select>
           </mat-form-field>
-        </div>
       </div>
     </div>
-    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+    <div class="tb-form-row column-xs">
       <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.unit-id' | translate }}" translate>gateway.unit-id</div>
-      <div class="tb-flex no-gap">
         <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
           <input matInput type="number" min="0" name="value" formControlName="unitId" placeholder="{{ 'gateway.set' | translate }}"/>
           <mat-icon matSuffix
@@ -114,11 +101,9 @@
             warning
           </mat-icon>
         </mat-form-field>
-      </div>
     </div>
-    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+    <div class="tb-form-row column-xs">
       <div class="fixed-title-width tb-required" translate>gateway.device-name</div>
-      <div class="tb-flex no-gap">
         <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
           <input matInput name="value" formControlName="deviceName" placeholder="{{ 'gateway.set' | translate }}"/>
           <mat-icon matSuffix
@@ -131,11 +116,9 @@
             warning
           </mat-icon>
         </mat-form-field>
-      </div>
     </div>
-    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+    <div class="tb-form-row column-xs">
       <div class="fixed-title-width tb-required" translate>gateway.device-profile</div>
-      <div class="tb-flex no-gap">
         <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
           <input matInput name="value" formControlName="deviceType" placeholder="{{ 'gateway.set' | translate }}"/>
           <mat-icon matSuffix
@@ -148,31 +131,26 @@
             warning
           </mat-icon>
         </mat-form-field>
-      </div>
     </div>
-    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+    <div class="tb-form-row column-xs">
       <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.poll-period' | translate }}">
         <span tbTruncateWithTooltip translate>
           gateway.poll-period
         </span>
       </div>
-      <div class="tb-flex no-gap">
         <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
           <input matInput type="number" min="0" name="value" formControlName="pollPeriod" placeholder="{{ 'gateway.set' | translate }}"/>
         </mat-form-field>
-      </div>
     </div>
-    <div *ngIf="protocolType === ModbusProtocolType.Serial" class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+    <div *ngIf="protocolType === ModbusProtocolType.Serial" class="tb-form-row column-xs">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.baudrate' | translate }}" translate>gateway.baudrate</div>
-      <div class="tb-flex no-gap">
         <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
           <mat-select formControlName="baudrate">
             <mat-option *ngFor="let rate of modbusBaudrates" [value]="rate">{{ rate }}</mat-option>
           </mat-select>
         </mat-form-field>
-      </div>
     </div>
-    <div class="tb-form-row" fxLayoutAlign="space-between center">
+    <div class="tb-form-row">
       <mat-slide-toggle class="mat-slide" formControlName="sendDataToThingsBoard">
         <mat-label>
           {{ 'gateway.send-data-to-platform' | translate }}
@@ -187,31 +165,27 @@
           </mat-panel-title>
         </mat-expansion-panel-header>
         <div class="tb-form-panel no-border no-padding padding-top">
-          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+          <div class="tb-form-row column-xs">
             <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.byte-order' | translate }}" translate>gateway.byte-order</div>
-            <div class="tb-flex no-gap">
               <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                 <mat-select formControlName="byteOrder">
                   <mat-option *ngFor="let order of modbusOrderType" [value]="order">{{ order }}</mat-option>
                 </mat-select>
               </mat-form-field>
-            </div>
           </div>
-          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+          <div class="tb-form-row column-xs">
             <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.word-order' | translate }}" translate>gateway.word-order</div>
-            <div class="tb-flex no-gap">
               <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                 <mat-select formControlName="wordOrder">
                   <mat-option *ngFor="let order of modbusOrderType" [value]="order">{{ order }}</mat-option>
                 </mat-select>
               </mat-form-field>
-            </div>
           </div>
           <div *ngIf="protocolType !== ModbusProtocolType.Serial" class="tb-form-panel stroked tb-slide-toggle">
             <mat-expansion-panel class="tb-settings" [expanded]="showSecurityControl.value">
-              <mat-expansion-panel-header fxLayout="row wrap">
+              <mat-expansion-panel-header class="flex-wrap">
                 <mat-panel-title>
-                  <mat-slide-toggle fxLayoutAlign="center" [formControl]="showSecurityControl" class="mat-slide" (click)="$event.stopPropagation()">
+                  <mat-slide-toggle [formControl]="showSecurityControl" class="mat-slide" (click)="$event.stopPropagation()">
                     <mat-label>
                       {{ 'gateway.tls-connection' | translate }}
                     </mat-label>
@@ -222,45 +196,35 @@
             </mat-expansion-panel>
           </div>
           <ng-container [formGroup]="slaveConfigFormGroup.get('identity')">
-            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+            <div class="tb-form-row column-xs">
               <div class="fixed-title-width" translate>gateway.vendor-name</div>
-              <div class="tb-flex no-gap">
                 <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                   <input matInput name="value" formControlName="vendorName" placeholder="{{ 'gateway.set' | translate }}"/>
                 </mat-form-field>
-              </div>
             </div>
-            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+            <div class="tb-form-row column-xs">
               <div class="fixed-title-width" translate>gateway.product-code</div>
-              <div class="tb-flex no-gap">
                 <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                   <input matInput name="value" formControlName="productCode" placeholder="{{ 'gateway.set' | translate }}"/>
                 </mat-form-field>
-              </div>
             </div>
-            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+            <div class="tb-form-row column-xs">
               <div class="fixed-title-width" translate>gateway.vendor-url</div>
-              <div class="tb-flex no-gap">
                 <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                   <input matInput name="value" formControlName="vendorUrl" placeholder="{{ 'gateway.set' | translate }}"/>
                 </mat-form-field>
-              </div>
             </div>
-            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+            <div class="tb-form-row column-xs">
               <div class="fixed-title-width" translate>gateway.product-name</div>
-              <div class="tb-flex no-gap">
                 <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                   <input matInput name="value" formControlName="productName" placeholder="{{ 'gateway.set' | translate }}"/>
                 </mat-form-field>
-              </div>
             </div>
-            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+            <div class="tb-form-row column-xs">
               <div class="fixed-title-width" translate>gateway.model-name</div>
-              <div class="tb-flex no-gap">
                 <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                   <input matInput name="value" formControlName="modelName" placeholder="{{ 'gateway.set' | translate }}"/>
                 </mat-form-field>
-              </div>
             </div>
           </ng-container>
         </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.html
index 0a480a88ae..8d6a500ad2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.html
@@ -18,7 +18,7 @@
 <div class="slaves-config-container">
   <mat-toolbar color="primary">
     <h2>{{ 'gateway.server-slave' | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <div [tb-help]="modbusHelpLink"></div>
     <button mat-icon-button
             (click)="cancel()"
@@ -37,11 +37,8 @@
         </div>
         <div class="tb-form-panel no-border no-padding padding-top">
           <div *ngIf="protocolType !== ModbusProtocolType.Serial"
-               class="tb-form-row column-xs"
-               fxLayoutAlign="space-between center"
-          >
+               class="tb-form-row column-xs">
             <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.host' | translate }}" translate>gateway.host</div>
-            <div class="tb-flex no-gap">
               <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                 <input matInput name="value" formControlName="host" placeholder="{{ 'gateway.set' | translate }}"/>
                 <mat-icon matSuffix
@@ -54,14 +51,10 @@
                   warning
                 </mat-icon>
               </mat-form-field>
-            </div>
           </div>
           <div *ngIf="protocolType !== ModbusProtocolType.Serial else serialPort"
-               class="tb-form-row column-xs"
-               fxLayoutAlign="space-between center"
-          >
+               class="tb-form-row column-xs">
             <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.port' | translate }}" translate>gateway.port</div>
-            <div class="tb-flex no-gap">
               <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                 <input matInput type="number" min="{{portLimits.MIN}}" max="{{portLimits.MAX}}"
                        name="value" formControlName="port" placeholder="{{ 'gateway.set' | translate }}"/>
@@ -77,12 +70,10 @@
                   warning
                 </mat-icon>
               </mat-form-field>
-            </div>
           </div>
           <ng-template #serialPort>
-            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+            <div class="tb-form-row column-xs">
               <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.serial-port' | translate }}" translate>gateway.port</div>
-              <div class="tb-flex no-gap">
                 <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                   <input matInput name="value" formControlName="serialPort" placeholder="{{ 'gateway.set' | translate }}"/>
                   <mat-icon matSuffix
@@ -95,63 +86,52 @@
                     warning
                   </mat-icon>
                 </mat-form-field>
-              </div>
             </div>
           </ng-template>
-          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+          <div class="tb-form-row column-xs">
             <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.framer-type' | translate }}" translate>
               gateway.method
             </div>
-            <div class="tb-flex no-gap">
               <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                 <mat-select formControlName="method">
                   <mat-option *ngFor="let method of protocolType === ModbusProtocolType.Serial ? modbusSerialMethodTypes : modbusMethodTypes"
                               [value]="method">{{ ModbusMethodLabelsMap.get(method) }}</mat-option>
                 </mat-select>
               </mat-form-field>
-            </div>
           </div>
         </div>
         <ng-container *ngIf="protocolType === ModbusProtocolType.Serial">
-          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+          <div class="tb-form-row column-xs">
             <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.baudrate' | translate }}" translate>gateway.baudrate</div>
-            <div class="tb-flex no-gap">
               <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                 <mat-select formControlName="baudrate">
                   <mat-option *ngFor="let rate of modbusBaudrates" [value]="rate">{{ rate }}</mat-option>
                 </mat-select>
               </mat-form-field>
-            </div>
           </div>
-          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+          <div class="tb-form-row column-xs">
             <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.bytesize' | translate }}" translate>gateway.bytesize</div>
-            <div class="tb-flex no-gap">
               <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                 <mat-select formControlName="bytesize">
                   <mat-option *ngFor="let size of modbusByteSizes" [value]="size">{{ size }}</mat-option>
                 </mat-select>
               </mat-form-field>
-            </div>
           </div>
-          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+          <div class="tb-form-row column-xs">
             <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.stopbits' | translate }}"  translate>gateway.stopbits</div>
-            <div class="tb-flex no-gap">
               <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                 <input matInput type="number" min="0" name="value" formControlName="stopbits" placeholder="{{ 'gateway.set' | translate }}"/>
               </mat-form-field>
-            </div>
           </div>
-          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+          <div class="tb-form-row column-xs">
             <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.parity' | translate }}" translate>gateway.parity</div>
-            <div class="tb-flex no-gap">
               <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                 <mat-select formControlName="parity">
                   <mat-option *ngFor="let parity of modbusParities" [value]="parity">{{ ModbusParityLabelsMap.get(parity) }}</mat-option>
                 </mat-select>
               </mat-form-field>
-            </div>
           </div>
-          <div class="tb-form-row" fxLayoutAlign="space-between center">
+          <div class="tb-form-row">
             <mat-slide-toggle class="mat-slide" formControlName="strict">
               <mat-label tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.strict' | translate }}">
                 {{ 'gateway.strict' | translate }}
@@ -159,9 +139,8 @@
             </mat-slide-toggle>
           </div>
         </ng-container>
-        <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+        <div class="tb-form-row column-xs">
           <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.unit-id' | translate }}" translate>gateway.unit-id</div>
-          <div class="tb-flex no-gap">
             <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
               <input matInput type="number" min="0" name="value" formControlName="unitId" placeholder="{{ 'gateway.set' | translate }}"/>
               <mat-icon matSuffix
@@ -174,11 +153,9 @@
                 warning
               </mat-icon>
             </mat-form-field>
-          </div>
         </div>
-        <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+        <div class="tb-form-row column-xs">
           <div class="fixed-title-width tb-required" translate>gateway.device-name</div>
-          <div class="tb-flex no-gap">
             <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
               <input matInput name="value" formControlName="deviceName" placeholder="{{ 'gateway.set' | translate }}"/>
               <mat-icon matSuffix
@@ -191,11 +168,9 @@
                 warning
               </mat-icon>
             </mat-form-field>
-          </div>
         </div>
-        <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+        <div class="tb-form-row column-xs">
           <div class="fixed-title-width tb-required" translate>gateway.device-profile</div>
-          <div class="tb-flex no-gap">
             <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
               <input matInput name="value" formControlName="deviceType" placeholder="{{ 'gateway.set' | translate }}"/>
               <mat-icon matSuffix
@@ -208,9 +183,8 @@
                 warning
               </mat-icon>
             </mat-form-field>
-          </div>
         </div>
-        <div *ngIf="data.hideNewFields else reportStrategy" class="tb-form-row" fxLayoutAlign="space-between center">
+        <div *ngIf="data.hideNewFields else reportStrategy" class="tb-form-row">
           <mat-slide-toggle class="mat-slide" formControlName="sendDataOnlyOnChange">
             <mat-label>
               {{ 'gateway.send-data-on-change' | translate }}
@@ -228,39 +202,33 @@
               </mat-panel-title>
             </mat-expansion-panel-header>
             <div class="tb-form-panel no-border no-padding padding-top">
-              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+              <div class="tb-form-row column-xs">
                 <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.connection-timeout' | translate }}" translate>gateway.connection-timeout</div>
-                <div class="tb-flex no-gap">
                   <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                     <input matInput type="number" min="0" name="value" formControlName="timeout" placeholder="{{ 'gateway.set' | translate }}"/>
                   </mat-form-field>
-                </div>
               </div>
-              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+              <div class="tb-form-row column-xs">
                 <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.byte-order' | translate }}" translate>gateway.byte-order</div>
-                <div class="tb-flex no-gap">
                   <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                     <mat-select formControlName="byteOrder">
                       <mat-option *ngFor="let order of modbusOrderType" [value]="order">{{ order }}</mat-option>
                     </mat-select>
                   </mat-form-field>
-                </div>
               </div>
-              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+              <div class="tb-form-row column-xs">
                 <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.word-order' | translate }}" translate>gateway.word-order</div>
-                <div class="tb-flex no-gap">
                   <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                     <mat-select formControlName="wordOrder">
                       <mat-option *ngFor="let order of modbusOrderType" [value]="order">{{ order }}</mat-option>
                     </mat-select>
                   </mat-form-field>
-                </div>
               </div>
               <div *ngIf="protocolType !== ModbusProtocolType.Serial" class="tb-form-panel stroked tb-slide-toggle">
                 <mat-expansion-panel class="tb-settings" [expanded]="showSecurityControl.value">
-                  <mat-expansion-panel-header fxLayout="row wrap">
+                  <mat-expansion-panel-header class="flex-wrap">
                     <mat-panel-title>
-                      <mat-slide-toggle fxLayoutAlign="center" [formControl]="showSecurityControl" class="mat-slide" (click)="$event.stopPropagation()">
+                      <mat-slide-toggle [formControl]="showSecurityControl" class="mat-slide justify-start" (click)="$event.stopPropagation()">
                         <mat-label>
                           {{ 'gateway.tls-connection' | translate }}
                         </mat-label>
@@ -270,62 +238,54 @@
                   <tb-modbus-security-config class="security-config" formControlName="security"></tb-modbus-security-config>
                 </mat-expansion-panel>
               </div>
-              <div class="tb-form-row" fxLayoutAlign="space-between center">
+              <div class="tb-form-row">
                 <mat-slide-toggle class="mat-slide" formControlName="retries">
                   <mat-label tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.retries' | translate }}">
                     {{ 'gateway.retries' | translate }}
                   </mat-label>
                 </mat-slide-toggle>
               </div>
-              <div class="tb-form-row" fxLayoutAlign="space-between center">
+              <div class="tb-form-row">
                 <mat-slide-toggle class="mat-slide" formControlName="retryOnEmpty">
                   <mat-label tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.retries-on-empty' | translate }}">
                     {{ 'gateway.retries-on-empty' | translate }}
                   </mat-label>
                 </mat-slide-toggle>
               </div>
-              <div class="tb-form-row" fxLayoutAlign="space-between center">
+              <div class="tb-form-row">
                 <mat-slide-toggle class="mat-slide" formControlName="retryOnInvalid">
                   <mat-label tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.retries-on-invalid' | translate }}">
                     {{ 'gateway.retries-on-invalid' | translate }}
                   </mat-label>
                 </mat-slide-toggle>
               </div>
-              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+              <div class="tb-form-row column-xs">
                 <div class="fixed-title-width-260 tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.poll-period' | translate }}">
                   <span tbTruncateWithTooltip translate>
                     gateway.poll-period
                   </span>
                 </div>
-                <div class="tb-flex no-gap">
                   <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                     <input matInput type="number" min="0" name="value" formControlName="pollPeriod" placeholder="{{ 'gateway.set' | translate }}"/>
                   </mat-form-field>
-                </div>
               </div>
-              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+              <div class="tb-form-row column-xs">
                 <div class="fixed-title-width-260 tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.connect-attempt-time' | translate }}" translate>gateway.connect-attempt-time</div>
-                <div class="tb-flex no-gap">
                   <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                     <input matInput type="number" min="0" name="value" formControlName="connectAttemptTimeMs" placeholder="{{ 'gateway.set' | translate }}"/>
                   </mat-form-field>
-                </div>
               </div>
-              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+              <div class="tb-form-row column-xs">
                 <div class="fixed-title-width-260 tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.connect-attempt-count' | translate }}" translate>gateway.connect-attempt-count</div>
-                <div class="tb-flex no-gap">
                   <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                     <input matInput type="number" min="0" name="value" formControlName="connectAttemptCount" placeholder="{{ 'gateway.set' | translate }}"/>
                   </mat-form-field>
-                </div>
               </div>
-              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+              <div class="tb-form-row column-xs">
                 <div class="fixed-title-width-260 tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.wait-after-failed-attempts' | translate }}" translate>gateway.wait-after-failed-attempts</div>
-                <div class="tb-flex no-gap">
                   <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                     <input matInput type="number" min="0" name="value" formControlName="waitAfterFailedAttemptsMs" placeholder="{{ 'gateway.set' | translate }}"/>
                   </mat-form-field>
-                </div>
               </div>
             </div>
           </mat-expansion-panel>
@@ -336,7 +296,7 @@
       </div>
     </div>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="justify-end">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.html
index 8d1048e3cb..51c0c54ddc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.html
@@ -17,7 +17,7 @@
 -->
 
 <ng-container *ngIf="singleMode else multipleView">
-  <div [formGroup]="valuesFormGroup" class="tb-form-panel no-border no-padding padding-top" fxLayout="column">
+  <div [formGroup]="valuesFormGroup" class="tb-form-panel no-border no-padding padding-top">
     <ng-container [ngTemplateOutlet]="singleView" [ngTemplateOutletContext]="{$implicit: null}"></ng-container>
   </div>
 </ng-container>
@@ -25,7 +25,7 @@
 <ng-template #multipleView>
   <mat-tab-group [formGroup]="valuesFormGroup">
     <mat-tab *ngFor="let register of modbusRegisterTypes" label="{{ ModbusValuesTranslationsMap.get(register) | translate }}">
-      <div [formGroup]="valuesFormGroup.get(register)" class="tb-form-panel no-border no-padding padding-top" fxLayout="column">
+      <div [formGroup]="valuesFormGroup.get(register)" class="tb-form-panel no-border no-padding padding-top">
         <ng-container [ngTemplateOutlet]="singleView" [ngTemplateOutletContext]="{$implicit: register}"></ng-container>
       </div>
     </mat-tab>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/broker-config-control/broker-config-control.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/broker-config-control/broker-config-control.component.html
index b5ef346300..b0d59c86f3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/broker-config-control/broker-config-control.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/broker-config-control/broker-config-control.component.html
@@ -16,70 +16,62 @@
 
 -->
 <div class="tb-form-panel no-border no-padding padding-top" [formGroup]="brokerConfigFormGroup">
-  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+  <div class="tb-form-row column-xs">
     <div class="fixed-title-width tb-required" translate>gateway.host</div>
-    <div class="tb-flex no-gap">
-      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-        <input matInput name="value" formControlName="host" placeholder="{{ 'gateway.set' | translate }}"/>
-        <mat-icon matSuffix
-                  matTooltipPosition="above"
-                  matTooltipClass="tb-error-tooltip"
-                  [matTooltip]="('gateway.host-required') | translate"
-                  *ngIf="brokerConfigFormGroup.get('host').hasError('required')
-                                           && brokerConfigFormGroup.get('host').touched"
-                  class="tb-error">
-          warning
-        </mat-icon>
-      </mat-form-field>
-    </div>
+    <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+      <input matInput name="value" formControlName="host" placeholder="{{ 'gateway.set' | translate }}"/>
+      <mat-icon matSuffix
+                matTooltipPosition="above"
+                matTooltipClass="tb-error-tooltip"
+                [matTooltip]="('gateway.host-required') | translate"
+                *ngIf="brokerConfigFormGroup.get('host').hasError('required')
+                                         && brokerConfigFormGroup.get('host').touched"
+                class="tb-error">
+        warning
+      </mat-icon>
+    </mat-form-field>
   </div>
-  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+  <div class="tb-form-row column-xs">
     <div class="fixed-title-width tb-required" translate>gateway.port</div>
-    <div class="tb-flex no-gap">
-      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-        <input matInput type="number" min="{{portLimits.MIN}}" max="{{portLimits.MAX}}"
-               name="value" formControlName="port" placeholder="{{ 'gateway.set' | translate }}"/>
-        <mat-icon matSuffix
-                  matTooltipPosition="above"
-                  matTooltipClass="tb-error-tooltip"
-                  [matTooltip]="brokerConfigFormGroup.get('port') | getGatewayPortTooltip"
-                  *ngIf="(brokerConfigFormGroup.get('port').hasError('required') ||
-                                            brokerConfigFormGroup.get('port').hasError('min') ||
-                                            brokerConfigFormGroup.get('port').hasError('max')) &&
-                                            brokerConfigFormGroup.get('port').touched"
-                  class="tb-error">
-          warning
-        </mat-icon>
-      </mat-form-field>
-    </div>
+    <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+      <input matInput type="number" min="{{portLimits.MIN}}" max="{{portLimits.MAX}}"
+             name="value" formControlName="port" placeholder="{{ 'gateway.set' | translate }}"/>
+      <mat-icon matSuffix
+                matTooltipPosition="above"
+                matTooltipClass="tb-error-tooltip"
+                [matTooltip]="brokerConfigFormGroup.get('port') | getGatewayPortTooltip"
+                *ngIf="(brokerConfigFormGroup.get('port').hasError('required') ||
+                                          brokerConfigFormGroup.get('port').hasError('min') ||
+                                          brokerConfigFormGroup.get('port').hasError('max')) &&
+                                          brokerConfigFormGroup.get('port').touched"
+                class="tb-error">
+        warning
+      </mat-icon>
+    </mat-form-field>
   </div>
-  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+  <div class="tb-form-row column-xs">
     <div class="fixed-title-width" translate>gateway.mqtt-version</div>
-    <div class="tb-flex no-gap">
-      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-        <mat-select formControlName="version">
-          <mat-option *ngFor="let version of mqttVersions" [value]="version.value">{{ version.name }}</mat-option>
-        </mat-select>
-      </mat-form-field>
-    </div>
+    <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+      <mat-select formControlName="version">
+        <mat-option *ngFor="let version of mqttVersions" [value]="version.value">{{ version.name }}</mat-option>
+      </mat-select>
+    </mat-form-field>
   </div>
-  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+  <div class="tb-form-row column-xs">
     <div class="fixed-title-width" translate>gateway.client-id</div>
-    <div class="tb-flex no-gap">
-      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-        <input matInput name="value" formControlName="clientId" placeholder="{{ 'gateway.set' | translate }}"/>
-        <button type="button"
-                matSuffix
-                mat-icon-button
-                aria-label="Generate"
-                matTooltip="{{ 'gateway.generate-client-id' | translate }}"
-                matTooltipPosition="above"
-                (click)="generate('clientId')"
-                *ngIf="!brokerConfigFormGroup.get('clientId').value">
-          <mat-icon>autorenew</mat-icon>
-        </button>
-      </mat-form-field>
-    </div>
+    <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+      <input matInput name="value" formControlName="clientId" placeholder="{{ 'gateway.set' | translate }}"/>
+      <button type="button"
+              matSuffix
+              mat-icon-button
+              aria-label="Generate"
+              matTooltip="{{ 'gateway.generate-client-id' | translate }}"
+              matTooltipPosition="above"
+              (click)="generate('clientId')"
+              *ngIf="!brokerConfigFormGroup.get('clientId').value">
+        <mat-icon>autorenew</mat-icon>
+      </button>
+    </mat-form-field>
   </div>
   <tb-security-config formControlName="security">
   </tb-security-config>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/workers-config-control/workers-config-control.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/workers-config-control/workers-config-control.component.html
index 0a3bd4e6f3..53d8e1bde6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/workers-config-control/workers-config-control.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/workers-config-control/workers-config-control.component.html
@@ -16,48 +16,44 @@
 
 -->
 <div class="tb-form-panel no-border no-padding padding-top" [formGroup]="workersConfigFormGroup">
-  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-    <div class="fixed-title-width tb-required" [style.width.%]="50"
+  <div class="tb-form-row column-xs">
+    <div class="fixed-title-width tb-required" style="width: 50%"
          tb-hint-tooltip-icon="{{ 'gateway.max-number-of-workers-hint' | translate }}">
       <div tbTruncateWithTooltip>{{ 'gateway.max-number-of-workers' | translate }}</div>
     </div>
-    <div class="tb-flex no-gap">
-      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-        <input matInput name="value" type="number" min="1" formControlName="maxNumberOfWorkers"
-               placeholder="{{ 'gateway.set' | translate }}"/>
-        <mat-icon matSuffix
-                  matTooltipPosition="above"
-                  matTooltipClass="tb-error-tooltip"
-                  [matTooltip]="('gateway.max-number-of-workers-required') | translate"
-                  *ngIf="workersConfigFormGroup.get('maxNumberOfWorkers').hasError('min') ||
-                                           (workersConfigFormGroup.get('maxNumberOfWorkers').hasError('required') &&
-                                           workersConfigFormGroup.get('maxNumberOfWorkers').touched)"
-                  class="tb-error">
-          warning
-        </mat-icon>
-      </mat-form-field>
-    </div>
+    <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+      <input matInput name="value" type="number" min="1" formControlName="maxNumberOfWorkers"
+             placeholder="{{ 'gateway.set' | translate }}"/>
+      <mat-icon matSuffix
+                matTooltipPosition="above"
+                matTooltipClass="tb-error-tooltip"
+                [matTooltip]="('gateway.max-number-of-workers-required') | translate"
+                *ngIf="workersConfigFormGroup.get('maxNumberOfWorkers').hasError('min') ||
+                                         (workersConfigFormGroup.get('maxNumberOfWorkers').hasError('required') &&
+                                         workersConfigFormGroup.get('maxNumberOfWorkers').touched)"
+                class="tb-error">
+        warning
+      </mat-icon>
+    </mat-form-field>
   </div>
-  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-    <div class="fixed-title-width tb-required" [style.width.%]="50"
+  <div class="tb-form-row column-xs">
+    <div class="fixed-title-width tb-required" style="width: 50%"
          tb-hint-tooltip-icon="{{ 'gateway.max-messages-queue-for-worker-hint' | translate }}">
       <div tbTruncateWithTooltip>{{ 'gateway.max-messages-queue-for-worker' | translate }}</div>
     </div>
-    <div class="tb-flex no-gap">
-      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-        <input matInput name="value" type="number" min="1" formControlName="maxMessageNumberPerWorker"
-               placeholder="{{ 'gateway.set' | translate }}"/>
-        <mat-icon matSuffix
-                  matTooltipPosition="above"
-                  matTooltipClass="tb-error-tooltip"
-                  [matTooltip]="('gateway.max-messages-queue-for-worker-required') | translate"
-                  *ngIf="workersConfigFormGroup.get('maxMessageNumberPerWorker').hasError('min') ||
-                                           (workersConfigFormGroup.get('maxMessageNumberPerWorker').hasError('required') &&
-                                           workersConfigFormGroup.get('maxMessageNumberPerWorker').touched)"
-                  class="tb-error">
-          warning
-        </mat-icon>
-      </mat-form-field>
-    </div>
+    <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+      <input matInput name="value" type="number" min="1" formControlName="maxMessageNumberPerWorker"
+             placeholder="{{ 'gateway.set' | translate }}"/>
+      <mat-icon matSuffix
+                matTooltipPosition="above"
+                matTooltipClass="tb-error-tooltip"
+                [matTooltip]="('gateway.max-messages-queue-for-worker-required') | translate"
+                *ngIf="workersConfigFormGroup.get('maxMessageNumberPerWorker').hasError('min') ||
+                                         (workersConfigFormGroup.get('maxMessageNumberPerWorker').hasError('required') &&
+                                         workersConfigFormGroup.get('maxMessageNumberPerWorker').touched)"
+                class="tb-error">
+        warning
+      </mat-icon>
+    </mat-form-field>
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc/opc-server-config/opc-server-config.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc/opc-server-config/opc-server-config.component.html
index 4a0e76ee19..0b8cc6a8b7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc/opc-server-config/opc-server-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc/opc-server-config/opc-server-config.component.html
@@ -16,126 +16,114 @@
 
 -->
 <div class="tb-form-panel no-border no-padding padding-top" [formGroup]="serverConfigFormGroup">
-  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+  <div class="tb-form-row column-xs">
     <div class="fixed-title-width" tbTruncateWithTooltip translate>gateway.server-url</div>
-    <div class="tb-flex no-gap">
-      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-        <input matInput name="value" formControlName="url" placeholder="{{ 'gateway.set' | translate }}"/>
-        <mat-icon matSuffix
-                  matTooltipPosition="above"
-                  matTooltipClass="tb-error-tooltip"
-                  [matTooltip]="('gateway.server-url-required') | translate"
-                  *ngIf="serverConfigFormGroup.get('url').hasError('required') &&
-                         serverConfigFormGroup.get('url').touched"
-                  class="tb-error">
-          warning
-        </mat-icon>
-      </mat-form-field>
-    </div>
+    <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+      <input matInput name="value" formControlName="url" placeholder="{{ 'gateway.set' | translate }}"/>
+      <mat-icon matSuffix
+                matTooltipPosition="above"
+                matTooltipClass="tb-error-tooltip"
+                [matTooltip]="('gateway.server-url-required') | translate"
+                *ngIf="serverConfigFormGroup.get('url').hasError('required') &&
+                       serverConfigFormGroup.get('url').touched"
+                class="tb-error">
+        warning
+      </mat-icon>
+    </mat-form-field>
   </div>
-  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+  <div class="tb-form-row column-xs">
     <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.opc-timeout' | translate }}">
       <div tbTruncateWithTooltip>{{ 'gateway.timeout' | translate }}</div>
     </div>
-    <div class="tb-flex no-gap">
-      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-        <input matInput type="number" min="1000" name="value" formControlName="timeoutInMillis" placeholder="{{ 'gateway.set' | translate }}"/>
-        <mat-icon matSuffix
-                  matTooltipPosition="above"
-                  matTooltipClass="tb-error-tooltip"
-                  [matTooltip]="'gateway.timeout-error' | translate: {min: 1000}"
-                  *ngIf="(serverConfigFormGroup.get('timeoutInMillis').hasError('required') ||
-                         serverConfigFormGroup.get('timeoutInMillis').hasError('min')) &&
-                         serverConfigFormGroup.get('timeoutInMillis').touched"
-                  class="tb-error">
-          warning
-        </mat-icon>
-      </mat-form-field>
-    </div>
+    <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+      <input matInput type="number" min="1000" name="value" formControlName="timeoutInMillis" placeholder="{{ 'gateway.set' | translate }}"/>
+      <mat-icon matSuffix
+                matTooltipPosition="above"
+                matTooltipClass="tb-error-tooltip"
+                [matTooltip]="'gateway.timeout-error' | translate: {min: 1000}"
+                *ngIf="(serverConfigFormGroup.get('timeoutInMillis').hasError('required') ||
+                       serverConfigFormGroup.get('timeoutInMillis').hasError('min')) &&
+                       serverConfigFormGroup.get('timeoutInMillis').touched"
+                class="tb-error">
+        warning
+      </mat-icon>
+    </mat-form-field>
   </div>
-  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+  <div class="tb-form-row column-xs">
     <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.security-policy' | translate }}">
       <div tbTruncateWithTooltip>{{ 'gateway.security-policy' | translate }}</div>
     </div>
-    <div class="tb-flex no-gap">
-      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-        <mat-select formControlName="security">
-          <mat-option *ngFor="let version of securityPolicyTypes" [value]="version.value">{{ version.name }}</mat-option>
-        </mat-select>
-      </mat-form-field>
-    </div>
+    <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+      <mat-select formControlName="security">
+        <mat-option *ngFor="let version of securityPolicyTypes" [value]="version.value">{{ version.name }}</mat-option>
+      </mat-select>
+    </mat-form-field>
   </div>
-  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+  <div class="tb-form-row column-xs">
     <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.scan-period' | translate }}">
       <div tbTruncateWithTooltip>{{ 'gateway.scan-period' | translate }}</div>
     </div>
-    <div class="tb-flex no-gap">
-      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-        <input matInput type="number" min="1000" name="value"
-               formControlName="scanPeriodInMillis" placeholder="{{ 'gateway.set' | translate }}"/>
-        <mat-icon matSuffix
-                  matTooltipPosition="above"
-                  matTooltipClass="tb-error-tooltip"
-                  [matTooltip]="'gateway.scan-period-error' | translate: {min: 1000}"
-                  *ngIf="(serverConfigFormGroup.get('scanPeriodInMillis').hasError('required') ||
-                         serverConfigFormGroup.get('scanPeriodInMillis').hasError('min')) &&
-                         serverConfigFormGroup.get('scanPeriodInMillis').touched"
-                  class="tb-error">
-          warning
-        </mat-icon>
-      </mat-form-field>
-    </div>
+    <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+      <input matInput type="number" min="1000" name="value"
+             formControlName="scanPeriodInMillis" placeholder="{{ 'gateway.set' | translate }}"/>
+      <mat-icon matSuffix
+                matTooltipPosition="above"
+                matTooltipClass="tb-error-tooltip"
+                [matTooltip]="'gateway.scan-period-error' | translate: {min: 1000}"
+                *ngIf="(serverConfigFormGroup.get('scanPeriodInMillis').hasError('required') ||
+                       serverConfigFormGroup.get('scanPeriodInMillis').hasError('min')) &&
+                       serverConfigFormGroup.get('scanPeriodInMillis').touched"
+                class="tb-error">
+        warning
+      </mat-icon>
+    </mat-form-field>
   </div>
-  <div *ngIf="!hideNewFields" class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+  <div *ngIf="!hideNewFields" class="tb-form-row column-xs">
     <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.poll-period' | translate }}">
       <div tbTruncateWithTooltip>{{ 'gateway.poll-period' | translate }}</div>
     </div>
-    <div class="tb-flex no-gap">
-      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-        <input matInput type="number" min="50" name="value"
-               formControlName="pollPeriodInMillis" placeholder="{{ 'gateway.set' | translate }}"/>
-        <mat-icon matSuffix
-                  matTooltipPosition="above"
-                  matTooltipClass="tb-error-tooltip"
-                  [matTooltip]="'gateway.poll-period-error' | translate: {min: 50}"
-                  *ngIf="(serverConfigFormGroup.get('pollPeriodInMillis').hasError('required') ||
-                         serverConfigFormGroup.get('pollPeriodInMillis').hasError('min')) &&
-                         serverConfigFormGroup.get('pollPeriodInMillis').touched"
-                  class="tb-error">
-          warning
-        </mat-icon>
-      </mat-form-field>
-    </div>
+    <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+      <input matInput type="number" min="50" name="value"
+             formControlName="pollPeriodInMillis" placeholder="{{ 'gateway.set' | translate }}"/>
+      <mat-icon matSuffix
+                matTooltipPosition="above"
+                matTooltipClass="tb-error-tooltip"
+                [matTooltip]="'gateway.poll-period-error' | translate: {min: 50}"
+                *ngIf="(serverConfigFormGroup.get('pollPeriodInMillis').hasError('required') ||
+                       serverConfigFormGroup.get('pollPeriodInMillis').hasError('min')) &&
+                       serverConfigFormGroup.get('pollPeriodInMillis').touched"
+                class="tb-error">
+        warning
+      </mat-icon>
+    </mat-form-field>
   </div>
-  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+  <div class="tb-form-row column-xs">
     <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.sub-check-period' | translate }}">
       <div tbTruncateWithTooltip>{{ 'gateway.sub-check-period' | translate }}</div>
     </div>
-    <div class="tb-flex no-gap">
-      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-        <input matInput type="number" min="100" name="value"
-               formControlName="subCheckPeriodInMillis" placeholder="{{ 'gateway.set' | translate }}"/>
-        <mat-icon matSuffix
-                  matTooltipPosition="above"
-                  matTooltipClass="tb-error-tooltip"
-                  [matTooltip]="'gateway.sub-check-period-error' | translate: {min: 100}"
-                  *ngIf="(serverConfigFormGroup.get('subCheckPeriodInMillis').hasError('required') ||
-                         serverConfigFormGroup.get('subCheckPeriodInMillis').hasError('min')) &&
-                         serverConfigFormGroup.get('subCheckPeriodInMillis').touched"
-                  class="tb-error">
-          warning
-        </mat-icon>
-      </mat-form-field>
-    </div>
+    <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+      <input matInput type="number" min="100" name="value"
+             formControlName="subCheckPeriodInMillis" placeholder="{{ 'gateway.set' | translate }}"/>
+      <mat-icon matSuffix
+                matTooltipPosition="above"
+                matTooltipClass="tb-error-tooltip"
+                [matTooltip]="'gateway.sub-check-period-error' | translate: {min: 100}"
+                *ngIf="(serverConfigFormGroup.get('subCheckPeriodInMillis').hasError('required') ||
+                       serverConfigFormGroup.get('subCheckPeriodInMillis').hasError('min')) &&
+                       serverConfigFormGroup.get('subCheckPeriodInMillis').touched"
+                class="tb-error">
+        warning
+      </mat-icon>
+    </mat-form-field>
   </div>
-  <div class="tb-form-row" fxLayoutAlign="space-between center">
+  <div class="tb-form-row">
     <mat-slide-toggle class="mat-slide" formControlName="enableSubscriptions">
       <mat-label tb-hint-tooltip-icon="{{ 'gateway.hints.enable-subscription' | translate }}">
         <div tbTruncateWithTooltip>{{ 'gateway.enable-subscription' | translate }}</div>
       </mat-label>
     </mat-slide-toggle>
   </div>
-  <div class="tb-form-row" fxLayoutAlign="space-between center">
+  <div class="tb-form-row">
     <mat-slide-toggle class="mat-slide" formControlName="showMap">
       <mat-label tb-hint-tooltip-icon="{{ 'gateway.hints.show-map' | translate }}">
         {{ 'gateway.show-map' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/report-strategy/report-strategy.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/report-strategy/report-strategy.component.html
index dec8292720..a87371bfc6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/report-strategy/report-strategy.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/report-strategy/report-strategy.component.html
@@ -17,9 +17,9 @@
 -->
 <div [formGroup]="reportStrategyFormGroup" class="tb-form-panel stroked">
   <mat-expansion-panel *ngIf="isExpansionMode else defaultMode" class="tb-settings" [expanded]="showStrategyControl.value">
-    <mat-expansion-panel-header fxLayout="row wrap">
+    <mat-expansion-panel-header class="flex-wrap">
       <mat-panel-title>
-        <mat-slide-toggle fxLayoutAlign="center" [formControl]="showStrategyControl" class="mat-slide" (click)="$event.stopPropagation()">
+        <mat-slide-toggle [formControl]="showStrategyControl" class="mat-slide" (click)="$event.stopPropagation()">
           <mat-label>
             {{ 'gateway.report-strategy.label' | translate }}
           </mat-label>
@@ -33,7 +33,7 @@
     <ng-container [ngTemplateOutlet]="strategyFields"></ng-container>
   </ng-template>
   <ng-template #strategyFields>
-    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+    <div class="tb-form-row column-xs">
       <div class="fixed-title-width">{{ 'gateway.type' | translate }}</div>
       <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="type">
@@ -41,17 +41,15 @@
         </mat-select>
       </mat-form-field>
     </div>
-    <div *ngIf="reportStrategyFormGroup.get('type').value !== ReportStrategyType.OnChange" class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+    <div *ngIf="reportStrategyFormGroup.get('type').value !== ReportStrategyType.OnChange" class="tb-form-row column-xs">
       <div class="fixed-title-width tb-required">
         <span tbTruncateWithTooltip translate>
           gateway.report-strategy.report-period
         </span>
       </div>
-      <div class="tb-flex no-gap">
-        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-          <input matInput type="number" min="0" name="value" formControlName="reportPeriod" placeholder="{{ 'gateway.set' | translate }}"/>
-        </mat-form-field>
-      </div>
+      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+        <input matInput type="number" min="0" name="value" formControlName="reportPeriod" placeholder="{{ 'gateway.set' | translate }}"/>
+      </mat-form-field>
     </div>
   </ng-template>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/modbus-rpc-parameters/modbus-rpc-parameters.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/modbus-rpc-parameters/modbus-rpc-parameters.component.html
index 7122bcd52d..c393bb7122 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/modbus-rpc-parameters/modbus-rpc-parameters.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/modbus-rpc-parameters/modbus-rpc-parameters.component.html
@@ -16,26 +16,26 @@
 
 -->
 <ng-container [formGroup]="rpcParametersFormGroup">
-  <div class="tb-form-hint tb-primary-fill tb-flex no-padding-top hint-container">
+  <div class="tb-form-hint tb-primary-fill no-padding-top hint-container">
     {{ 'gateway.rpc.hint.modbus-response-reading' | translate }}<br>
     {{ 'gateway.rpc.hint.modbus-writing-functions' | translate }}
   </div>
-  <div fxFlex fxLayout="row" fxLayoutGap="10px">
-    <mat-form-field fxFlex="50" class="mat-block">
+  <div class="flex flex-row flex-1 gap-2.5">
+    <mat-form-field class="flex-1">
       <mat-label>{{ 'gateway.rpc.type' | translate }}</mat-label>
       <mat-select formControlName="type">
         <mat-option *ngFor="let type of modbusDataTypes" [value]="type">{{ type }}</mat-option>
       </mat-select>
     </mat-form-field>
-    <mat-form-field fxFlex="50" class="mat-block">
+    <mat-form-field class="flex-1">
       <mat-label>{{ 'gateway.rpc.functionCode' | translate }}</mat-label>
       <mat-select formControlName="functionCode">
         <mat-option *ngFor="let code of functionCodes" [value]="code">{{ ModbusFunctionCodeTranslationsMap.get(code) | translate}}</mat-option>
       </mat-select>
     </mat-form-field>
   </div>
-  <div fxFlex fxLayout="row" fxLayoutGap="10px">
-    <mat-form-field fxFlex="50">
+  <div class="flex flex-row flex-1 gap-2.5">
+    <mat-form-field class="flex-1">
       <mat-label>{{ 'gateway.rpc.address' | translate }}</mat-label>
       <input matInput type="number" min="0" max="50000" name="value" formControlName="address" placeholder="{{ 'gateway.set' | translate }}"/>
       <mat-icon matSuffix
@@ -48,7 +48,7 @@
         warning
       </mat-icon>
     </mat-form-field>
-    <mat-form-field fxFlex="50">
+    <mat-form-field class="flex-1">
       <mat-label>{{ 'gateway.rpc.objectsCount' | translate }}</mat-label>
       <input
         matInput
@@ -62,8 +62,8 @@
       />
     </mat-form-field>
   </div>
-  <div *ngIf="writeFunctionCodes.includes(rpcParametersFormGroup.get('functionCode').value)" fxFlex fxLayout="row">
-    <mat-form-field fxFlex="100">
+  <div *ngIf="writeFunctionCodes.includes(rpcParametersFormGroup.get('functionCode').value)" class="flex">
+    <mat-form-field class="flex-1">
       <mat-label>{{ 'gateway.rpc.value' | translate }}</mat-label>
       <input matInput name="value" formControlName="value" placeholder="{{ 'gateway.set' | translate }}"/>
       <mat-icon matSuffix
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/opc-rpc-parameters/opc-rpc-parameters.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/opc-rpc-parameters/opc-rpc-parameters.component.html
index ec5c20cfb1..c02084b8bf 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/opc-rpc-parameters/opc-rpc-parameters.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/opc-rpc-parameters/opc-rpc-parameters.component.html
@@ -23,13 +23,13 @@
     <mat-label>{{ 'gateway.rpc.method' | translate }}</mat-label>
     <input matInput formControlName="method" placeholder="multiply"/>
   </mat-form-field>
-  <fieldset class="tb-form-panel stroked arguments-container" fxLayout="column" formArrayName="arguments">
+  <fieldset class="tb-form-panel stroked arguments-container" formArrayName="arguments">
     <strong>
       <span class="fields-label">{{ 'gateway.rpc.arguments' | translate }}</span>
     </strong>
-    <div fxFlex fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center"
+    <div class="flex flex-1 justify-center items-center gap-2.5"
          *ngFor="let argumentFormGroup of rpcParametersFormGroup.get('arguments')['controls']; let i = index" [formGroup]="argumentFormGroup">
-      <div class="tb-form-row column-xs type-container" fxLayoutAlign="space-between center">
+      <div class="tb-form-row column-xs type-container justify-between items-center">
         <div class="tb-required" translate>gateway.type</div>
         <div class="tb-flex no-gap">
           <mat-form-field class="tb-flex no-gap fill-width" appearance="outline" subscriptSizing="dynamic">
@@ -50,9 +50,9 @@
           </mat-form-field>
         </div>
       </div>
-      <div class="tb-form-row column-xs value-container" fxLayoutAlign="space-between center">
+      <div class="tb-form-row column-xs value-container justify-between item-center">
         <div class="tb-required" translate>gateway.value</div>
-        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute">
+        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute">
           <ng-container [ngSwitch]="argumentFormGroup.get('type').value">
             <input *ngSwitchCase="MappingValueType.STRING" matInput required formControlName="string"
                    placeholder="{{ 'gateway.set' | translate }}" />
@@ -84,7 +84,7 @@
       </button>
     </div>
     <button mat-raised-button
-            fxFlexAlign="start"
+            class="self-start"
             (click)="addArgument()">
       {{ 'gateway.rpc.add-argument' | translate }}
     </button>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component.html
index f72a2c18af..deb0d6b1b3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component.html
@@ -22,38 +22,36 @@
       <div class="tb-form-panel stroked tb-flex">
         <ng-container [formGroup]="keyControl">
           <mat-expansion-panel class="tb-settings" [expanded]="last">
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex-wrap">
               <mat-panel-title>
                 <div class="title-container" tbTruncateWithTooltip>{{ valueTitle(keyControl.get(keyControl.get('type').value).value) }}</div>
               </mat-panel-title>
             </mat-expansion-panel-header>
             <ng-template matExpansionPanelContent>
-                <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                <div class="tb-form-row column-xs">
                   <div class="fixed-title-width tb-required" translate>gateway.type</div>
-                  <div class="tb-flex no-gap">
-                    <mat-form-field class="tb-flex no-gap fill-width" appearance="outline" subscriptSizing="dynamic">
-                      <mat-select formControlName="type">
-                        <mat-select-trigger>
-                          <div class="tb-flex align-center">
-                            <mat-icon class="tb-mat-18" [svgIcon]="valueTypes.get(keyControl.get('type').value)?.icon">
-                            </mat-icon>
-                            <span>
-                              {{ valueTypes.get(keyControl.get('type').value)?.name | translate}}
-                            </span>
-                          </div>
-                        </mat-select-trigger>
-                        <mat-option *ngFor="let valueType of valueTypeKeys" [value]="valueType">
-                          <mat-icon class="tb-mat-20" svgIcon="{{ valueTypes.get(valueType).icon }}">
+                  <mat-form-field class="tb-flex no-gap fill-width" appearance="outline" subscriptSizing="dynamic">
+                    <mat-select formControlName="type">
+                      <mat-select-trigger>
+                        <div class="tb-flex align-center">
+                          <mat-icon class="tb-mat-18" [svgIcon]="valueTypes.get(keyControl.get('type').value)?.icon">
                           </mat-icon>
-                          <span>{{ valueTypes.get(valueType).name | translate }}</span>
-                        </mat-option>
-                      </mat-select>
-                    </mat-form-field>
-                  </div>
+                          <span>
+                            {{ valueTypes.get(keyControl.get('type').value)?.name | translate}}
+                          </span>
+                        </div>
+                      </mat-select-trigger>
+                      <mat-option *ngFor="let valueType of valueTypeKeys" [value]="valueType">
+                        <mat-icon class="tb-mat-20" svgIcon="{{ valueTypes.get(valueType).icon }}">
+                        </mat-icon>
+                        <span>{{ valueTypes.get(valueType).name | translate }}</span>
+                      </mat-option>
+                    </mat-select>
+                  </mat-form-field>
                 </div>
-                <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                <div class="tb-form-row column-xs">
                   <div class="fixed-title-width tb-required" translate>gateway.value</div>
-                  <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute">
+                  <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex flex-1 tb-suffix-absolute">
                     <ng-container [ngSwitch]="keyControl.get('type').value">
                       <input *ngSwitchCase="MappingValueType.STRING" matInput required formControlName="string"
                              placeholder="{{ 'gateway.set' | translate }}" />
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/add-connector-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/add-connector-dialog.component.html
index d995136b27..6de041a17a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/add-connector-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/add-connector-dialog.component.html
@@ -18,7 +18,7 @@
 <div [formGroup]="connectorForm" class="add-connector">
   <mat-toolbar color="primary">
     <h2>{{ "gateway.add-connector" | translate}}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <div [tb-help]="helpLinkId()"></div>
     <button mat-icon-button
             (click)="cancel()"
@@ -27,10 +27,9 @@
     </button>
   </mat-toolbar>
   <div mat-dialog-content>
-    <div class="tb-form-panel no-border no-padding" fxLayout="column">
-      <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+    <div class="tb-form-panel no-border no-padding">
+      <div class="tb-form-row column-xs">
         <div class="fixed-title-width" translate>gateway.type</div>
-        <div class="tb-flex no-gap">
           <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="type">
               <mat-option *ngFor="let type of gatewayConnectorDefaultTypesTranslatesMap | keyvalue" [value]="type.key">
@@ -38,11 +37,9 @@
               </mat-option>
             </mat-select>
           </mat-form-field>
-        </div>
       </div>
-      <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+      <div class="tb-form-row column-xs">
         <div class="fixed-title-width tb-required" translate>gateway.name</div>
-        <div class="tb-flex no-gap">
           <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
             <input matInput autocomplete="off" name="value" formControlName="name" placeholder="{{ 'gateway.set' | translate }}"/>
             <mat-icon matSuffix
@@ -56,44 +53,37 @@
               warning
             </mat-icon>
           </mat-form-field>
-        </div>
       </div>
-      <div *ngIf="connectorForm.get('type').value === connectorType.CUSTOM" class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+      <div *ngIf="connectorForm.get('type').value === connectorType.CUSTOM" class="tb-form-row column-xs">
         <div class="fixed-title-width" translate>gateway.connectors-table-class</div>
-        <div class="tb-flex no-gap">
           <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
             <input matInput name="value" formControlName="class" placeholder="{{ 'gateway.set' | translate }}"/>
           </mat-form-field>
-        </div>
       </div>
-      <div *ngIf="connectorForm.get('type').value === connectorType.GRPC" class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+      <div *ngIf="connectorForm.get('type').value === connectorType.GRPC" class="tb-form-row column-xs">
         <div class="fixed-title-width" translate>gateway.connectors-table-key</div>
-        <div class="tb-flex no-gap">
           <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
             <input matInput name="value" formControlName="key" placeholder="{{ 'gateway.set' | translate }}"/>
           </mat-form-field>
-        </div>
       </div>
-      <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+      <div class="tb-form-row column-xs">
         <div class="fixed-title-width" translate>gateway.remote-logging-level</div>
-        <div class="tb-flex no-gap">
           <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="logLevel">
               <mat-option *ngFor="let logLevel of gatewayLogLevel" [value]="logLevel">{{ logLevel }}</mat-option>
             </mat-select>
           </mat-form-field>
-        </div>
       </div>
       <div *ngIf="connectorForm.get('type').value !== connectorType.GRPC && connectorForm.get('type').value !== connectorType.CUSTOM"
-           class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-        <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="useDefaults">
+           class="tb-form-row column-xs">
+        <mat-slide-toggle class="mat-slide" formControlName="useDefaults">
           <mat-label tb-hint-tooltip-icon="{{ 'gateway.fill-connector-defaults-hint' | translate }}">
             {{ 'gateway.fill-connector-defaults' | translate }}
           </mat-label>
         </mat-slide-toggle>
       </div>
-      <div *ngIf="connectorForm.get('type').value === connectorType.MQTT" class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-        <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="sendDataOnlyOnChange">
+      <div *ngIf="connectorForm.get('type').value === connectorType.MQTT" class="tb-form-row column-xs">
+        <mat-slide-toggle class="mat-slide" formControlName="sendDataOnlyOnChange">
           <mat-label tb-hint-tooltip-icon="{{ 'gateway.send-change-data-hint' | translate }}">
             {{ 'gateway.send-change-data' | translate }}
           </mat-label>
@@ -101,7 +91,7 @@
       </div>
     </div>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="justify-end">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html
index b56449892b..67963f7258 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html
@@ -18,7 +18,7 @@
 <div [formGroup]="mappingForm" class="key-mapping">
   <mat-toolbar color="primary">
     <h2>{{ MappingTypeTranslationsMap.get(this.data?.mappingType) | translate}}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <div [tb-help]="HelpLinkByMappingTypeMap.get(this.data.mappingType)"></div>
     <button mat-icon-button
             (click)="cancel()"
@@ -27,16 +27,15 @@
     </button>
   </mat-toolbar>
   <div mat-dialog-content>
-    <div class="tb-form-panel no-border no-padding" fxLayout="column">
+    <div class="tb-form-panel no-border no-padding">
       <div class="tb-form-hint tb-primary-fill">
         {{ MappingHintTranslationsMap.get(this.data?.mappingType) | translate }}
       </div>
       <ng-container [ngSwitch]="data.mappingType">
         <ng-template [ngSwitchCase]="MappingType.DATA">
-          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+          <div class="tb-form-row column-xs">
             <div class="fixed-title-width tb-required" translate>gateway.topic-filter</div>
-            <div class="tb-flex no-gap">
-              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+              <mat-form-field class="tb-flex" appearance="outline" subscriptSizing="dynamic">
                 <input matInput name="value" formControlName="topicFilter" placeholder="{{ 'gateway.set' | translate }}"/>
                 <mat-icon matSuffix
                           matTooltipPosition="above"
@@ -54,21 +53,18 @@
                      [tb-help-popup-style]="{maxWidth: '970px'}">
                 </div>
               </mat-form-field>
-            </div>
           </div>
-          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+          <div class="tb-form-row column-xs">
             <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.response-topic-Qos-hint' | translate }}">
               {{ 'gateway.mqtt-qos' | translate }}
             </div>
-            <div class="tb-flex no-gap">
-              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+              <mat-form-field class="tb-flex" appearance="outline" subscriptSizing="dynamic">
                 <mat-select formControlName="subscriptionQos">
                   <mat-option *ngFor="let type of qualityTypes" [value]="type">
                     {{ QualityTranslationsMap.get(type) | translate }}
                   </mat-option>
                 </mat-select>
               </mat-form-field>
-            </div>
           </div>
           <ng-container formGroupName="converter">
             <div class="tb-form-row space-between tb-flex">
@@ -142,13 +138,12 @@
                   </div>
                 </div>
                 <div class="tb-form-panel no-border no-padding" *ngIf="converterType === ConvertorTypeEnum.CUSTOM">
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                  <div class="tb-form-row column-xs">
                     <div class="fixed-title-width tb-required"
                          tb-hint-tooltip-icon="{{ 'gateway.extension-hint' | translate }}">
                       {{ 'gateway.extension' | translate }}
                     </div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                      <mat-form-field class="tb-flex" appearance="outline" subscriptSizing="dynamic">
                         <input matInput name="value" formControlName="extension" placeholder="{{ 'gateway.set' | translate }}"/>
                         <mat-icon matSuffix
                                   matTooltipPosition="above"
@@ -160,7 +155,6 @@
                           warning
                         </mat-icon>
                       </mat-form-field>
-                    </div>
                   </div>
                   <div class="tb-form-row space-between same-padding tb-flex column">
                     <div class="tb-form-panel-title" translate>gateway.extension-configuration</div>
@@ -194,27 +188,24 @@
           </ng-container>
         </ng-template>
         <ng-template [ngSwitchCase]="MappingType.REQUESTS">
-            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+            <div class="tb-form-row column-xs">
               <div class="fixed-title-width" translate>gateway.request-type</div>
-              <div class="tb-flex no-gap">
-                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                <mat-form-field class="tb-flex" appearance="outline" subscriptSizing="dynamic">
                   <mat-select formControlName="requestType">
                     <mat-option *ngFor="let type of requestTypes" [value]="type">
                       {{ RequestTypesTranslationsMap.get(type) | translate }}
                     </mat-option>
                   </mat-select>
                 </mat-form-field>
-              </div>
             </div>
             <ng-container formGroupName="requestValue">
               <ng-container [formGroup]="mappingForm.get('requestValue').get(requestMappingType)" [ngSwitch]="requestMappingType">
-                <div class="tb-form-row column-xs" fxLayoutAlign="space-between center"
+                <div class="tb-form-row column-xs"
                      *ngIf="requestMappingType === RequestTypeEnum.ATTRIBUTE_REQUEST ||
                             requestMappingType === RequestTypeEnum.CONNECT_REQUEST ||
                             requestMappingType === RequestTypeEnum.DISCONNECT_REQUEST">
                   <div class="fixed-title-width tb-required" translate>gateway.topic-filter</div>
-                  <div class="tb-flex no-gap">
-                    <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                    <mat-form-field class="tb-flex" appearance="outline" subscriptSizing="dynamic">
                       <input matInput name="value" [formControl]="mappingForm.get('requestValue').get(requestMappingType).get('topicFilter')"
                              placeholder="{{ 'gateway.set' | translate }}"/>
                       <mat-icon matSuffix
@@ -233,7 +224,6 @@
                            [tb-help-popup-style]="{maxWidth: '970px'}">
                       </div>
                     </mat-form-field>
-                  </div>
                 </div>
                 <ng-template [ngSwitchCase]="RequestTypeEnum.CONNECT_REQUEST">
                   <tb-device-info-table formControlName="deviceInfo" [deviceInfoType]="DeviceInfoType.FULL" required="true">
@@ -249,19 +239,19 @@
                     <div class="tb-form-hint tb-primary-fill" translate>
                       gateway.from-device-request-settings-hint
                     </div>
-                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center" formGroupName="deviceInfo">
+                    <div class="tb-form-row column-xs" formGroupName="deviceInfo">
                       <div class="fixed-title-width tb-flex no-flex align-center" translate>
                         <div class="tb-required" translate>gateway.device-info.device-name-expression</div>
                       </div>
-                      <div class="tb-flex">
-                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                      <div class="flex flex-1">
+                        <mat-form-field class="tb-flex" appearance="outline" subscriptSizing="dynamic">
                           <mat-select formControlName="deviceNameExpressionSource">
                             <mat-option *ngFor="let type of sourceTypes" [value]="type">
                               {{ SourceTypeTranslationsMap.get(type) | translate }}
                             </mat-option>
                           </mat-select>
                         </mat-form-field>
-                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                        <mat-form-field class="tb-flex" appearance="outline" subscriptSizing="dynamic">
                           <input matInput name="value" formControlName="deviceNameExpression" placeholder="{{ 'gateway.set' | translate }}"/>
                             <mat-icon matSuffix
                                       matTooltipPosition="above"
@@ -281,17 +271,17 @@
                         </mat-form-field>
                       </div>
                     </div>
-                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                    <div class="tb-form-row column-xs">
                       <div class="fixed-title-width tb-required" translate>gateway.attribute-name-expression</div>
-                      <div class="tb-flex">
-                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                      <div class="flex flex-1">
+                        <mat-form-field class="tb-flex" appearance="outline" subscriptSizing="dynamic">
                           <mat-select formControlName="attributeNameExpressionSource">
                             <mat-option *ngFor="let type of sourceTypes" [value]="type">
                               {{ SourceTypeTranslationsMap.get(type) | translate }}
                             </mat-option>
                           </mat-select>
                         </mat-form-field>
-                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                        <mat-form-field class="tb-flex" appearance="outline" subscriptSizing="dynamic">
                           <input matInput name="value" formControlName="attributeNameExpression" placeholder="{{ 'gateway.set' | translate }}"/>
                           <mat-icon matSuffix
                                     matTooltipPosition="above"
@@ -317,10 +307,9 @@
                     <div class="tb-form-hint tb-primary-fill" translate>
                       gateway.to-device-response-settings-hint
                     </div>
-                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                    <div class="tb-form-row column-xs">
                       <div class="fixed-title-width tb-required" translate>gateway.response-value-expression</div>
-                      <div class="tb-flex no-gap">
-                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                        <mat-form-field class="tb-flex" appearance="outline" subscriptSizing="dynamic">
                           <input matInput name="value" formControlName="valueExpression" placeholder="{{ 'gateway.set' | translate }}"/>
                           <mat-icon matSuffix
                                     matTooltipPosition="above"
@@ -338,12 +327,10 @@
                                [tb-help-popup-style]="{maxWidth: '970px'}">
                           </div>
                         </mat-form-field>
-                      </div>
                     </div>
-                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                    <div class="tb-form-row column-xs">
                       <div class="fixed-title-width tb-required" translate>gateway.response-topic-expression</div>
-                      <div class="tb-flex no-gap">
-                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                        <mat-form-field class="tb-flex" appearance="outline" subscriptSizing="dynamic">
                           <input matInput name="value" formControlName="topicExpression" placeholder="{{ 'gateway.set' | translate }}"/>
                           <mat-icon matSuffix
                                     matTooltipPosition="above"
@@ -361,9 +348,8 @@
                                [tb-help-popup-style]="{maxWidth: '970px'}">
                           </div>
                         </mat-form-field>
-                      </div>
                     </div>
-                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                    <div class="tb-form-row">
                       <mat-slide-toggle class="mat-slide" formControlName="retain">
                         <mat-label tb-hint-tooltip-icon="{{ 'gateway.retain-hint' | translate }}">
                           {{ 'gateway.retain' | translate }}
@@ -373,13 +359,12 @@
                   </div>
                 </ng-template>
                 <ng-template [ngSwitchCase]="RequestTypeEnum.ATTRIBUTE_UPDATE">
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                  <div class="tb-form-row column-xs">
                     <div class="fixed-title-width tb-required"
                          tb-hint-tooltip-icon="{{ 'gateway.device-name-filter-hint' | translate }}">
                       {{ 'gateway.device-name-filter' | translate }}
                     </div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                      <mat-form-field class="tb-flex" appearance="outline" subscriptSizing="dynamic">
                         <input matInput name="value" formControlName="deviceNameFilter" placeholder="{{ 'gateway.set' | translate }}"/>
                         <mat-icon matSuffix
                                   matTooltipPosition="above"
@@ -391,14 +376,12 @@
                           warning
                         </mat-icon>
                       </mat-form-field>
-                    </div>
                   </div>
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                  <div class="tb-form-row column-xs">
                     <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.attribute-filter-hint' | translate }}">
                       {{ 'gateway.attribute-filter' | translate }}
                     </div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                      <mat-form-field class="tb-flex" appearance="outline" subscriptSizing="dynamic">
                         <input matInput name="value" formControlName="attributeFilter" placeholder="{{ 'gateway.set' | translate }}"/>
                         <mat-icon matSuffix
                                   matTooltipPosition="above"
@@ -410,12 +393,10 @@
                           warning
                         </mat-icon>
                       </mat-form-field>
-                    </div>
                   </div>
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                  <div class="tb-form-row column-xs">
                     <div class="fixed-title-width tb-required" translate>gateway.response-value-expression</div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                      <mat-form-field class="tb-flex" appearance="outline" subscriptSizing="dynamic">
                         <input matInput name="value" formControlName="valueExpression" placeholder="{{ 'gateway.set' | translate }}"/>
                         <mat-icon matSuffix
                                   matTooltipPosition="above"
@@ -433,12 +414,10 @@
                              [tb-help-popup-style]="{maxWidth: '970px'}">
                         </div>
                       </mat-form-field>
-                    </div>
                   </div>
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                  <div class="tb-form-row column-xs">
                     <div class="fixed-title-width tb-required" translate>gateway.response-topic-expression</div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                      <mat-form-field class="tb-flex" appearance="outline" subscriptSizing="dynamic">
                         <input matInput name="value" formControlName="topicExpression" placeholder="{{ 'gateway.set' | translate }}"/>
                         <mat-icon matSuffix
                                   matTooltipPosition="above"
@@ -456,10 +435,9 @@
                              [tb-help-popup-style]="{maxWidth: '970px'}">
                         </div>
                       </mat-form-field>
-                    </div>
                   </div>
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                    <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="retain">
+                  <div class="tb-form-row">
+                    <mat-slide-toggle class="mat-slide" formControlName="retain">
                       <mat-label tb-hint-tooltip-icon="{{ 'gateway.retain-hint' | translate }}">
                         {{ 'gateway.retain' | translate }}
                       </mat-label>
@@ -477,12 +455,11 @@
                       </tb-toggle-option>
                     </tb-toggle-select>
                   </div>
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                  <div class="tb-form-row column-xs">
                     <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.device-name-filter-hint' | translate }}">
                       {{ 'gateway.device-name-filter' | translate }}
                     </div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                      <mat-form-field class="tb-flex" appearance="outline" subscriptSizing="dynamic">
                         <input matInput name="value" formControlName="deviceNameFilter" placeholder="{{ 'gateway.set' | translate }}"/>
                         <mat-icon matSuffix
                                   matTooltipPosition="above"
@@ -494,14 +471,12 @@
                           warning
                         </mat-icon>
                       </mat-form-field>
-                    </div>
                   </div>
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                  <div class="tb-form-row column-xs">
                     <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.method-filter-hint' | translate }}">
                       {{ 'gateway.method-filter' | translate }}
                     </div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                      <mat-form-field class="tb-flex" appearance="outline" subscriptSizing="dynamic">
                         <input matInput name="value" formControlName="methodFilter" placeholder="{{ 'gateway.set' | translate }}"/>
                         <mat-icon matSuffix
                                   matTooltipPosition="above"
@@ -513,12 +488,10 @@
                           warning
                         </mat-icon>
                       </mat-form-field>
-                    </div>
                   </div>
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                  <div class="tb-form-row column-xs">
                     <div class="fixed-title-width tb-required" translate>gateway.request-topic-expression</div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                      <mat-form-field class="tb-flex" appearance="outline" subscriptSizing="dynamic">
                         <input matInput name="value" formControlName="requestTopicExpression" placeholder="{{ 'gateway.set' | translate }}"/>
                         <mat-icon matSuffix
                                   matTooltipPosition="above"
@@ -536,12 +509,10 @@
                              [tb-help-popup-style]="{maxWidth: '970px'}">
                         </div>
                       </mat-form-field>
-                    </div>
                   </div>
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                  <div class="tb-form-row column-xs">
                     <div class="fixed-title-width tb-required" translate>gateway.value-expression</div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                      <mat-form-field class="tb-flex" appearance="outline" subscriptSizing="dynamic">
                         <input matInput name="value" formControlName="valueExpression" placeholder="{{ 'gateway.set' | translate }}"/>
                         <mat-icon matSuffix
                                   matTooltipPosition="above"
@@ -559,13 +530,11 @@
                              [tb-help-popup-style]="{maxWidth: '970px'}">
                         </div>
                       </mat-form-field>
-                    </div>
                   </div>
                   <ng-container *ngIf="mappingForm.get('requestValue.serverSideRpc.type').value === ServerSideRPCType.TWO_WAY">
-                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                    <div class="tb-form-row column-xs">
                       <div class="fixed-title-width tb-required" translate>gateway.response-topic-expression</div>
-                      <div class="tb-flex no-gap">
-                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                        <mat-form-field class="tb-flex" appearance="outline" subscriptSizing="dynamic">
                           <input matInput name="value" formControlName="responseTopicExpression" placeholder="{{ 'gateway.set' | translate }}"/>
                           <mat-icon matSuffix
                                     matTooltipPosition="above"
@@ -583,9 +552,8 @@
                                [tb-help-popup-style]="{maxWidth: '970px'}">
                           </div>
                         </mat-form-field>
-                      </div>
                     </div>
-                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                    <div class="tb-form-row column-xs">
                       <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.response-topic-Qos-hint' | translate }}">
                         {{ 'gateway.response-topic-Qos' | translate }}
                       </div>
@@ -597,10 +565,9 @@
                         </mat-select>
                       </mat-form-field>
                     </div>
-                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                    <div class="tb-form-row column-xs">
                       <div class="fixed-title-width tb-required" translate>gateway.response-timeout</div>
-                      <div class="tb-flex no-gap">
-                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                        <mat-form-field class="tb-flex" appearance="outline" subscriptSizing="dynamic">
                           <input matInput name="value" type="number" min="1" formControlName="responseTimeout"
                                  placeholder="{{ 'gateway.set' | translate }}"/>
                           <mat-icon matSuffix
@@ -614,7 +581,6 @@
                             warning
                           </mat-icon>
                         </mat-form-field>
-                      </div>
                     </div>
                   </ng-container>
                 </ng-template>
@@ -622,21 +588,21 @@
             </ng-container>
         </ng-template>
         <ng-template [ngSwitchCase]="MappingType.OPCUA">
-          <div class="tb-form-row column-xs" fxLayoutAlign="center">
+          <div class="tb-form-row column-xs">
             <div class="tb-flex no-flex align-center" translate>
               <div class="tb-required" tb-hint-tooltip-icon="{{ 'gateway.device-node-hint' | translate }}">
                 {{ 'gateway.device-node' | translate }}
               </div>
             </div>
             <div class="tb-flex device-config">
-              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+              <mat-form-field class="tb-flex" appearance="outline" subscriptSizing="dynamic">
                 <mat-select formControlName="deviceNodeSource">
                   <mat-option *ngFor="let type of [OPCUaSourceTypesEnum.PATH, OPCUaSourceTypesEnum.IDENTIFIER]" [value]="type">
                     {{ SourceTypeTranslationsMap.get(type) | translate }}
                   </mat-option>
                 </mat-select>
               </mat-form-field>
-              <mat-form-field class="tb-flex no-gap device-node-pattern-field" appearance="outline" subscriptSizing="dynamic">
+              <mat-form-field class="tb-flex device-node-pattern-field" appearance="outline" subscriptSizing="dynamic">
                 <input matInput name="value" formControlName="deviceNodePattern" placeholder="{{ 'gateway.set' | translate }}"/>
                 <mat-icon matSuffix
                           matTooltipPosition="above"
@@ -750,7 +716,7 @@
       </ng-container>
     </div>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="justify-end">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html
index a700dcc94b..75d6fc8559 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html
@@ -17,9 +17,8 @@
 -->
 <div class="connector-container tb-form-panel no-border">
   <section class="table-section tb-form-panel no-padding flex section-container">
-    <mat-toolbar class="mat-mdc-table-toolbar">
+    <mat-toolbar class="mat-mdc-table-toolbar justify-between">
       <h2>{{ 'gateway.connectors' | translate }}</h2>
-      <span fxFlex></span>
       <button *ngIf="dataSource?.data?.length"
               mat-icon-button
               [disabled]="isLoading$ | async"
@@ -30,8 +29,8 @@
       </button>
     </mat-toolbar>
     <div class="table-container">
-      <section *ngIf="!dataSource?.data?.length" fxLayoutAlign="center center"
-               class="mat-headline-5 tb-absolute-fill tb-add-new">
+      <section *ngIf="!dataSource?.data?.length"
+               class="mat-headline-5 tb-absolute-fill tb-add-new justify-center items-center">
         <button mat-button class="connector"
         (click)="onAddConnector($event)">
           <mat-icon class="tb-mat-96">add</mat-icon>
@@ -89,13 +88,12 @@
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="actions" stickyEnd>
-          <mat-header-cell *matHeaderCellDef
-                           [ngStyle.gt-md]="{ minWidth: '144px', maxWidth: '144px', width: '144px', textAlign: 'center'}">
-            {{ 'gateway.connectors-table-actions' | translate }}
+          <mat-header-cell *matHeaderCellDef>
+            <div class="gt-md:!hidden" style="width: 48px; min-width: 48px; max-width: 48px;"></div>
+            <div class="lt-lg:!hidden" [style]="{ minWidth: '144px', maxWidth: '144px', textAlign: 'center'}">{{ 'gateway.connectors-table-actions' | translate }}</div>
           </mat-header-cell>
-          <mat-cell *matCellDef="let attribute"
-                    [ngStyle.gt-md]="{ minWidth: '144px', maxWidth: '144px', width: '144px'}">
-            <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
+          <mat-cell *matCellDef="let attribute">
+            <div class="flex-row justify-end lt-md:!hidden" [style]="{ minWidth: '144px', maxWidth: '144px', width: '144px', textAlign: 'center'}">
               <button mat-icon-button
                       matTooltip="RPC"
                       matTooltipPosition="above"
@@ -115,7 +113,7 @@
                 <mat-icon>delete</mat-icon>
               </button>
             </div>
-            <div fxHide fxShow.lt-lg>
+            <div class="gt-sm:!hidden">
               <button mat-icon-button
                       (click)="$event.stopPropagation()"
                       [matMenuTriggerFor]="cellActionsMenu">
@@ -168,9 +166,8 @@
         </tb-toggle-option>
       </tb-toggle-select>
     </div>
-    <span [fxShow]="!initialConnector"
-          fxLayoutAlign="center center"
-          class="no-data-found" translate>
+    <span [class.!hidden]="initialConnector"
+          class="no-data-found justify-center items-center" translate>
       gateway.select-connector
     </span>
     <section class="tb-form-panel section-container no-border no-padding tb-flex space-between" *ngIf="initialConnector">
@@ -230,9 +227,7 @@
           </mat-tab>
           <mat-tab label="{{ 'gateway.configuration' | translate }}*">
             <tb-json-object-edit
-              fillHeight="true"
-              class="tb-flex fill-height"
-              fxLayout="column"
+              [fillHeight]="true"
               jsonRequired
               label="{{ 'gateway.configuration' | translate }}"
               formControlName="configurationJson">
@@ -240,7 +235,7 @@
           </mat-tab>
         </mat-tab-group>
       </ng-template>
-      <div fxLayoutAlign="end center">
+      <div class="flex justify-end">
         <button mat-raised-button color="primary"
                 type="button"
                 [disabled]="!connectorForm.dirty || connectorForm.invalid"
@@ -253,7 +248,7 @@
 </div>
 <ng-template #generalTabContent>
   <section [formGroup]="connectorForm" class="tb-form-panel no-border no-padding padding-top section-container flex">
-    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center" >
+    <div class="tb-form-row column-xs">
       <div class="fixed-title-width tb-required" translate>gateway.name</div>
       <div class="tb-flex no-gap">
         <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
@@ -271,7 +266,7 @@
         </mat-form-field>
       </div>
     </div>
-    <div *ngIf="connectorForm.get('type').value === ConnectorType.CUSTOM" class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+    <div *ngIf="connectorForm.get('type').value === ConnectorType.CUSTOM" class="tb-form-row column-xs">
       <div class="fixed-title-width" translate>gateway.connectors-table-class</div>
       <div class="tb-flex no-gap">
         <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
@@ -279,7 +274,7 @@
         </mat-form-field>
       </div>
     </div>
-    <div *ngIf="connectorForm.get('type').value === ConnectorType.GRPC" class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+    <div *ngIf="connectorForm.get('type').value === ConnectorType.GRPC" class="tb-form-row column-xs">
       <div class="fixed-title-width" translate>gateway.connectors-table-key</div>
       <div class="tb-flex no-gap">
         <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
@@ -289,14 +284,14 @@
     </div>
     <div class="tb-form-panel stroked">
       <div class="tb-form-panel-title" translate>gateway.logs-configuration</div>
-      <div class="tb-form-row" fxLayoutAlign="space-between center">
+      <div class="tb-form-row">
         <mat-slide-toggle class="mat-slide" formControlName="enableRemoteLogging">
           <mat-label>
             {{ 'gateway.enable-remote-logging' | translate }}
           </mat-label>
         </mat-slide-toggle>
       </div>
-      <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+      <div class="tb-form-row column-xs">
         <div class="fixed-title-width" translate>gateway.remote-logging-level</div>
         <div class="tb-flex no-gap">
           <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
@@ -307,7 +302,7 @@
         </div>
       </div>
     </div>
-    <div *ngIf="connectorForm.get('type').value === ConnectorType.MQTT" class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+    <div *ngIf="connectorForm.get('type').value === ConnectorType.MQTT" class="tb-form-row">
       <mat-slide-toggle class="mat-slide" formControlName="sendDataOnlyOnChange">
         <mat-label tb-hint-tooltip-icon="{{ 'gateway.send-change-data-hint' | translate }}">
           {{ 'gateway.send-change-data' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.html
index 7daa490f01..24e51f60fd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.html
@@ -35,25 +35,27 @@
           required
         >
       </tb-entity-gateway-select>
-      <div fxLayout="column">
-        <mat-form-field fxFlex>
-          <mat-label>{{'gateway.security-type' | translate }}</mat-label>
-          <mat-select formControlName="securityType" >
-            <mat-option *ngFor="let securityType of securityTypes | keyvalue" [value]="securityType.key">
-              {{ securityType.value.toString() | translate }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-      </div>
-      <div [fxLayout]="alignment" [fxLayoutGap]="layoutGap">
-        <mat-form-field fxFlex>
+      <mat-form-field class="flex">
+        <mat-label>{{'gateway.security-type' | translate }}</mat-label>
+        <mat-select formControlName="securityType" >
+          <mat-option *ngFor="let securityType of securityTypes | keyvalue" [value]="securityType.key">
+            {{ securityType.value.toString() | translate }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+      <div class="flex" [class]="{
+        'gap-1.25': layoutGap,
+        'flex-row': alignment,
+        'flex-col': !alignment
+      }">
+        <mat-form-field class="flex-1">
           <mat-label>{{ 'gateway.thingsboard-host' | translate }}</mat-label>
           <input matInput type="text" formControlName="host">
           <mat-error *ngIf="gatewayConfigurationGroup.get('host').hasError('required')" translate>
             gateway.thingsboard-host-required
           </mat-error>
         </mat-form-field>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>{{ 'gateway.thingsboard-port' | translate }}</mat-label>
           <input matInput type="number" formControlName="port">
           <mat-error *ngIf="gatewayConfigurationGroup.get('port').hasError('required')" translate>
@@ -71,16 +73,16 @@
         </mat-form-field>
       </div>
 
-      <div *ngIf="gatewayConfigurationGroup.get('securityType').value == 'tls'" fxLayout="column">
-        <mat-form-field fxFlex>
+      <div *ngIf="gatewayConfigurationGroup.get('securityType').value == 'tls'" class="flex flex-col">
+        <mat-form-field>
           <mat-label>{{ 'gateway.tls-path-ca-certificate' | translate }}</mat-label>
           <input matInput type="text" formControlName="caCertPath">
         </mat-form-field>
-        <mat-form-field fxFlex>
+        <mat-form-field>
           <mat-label>{{ 'gateway.tls-path-private-key' | translate }}</mat-label>
           <input matInput type="text" formControlName="privateKeyPath">
         </mat-form-field>
-        <mat-form-field fxFlex>
+        <mat-form-field>
           <mat-label>{{ 'gateway.tls-path-client-certificate' | translate }}</mat-label>
           <input matInput type="text" formControlName="certPath">
         </mat-form-field>
@@ -88,8 +90,12 @@
 
       <mat-checkbox formControlName="remoteConfiguration">{{ 'gateway.remote' | translate }}</mat-checkbox>
 
-      <div [fxLayout]="alignment" [fxLayoutGap]="layoutGap">
-        <mat-form-field fxFlex>
+      <div class="flex" [class]="{
+        'gap-1.25': layoutGap,
+        'flex-row': alignment,
+        'flex-col': !alignment
+      }">
+        <mat-form-field class="flex-1">
           <mat-label>{{'gateway.remote-logging-level' | translate }}</mat-label>
           <mat-select formControlName="remoteLoggingLevel">
             <mat-option *ngFor="let logLevel of gatewayLogLevels" [value]="logLevel">
@@ -98,7 +104,7 @@
           </mat-select>
         </mat-form-field>
 
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>{{ 'gateway.path-logs' | translate }}</mat-label>
           <input matInput type="text" formControlName="remoteLoggingPathToLogs">
           <mat-error *ngIf="gatewayConfigurationGroup.get('remoteLoggingPathToLogs').hasError('required')" translate>
@@ -116,8 +122,8 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
 
-      <div fxLayout="column">
-        <mat-form-field fxFlex>
+      <div class="flex flex-col">
+        <mat-form-field>
           <mat-label>{{'gateway.storage-type' | translate }}</mat-label>
           <mat-select formControlName="storageType">
             <mat-option *ngFor="let storageType of storageTypes | keyvalue" [value]="storageType.key">
@@ -126,8 +132,12 @@
           </mat-select>
         </mat-form-field>
 
-        <div [fxLayout]="alignment" [fxLayoutGap]="layoutGap">
-          <mat-form-field fxFlex>
+        <div class="flex" [class]="{
+            'gap-1.25': layoutGap,
+            'flex-row': alignment,
+            'flex-col': !alignment
+          }">
+          <mat-form-field class="flex-1">
             <mat-label>{{ 'gateway.storage-pack-size' | translate }}</mat-label>
             <input matInput type="number" formControlName="readRecordsCount">
             <mat-error *ngIf="gatewayConfigurationGroup.get('readRecordsCount').hasError('required')" translate>
@@ -141,7 +151,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex>
+          <mat-form-field class="flex-1">
             <mat-label >
               {{ (gatewayConfigurationGroup.get('storageType').value !== 'file' ? 'gateway.storage-max-records' : 'gateway.storage-max-file-records') | translate}}
             </mat-label>
@@ -158,8 +168,12 @@
           </mat-form-field>
         </div>
 
-        <div [fxLayout]="alignment" [fxLayoutGap]="layoutGap" *ngIf="gatewayConfigurationGroup.get('storageType').value == 'file'">
-          <mat-form-field fxFlex>
+        <div class="flex" [class]="{
+            'gap-1.25': layoutGap,
+            'flex-row': alignment,
+            'flex-col': !alignment
+          }" *ngIf="gatewayConfigurationGroup.get('storageType').value == 'file'">
+          <mat-form-field class="flex-1">
             <mat-label>{{ 'gateway.storage-max-files' | translate }}</mat-label>
             <input matInput type="number" formControlName="maxFilesCount">
             <mat-error *ngIf="gatewayConfigurationGroup.get('maxFilesCount').hasError('required')" translate>
@@ -173,7 +187,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex>
+          <mat-form-field class="flex-1">
             <mat-label>{{ 'gateway.storage-path' | translate }}</mat-label>
             <input matInput type="text" formControlName="dataFolderPath">
             <mat-error *ngIf="gatewayConfigurationGroup.get('dataFolderPath').hasError('required')" translate>
@@ -191,14 +205,18 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
 
-      <div fxLayout="column" class="gateway-config">
+      <div class="flex flex-col gateway-config">
         <section formArrayName="connectors" *ngFor="let connector of connectors.controls; let i = index;">
-          <div [formGroupName]="i" fxLayout="row" fxLayoutAlign="space-between stretch" fxLayoutGap="8px">
-            <div fxLayout="column" fxLayoutAlign="center start">
+          <div [formGroupName]="i" class="flex flex-row justify-between items-stretch gap-2">
+            <div class="flex flex-col justify-center">
               <mat-slide-toggle formControlName="enabled"></mat-slide-toggle>
             </div>
-            <div [fxLayout]="alignment" [fxLayoutGap]="layoutGap" fxFlex>
-              <mat-form-field fxFlex>
+            <div class="flex flex-full" [class]="{
+                'gap-1.25': layoutGap,
+                'flex-row': alignment,
+                'flex-col': !alignment
+              }">
+              <mat-form-field class="flex-1">
                 <mat-label>{{'gateway.connector-type' | translate }}</mat-label>
                 <mat-select formControlName="configType" (selectionChange)="changeConnectorType(connector)">
                   <mat-option *ngFor="let connectorType of connectorTypes" [value]="connectorType">
@@ -210,7 +228,7 @@
                 </mat-error>
               </mat-form-field>
 
-              <mat-form-field fxFlex>
+              <mat-form-field class="flex-1">
                 <mat-label>{{ 'gateway.connector-name' | translate }}</mat-label>
                 <input matInput type="text" formControlName="name" (blur)="changeConnectorName(connector, i)">
                 <mat-error *ngIf="connector.get('name').hasError('required')" translate>
@@ -218,12 +236,15 @@
                 </mat-error>
               </mat-form-field>
             </div>
-            <div [fxLayout]="alignment" [fxLayoutGap]="layoutGap"
-                 fxLayoutAlign="{{alignment == 'row' ? 'end center' : 'space-evenly center'}}" class="action-buttons">
+            <div class="flex action-buttons" [class]="{
+                'gap-1.25': layoutGap,
+                'flex-row justify-end item-center': alignment,
+                'flex-col justify-evenly item-center': !alignment
+              }">
               <button [disabled]="isReadOnlyForm" mat-icon-button (click)="openConfigDialog($event, i, connector.get('config').value, connector.get('name').value)"
                          matTooltip="{{ 'gateway.update-config' | translate }}"
                          matTooltipPosition="above"
-                         [ngClass]="{'mat-warn': connector.get('config').invalid}">
+                         [class.mat-warn]="connector.get('config').invalid">
                 <mat-icon>more_horiz</mat-icon>
               </button>
               <button [disabled]="isReadOnlyForm"
@@ -235,9 +256,9 @@
             </div>
           </div>
         </section>
-        <span [fxShow]="!connectors.length" fxLayoutAlign="center center" class="no-data-found">{{'gateway.no-connectors' | translate}}</span>
+        <span [class.!hidden]="connectors.length" class="no-data-found justify-center items-center">{{'gateway.no-connectors' | translate}}</span>
         <div>
-          <button [fxShow]="!isReadOnlyForm" mat-raised-button type="button" (click)="addNewConnector()"
+          <button [class.!hidden]="isReadOnlyForm" mat-raised-button type="button" (click)="addNewConnector()"
                   matTooltip="{{ 'gateway.connector-add' | translate }}"
                   matTooltipPosition="above">
             {{ 'action.add' | translate }}
@@ -246,8 +267,7 @@
       </div >
     </mat-expansion-panel>
   </mat-accordion>
-  <section [fxShow]="!isReadOnlyForm"
-           fxLayout="row" fxLayoutAlign="end center" class="form-action-buttons">
+  <section [class.!hidden]="isReadOnlyForm" class="flex flex-row justify-end items-center form-action-buttons">
     <button mat-raised-button color="primary" type="button"
             (click)="exportConfig()"
             *ngIf="!gatewayConfigurationGroup.get('remoteConfiguration').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.ts
index 4f8b1ee34b..3fbcccb330 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.ts
@@ -97,8 +97,8 @@ export class GatewayFormComponent extends PageComponent implements OnInit, OnDes
   private subscribeStorageType$: any;
   private subscribeGateway$: any;
 
-  alignment = 'row';
-  layoutGap = '5px';
+  alignment = true;
+  layoutGap = true;
   gatewayType: string;
   gatewayConfigurationGroup: UntypedFormGroup;
   securityTypes = SecurityTypeTranslationMap;
@@ -166,11 +166,11 @@ export class GatewayFormComponent extends PageComponent implements OnInit, OnDes
 
   private updateWidgetDisplaying(): void {
     if(this.ctx.$container && this.ctx.$container[0].offsetWidth <= 425){
-      this.layoutGap = '0';
-      this.alignment = 'column';
+      this.layoutGap = false;
+      this.alignment = false;
     } else {
-      this.layoutGap = '5px';
-      this.alignment = 'row';
+      this.layoutGap = true;
+      this.alignment = true;
     }
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-logs.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-logs.component.html
index 098a8ce5e5..c7d518bd74 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-logs.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-logs.component.html
@@ -45,10 +45,9 @@
   <mat-header-row class="mat-row-select" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
   <mat-row class="mat-row-select" *matRowDef="let attribute; columns: displayedColumns;"></mat-row>
 </table>
-<span [fxShow]="dataSource.data.length === 0"
-      fxFlex fxLayoutAlign="center center"
-      class="no-data-found">{{ 'attribute.no-telemetry-text' | translate }}</span>
-<span fxFlex [fxShow]="dataSource.data.length !== 0"></span>
+<span [class.!hidden]="dataSource.data.length !== 0"
+      class="flex-1 justify-center items-center no-data-found">{{ 'attribute.no-telemetry-text' | translate }}</span>
+<span class="flex-1" [class.!hidden]="dataSource.data.length === 0"></span>
 <mat-divider></mat-divider>
 <mat-paginator [length]="dataSource.data.length"
                [pageIndex]="pageLink.page"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-remote-configuration-dialog.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-remote-configuration-dialog.html
index 0d5d96e45b..c96bd0475e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-remote-configuration-dialog.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-remote-configuration-dialog.html
@@ -18,14 +18,14 @@
 <mat-toolbar color="warn">
   <mat-icon>warning</mat-icon>
   <h2 translate>gateway.configuration-delete-dialog-header</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           (click)="close()"
           type="button">
     <mat-icon class="material-icons">close</mat-icon>
   </button>
 </mat-toolbar>
-<div mat-dialog-content style="max-width: 600px" class="mat-content" fxLayout="column">
+<div mat-dialog-content style="max-width: 600px" class="mat-content flex-col">
   <span innerHTML="{{ 'gateway.configuration-delete-dialog-body' | translate }} <b>{{ gatewayName }}</b>" ></span>
   <mat-form-field class="mat-block tb-value-type" style="flex-grow: 0">
     <mat-label translate>gateway.configuration-delete-dialog-input</mat-label>
@@ -36,7 +36,7 @@
     </mat-error>
   </mat-form-field>
 </div>
-<div mat-dialog-actions fxLayoutAlign="end center">
+<div mat-dialog-actions class="justify-end">
   <button mat-button color="warn"
           type="button"
           cdkFocusInitial
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector-template-dialog.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector-template-dialog.html
index d8b028361d..c6c2c7de8f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector-template-dialog.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector-template-dialog.html
@@ -15,16 +15,15 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar color="primary" class="justify-between">
   <h2 translate>gateway.rpc.save-template</h2>
-  <span fxFlex></span>
   <button mat-icon-button
           (click)="close()"
           type="button">
     <mat-icon class="material-icons">close</mat-icon>
   </button>
 </mat-toolbar>
-<div mat-dialog-content style="width: 600px" class="mat-content" fxLayout="column">
+<div mat-dialog-content style="width: 600px" class="mat-content flex flex-col">
   <mat-form-field class="mat-block tb-value-type" style="flex-grow: 0">
     <mat-label translate>gateway.rpc.template-name</mat-label>
     <input matInput [formControl]="templateNameCtrl" required/>
@@ -39,7 +38,7 @@
     {{ 'gateway.rpc.template-name-duplicate' | translate }}
   </div>
 </div>
-<div mat-dialog-actions fxLayoutAlign="end center">
+<div mat-dialog-actions class="justify-end">
   <button mat-button
           type="button"
           (click)="close()">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector-templates.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector-templates.component.html
index 0d01a1c1d7..c1f963effb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector-templates.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector-templates.component.html
@@ -37,10 +37,11 @@
     [ngTemplateOutletContext]="{ $implicit: config, innerValue: false }">
   </ng-container>
   <ng-template #RPCTemplateRef let-config let-innerValue='innerValue'>
-    <div [fxLayout]="isObject(config.value) ? 'column': 'row'"
-         [fxLayoutAlign]="!isObject(config.value) ? 'space-between center' : ''"
-         [ngStyle]="{'padding-left': innerValue ? '16px': '0'}"
-         class="rpc-params-row">
+    <div [class]="{
+        'flex-col': isObject(config.value),
+        'flex-row justify-between items-center': !isObject(config.value),
+      }" [style]="{'padding-left': innerValue ? '16px': '0'}"
+         class="rpc-params-row flex">
       <div class="template-key">
         {{!innerValue ? ('gateway.rpc.' + config.key | translate) : config.key}}
       </div>
@@ -49,7 +50,7 @@
       </div>
       <ng-container *ngIf="isObject(config.value)" [ngTemplateOutlet]="RPCObjectRow"></ng-container>
       <div *ngIf="!isObject(config.value) && !isArray(config.value)"
-           [ngClass]="{'boolean-true': config.value === true,
+           [class]="{'boolean-true': config.value === true,
                    'boolean-false': config.value === false  }">
         <ng-container *ngIf="config.key === 'method' else value" [ngTemplateOutlet]="SNMPMethod"></ng-container>
       </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector.component.html
index fde4ab28ac..2de0343833 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" class="command-form" [formGroup]="commandForm">
+<div class="command-form flex flex-col" [formGroup]="commandForm">
   <div
     class="mat-subtitle-1 title">{{ 'gateway.rpc.title' | translate: {type: gatewayConnectorDefaultTypesTranslates.get(connectorType)} }}</div>
   <ng-template [ngIf]="connectorType">
@@ -38,8 +38,8 @@
           <input matInput formControlName="requestTimeout" type="number"
                  min="10" step="1" placeholder="1000"/>
         </mat-form-field>
-        <div fxFlex fxLayout="row" fxLayoutGap="10px">
-          <mat-form-field fxFlex="50" class="mat-block">
+        <div class="flex flex-1 flex-row gap-2.5">
+          <mat-form-field class="flex-1">
             <mat-label>{{ 'gateway.rpc.objectType' | translate }}</mat-label>
             <mat-select formControlName="objectType">
               <mat-option *ngFor="let type of bACnetObjectTypes" [value]="type">
@@ -47,7 +47,7 @@
               </mat-option>
             </mat-select>
           </mat-form-field>
-          <mat-form-field fxFlex="50">
+          <mat-form-field class="flex-1">
             <mat-label>{{ 'gateway.rpc.identifier' | translate }}</mat-label>
             <input matInput formControlName="identifier" type="number"
                    min="1" step="1" placeholder="1"/>
@@ -97,12 +97,12 @@
         <mat-slide-toggle class="mat-slide margin" formControlName="bitrateSwitch">
           {{ 'gateway.rpc.bitrateSwitch' | translate }}
         </mat-slide-toggle>
-        <div fxFlex fxLayout="row" fxLayoutGap="10px">
-          <mat-form-field fxFlex="50">
+        <div class="flex flex-1 flex-row gap-2.5">
+          <mat-form-field class="flex-1">
             <mat-label>{{ 'gateway.rpc.dataLength' | translate }}</mat-label>
             <input matInput formControlName="dataLength" type="number" placeholder="2" min="1" step="1"/>
           </mat-form-field>
-          <mat-form-field class="mat-block" fxFlex="50">
+          <mat-form-field class="flex-1">
             <mat-label>{{ 'gateway.rpc.dataByteorder' | translate }}</mat-label>
             <mat-select formControlName="dataByteorder">
               <mat-option *ngFor="let order of cANByteOrders" [value]="order">
@@ -111,12 +111,12 @@
             </mat-select>
           </mat-form-field>
         </div>
-        <div fxFlex fxLayout="row" fxLayoutGap="10px">
-          <mat-form-field fxFlex="50">
+        <div class="flex flex-1 flex-row gap-2.5">
+          <mat-form-field class="flex-1">
             <mat-label>{{ 'gateway.rpc.dataBefore' | translate }}</mat-label>
             <input matInput formControlName="dataBefore" placeholder="00AA"/>
           </mat-form-field>
-          <mat-form-field fxFlex="50">
+          <mat-form-field class="flex-1">
             <mat-label>{{ 'gateway.rpc.dataAfter' | translate }}</mat-label>
             <input matInput formControlName="dataAfter" placeholder="0102"/>
           </mat-form-field>
@@ -205,21 +205,21 @@
         <mat-slide-toggle class="mat-slide margin" formControlName="withResponse">
           {{ 'gateway.rpc.withResponse' | translate }}
         </mat-slide-toggle>
-        <fieldset class="fields border" fxLayout="column" fxLayoutGap="10px" formArrayName="oid">
+        <fieldset class="fields border flex flex-col gap-2.5" formArrayName="oid">
           <span class="fields-label">{{ 'gateway.rpc.oids' | translate }}*</span>
-          <div fxFlex fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center"
+          <div class="flex flex-1 flex-row justify-center items-center gap-2.5"
                *ngFor="let control of getFormArrayControls('oid'); let i = index">
-            <mat-form-field class="tb-inline-field" appearance="outline" fxFlex subscriptSizing="dynamic">
+            <mat-form-field class="tb-inline-field flex-1" appearance="outline" subscriptSizing="dynamic">
               <input matInput [formControl]="control" required/>
             </mat-form-field>
-            <mat-icon style="cursor:pointer;"
-                      fxFlex="30px"
+            <mat-icon style="cursor:pointer; max-width:30px;min-width:30px"
+                      class="flex-[1_1_30px]"
                       (click)="removeSNMPoid(i)"
                       matTooltip="{{ 'gateway.rpc.remove' | translate }}">delete
             </mat-icon>
           </div>
           <button mat-raised-button
-                  fxFlexAlign="start"
+                  class="self-start"
                   (click)="addSNMPoid()">
             {{ 'gateway.rpc.add-oid' | translate }}
           </button>
@@ -230,8 +230,8 @@
           <mat-label>{{ 'gateway.rpc.methodFilter' | translate }}</mat-label>
           <input matInput formControlName="methodFilter" placeholder="post_attributes"/>
         </mat-form-field>
-        <div fxFlex fxLayout="row" fxLayoutGap="10px">
-          <mat-form-field class="mat-block" fxFlex="33">
+        <div class="flex flex-1 flex-row gap-2.5">
+          <mat-form-field class="flex-[1_1_33%] max-w-4/12">
             <mat-label>{{ 'gateway.rpc.httpMethod' | translate }}</mat-label>
             <mat-select formControlName="httpMethod">
               <mat-option *ngFor="let method of hTTPMethods" [value]="method">
@@ -239,24 +239,24 @@
               </mat-option>
             </mat-select>
           </mat-form-field>
-          <mat-form-field fxFlex>
+          <mat-form-field class="flex-1">
             <mat-label>{{ 'gateway.rpc.requestUrlExpression' | translate }}</mat-label>
             <input matInput formControlName="requestUrlExpression"
                    placeholder="http://127.0.0.1:5000/my_devices"/>
           </mat-form-field>
         </div>
-        <div fxFlex fxLayout="row" fxLayoutGap="10px">
-          <mat-form-field fxFlex="33">
+        <div class="flex flex-1 flex-row gap-2.5">
+          <mat-form-field class="flex-1">
             <mat-label>{{ 'gateway.rpc.responseTimeout' | translate }}</mat-label>
             <input matInput formControlName="responseTimeout" type="number"
                    step="1" min="10" placeholder="10"/>
           </mat-form-field>
-          <mat-form-field fxFlex>
+          <mat-form-field class="flex-1">
             <mat-label>{{ 'gateway.rpc.timeout' | translate }}</mat-label>
             <input matInput formControlName="timeout" type="number"
                    step="1" min="10" placeholder="1000"/>
           </mat-form-field>
-          <mat-form-field fxFlex>
+          <mat-form-field class="flex-1">
             <mat-label>{{ 'gateway.rpc.tries' | translate }}</mat-label>
             <input matInput formControlName="tries" type="number"
                    step="1" min="1" placeholder="3"/>
@@ -266,26 +266,25 @@
           <mat-label>{{ 'gateway.rpc.valueExpression' | translate }}</mat-label>
           <input matInput formControlName="valueExpression" placeholder="${params}"/>
         </mat-form-field>
-        <fieldset class="fields border" fxLayout="column" fxLayoutGap="10px" formArrayName="httpHeaders">
+        <fieldset class="fields border flex flex-col gap-2.5" formArrayName="httpHeaders">
           <span class="fields-label">{{ 'gateway.rpc.httpHeaders' | translate }}</span>
-          <div class="border" fxLayout="column" fxLayoutGap="10px" *ngIf="getFormArrayControls('httpHeaders').length">
-            <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center">
-              <span fxFlex class="title">{{ 'gateway.rpc.header-name' | translate }}</span>
-              <span fxFlex class="title">{{ 'gateway.rpc.value' | translate }}</span>
-              <span fxFlex="30px"></span>
+          <div class="border flex flex-col gap-2.5" *ngIf="getFormArrayControls('httpHeaders').length">
+            <div class="flex flex-row justify-center items-center gap-2.5">
+              <span class="title flex-1">{{ 'gateway.rpc.header-name' | translate }}</span>
+              <span class="title flex-1">{{ 'gateway.rpc.value' | translate }}</span>
+              <span style="width: 30px"></span>
             </div>
             <mat-divider></mat-divider>
-            <div fxFlex fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center"
+            <div class="flex flex-row justify-center items-center gap-2.5"
                  *ngFor="let control of getFormArrayControls('httpHeaders'); let i = index">
               <ng-container [formGroupName]="i">
-                <mat-form-field appearance="outline" fxFlex>
+                <mat-form-field appearance="outline" class="flex-1">
                   <input matInput formControlName="headerName"/>
                 </mat-form-field>
-                <mat-form-field appearance="outline" fxFlex>
+                <mat-form-field appearance="outline" class="flex-1">
                   <input matInput formControlName="value" placeholder="application/json"/>
                 </mat-form-field>
-                <mat-icon style="cursor:pointer;"
-                          fxFlex="30px"
+                <mat-icon style="cursor:pointer; width: 30px"
                           (click)="removeHTTPHeader(i)"
                           matTooltip="{{ 'gateway.rpc.remove' | translate }}">delete
                 </mat-icon>
@@ -293,7 +292,7 @@
             </div>
           </div>
           <button mat-raised-button
-                  fxFlexAlign="start"
+                  class="self-start"
                   (click)="addHTTPHeader()">
             {{ 'gateway.rpc.add-header' | translate }}
           </button>
@@ -305,8 +304,8 @@
           <mat-label>{{ 'gateway.rpc.methodFilter' | translate }}</mat-label>
           <input matInput formControlName="methodFilter" placeholder="echo"/>
         </mat-form-field>
-        <div fxFlex fxLayout="row" fxLayoutGap="10px">
-          <mat-form-field class="mat-block" fxFlex="33">
+        <div class="flex flex-row justify-center items-center gap-2.5">
+          <mat-form-field class="flex-[1_1_33%] max-w-4/12">
             <mat-label>{{ 'gateway.rpc.httpMethod' | translate }}</mat-label>
             <mat-select formControlName="httpMethod">
               <mat-option *ngFor="let method of hTTPMethods" [value]="method">
@@ -314,23 +313,23 @@
               </mat-option>
             </mat-select>
           </mat-form-field>
-          <mat-form-field fxFlex>
+          <mat-form-field class="flex-1">
             <mat-label>{{ 'gateway.rpc.requestUrlExpression' | translate }}</mat-label>
             <input matInput formControlName="requestUrlExpression" placeholder="http://127.0.0.1:5000/my_devices"/>
           </mat-form-field>
         </div>
-        <div fxFlex fxLayout="row" fxLayoutGap="10px">
-          <mat-form-field fxFlex="33">
+        <div class="flex flex-row justify-center items-center gap-2.5">
+          <mat-form-field class="flex-1">
             <mat-label>{{ 'gateway.rpc.responseTimeout' | translate }}</mat-label>
             <input matInput formControlName="responseTimeout" type="number"
                    step="1" min="10" placeholder="10"/>
           </mat-form-field>
-          <mat-form-field fxFlex>
+          <mat-form-field class="flex-1">
             <mat-label>{{ 'gateway.rpc.timeout' | translate }}</mat-label>
             <input matInput formControlName="timeout" type="number"
                    step="1" min="10" placeholder="10"/>
           </mat-form-field>
-          <mat-form-field fxFlex>
+          <mat-form-field class="flex-1">
             <mat-label>{{ 'gateway.rpc.tries' | translate }}</mat-label>
             <input matInput formControlName="tries" type="number"
                    step="1" min="1" placeholder="1"/>
@@ -344,26 +343,25 @@
           <mat-label>{{ 'gateway.rpc.responseValueExpression' | translate }}</mat-label>
           <input matInput formControlName="responseValueExpression" placeholder="${temp}"/>
         </mat-form-field>
-        <fieldset class="fields border" fxLayout="column" fxLayoutGap="10px" formArrayName="httpHeaders">
+        <fieldset class="fields border flex flex-col gap-2.5" formArrayName="httpHeaders">
           <span class="fields-label">{{ 'gateway.rpc.httpHeaders' | translate }}</span>
-          <div class="border" fxLayout="column" fxLayoutGap="10px" *ngIf="getFormArrayControls('httpHeaders').length">
-            <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center">
-              <span fxFlex class="title">{{ 'gateway.rpc.header-name' | translate }}</span>
-              <span fxFlex class="title">{{ 'gateway.rpc.value' | translate }}</span>
-              <span fxFlex="30px"></span>
+          <div class="border flex flex-col gap-2.5" *ngIf="getFormArrayControls('httpHeaders').length">
+            <div class="flex flex-row justify-center items-center gap-2.5">
+              <span class="title flex-1">{{ 'gateway.rpc.header-name' | translate }}</span>
+              <span class="title flex-1">{{ 'gateway.rpc.value' | translate }}</span>
+              <span style="width: 30px"></span>
             </div>
             <mat-divider></mat-divider>
-            <div fxFlex fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center"
+            <div class="flex flex-row justify-center items-center gap-2.5"
                  *ngFor="let control of getFormArrayControls('httpHeaders'); let i = index">
               <ng-container [formGroupName]="i">
-                <mat-form-field appearance="outline" fxFlex>
+                <mat-form-field appearance="outline" class="flex-1">
                   <input matInput formControlName="headerName" placeholder="{{ 'gateway.rpc.set' | translate }}"/>
                 </mat-form-field>
-                <mat-form-field appearance="outline" fxFlex>
+                <mat-form-field appearance="outline" class="flex-1">
                   <input matInput formControlName="value"/>
                 </mat-form-field>
-                <mat-icon style="cursor:pointer;"
-                          fxFlex="30px"
+                <mat-icon style="cursor:pointer;width:30px"
                           (click)="removeHTTPHeader(i)"
                           matTooltip="{{ 'gateway.rpc.remove' | translate }}">delete
                 </mat-icon>
@@ -371,7 +369,7 @@
             </div>
           </div>
           <button mat-raised-button
-                  fxFlexAlign="start"
+                  class="self-start"
                   (click)="addHTTPHeader()">
             {{ 'gateway.rpc.add-header' | translate }}
           </button>
@@ -382,7 +380,7 @@
           <mat-label>{{ 'gateway.statistics.command' | translate }}</mat-label>
           <input matInput formControlName="command"/>
         </mat-form-field>
-        <mat-form-field fxFlex>
+        <mat-form-field>
           <mat-label>{{ 'widget-config.datasource-parameters' | translate }}</mat-label>
           <input matInput formControlName="params" type="JSON" tb-json-to-string/>
           <mat-icon class="material-icons-outlined" aria-hidden="false" aria-label="help-icon"
@@ -397,7 +395,7 @@
       </ng-template>
     </ng-container>
   </ng-template>
-  <div class="template-actions" fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="10px">
+  <div class="template-actions flex flex-row justify-end gap-2.5">
     <button mat-raised-button
             (click)="save()"
             [disabled]="commandForm.invalid">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.html
index 41a655d93e..2f9b380e4a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" fxFlex [ngClass]="{'border': isConnector}">
-  <div fxLayout="row" fxLayout.lt-sm="column" class="command-form" fxLayoutGap="10px" [formGroup]="commandForm">
+<div class="flex flex-1 flex-col" [class]="{'border': isConnector}">
+  <div class="command-form flex flex-row lt-sm:flex-col gap-2.5" [formGroup]="commandForm">
     <ng-container *ngIf="!isConnector; else connectorForm">
       <mat-form-field>
         <mat-label>{{ 'gateway.statistics.command' | translate }}</mat-label>
@@ -26,7 +26,7 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field fxFlex>
+      <mat-form-field class="flex-1">
         <mat-label>{{ 'gateway.statistics.timeout-ms' | translate }}</mat-label>
         <input matInput formControlName="time" type="number" min="1"/>
         <mat-error *ngIf="commandForm.get('time').hasError('min')">
@@ -49,14 +49,14 @@
         (saveTemplate)="saveTemplate()"
       />
       <ng-template #updatedParameters>
-        <div fxLayout="column" class="rpc-parameters">
+        <div class="flex flex-col rpc-parameters">
           <div class="mat-subtitle-1 tb-form-panel-title">{{ 'gateway.rpc.title' | translate: {type: gatewayConnectorDefaultTypesTranslates.get(connectorType)} }}</div>
           <ng-container [ngSwitch]="connectorType">
             <tb-modbus-rpc-parameters *ngSwitchCase="ConnectorType.MODBUS" formControlName="params"/>
             <tb-mqtt-rpc-parameters *ngSwitchCase="ConnectorType.MQTT" formControlName="params"/>
             <tb-opc-rpc-parameters *ngSwitchCase="ConnectorType.OPCUA" formControlName="params"/>
           </ng-container>
-          <div class="template-actions" fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="10px">
+          <div class="flex flex-1 fex-row justify-end items-center template-actions gap-2.5">
             <button mat-raised-button
                     (click)="saveTemplate()"
                     [disabled]="commandForm.get('params').invalid">
@@ -75,7 +75,7 @@
   </div>
   <section class="result-block" [formGroup]="commandForm">
     <span>{{ 'gateway.rpc-command-result' | translate }}
-      <div *ngIf="resultTime" class="result-time" fxFlex fxLayout="row" fxLayoutAlign="center center">
+      <div *ngIf="resultTime" class="flex flex-1 flex-row justify-center items-center result-time">
         <mat-icon class="material-icons">schedule</mat-icon>
         <span>{{ resultTime | date: 'yyyy/MM/dd HH:mm:ss' }}</span>
       </div>
@@ -83,6 +83,6 @@
     <tb-json-content [contentType]="contentTypes.JSON" readonly="true" formControlName="result"></tb-json-content>
   </section>
 </div>
-<tb-gateway-service-rpc-connector-templates fxFlex="30" *ngIf="isConnector" class="border" [rpcTemplates]="templates"
+<tb-gateway-service-rpc-connector-templates *ngIf="isConnector" class="border" [rpcTemplates]="templates"
                                             [ctx]="ctx" [connectorType]="connectorType" (useTemplate)="useTemplate($event)">
 </tb-gateway-service-rpc-connector-templates>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.scss
index b8424dc068..5a2f3b6d3e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.scss
@@ -30,6 +30,11 @@
     margin-left: 10px;
   }
 
+  tb-gateway-service-rpc-connector-templates {
+    flex: 1 1 30%;
+    max-width: 30%;
+  }
+
 
   .command-form {
     flex-wrap: nowrap;
@@ -83,5 +88,6 @@
     box-shadow: 0 0 0 0 rgb(0 0 0 / 20%), 0 0 0 0 rgb(0 0 0 / 14%), 0 0 0 0 rgb(0 0 0 / 12%);
     border: solid 1px #e0e0e0;
     border-radius: 4px;
+
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.html
index 5dbc0aee00..dd51d8a4e8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="statistics-container" fxLayout="row" fxLayout.lt-md="column">
+<div class="statistics-container flex flex-row lt-md:flex-col">
   <mat-card [formGroup]="statisticForm" *ngIf="!general">
     <mat-form-field class="mat-block" subscriptSizing="dynamic">
       <mat-label>{{ 'gateway.statistics.statistic' | translate }}</mat-label>
@@ -42,9 +42,9 @@
       <input matInput [value]="commandObj.command" disabled>
     </mat-form-field>
   </mat-card>
-  <div class="chart-box" fxLayout="column">
-    <div class="chart-container" #statisticChart [fxShow]="isNumericData"></div>
-    <table [fxShow]="!isNumericData" mat-table [dataSource]="dataSource"
+  <div class="chart-box flex flex-col">
+    <div class="chart-container" #statisticChart [class.!hidden]="!isNumericData" ></div>
+    <table [class.!hidden]="isNumericData" mat-table [dataSource]="dataSource"
            matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()"
            matSortDisableClear>
       <ng-container matColumnDef="0">
@@ -67,12 +67,10 @@
       <mat-row class="mat-row-select"
                *matRowDef="let row; columns: displayedColumns;"></mat-row>
     </table>
-    <span [fxShow]="dataSource.data.length === 0 && !isNumericData"
-          fxLayoutAlign="center center"
-          class="no-data-found">{{ 'attribute.no-telemetry-text' | translate }}</span>
-    <div fxFlex class="legend" fxLayout="row" fxLayoutAlign="center center" [fxShow]="isNumericData">
-      <div class="legend-keys" *ngFor="let legendKey of legendData?.keys" fxLayout="row"
-           fxLayoutAlign="center center">
+    <span [class.!hidden]="dataSource.data.length !== 0 || isNumericData"
+          class="no-data-found justify-center items-start">{{ 'attribute.no-telemetry-text' | translate }}</span>
+    <div class="legend flex flex-1 flex-row justify-center items-center" [class.!hidden]="!isNumericData">
+      <div class="legend-keys flex flex-row justify-center items-center" *ngFor="let legendKey of legendData?.keys">
         <span class="legend-line" [style.background-color]="legendKey.dataKey.color"></span>
         <div class="legend-label"
              (click)="onLegendKeyHiddenChange(legendKey.dataIndex)"
diff --git a/ui-ngx/tailwind.config.js b/ui-ngx/tailwind.config.js
index 6135c8fc9a..7e4f60e81b 100644
--- a/ui-ngx/tailwind.config.js
+++ b/ui-ngx/tailwind.config.js
@@ -84,7 +84,8 @@ module.exports = {
         full: '1 1 100%'
       },
       gap: {
-        '0.75': '0.1875rem'
+        '0.75': '0.1875rem',
+        '1.25': '0.3125rem'
       },
       minWidth: {
         '25': '6.25rem',

From 51320e159ed17d877f241d66f5f8313b8d6d1a45 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Mon, 14 Oct 2024 18:01:15 +0300
Subject: [PATCH 13/34] Flex layout replacements. Switch to tailwind.css.

---
 .../battery-level-basic-config.component.html |   8 +-
 ...uid-level-card-basic-config.component.html |  21 ++--
 ...ignal-strength-basic-config.component.html |  23 ++--
 .../status-widget-basic-config.component.html |   6 +-
 .../single-switch-basic-config.component.html |  42 +++----
 .../rpc/slider-basic-config.component.html    |  42 +++----
 .../scada-symbol-basic-config.component.html  |   6 +-
 ...peed-direction-basic-config.component.html |  22 ++--
 .../embed-dashboard-dialog.component.html     |   8 +-
 .../alarm/alarms-table-widget.component.html  | 110 +++++++++---------
 .../lib/display-columns-panel.component.html  |   2 +-
 .../lib/edges-overview-widget.component.html  |   8 +-
 .../widget/lib/flot-widget.component.html     |   8 +-
 .../widget/lib/flot-widget.component.ts       |   8 +-
 .../lib/json-input-widget.component.html      |  11 +-
 .../lib/multiple-input-widget.component.html  |   6 +-
 .../lib/photo-camera-input.component.html     |  28 ++---
 .../widget/lib/qrcode-widget.component.html   |   4 +-
 .../timeseries-table-widget.component.html    |  96 ++++++++-------
 19 files changed, 233 insertions(+), 226 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html
index f5a5693a63..ce0f79eda7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html
@@ -52,7 +52,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -71,11 +71,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.battery-level.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="batteryLevelWidgetConfigForm.get('iconColor').value"
@@ -91,7 +91,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValue">
         {{ 'widgets.battery-level.value' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row justify-start items-center gap-2">
         <mat-chip-listbox formControlName="autoScaleValueSize">
           <mat-chip-option [value]="true">{{ 'widgets.battery-level.auto-scale' | translate }}</mat-chip-option>
         </mat-chip-listbox>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
index a3bfce9d5d..63da3f10fe 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
@@ -53,7 +53,7 @@
         <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="levelCardWidgetConfigForm.get('iconColor').value"
@@ -63,7 +63,7 @@
         </tb-color-input>
       </div>
     </div>
-    <div fxFlex fxLayout="column" class="tb-form-row space-between">
+    <div class="tb-form-row space-between flex-1 flex-col">
       <div class="tb-flex row space-between align-center no-gap fill-width">
         <div class="fixed-title-width"  translate>widgets.liquid-level-card.shape</div>
         <tb-toggle-select formControlName="tankSelectionType">
@@ -73,7 +73,7 @@
         </tb-toggle-select>
       </div>
       <tb-image-cards-select #shapesImageCardsSelect
-                             [fxShow]="levelCardWidgetConfigForm.get('tankSelectionType').value === DataSourceType.static"
+                             [class.!hidden]="levelCardWidgetConfigForm.get('tankSelectionType').value !== DataSourceType.static"
                              rowHeight="1:1"
                              [cols]="{columns: 5,
                                     breakpoints: {
@@ -154,7 +154,7 @@
         </ng-template>
       </div>
     </div>
-    <div class="tb-form-row column-xs" [fxShow]="volumeInput">
+    <div class="tb-form-row column-xs" [class.!hidden]="!volumeInput">
       <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume</div>
       <div class="tb-flex row flex-start align-center">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
@@ -186,7 +186,7 @@
         </ng-template>
       </div>
     </div>
-    <div class="tb-form-row space-between column-xs" [fxShow]="volumeInput">
+    <div class="tb-form-row space-between column-xs" [class.!hidden]="!volumeInput">
       <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume-units</div>
       <div class="tb-flex row flex-start align-center">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
@@ -230,7 +230,7 @@
         <mat-form-field style="max-width: 40%;" appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput formControlName="decimals" type="number"
                  min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-          <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+          <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
         </mat-form-field>
         <tb-font-settings formControlName="valueFont"
                           [previewText]="valuePreviewFn">
@@ -254,10 +254,9 @@
     <mat-expansion-panel class="tb-settings"
       [expanded]="levelCardWidgetConfigForm.get('showTooltip').value"
       [disabled]="!levelCardWidgetConfigForm.get('showTooltip').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex justify-center items-stretch" formControlName="showTooltip" (click)="$event.stopPropagation()">
             {{ 'widget-config.tooltip' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -275,7 +274,7 @@
             <mat-form-field style="width: 40%;" appearance="outline" class="flex number" subscriptSizing="dynamic">
               <input matInput formControlName="tooltipLevelDecimals" type="number" min="0"
                      max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-              <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+              <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
             </mat-form-field>
             <tb-font-settings formControlName="tooltipLevelFont"
                               [previewText]="tooltipValuePreviewFn">
@@ -289,7 +288,7 @@
             {{ 'widgets.value-card.date' | translate }}
           </mat-slide-toggle>
           <div class="tb-flex row flex-start align-center">
-            <tb-date-format-select fxFlex formControlName="tooltipDateFormat"></tb-date-format-select>
+            <tb-date-format-select class="flex-1" formControlName="tooltipDateFormat"></tb-date-format-select>
             <tb-font-settings formControlName="tooltipDateFont"
                               [previewText]="datePreviewFn">
             </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html
index 0e8475aacf..edfb39e4ed 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html
@@ -46,7 +46,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -65,12 +65,12 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.signal-strength.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize"
                  placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="signalStrengthWidgetConfigForm.get('iconColor').value"
@@ -86,8 +86,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showDate">
         {{ 'widgets.signal-strength.date' | translate }}
       </mat-slide-toggle>
-      <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-date-format-select fxFlex formControlName="dateFormat"></tb-date-format-select>
+      <div class="gt-xs:flex-1 flex flex-row justify-start items-center gap-2">
+        <tb-date-format-select class="flex-1" formControlName="dateFormat"></tb-date-format-select>
         <tb-font-settings formControlName="dateFont"
                           [previewText]="datePreviewFn">
         </tb-font-settings>
@@ -113,10 +113,9 @@
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="signalStrengthWidgetConfigForm.get('showTooltip').value"
                          [disabled]="!signalStrengthWidgetConfigForm.get('showTooltip').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex justify-center items-stretch" formControlName="showTooltip" (click)="$event.stopPropagation()">
             {{ 'widget-config.tooltip' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -126,12 +125,12 @@
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipValue">
             {{ 'tooltip.value' | translate }}
           </mat-slide-toggle>
-          <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex-1 flex flex-row justify-start items-center gap-2">
             <tb-unit-input class="flex" formControlName="units"></tb-unit-input>
             <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
               <input matInput formControlName="decimals" type="number" min="0" max="15" step="1"
                      placeholder="{{ 'widget-config.set' | translate }}">
-              <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+              <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
             </mat-form-field>
             <tb-font-settings formControlName="tooltipValueFont"
                               [previewText]="tooltipValuePreviewFn">
@@ -146,8 +145,8 @@
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipDate">
             {{ 'tooltip.date' | translate }}
           </mat-slide-toggle>
-          <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-            <tb-date-format-select fxFlex formControlName="tooltipDateFormat"></tb-date-format-select>
+          <div class="gt-xs:flex-1 flex flex-row justify-start items-center gap-2">
+            <tb-date-format-select class="flex-1" formControlName="tooltipDateFormat"></tb-date-format-select>
             <tb-font-settings formControlName="tooltipDateFont"
                               [previewText]="tooltipDatePreviewFn">
             </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html
index e43dd1665a..d901901126 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html
@@ -21,7 +21,7 @@
     <div class="tb-form-panel-title" translate>widgets.status-widget.behavior</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}" translate>widgets.rpc-state.initial-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.initial-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     trueLabel="{{ 'widgets.rpc-state.on' | translate }}"
@@ -34,7 +34,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
@@ -61,7 +61,7 @@
     </tb-image-cards-select>
   </div>
   <div class="tb-form-panel">
-    <div fxLayout="row" fxLayoutAlign="space-between center">
+    <div class="flex flex-row justify-between items-center">
       <div class="tb-form-panel-title" translate>widget-config.card-style</div>
       <tb-toggle-select [(ngModel)]="cardStyleMode"
                         [ngModelOptions]="{ standalone: true }">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
index 9fa2d1b1a5..59cdfa56eb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
@@ -21,7 +21,7 @@
     <div class="tb-form-panel-title" translate>widgets.single-switch.behavior</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}" translate>widgets.rpc-state.initial-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.initial-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     trueLabel="{{ 'widgets.rpc-state.on' | translate }}"
@@ -34,7 +34,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.turn-on-hint' | translate}}" translate>widgets.rpc-state.turn-on</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.turn-on' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -43,7 +43,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.turn-off-hint' | translate}}" translate>widgets.rpc-state.turn-off</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.turn-off' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -52,7 +52,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
@@ -86,7 +86,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
         {{ 'widgets.single-switch.label' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -103,11 +103,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.single-switch.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="singleSwitchWidgetConfigForm.get('iconColor').value?.color"
@@ -121,22 +121,22 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.single-switch.switch-color' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutAlign.lt-sm="space-between center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row justify-start items-center gap-3 lt-sm:justify-between lt-sm:items-center">
+        <div class="flex flex-row justify-start items-center gap-2">
           <div translate>widgets.single-switch.on</div>
           <tb-color-input asBoxInput
                           formControlName="switchColorOn">
           </tb-color-input>
         </div>
-        <mat-divider vertical fxHide.lt-sm></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-divider vertical class="lt-sm:!hidden"></mat-divider>
+        <div class="flex flex-row justify-start items-center gap-2">
           <div translate>widgets.single-switch.off</div>
           <tb-color-input asBoxInput
                           formControlName="switchColorOff">
           </tb-color-input>
         </div>
-        <mat-divider vertical fxHide.lt-sm></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-divider vertical class="lt-sm:!hidden"></mat-divider>
+        <div class="flex flex-row justify-start items-center gap-2">
           <div translate>widgets.single-switch.disabled</div>
           <tb-color-input asBoxInput
                           formControlName="switchColorDisabled">
@@ -146,22 +146,22 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.single-switch.tumbler-color' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutAlign.lt-sm="space-between center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row justify-start items-center gap-3 lt-sm:justify-between lt-sm:items-center">
+        <div class="flex flex-row justify-start items-center gap-2">
           <div translate>widgets.single-switch.on</div>
           <tb-color-input asBoxInput
                           formControlName="tumblerColorOn">
           </tb-color-input>
         </div>
-        <mat-divider vertical fxHide.lt-sm></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-divider vertical class="lt-sm:!hidden"></mat-divider>
+        <div class="flex flex-row justify-start items-center gap-2">
           <div translate>widgets.single-switch.off</div>
           <tb-color-input asBoxInput
                           formControlName="tumblerColorOff">
           </tb-color-input>
         </div>
-        <mat-divider vertical fxHide.lt-sm></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-divider vertical class="lt-sm:!hidden"></mat-divider>
+        <div class="flex flex-row justify-start items-center gap-2">
           <div translate>widgets.single-switch.disabled</div>
           <tb-color-input asBoxInput
                           formControlName="tumblerColorDisabled">
@@ -173,7 +173,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showOnLabel">
         {{ 'widgets.single-switch.on-label' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="onLabel" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -190,7 +190,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showOffLabel">
         {{ 'widgets.single-switch.off-label' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="offLabel" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
index 5dd62493ec..400ae2dc24 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
@@ -21,7 +21,7 @@
     <div class="tb-form-panel-title" translate>widgets.slider.behavior</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.slider.initial-value-hint' | translate}}" translate>widgets.slider.initial-value</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.slider.initial-value' | translate }}"
                                     [valueType]="valueType.DOUBLE"
                                     [aliasController]="aliasController"
@@ -31,7 +31,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.slider.on-value-change-hint' | translate}}" translate>widgets.slider.on-value-change</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.slider.on-value-change' | translate }}"
                                     [valueType]="valueType.DOUBLE"
                                     [aliasController]="aliasController"
@@ -41,7 +41,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
@@ -75,7 +75,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -94,11 +94,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.slider.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="sliderWidgetConfigForm.get('iconColor').value"
@@ -114,11 +114,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValue">
         {{ 'widgets.slider.value' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <tb-unit-input class="flex" formControlName="valueUnits"></tb-unit-input>
         <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput formControlName="valueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-          <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+          <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
         </mat-form-field>
         <tb-font-settings formControlName="valueFont"
                           [previewText]="valuePreviewFn">
@@ -131,7 +131,7 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.slider.range' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row justify-start items-center gap-2">
         <div class="tb-small-label" translate>widgets.slider.min</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="tickMin" type="number" placeholder="{{ 'widget-config.set' | translate }}">
@@ -146,7 +146,7 @@
       <mat-slide-toggle class="mat-slide" formControlName="showTicks">
         {{ 'widgets.slider.range-ticks' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row justify-start items-center gap-2">
         <tb-font-settings formControlName="ticksFont"
                           previewText="100">
         </tb-font-settings>
@@ -160,7 +160,7 @@
       <mat-slide-toggle class="mat-slide" formControlName="showTickMarks">
         {{ 'widgets.slider.tick-marks' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row justify-start items-center gap-2">
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="tickMarksCount" type="number" min="2"
                  step="1" placeholder="{{ 'widget-config.set' | translate }}">
@@ -172,15 +172,15 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.slider.colors' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row justify-start items-center gap-3">
+        <div class="flex flex-row justify-start items-center gap-2">
           <div translate>widgets.slider.main</div>
           <tb-color-input asBoxInput
                           formControlName="mainColor">
           </tb-color-input>
         </div>
         <mat-divider vertical></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row justify-start items-center gap-2">
           <div translate>widgets.slider.background</div>
           <tb-color-input asBoxInput
                           formControlName="backgroundColor">
@@ -190,15 +190,15 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.rpc-state.disabled-state' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row justify-start items-center gap-3">
+        <div class="flex flex-row justify-start items-center gap-2">
           <div translate>widgets.slider.main</div>
           <tb-color-input asBoxInput
                           formControlName="mainColorDisabled">
           </tb-color-input>
         </div>
         <mat-divider vertical></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row justify-start items-center gap-2">
           <div translate>widgets.slider.background</div>
           <tb-color-input asBoxInput
                           formControlName="backgroundColorDisabled">
@@ -211,11 +211,11 @@
       <div class="fixed-title-width">
         {{ 'widgets.slider.left-icon' | translate }}
       </div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="leftIconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="leftIconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="leftIconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  [color]="sliderWidgetConfigForm.get('leftIconColor').value"
                                  formControlName="leftIcon">
@@ -230,11 +230,11 @@
       <div class="fixed-title-width">
         {{ 'widgets.slider.right-icon' | translate }}
       </div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="rightIconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="rightIconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="rightIconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  [color]="sliderWidgetConfigForm.get('rightIconColor').value"
                                  formControlName="rightIcon">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.html
index e9c6f0967e..56a2e0b588 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.html
@@ -34,7 +34,7 @@
         <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
           {{ 'widget-config.title' | translate }}
         </mat-slide-toggle>
-        <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex-1 flex flex-row justify-start items-center gap-2">
           <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
             <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
           </mat-form-field>
@@ -53,11 +53,11 @@
         <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
           {{ 'widget-config.card-icon' | translate }}
         </mat-slide-toggle>
-        <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex-1 flex flex-row justify-start items-center gap-2">
           <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
             <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
           </mat-form-field>
-          <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+          <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
           <tb-material-icon-select asBoxInput
                                    iconClearButton
                                    [color]="scadaSymbolWidgetConfigForm.get('iconColor').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html
index 0dd9a2ebd9..d9f71aad72 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html
@@ -30,8 +30,8 @@
     <div class="tb-form-panel-title" translate>widgets.wind-speed-direction.values</div>
     <div class="tb-form-row">
       <div class="fixed-title-width tb-required" translate>widgets.wind-speed-direction.wind-direction</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-data-key-row fxFlex
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+        <tb-data-key-row class="flex-1"
                          formControlName="windDirectionKey"
                          required
                          [datasourceType]="datasource?.type"
@@ -55,8 +55,8 @@
     </div>
     <div class="tb-form-row column-xs">
       <div class="fixed-title-width" translate>widgets.wind-speed-direction.center-value</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-data-key-row fxFlex
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+        <tb-data-key-row class="flex-1"
                          formControlName="centerValueKey"
                          [datasourceType]="datasource?.type"
                          [deviceId]="datasource?.deviceId"
@@ -94,7 +94,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -113,11 +113,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.wind-speed-direction.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex-1 flex flex-row justify-start items-center gap-2">
         <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="windSpeedDirectionWidgetConfigForm.get('iconColor').value"
@@ -153,8 +153,8 @@
     </div>
     <div class="tb-form-row space-between">
       <div>{{ 'widgets.wind-speed-direction.major-ticks' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-font-settings [fxShow]="majorTicksFontEnabled"
+      <div class="flex flex-row justify-start items-center gap-2">
+        <tb-font-settings [class.!hidden]="!majorTicksFontEnabled"
                           formControlName="majorTicksFont"
                           [initialPreviewStyle]="{ color: windSpeedDirectionWidgetConfigForm.get('majorTicksColor').value }"
                           [autoScale]="true"
@@ -167,8 +167,8 @@
     </div>
     <div class="tb-form-row space-between">
       <div>{{ 'widgets.wind-speed-direction.minor-ticks' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-font-settings [fxShow]="minorTicksFontEnabled"
+      <div class="flex flex-row justify-start items-center gap-2">
+        <tb-font-settings [class.!hidden]="!minorTicksFontEnabled"
                           formControlName="minorTicksFont"
                           [initialPreviewStyle]="{ color: windSpeedDirectionWidgetConfigForm.get('minorTicksColor').value }"
                           [autoScale]="true"
diff --git a/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.html
index 4e1a2ba038..934052caa3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.html
@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<div class="dashboard-state-dialog" [ngStyle]="dialogStyle" fxLayout="column">
+<div class="dashboard-state-dialog flex flex-col" [style]="dialogStyle">
   <mat-toolbar color="primary">
     <h2>{{title}}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button (click)="close()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
@@ -26,11 +26,11 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-  <div class="dashboard-state-dialog-content" mat-dialog-content fxFlex fxLayout="column" style="padding: 8px;">
+  <div class="dashboard-state-dialog-content flex-1 flex flex-col" mat-dialog-content style="padding: 8px;">
     <tb-dashboard-page [embedded]="true" [syncStateWithQueryParam]="false" [hideToolbar]="hideToolbar"
                        [currentState]="state" [dashboard]="dashboard" [parentDashboard]="parentDashboard" style="width: 100%; height: 100%;"></tb-dashboard-page>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.html
index b8fc11aed5..01d29edc96 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.html
@@ -16,15 +16,15 @@
 
 -->
 <div class="tb-table-widget tb-absolute-fill">
-  <div fxFlex fxLayout="column" class="tb-absolute-fill">
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode && alarmsDatasource.selection.isEmpty()">
+  <div class="tb-absolute-fill flex-1 flex flex-col">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode || !alarmsDatasource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
         <button mat-icon-button
                 matTooltip="{{ 'action.search' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>search</mat-icon>
         </button>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>&nbsp;</mat-label>
           <input #searchInput matInput
                  [formControl]="textSearch"
@@ -37,13 +37,13 @@
         </button>
       </div>
     </mat-toolbar>
-    <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [fxShow]="!alarmsDatasource.selection.isEmpty()">
+    <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [class.!hidden]="alarmsDatasource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
                 <span>
                   {{ translate.get('alarm.selected-alarms',
                   {count: alarmsDatasource.selection.selected.length}) | async }}
                 </span>
-        <span fxFlex></span>
+        <span class="flex-1"></span>
         <button *ngIf="allowAcknowledgment"
                 mat-icon-button [disabled]="isLoading$ | async"
                 matTooltip="{{ 'alarm.acknowledge' | translate }}"
@@ -60,7 +60,7 @@
         </button>
       </div>
     </mat-toolbar>
-    <div fxFlex class="table-container">
+    <div class="table-container flex-1">
       <table mat-table [dataSource]="alarmsDatasource" [trackBy]="trackByAlarmId"
                  matSort [matSortActive]="sortOrderProperty" [matSortDirection]="pageLinkSortDirection()" matSortDisableClear>
         <ng-container matColumnDef="select" sticky>
@@ -78,16 +78,16 @@
           </mat-cell>
         </ng-container>
         <ng-container [matColumnDef]="column.def" *ngFor="let column of columns; let $index = index; trackBy: trackByColumnDef;">
-          <mat-header-cell [ngStyle]="headerStyle(column)" *matHeaderCellDef mat-sort-header [disabled]="isSorting(column)">
+          <mat-header-cell [style]="headerStyle(column)" *matHeaderCellDef mat-sort-header [disabled]="isSorting(column)">
             {{ column.title }}
           </mat-header-cell>
           <mat-cell *matCellDef="let alarm; let row = index"
-                    [ngStyle]="cellStyle(alarm, column, row)"
+                    [style]="cellStyle(alarm, column, row)"
                     (click)="onCellClick($event, alarm, column, $index)"
                     [class.tb-pointer]="columnHasCellClick($index)">
             <span [innerHTML]="cellContent(alarm, column, row)"></span>
             <ng-container *ngIf="column.entityKey.key === 'assignee'">
-              <span class="assignee-cell" fxLayout="row" fxLayoutAlign="start center">
+              <span class="assignee-cell flex flex-row justify-start items-center">
                 <span *ngIf="alarm.assigneeId && checkAssigneeHasName(alarm.assignee); else unassigned"
                       class="assigned-container">
                   <span class="user-avatar" [style.backgroundColor]="getAvatarBgColor(alarm.assignee)">
@@ -120,60 +120,64 @@
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="actions" [stickyEnd]="enableStickyAction">
-          <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (alarmsDatasource.countCellButtonAction  * 48) + 'px',
-                                                                maxWidth: (alarmsDatasource.countCellButtonAction * 48) + 'px',
-                                                                width: (alarmsDatasource.countCellButtonAction * 48) + 'px' }">
+          <mat-header-cell *matHeaderCellDef>
+            <ng-container *ngIf="alarmsDatasource.countCellButtonAction">
+              <div class="gt-md:!hidden" style="min-width: 48px;">
+              </div>
+              <div class="lt-lg:!hidden"
+                   [style.min-width]="(alarmsDatasource.countCellButtonAction * 48) + 'px'">
+              </div>
+            </ng-container>
           </mat-header-cell>
-          <mat-cell *matCellDef="let alarm; let row = index" [style]="rowStyle(alarm, row)" [ngStyle.gt-md]="{ minWidth: (alarmsDatasource.countCellButtonAction * 48) + 'px',
-                                                               maxWidth: (alarmsDatasource.countCellButtonAction * 48) + 'px',
-                                                               width: (alarmsDatasource.countCellButtonAction * 48) + 'px' }">
-            <div [fxHide]="showCellActionsMenu" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
-              <ng-container *ngFor="let actionDescriptor of alarm.actionCellButtons; trackBy: trackByActionCellDescriptionId">
-                <span *ngIf="!actionDescriptor.icon" style="width: 48px;"></span>
-                <button mat-icon-button [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)"
-                        *ngIf="actionDescriptor.icon"
-                        matTooltip="{{ actionDescriptor.displayName }}"
-                        matTooltipPosition="above"
-                        (click)="onActionButtonClick($event, alarm, actionDescriptor)">
-                  <mat-icon>{{actionDescriptor.icon}}</mat-icon>
-                </button>
-              </ng-container>
-            </div>
-            <div fxHide [fxShow.lt-lg]="showCellActionsMenu" *ngIf="alarm.hasActions">
-              <button mat-icon-button
-                      (click)="$event.stopPropagation(); ctx.detectChanges();"
-                      [matMenuTriggerFor]="cellActionsMenu">
-                <mat-icon class="material-icons">more_vert</mat-icon>
-              </button>
-              <mat-menu #cellActionsMenu="matMenu" xPosition="before">
+          <mat-cell *matCellDef="let alarm; let row = index" [style]="rowStyle(alarm, row)">
+            <ng-container *ngIf="alarmsDatasource.countCellButtonAction">
+              <div [class.lt-lg:!hidden]="showCellActionsMenu && alarmsDatasource.countCellButtonAction !== 1" class="flex flex-row justify-end items-stretch"
+                   [style.min-width]="(alarmsDatasource.countCellButtonAction * 48) + 'px'">
                 <ng-container *ngFor="let actionDescriptor of alarm.actionCellButtons; trackBy: trackByActionCellDescriptionId">
-                  <button mat-menu-item *ngIf="actionDescriptor.icon"
-                          [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)"
+                  <span *ngIf="!actionDescriptor.icon" style="width: 48px;"></span>
+                  <button mat-icon-button [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)"
+                          *ngIf="actionDescriptor.icon"
+                          matTooltip="{{ actionDescriptor.displayName }}"
+                          matTooltipPosition="above"
                           (click)="onActionButtonClick($event, alarm, actionDescriptor)">
-                    <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
-                    <span>{{ actionDescriptor.displayName }}</span>
+                    <mat-icon>{{actionDescriptor.icon}}</mat-icon>
                   </button>
                 </ng-container>
-              </mat-menu>
-            </div>
+              </div>
+              <div [class.!hidden]="!showCellActionsMenu || alarmsDatasource.countCellButtonAction === 1" class="gt-md:!hidden" *ngIf="alarm.hasActions">
+                <button mat-icon-button
+                        (click)="$event.stopPropagation(); ctx.detectChanges();"
+                        [matMenuTriggerFor]="cellActionsMenu">
+                  <mat-icon class="material-icons">more_vert</mat-icon>
+                </button>
+                <mat-menu #cellActionsMenu="matMenu" xPosition="before">
+                  <ng-container *ngFor="let actionDescriptor of alarm.actionCellButtons; trackBy: trackByActionCellDescriptionId">
+                    <button mat-menu-item *ngIf="actionDescriptor.icon"
+                            [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)"
+                            (click)="onActionButtonClick($event, alarm, actionDescriptor)">
+                      <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
+                      <span>{{ actionDescriptor.displayName }}</span>
+                    </button>
+                  </ng-container>
+                </mat-menu>
+              </div>
+            </ng-container>
           </mat-cell>
         </ng-container>
-        <mat-header-row [ngClass]="{'mat-row-select': enableSelection}" *matHeaderRowDef="displayedColumns; sticky: enableStickyHeader"></mat-header-row>
-        <mat-row [ngClass]="{'mat-row-select': enableSelection,
-                             'mat-selected': alarmsDatasource.isSelected(alarm),
-                             'tb-current-entity': alarmsDatasource.isCurrentAlarm(alarm),
-                             'invisible': alarmsDatasource.dataLoading,
-                             'tb-pointer': hasRowAction}"
+        <mat-header-row [class.mat-row-select]="enableSelection" *matHeaderRowDef="displayedColumns; sticky: enableStickyHeader"></mat-header-row>
+        <mat-row [class.mat-row-select]="enableSelection"
+                 [class.mat-selected]="alarmsDatasource.isSelected(alarm)"
+                 [class.tb-current-entity]="alarmsDatasource.isCurrentAlarm(alarm)"
+                 [class.invisible]="alarmsDatasource.dataLoading"
+                 [class.tb-pointer]="hasRowAction"
                  *matRowDef="let alarm; columns: displayedColumns; let row = index"
-                 [ngStyle]="rowStyle(alarm, row)"
+                 [style]="rowStyle(alarm, row)"
                  (click)="onRowClick($event, alarm)"></mat-row>
       </table>
-      <span [fxShow]="(alarmsDatasource.isEmpty() | async) && !alarmsDatasource.dataLoading"
-            fxLayoutAlign="center center"
-            class="no-data-found">{{ noDataDisplayMessageText }}</span>
-      <span [fxShow]="alarmsDatasource.dataLoading"
-            fxLayoutAlign="center center"
-            class="no-data-found">{{ 'common.loading' | translate }}</span>
+      <span [class.!hidden]="(alarmsDatasource.isEmpty() | async) === false || alarmsDatasource.dataLoading"
+            class="no-data-found flex justify-center items-center">{{ noDataDisplayMessageText }}</span>
+      <span [class.!hidden]="!alarmsDatasource.dataLoading"
+            class="no-data-found flex justify-center items-center" >{{ 'common.loading' | translate }}</span>
     </div>
     <mat-divider *ngIf="displayPagination"></mat-divider>
     <mat-paginator *ngIf="displayPagination"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.html
index c0902af28e..8096a4d864 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" class="mat-content mat-padding">
+<div class="mat-content mat-padding flex flex-col">
   <label class="tb-title" translate>entity.columns-to-display</label>
   <mat-checkbox [(ngModel)]="column.display" *ngFor="let column of (columns | selectableColumns)"
                 (ngModelChange)="update()">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/edges-overview-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/edges-overview-widget.component.html
index abbf62f973..cc3cdcc01d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/edges-overview-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/edges-overview-widget.component.html
@@ -16,10 +16,10 @@
 
 -->
 <div class="tb-edges-overview tb-absolute-fill" tb-toast toastTarget="{{ toastTargetId }}">
-  <div fxFlex fxLayout="column" class="tb-absolute-fill">
-    <span class="mat-subheader" *ngIf="customerTitle" fxLayout="row">{{ customerTitle }}</span>
-    <span class="mat-subheader" *ngIf="!edgeIsDatasource" fxLayout="row" translate>edge.widget-datasource-error</span>
-    <div fxFlex class="tb-entities-nav-tree-panel">
+  <div class="tb-absolute-fill flex-1 flex flex-col">
+    <span class="mat-subheader flex flex-row" *ngIf="customerTitle">{{ customerTitle }}</span>
+    <span class="mat-subheader flex flex-row" *ngIf="!edgeIsDatasource" translate>edge.widget-datasource-error</span>
+    <div class="tb-entities-nav-tree-panel flex-1">
       <tb-nav-tree
         [loadNodes]="loadNodes"
       ></tb-nav-tree>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.html
index 82ca0430cb..ebb7c6b5e1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.html
@@ -15,16 +15,16 @@
     limitations under the License.
 
 -->
-<div class="tb-absolute-fill" [fxLayout]="legendContainerLayoutType">
+<div class="tb-absolute-fill flex" [class]="legendContainerLayoutType">
   <tb-legend *ngIf="displayLegend && isLegendFirst"
-             [ngStyle]="legendStyle"
+             [style]="legendStyle"
              [legendConfig]="legendConfig"
              [legendData]="legendData"
              (legendKeyHiddenChange)="onLegendKeyHiddenChange($event)">
   </tb-legend>
-  <div fxFlex #flotElement></div>
+  <div class="flex-1" #flotElement></div>
   <tb-legend *ngIf="displayLegend && !isLegendFirst"
-             [ngStyle]="legendStyle"
+             [style]="legendStyle"
              [legendConfig]="legendConfig"
              [legendData]="legendData"
              (legendKeyHiddenChange)="onLegendKeyHiddenChange($event)">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.ts
index 389deee749..ec40f4b069 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.ts
@@ -46,7 +46,7 @@ export class FlotWidgetComponent implements OnInit {
   legendConfig: LegendConfig;
   legendData: LegendData;
   isLegendFirst: boolean;
-  legendContainerLayoutType: string;
+  legendContainerLayoutType: 'flex-row' | 'flex-col';
   legendStyle: {[klass: string]: any};
 
   public settings: TbFlotSettings;
@@ -70,7 +70,7 @@ export class FlotWidgetComponent implements OnInit {
     this.displayLegend = isDefinedAndNotNull(this.settings.showLegend) ? this.settings.showLegend
       : false;
 
-    this.legendContainerLayoutType = 'column';
+    this.legendContainerLayoutType = 'flex-col';
 
     if (this.displayLegend) {
       this.legendConfig = this.settings.legendConfig || defaultLegendConfig(widgetType.timeseries);
@@ -84,10 +84,10 @@ export class FlotWidgetComponent implements OnInit {
       }
       if (this.legendConfig.position === LegendPosition.top ||
         this.legendConfig.position === LegendPosition.bottom) {
-        this.legendContainerLayoutType = 'column';
+        this.legendContainerLayoutType = 'flex-col';
         this.isLegendFirst = this.legendConfig.position === LegendPosition.top;
       } else {
-        this.legendContainerLayoutType = 'row';
+        this.legendContainerLayoutType = 'flex-row';
         this.isLegendFirst = this.legendConfig.position === LegendPosition.left;
       }
       switch (this.legendConfig.position) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.html
index b24ad37ede..1b354c09fd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.html
@@ -17,12 +17,11 @@
 -->
 <div class="tb-json-input" tb-toast toastTarget="{{ toastTargetId }}">
   <form *ngIf="attributeUpdateFormGroup"
-        fxLayout="column"
-        class="tb-json-input__form"
+        class="tb-json-input__form flex flex-col"
         [formGroup]="attributeUpdateFormGroup"
         (ngSubmit)="save()">
-      <div fxLayout="column" fxLayoutGap="10px" fxFlex *ngIf="datasourceDetected && !errorMessage; else errorContainer">
-        <fieldset fxFlex>
+      <div class="flex-1 flex flex-col gap-2.5" *ngIf="datasourceDetected && !errorMessage; else errorContainer">
+        <fieldset class="flex-1">
           <tb-json-object-edit
             [editorStyle]="{minHeight: '100px'}"
             fillHeight="true"
@@ -33,7 +32,7 @@
             (focusout)="isFocused = false;"
           ></tb-json-object-edit>
         </fieldset>
-        <div class="tb-json-input__actions" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="20px">
+        <div class="tb-json-input__actions flex flex-row justify-end items-center gap-5">
           <button mat-button color="primary"
                   type="button"
                   [disabled]="!attributeUpdateFormGroup.dirty"
@@ -51,7 +50,7 @@
       </div>
 
     <ng-template #errorContainer>
-      <div class="tb-json-input__error" fxLayout="column" fxLayoutAlign="center center" fxFlex>
+      <div class="tb-json-input__error flex-1 flex flex-col justify-center items-center">
         {{ errorMessage | translate }}
       </div>
     </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
index 7f10c4d211..51d4ec22b1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
@@ -20,7 +20,7 @@
       tb-toast toastTarget="{{ toastTargetId }}"
       (ngSubmit)="saveForm()" novalidate autocomplete="off">
   <div class="tb-multiple-input-container" *ngIf="entityDetected && isAllParametersValid">
-    <fieldset *ngFor="let source of sources" [ngClass]="{'fields-group': settings.showGroupTitle}">
+    <fieldset *ngFor="let source of sources" [class.fields-group]="settings.showGroupTitle">
       <legend class="group-title" *ngIf="settings.showGroupTitle">{{ getGroupTitle(source.datasource) }}
       </legend>
       <div class="tb-multiple-input-layout"
@@ -198,10 +198,10 @@
     </button>
   </div>
   <div class="tb-multiple-input--errors-container" *ngIf="(!entityDetected || !isAllParametersValid) && datasourceDetected">
-    <div class="tb-multiple-input--errors-container__error" [fxHide]="entityDetected">
+    <div class="tb-multiple-input--errors-container__error" [class.!hidden]="entityDetected">
       {{ 'widgets.input-widgets.no-entity-selected' | translate }}
     </div>
-    <div class="tb-multiple-input--errors-container__error" [fxShow]="entityDetected && !isAllParametersValid">
+    <div class="tb-multiple-input--errors-container__error" [class.!hidden]="!entityDetected || isAllParametersValid">
       {{ 'widgets.input-widgets.not-allowed-entity' | translate }}
     </div>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/photo-camera-input.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/photo-camera-input.component.html
index fb90c12bd5..f5d51880c2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/photo-camera-input.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/photo-camera-input.component.html
@@ -15,22 +15,22 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" fxLayoutAlign="center center" class="tb-web-camera" tb-fullscreen [fullscreen]="isShowCamera">
+<div class="tb-web-camera flex flex-col justify-center items-center" tb-fullscreen [fullscreen]="isShowCamera">
   <div *ngIf="isEntityDetected && dataKeyDetected && isCameraSupport && isProtocolHttps" class="image-container">
-    <div [fxShow]="!isShowCamera" fxLayout="column" fxLayoutAlign="space-between center" fxFlexFill>
-      <div class="tb-web-camera__last-photo" fxFlex>
-        <span [fxShow]="!lastPhoto" class="tb-web-camera__last-photo_text" translate>widgets.input-widgets.no-image</span>
-        <img [fxShow]="lastPhoto" class="tb-web-camera__last-photo_img" [src]="lastPhoto" alt="last photo"/>
+    <div [class.!hidden]="isShowCamera" class="flex flex-col justify-between items-center w-full h-full">
+      <div class="tb-web-camera__last-photo flex-1">
+        <span [class.!hidden]="lastPhoto" class="tb-web-camera__last-photo_text" translate>widgets.input-widgets.no-image</span>
+        <img [class.!hidden]="!lastPhoto" class="tb-web-camera__last-photo_img" [src]="lastPhoto" alt="last photo"/>
       </div>
       <button mat-raised-button color="primary" (click)="takePhoto()" *ngIf="!textMessage">
         {{ "widgets.input-widgets.take-photo" | translate }}
       </button>
     </div>
-    <div [fxShow]="isShowCamera" fxLayout="column" fxLayoutAlign="center center" class="camera-container">
-      <div class="camera" [fxShow]="!isPreviewPhoto">
+    <div [class.!hidden]="!isShowCamera" class="camera-container flex flex-col justify-center items-center">
+      <div class="camera" [class.!hidden]="isPreviewPhoto">
         <video autoplay muted playsinline class="camera-stream" #videoStream></video>
-        <div class="camera-controls" fxLayout="row wrap" fxLayoutAlign="space-between end">
-          <div fxFlex></div>
+        <div class="camera-controls flex flex-row flex-wrap justify-between items-end">
+          <div class="flex-1"></div>
           <button mat-mini-fab color="primary" (click)="switchWebCamera()" [disabled]="singleDevice">
             <mat-icon>switch_camera</mat-icon>
           </button>
@@ -40,21 +40,21 @@
           <button mat-mini-fab color="primary" (click)="closeCamera()">
             <mat-icon>close</mat-icon>
           </button>
-          <div fxFlex></div>
+          <div class="flex-1"></div>
         </div>
       </div>
-      <div class="camera" [fxShow]="isPreviewPhoto">
+      <div class="camera" [class.!hidden]="!isPreviewPhoto">
         <img alt="preview photo" class="camera-stream" [src]="previewPhoto">
         <canvas #canvas style="display:none;"></canvas>
-        <div class="camera-controls" fxLayout="row" fxLayoutAlign="space-between end">
-          <div fxFlex></div>
+        <div class="camera-controls flex flex-row justify-between items-end">
+          <div class="flex-1"></div>
           <button mat-fab color="primary" [disabled]="updatePhoto" (click)="cancelPhoto()">
             <mat-icon>close</mat-icon>
           </button>
           <button mat-fab color="accent" [disabled]="updatePhoto" (click)="savePhoto()">
             <mat-icon>check</mat-icon>
           </button>
-          <div fxFlex></div>
+          <div class="flex-1"></div>
         </div>
       </div>
     </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.html
index d60b36a5dc..66981fc62f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" fxLayoutAlign="center center" style="width: 100%; height: 100%;">
-  <canvas fxFlex #canvas [ngStyle]="{display: qrCodeText && !invalidQrCodeText ? 'block' : 'none'}"></canvas>
+<div class="flex flex-col justify-center items-center w-full h-full">
+  <canvas class="flex-1" #canvas [class.!hidden]="!qrCodeText || invalidQrCodeText"></canvas>
   <div *ngIf="!qrCodeText && !invalidQrCodeText" style="text-align: center" translate>entity.no-data</div>
   <div *ngIf="invalidQrCodeText" style="text-align: center" translate>widgets.invalid-qr-code-text</div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
index 98d1090f4d..06ad7e4144 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
@@ -16,15 +16,15 @@
 
 -->
 <div class="tb-table-widget tb-absolute-fill">
-  <div fxFlex fxLayout="column" class="tb-absolute-fill">
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode">
+  <div class="tb-absolute-fill flex-1 flex flex-col">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode">
       <div class="mat-toolbar-tools">
         <button mat-icon-button
                 matTooltip="{{ 'action.search' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>search</mat-icon>
         </button>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>&nbsp;</mat-label>
           <input #searchInput matInput
                  [formControl]="textSearch"
@@ -37,78 +37,84 @@
         </button>
       </div>
     </mat-toolbar>
-    <mat-tab-group [ngClass]="{'tb-headless': sources.length === 1}" fxFlex
+    <mat-tab-group [class.tb-headless]="sources.length === 1"
+                   class="flex-1"
                    mat-stretch-tabs="false"
                    [(selectedIndex)]="sourceIndex" (selectedIndexChange)="onSourceIndexChanged()">
       <mat-tab *ngFor="let source of sources; trackBy: trackBySourcesIndex; let index = index;" [label]="getTabLabel(source)">
         <ng-template [ngIf]="isActiveTab(index)">
-          <div fxFlex class="table-container">
+          <div class="table-container flex-1">
             <table mat-table [dataSource]="source.timeseriesDatasource" [trackBy]="trackByRowTimestamp"
                        matSort [matSortActive]="source.pageLink.sortOrder.property" [matSortDirection]="source.pageLink.sortDirection()" matSortDisableClear>
               <ng-container *ngIf="showTimestamp" [matColumnDef]="'0'">
                 <mat-header-cell *matHeaderCellDef mat-sort-header>Timestamp</mat-header-cell>
                 <mat-cell *matCellDef="let row; let rowIndex = index"
                           [innerHTML]="cellContent(source, null, 0, row, row[0], rowIndex)"
-                          [ngStyle]="cellStyle(source, null, 0, row, row[0], rowIndex)">
+                          [style]="cellStyle(source, null, 0, row, row[0], rowIndex)">
                 </mat-cell>
               </ng-container>
               <ng-container [matColumnDef]="h.index + ''" *ngFor="let h of source.header; trackBy: trackByColumnIndex;">
                 <mat-header-cell *matHeaderCellDef mat-sort-header [disabled]="!h.sortable"> {{ h.dataKey.label }} </mat-header-cell>
                 <mat-cell *matCellDef="let row; let rowIndex = index"
                           [innerHTML]="cellContent(source, h, h.index, row, row[h.index], rowIndex)"
-                          [ngStyle]="cellStyle(source, h, h.index, row, row[h.index], rowIndex)">
+                          [style]="cellStyle(source, h, h.index, row, row[h.index], rowIndex)">
                 </mat-cell>
               </ng-container>
               <ng-container matColumnDef="actions" [stickyEnd]="enableStickyAction">
-                <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (source.timeseriesDatasource.countCellButtonAction * 40) + 'px',
-                                                                      maxWidth: (source.timeseriesDatasource.countCellButtonAction * 40) + 'px',
-                                                                      width: (source.timeseriesDatasource.countCellButtonAction * 40) + 'px' }">
+                <mat-header-cell *matHeaderCellDef>
+                  <ng-container *ngIf="source.timeseriesDatasource.countCellButtonAction">
+                    <div class="gt-md:!hidden" style="min-width: 40px;">
+                    </div>
+                    <div class="lt-lg:!hidden"
+                         [style.min-width]="(source.timeseriesDatasource.countCellButtonAction * 40) + 'px'">
+                    </div>
+                  </ng-container>
                 </mat-header-cell>
-                <mat-cell *matCellDef="let row; let rowIndex = index" [style]="rowStyle(source, row, rowIndex)" [ngStyle.gt-md]="{ minWidth: (source.timeseriesDatasource.countCellButtonAction * 40) + 'px',
-                                                                   maxWidth: (source.timeseriesDatasource.countCellButtonAction * 40) + 'px',
-                                                                   width: (source.timeseriesDatasource.countCellButtonAction * 40) + 'px' }">
-                  <div [fxHide]="showCellActionsMenu && source.timeseriesDatasource.countCellButtonAction !== 1" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
-                    <ng-container *ngFor="let actionDescriptor of row.actionCellButtons; trackBy: trackByActionCellDescriptionId">
-                      <span *ngIf="!actionDescriptor.icon" style="width: 40px;"></span>
-                      <button *ngIf="actionDescriptor.icon"
-                              class="tb-mat-40"
-                              mat-icon-button [disabled]="isLoading$ | async"
-                              matTooltip="{{ actionDescriptor.displayName }}"
-                              matTooltipPosition="above"
-                              (click)="onActionButtonClick($event, row, actionDescriptor)">
-                        <tb-icon>{{actionDescriptor.icon}}</tb-icon>
-                      </button>
-                    </ng-container>
-                  </div>
-                  <div fxHide [fxShow.lt-lg]="showCellActionsMenu && source.timeseriesDatasource.countCellButtonAction !== 1" *ngIf="row.hasActions">
-                    <button mat-icon-button
-                            class="tb-mat-40"
-                            (click)="$event.stopPropagation(); ctx.detectChanges();"
-                            [matMenuTriggerFor]="cellActionsMenu">
-                      <mat-icon class="material-icons">more_vert</mat-icon>
-                    </button>
-                    <mat-menu #cellActionsMenu="matMenu" xPosition="before">
+                <mat-cell *matCellDef="let row; let rowIndex = index" [style]="rowStyle(source, row, rowIndex)">
+                  <ng-container *ngIf="source.timeseriesDatasource.countCellButtonAction">
+                    <div [class.lt-lg:!hidden]="showCellActionsMenu && source.timeseriesDatasource.countCellButtonAction !== 1" class="flex flex-row justify-end items-stretch"
+                         [style.min-width]="(source.timeseriesDatasource.countCellButtonAction * 40) + 'px'">
                       <ng-container *ngFor="let actionDescriptor of row.actionCellButtons; trackBy: trackByActionCellDescriptionId">
-                        <button mat-menu-item *ngIf="actionDescriptor.icon"
-                                [disabled]="isLoading$ | async"
+                        <span *ngIf="!actionDescriptor.icon" style="width: 40px;"></span>
+                        <button *ngIf="actionDescriptor.icon"
+                                class="tb-mat-40"
+                                mat-icon-button [disabled]="isLoading$ | async"
+                                matTooltip="{{ actionDescriptor.displayName }}"
+                                matTooltipPosition="above"
                                 (click)="onActionButtonClick($event, row, actionDescriptor)">
-                          <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
-                          <span>{{ actionDescriptor.displayName }}</span>
+                          <tb-icon>{{actionDescriptor.icon}}</tb-icon>
                         </button>
                       </ng-container>
-                    </mat-menu>
-                  </div>
+                    </div>
+                    <div [class.!hidden]="!showCellActionsMenu || source.timeseriesDatasource.countCellButtonAction === 1" class="gt-md:!hidden" *ngIf="row.hasActions">
+                      <button mat-icon-button
+                              class="tb-mat-40"
+                              (click)="$event.stopPropagation(); ctx.detectChanges();"
+                              [matMenuTriggerFor]="cellActionsMenu">
+                        <mat-icon class="material-icons">more_vert</mat-icon>
+                      </button>
+                      <mat-menu #cellActionsMenu="matMenu" xPosition="before">
+                        <ng-container *ngFor="let actionDescriptor of row.actionCellButtons; trackBy: trackByActionCellDescriptionId">
+                          <button mat-menu-item *ngIf="actionDescriptor.icon"
+                                  [disabled]="isLoading$ | async"
+                                  (click)="onActionButtonClick($event, row, actionDescriptor)">
+                            <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
+                            <span>{{ actionDescriptor.displayName }}</span>
+                          </button>
+                        </ng-container>
+                      </mat-menu>
+                    </div>
+                  </ng-container>
                 </mat-cell>
               </ng-container>
               <mat-header-row *matHeaderRowDef="source.displayedColumns; sticky: enableStickyHeader"></mat-header-row>
-              <mat-row [ngClass]="{'tb-pointer': hasRowAction}"
+              <mat-row [class.tb-pointer]="hasRowAction"
                        *matRowDef="let row; columns: source.displayedColumns; let rowIndex = index"
-                       [ngStyle]="rowStyle(source, row, rowIndex)"
+                       [style]="rowStyle(source, row, rowIndex)"
                        (click)="onRowClick($event, row)"></mat-row>
             </table>
-            <span [fxShow]="source.timeseriesDatasource.isEmpty() | async"
-                  fxLayoutAlign="center center"
-                  class="no-data-found">{{ noDataDisplayMessageText }}</span>
+            <span [class.!hidden]="(source.timeseriesDatasource.isEmpty() | async) === false"
+                  class="no-data-found flex justify-center items-center">{{ noDataDisplayMessageText }}</span>
           </div>
           <mat-divider *ngIf="displayPagination"></mat-divider>
           <mat-paginator *ngIf="displayPagination"

From ae432ec9c5543b3029a1f3fdeee8e81197422e13 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Tue, 15 Oct 2024 11:51:08 +0300
Subject: [PATCH 14/34] UI: Remove flex layout in map widgets settings

---
 .../map/circle-settings.component.html        | 62 +++++++++----------
 .../map/common-map-settings.component.html    | 40 ++++++------
 ...atasources-key-autocomplete.component.html |  2 +-
 ...oogle-map-provider-settings.component.html |  4 +-
 .../here-map-provider-settings.component.html | 11 ++--
 ...image-map-provider-settings.component.html |  6 +-
 .../map/map-editor-settings.component.html    |  7 +--
 .../map/map-provider-settings.component.html  | 12 ++--
 .../settings/map/map-settings.component.html  |  4 +-
 .../marker-clustering-settings.component.html | 26 ++++----
 .../map/markers-settings.component.html       | 62 +++++++++----------
 ...treet-map-provider-settings.component.html | 11 ++--
 .../map/polygon-settings.component.html       | 62 +++++++++----------
 .../map/route-map-settings.component.html     |  6 +-
 ...ncent-map-provider-settings.component.html |  4 +-
 ...p-animation-common-settings.component.html | 27 ++++----
 ...p-animation-marker-settings.component.html | 30 +++++----
 ...rip-animation-path-settings.component.html | 42 ++++++-------
 ...ip-animation-point-settings.component.html | 27 ++++----
 19 files changed, 208 insertions(+), 237 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/circle-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/circle-settings.component.html
index c159ec4684..d719c84e9c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/circle-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/circle-settings.component.html
@@ -19,20 +19,18 @@
   <fieldset class="fields-group fields-group-slider">
     <legend class="group-title" translate>widgets.maps.circle-settings</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="circleSettingsFormGroup.get('showCircle').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle formControlName="showCircle" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle formControlName="showCircle" (click)="$event.stopPropagation()">
             {{ 'widgets.maps.show-circle' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <tb-datasources-key-autocomplete fxFlex
-                                         required
+        <tb-datasources-key-autocomplete required
                                          [datasources]="widget?.config?.datasources"
                                          label="widgets.maps.circle-key-name"
                                          formControlName="circleKeyName">
@@ -43,14 +41,13 @@
         <fieldset class="fields-group fields-group-slider">
           <legend class="group-title" translate>widgets.maps.circle-label</legend>
           <mat-expansion-panel class="tb-settings" [expanded]="circleSettingsFormGroup.get('showCircleLabel').value">
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex-wrap">
               <mat-panel-title>
-                <mat-slide-toggle formControlName="showCircleLabel" (click)="$event.stopPropagation()"
-                                  fxLayoutAlign="center">
+                <mat-slide-toggle formControlName="showCircleLabel" (click)="$event.stopPropagation()">
                   {{ 'widgets.maps.show-circle-label' | translate }}
                 </mat-slide-toggle>
               </mat-panel-title>
-              <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+              <mat-panel-description class="justify-end xs:!hidden" translate>
                 widget-config.advanced-settings
               </mat-panel-description>
             </mat-expansion-panel-header>
@@ -58,12 +55,12 @@
               <mat-slide-toggle formControlName="useCircleLabelFunction" class="slide-block">
                 {{ 'widgets.maps.use-circle-label-function' | translate }}
               </mat-slide-toggle>
-              <tb-html [fxShow]="!circleSettingsFormGroup.get('useCircleLabelFunction').value"
+              <tb-html [class.!hidden]="circleSettingsFormGroup.get('useCircleLabelFunction').value"
                        formControlName="circleLabel"
                        minHeight="100px"
                        label="{{ 'widgets.maps.circle-label-pattern' | translate }}">
               </tb-html>
-              <tb-js-func [fxShow]="circleSettingsFormGroup.get('useCircleLabelFunction').value"
+              <tb-js-func [class.!hidden]="!circleSettingsFormGroup.get('useCircleLabelFunction').value"
                           formControlName="circleLabelFunction"
                           [globalVariables]="functionScopeVariables"
                           [functionArgs]="['data', 'dsData', 'dsIndex']"
@@ -76,19 +73,18 @@
         <fieldset class="fields-group fields-group-slider">
           <legend class="group-title" translate>widgets.maps.circle-tooltip</legend>
           <mat-expansion-panel class="tb-settings" [expanded]="circleSettingsFormGroup.get('showCircleTooltip').value">
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex-wrap">
               <mat-panel-title>
-                <mat-slide-toggle formControlName="showCircleTooltip" (click)="$event.stopPropagation()"
-                                  fxLayoutAlign="center">
+                <mat-slide-toggle formControlName="showCircleTooltip" (click)="$event.stopPropagation()">
                   {{ 'widgets.maps.show-circle-tooltip' | translate }}
                 </mat-slide-toggle>
               </mat-panel-title>
-              <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+              <mat-panel-description class="justify-end xs:!hidden" translate>
                 widget-config.advanced-settings
               </mat-panel-description>
             </mat-expansion-panel-header>
             <ng-template matExpansionPanelContent>
-              <mat-form-field fxFlex class="mat-block">
+              <mat-form-field class="flex-1">
                 <mat-label translate>widgets.maps.show-tooltip-action</mat-label>
                 <mat-select required formControlName="showCircleTooltipAction">
                   <mat-option *ngFor="let action of showTooltipActions" [value]="action">
@@ -102,12 +98,12 @@
               <mat-slide-toggle formControlName="useCircleTooltipFunction" class="slide-block">
                 {{ 'widgets.maps.use-circle-tooltip-function' | translate }}
               </mat-slide-toggle>
-              <tb-html [fxShow]="!circleSettingsFormGroup.get('useCircleTooltipFunction').value"
+              <tb-html [class.!hidden]="circleSettingsFormGroup.get('useCircleTooltipFunction').value"
                        formControlName="circleTooltipPattern"
                        minHeight="100px"
                        label="{{ 'widgets.maps.circle-tooltip-pattern' | translate }}">
               </tb-html>
-              <tb-js-func [fxShow]="circleSettingsFormGroup.get('useCircleTooltipFunction').value"
+              <tb-js-func [class.!hidden]="!circleSettingsFormGroup.get('useCircleTooltipFunction').value"
                           formControlName="circleTooltipFunction"
                           [globalVariables]="functionScopeVariables"
                           [functionArgs]="['data', 'dsData', 'dsIndex']"
@@ -119,27 +115,26 @@
         </fieldset>
         <fieldset class="fields-group">
           <legend class="group-title" translate>widgets.maps.circle-fill-color</legend>
-          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
+          <section class="!flex flex-col gt-xs:flex-row gt-xs:gap-2">
             <tb-color-input
-              fxFlex
+              class="flex-1"
               formControlName="circleFillColor"
               icon="format_color_fill"
               label="{{ 'widgets.maps.circle-fill-color' | translate }}" openOnInput colorClearButton>
             </tb-color-input>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.circle-fill-color-opacity</mat-label>
               <input matInput type="number" min="0" max="1" formControlName="circleFillColorOpacity">
             </mat-form-field>
           </section>
           <mat-expansion-panel class="tb-settings" [expanded]="circleSettingsFormGroup.get('useCircleFillColorFunction').value">
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex-wrap">
               <mat-panel-title>
-                <mat-slide-toggle formControlName="useCircleFillColorFunction" (click)="$event.stopPropagation()"
-                                  fxLayoutAlign="center">
+                <mat-slide-toggle formControlName="useCircleFillColorFunction" (click)="$event.stopPropagation()">
                   {{ 'widgets.maps.use-circle-fill-color-function' | translate }}
                 </mat-slide-toggle>
               </mat-panel-title>
-              <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+              <mat-panel-description class="justify-end xs:!hidden" translate>
                 widget-config.advanced-settings
               </mat-panel-description>
             </mat-expansion-panel-header>
@@ -155,31 +150,30 @@
         </fieldset>
         <fieldset class="fields-group">
           <legend class="group-title" translate>widgets.maps.circle-stroke</legend>
-          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
+          <section class="!flex flex-col gt-xs:flex-row gt-xs:gap-2">
             <tb-color-input
-              fxFlex
+              class="flex-1"
               formControlName="circleStrokeColor"
               icon="format_color_fill"
               label="{{ 'widgets.maps.stroke-color' | translate }}" openOnInput colorClearButton>
             </tb-color-input>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.stroke-opacity</mat-label>
               <input matInput type="number" min="0" max="1" formControlName="circleStrokeOpacity">
             </mat-form-field>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.stroke-weight</mat-label>
               <input matInput type="number" min="0" formControlName="circleStrokeWeight">
             </mat-form-field>
           </section>
           <mat-expansion-panel class="tb-settings" [expanded]="circleSettingsFormGroup.get('useCircleStrokeColorFunction').value">
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex-wrap">
               <mat-panel-title>
-                <mat-slide-toggle formControlName="useCircleStrokeColorFunction" (click)="$event.stopPropagation()"
-                                  fxLayoutAlign="center">
+                <mat-slide-toggle formControlName="useCircleStrokeColorFunction" (click)="$event.stopPropagation()">
                   {{ 'widgets.maps.use-circle-stroke-color-function' | translate }}
                 </mat-slide-toggle>
               </mat-panel-title>
-              <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+              <mat-panel-description class="justify-end xs:!hidden" translate>
                 widget-config.advanced-settings
               </mat-panel-description>
             </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/common-map-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/common-map-settings.component.html
index baca5a60c7..3f9a83d819 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/common-map-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/common-map-settings.component.html
@@ -18,30 +18,30 @@
 <section class="tb-widget-settings" [formGroup]="commonMapSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.maps.common-map-settings</legend>
-    <section  fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-      <tb-datasources-key-autocomplete fxFlex
-                                       [fxShow]="provider === mapProvider.image"
+    <section class="!flex flex-col gt-xs:flex-row gt-xs:gap-2">
+      <tb-datasources-key-autocomplete class="flex-1"
+                                       [class.!hidden]="provider !== mapProvider.image"
                                        required
                                        [datasources]="widget?.config?.datasources"
                                        label="widgets.maps.x-pos-key-name"
                                        formControlName="xPosKeyName">
       </tb-datasources-key-autocomplete>
-      <tb-datasources-key-autocomplete fxFlex
-                                       [fxShow]="provider === mapProvider.image"
+      <tb-datasources-key-autocomplete class="flex-1"
+                                       [class.!hidden]="provider !== mapProvider.image"
                                        required
                                        [datasources]="widget?.config?.datasources"
                                        label="widgets.maps.y-pos-key-name"
                                        formControlName="yPosKeyName">
       </tb-datasources-key-autocomplete>
-      <tb-datasources-key-autocomplete fxFlex
-                                       [fxShow]="provider !== mapProvider.image"
+      <tb-datasources-key-autocomplete class="flex-1"
+                                       [class.!hidden]="provider === mapProvider.image"
                                        required
                                        [datasources]="widget?.config?.datasources"
                                        label="widgets.maps.latitude-key-name"
                                        formControlName="latKeyName">
       </tb-datasources-key-autocomplete>
-      <tb-datasources-key-autocomplete fxFlex
-                                       [fxShow]="provider !== mapProvider.image"
+      <tb-datasources-key-autocomplete class="flex-1"
+                                       [class.!hidden]="provider === mapProvider.image"
                                        required
                                        [datasources]="widget?.config?.datasources"
                                        label="widgets.maps.longitude-key-name"
@@ -49,24 +49,24 @@
       </tb-datasources-key-autocomplete>
     </section>
     <mat-expansion-panel class="tb-settings">
-      <mat-expansion-panel-header fxLayout="row wrap">
-        <mat-panel-description fxLayoutAlign="end center" translate>
+      <mat-expansion-panel-header class="flex-wrap">
+        <mat-panel-description class="justify-end" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <section [fxShow]="provider !== mapProvider.image" fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-          <mat-form-field fxFlex class="mat-block">
+        <section [class.!hidden]="provider === mapProvider.image" class="flex flex-row xs:flex-col gt-xs:gap-2">
+          <mat-form-field class="flex-1">
             <mat-label translate>widgets.maps.default-map-zoom-level</mat-label>
             <input matInput type="number" min="0" max="20" step="1" formControlName="defaultZoomLevel">
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="flex-1">
             <mat-label translate>widgets.maps.default-map-center-position</mat-label>
             <input matInput formControlName="defaultCenterPosition">
           </mat-form-field>
         </section>
-        <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" style="margin-bottom: 15px;">
-          <section fxFlex fxLayout="column">
+        <section class="flex flex-row xs:flex-col gt-xs:gap-2 mb-3.5">
+          <section class="flex flex-col flex-1">
             <mat-slide-toggle formControlName="disableScrollZooming" class="slide-block">
               {{ 'widgets.maps.disable-scroll-zooming' | translate }}
             </mat-slide-toggle>
@@ -76,17 +76,17 @@
             <mat-slide-toggle formControlName="disableZoomControl" class="slide-block">
               {{ 'widgets.maps.disable-zoom-control-buttons' | translate }}
             </mat-slide-toggle>
-            <mat-slide-toggle [fxShow]="provider !== mapProvider.image" formControlName="fitMapBounds" class="slide-block">
+            <mat-slide-toggle [class.!hidden]="provider === mapProvider.image" formControlName="fitMapBounds" class="slide-block">
               {{ 'widgets.maps.fit-map-bounds' | translate }}
             </mat-slide-toggle>
           </section>
-          <section fxFlex fxLayout="column">
-            <mat-slide-toggle [fxShow]="provider !== mapProvider.image" formControlName="useDefaultCenterPosition" class="slide-block">
+          <section class="flex-1" [class.!hidden]="provider === mapProvider.image">
+            <mat-slide-toggle formControlName="useDefaultCenterPosition" class="slide-block">
               {{ 'widgets.maps.use-default-map-center-position' | translate }}
             </mat-slide-toggle>
           </section>
         </section>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block">
           <mat-label translate>widgets.maps.entities-limit</mat-label>
           <input matInput type="number" min="1" step="1" formControlName="mapPageSize">
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/datasources-key-autocomplete.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/datasources-key-autocomplete.component.html
index eb1720c93c..610729d3fc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/datasources-key-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/datasources-key-autocomplete.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field fxFlex class="mat-block" [formGroup]="keyFormGroup">
+<mat-form-field class="mat-block" [formGroup]="keyFormGroup">
   <mat-label>{{ label | translate }}</mat-label>
   <input [required]="required" matInput
          type="text" placeholder="{{ 'entity.key-name' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/google-map-provider-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/google-map-provider-settings.component.html
index c100862f6e..b97d84e9ad 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/google-map-provider-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/google-map-provider-settings.component.html
@@ -16,11 +16,11 @@
 
 -->
 <section class="tb-widget-settings" [formGroup]="providerSettingsFormGroup">
-  <mat-form-field fxFlex class="mat-block">
+  <mat-form-field class="mat-block">
     <mat-label translate>widgets.maps.google-maps-api-key</mat-label>
     <input required matInput formControlName="gmApiKey">
   </mat-form-field>
-  <mat-form-field fxFlex class="mat-block">
+  <mat-form-field class="mat-block">
     <mat-label translate>widgets.maps.default-map-type</mat-label>
     <mat-select required formControlName="gmDefaultMapType">
       <mat-option *ngFor="let type of googleMapTypes" [value]="type">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/here-map-provider-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/here-map-provider-settings.component.html
index a0e17883ce..4b7376c8b8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/here-map-provider-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/here-map-provider-settings.component.html
@@ -16,7 +16,7 @@
 
 -->
 <section class="tb-widget-settings" [formGroup]="providerSettingsFormGroup">
-  <mat-form-field fxFlex class="mat-block">
+  <mat-form-field class="mat-block">
     <mat-label translate>widgets.maps.map-layer</mat-label>
     <mat-select required formControlName="mapProviderHere">
       <mat-option *ngFor="let provider of hereMapProviders" [value]="provider">
@@ -30,19 +30,18 @@
       <mat-slide-toggle formControlName="useV3" style="margin-bottom: 16px;">
         {{ 'widgets.maps.here-use-new-version-api-3' | translate }}
       </mat-slide-toggle>
-      <div *ngIf="!providerSettingsFormGroup.get('credentials.useV3').value; else apiKey" fxLayout="row" fxLayoutGap="8px"
-        fxLayout.xs="column" fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+      <div *ngIf="!providerSettingsFormGroup.get('credentials.useV3').value; else apiKey" class="flex flex-row xs:flex-col gt-xs:gap-2">
+        <mat-form-field class="flex-1">
           <mat-label translate>widgets.maps.here-app-id</mat-label>
           <input required matInput formControlName="app_id">
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="flex-1">
           <mat-label translate>widgets.maps.here-app-code</mat-label>
           <input required matInput formControlName="app_code">
         </mat-form-field>
       </div>
       <ng-template #apiKey>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field>
           <mat-label translate>widgets.maps.here-api-key</mat-label>
           <input required matInput formControlName="apiKey">
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/image-map-provider-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/image-map-provider-settings.component.html
index 98d97f3414..0f3f9b9b01 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/image-map-provider-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/image-map-provider-settings.component.html
@@ -21,8 +21,8 @@
   </tb-gallery-image-input>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.maps.image-map-background-from-entity-attribute</legend>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="!flex flex-col gt-xs:flex-row gt-xs:gap-2">
+      <mat-form-field class="flex-1">
         <mat-label translate>widgets.maps.image-url-source-entity-alias</mat-label>
         <input matInput type="text"
                placeholder="{{ 'entity.entity-alias' | translate }}"
@@ -44,7 +44,7 @@
           </mat-option>
         </mat-autocomplete>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="flex-1">
         <mat-label translate>widgets.maps.image-url-source-entity-attribute</mat-label>
         <input matInput type="text"
                placeholder="{{ 'entity.key-name' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-editor-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-editor-settings.component.html
index edea61f456..656e6c5d2c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-editor-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-editor-settings.component.html
@@ -25,14 +25,13 @@
       {{ 'widgets.maps.init-draggable-mode' | translate }}
     </mat-slide-toggle>
     <mat-expansion-panel class="tb-settings" [expanded]="!mapEditorSettingsFormGroup.get('hideAllControlButton').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle formControlName="hideAllControlButton" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle formControlName="hideAllControlButton" (click)="$event.stopPropagation()">
             {{ 'widgets.maps.hide-all-edit-buttons' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-provider-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-provider-settings.component.html
index 1fd1a5f249..4940d55205 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-provider-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-provider-settings.component.html
@@ -18,7 +18,7 @@
 <section class="tb-widget-settings" [formGroup]="providerSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.maps.map-provider-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field>
       <mat-label translate>widgets.maps.map-provider</mat-label>
       <mat-select required formControlName="provider">
         <mat-option *ngFor="let provider of mapProviders" [value]="provider">
@@ -27,24 +27,24 @@
       </mat-select>
     </mat-form-field>
     <tb-google-map-provider-settings
-      [fxShow]="providerSettingsFormGroup.get('provider').value === mapProvider.google"
+      [class.!hidden]="providerSettingsFormGroup.get('provider').value !== mapProvider.google"
       formControlName="googleProviderSettings">
     </tb-google-map-provider-settings>
     <tb-openstreet-map-provider-settings
-      [fxShow]="providerSettingsFormGroup.get('provider').value === mapProvider.openstreet"
+      [class.!hidden]="providerSettingsFormGroup.get('provider').value !== mapProvider.openstreet"
       formControlName="openstreetProviderSettings">
     </tb-openstreet-map-provider-settings>
     <tb-here-map-provider-settings
-      [fxShow]="providerSettingsFormGroup.get('provider').value === mapProvider.here"
+      [class.!hidden]="providerSettingsFormGroup.get('provider').value !== mapProvider.here"
       formControlName="hereProviderSettings">
     </tb-here-map-provider-settings>
     <tb-image-map-provider-settings
-      [fxShow]="providerSettingsFormGroup.get('provider').value === mapProvider.image"
+      [class.!hidden]="providerSettingsFormGroup.get('provider').value !== mapProvider.image"
       [aliasController]="aliasController"
       formControlName="imageMapProviderSettings">
     </tb-image-map-provider-settings>
     <tb-tencent-map-provider-settings
-      [fxShow]="providerSettingsFormGroup.get('provider').value === mapProvider.tencent"
+      [class.!hidden]="providerSettingsFormGroup.get('provider').value !== mapProvider.tencent"
       formControlName="tencentMapProviderSettings">
     </tb-tencent-map-provider-settings>
   </fieldset>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-settings.component.html
index 1296bbf690..9f32a11d99 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-settings.component.html
@@ -39,7 +39,7 @@
   </tb-circle-settings>
   <tb-marker-clustering-settings
     *ngIf="!routeMap"
-    [fxShow]="mapSettingsFormGroup.get('mapProviderSettings').value.provider !== mapProvider.image"
+    [class.!hidden]="mapSettingsFormGroup.get('mapProviderSettings').value.provider === mapProvider.image"
     formControlName="markerClusteringSettings">
   </tb-marker-clustering-settings>
   <tb-route-map-settings
@@ -47,7 +47,7 @@
     formControlName="routeMapSettings">
   </tb-route-map-settings>
   <tb-map-editor-settings
-    [fxShow]="displayEditorSettings()"
+    [class.!hidden]="!displayEditorSettings()"
     formControlName="mapEditorSettings">
   </tb-map-editor-settings>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/marker-clustering-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/marker-clustering-settings.component.html
index fa641582b9..4a14c4d040 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/marker-clustering-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/marker-clustering-settings.component.html
@@ -19,14 +19,13 @@
   <fieldset class="fields-group fields-group-slider">
     <legend class="group-title" translate>widgets.maps.markers-clustering-settings</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="markerClusteringSettingsFormGroup.get('useClusterMarkers').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle formControlName="useClusterMarkers" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle formControlName="useClusterMarkers" (click)="$event.stopPropagation()">
             {{ 'widgets.maps.use-map-markers-clustering' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -34,21 +33,21 @@
         <mat-slide-toggle formControlName="zoomOnClick" class="slide-block">
           {{ 'widgets.maps.zoom-on-cluster-click' | translate }}
         </mat-slide-toggle>
-        <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-          <mat-form-field fxFlex class="mat-block">
+        <section class="flex flex-row xs:flex-col gt-xs:gap-2">
+          <mat-form-field class="flex-1">
             <mat-label translate>widgets.maps.max-cluster-zoom</mat-label>
             <input matInput type="number" min="0" max="18" step="1" formControlName="maxZoom">
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="flex-1">
             <mat-label translate>widgets.maps.max-cluster-radius-pixels</mat-label>
             <input matInput type="number" min="0" formControlName="maxClusterRadius">
           </mat-form-field>
         </section>
-        <section class="flex-gap-xs" fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutGap.xs="16px">
-          <mat-slide-toggle fxFlex formControlName="animate" class="slide-block">
+        <section class="flex-gap-xs flex flex-col gt-xs:flex-row gap-2 xs:gap-4">
+          <mat-slide-toggle formControlName="animate" class="slide-block flex-1">
             {{ 'widgets.maps.cluster-zoom-animation' | translate }}
           </mat-slide-toggle>
-          <mat-slide-toggle fxFlex formControlName="showCoverageOnHover" class="slide-block">
+          <mat-slide-toggle formControlName="showCoverageOnHover" class="slide-block flex-1">
             {{ 'widgets.maps.show-markers-bounds-on-cluster-mouse-over' | translate }}
           </mat-slide-toggle>
         </section>
@@ -67,14 +66,13 @@
         <fieldset class="fields-group fields-group-slider">
           <legend class="group-title" translate>widgets.maps.clustering-markers</legend>
           <mat-expansion-panel class="tb-settings" [expanded]="markerClusteringSettingsFormGroup.get('useIconCreateFunction').value">
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex-wrap">
               <mat-panel-title>
-                <mat-slide-toggle formControlName="useIconCreateFunction" (click)="$event.stopPropagation()"
-                                  fxLayoutAlign="center">
+                <mat-slide-toggle formControlName="useIconCreateFunction" (click)="$event.stopPropagation()">
                   {{ 'widgets.maps.use-icon-create-function' | translate }}
                 </mat-slide-toggle>
               </mat-panel-title>
-              <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+              <mat-panel-description class="justify-end xs:!hidden" translate>
                 widget-config.advanced-settings
               </mat-panel-description>
             </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/markers-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/markers-settings.component.html
index aed5dfc531..bd7eca8d02 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/markers-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/markers-settings.component.html
@@ -18,17 +18,17 @@
 <section class="tb-widget-settings" [formGroup]="markersSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.maps.markers-settings</legend>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="!flex flex-row xs:flex-col gt-xs:gap-2">
+      <mat-form-field class="flex-1">
         <mat-label translate>widgets.maps.marker-offset-x</mat-label>
         <input matInput type="number" formControlName="markerOffsetX">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="flex-1">
         <mat-label translate>widgets.maps.marker-offset-y</mat-label>
         <input matInput type="number" formControlName="markerOffsetY">
       </mat-form-field>
     </section>
-    <tb-js-func [fxShow]="provider === mapProvider.image"
+    <tb-js-func [class.!hidden]="provider !== mapProvider.image"
                 formControlName="posFunction"
                 minHeight="100px"
                 [globalVariables]="functionScopeVariables"
@@ -42,14 +42,13 @@
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.maps.label</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="markersSettingsFormGroup.get('showLabel').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle formControlName="showLabel" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle formControlName="showLabel" (click)="$event.stopPropagation()">
               {{ 'widgets.maps.show-label' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
@@ -57,12 +56,12 @@
           <mat-slide-toggle formControlName="useLabelFunction" class="slide-block">
             {{ 'widgets.maps.use-label-function' | translate }}
           </mat-slide-toggle>
-          <tb-html [fxShow]="!markersSettingsFormGroup.get('useLabelFunction').value"
+          <tb-html [class.!hidden]="markersSettingsFormGroup.get('useLabelFunction').value"
                    formControlName="label"
                    minHeight="100px"
                    label="{{ 'widgets.maps.label-pattern' | translate }}">
           </tb-html>
-          <tb-js-func [fxShow]="markersSettingsFormGroup.get('useLabelFunction').value"
+          <tb-js-func [class.!hidden]="!markersSettingsFormGroup.get('useLabelFunction').value"
                       formControlName="labelFunction"
                       [globalVariables]="functionScopeVariables"
                       [functionArgs]="['data', 'dsData', 'dsIndex']"
@@ -75,19 +74,18 @@
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.maps.tooltip</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="markersSettingsFormGroup.get('showTooltip').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle formControlName="showTooltip" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle formControlName="showTooltip" (click)="$event.stopPropagation()">
               {{ 'widgets.maps.show-tooltip' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block">
             <mat-label translate>widgets.maps.show-tooltip-action</mat-label>
             <mat-select required formControlName="showTooltipAction">
               <mat-option *ngFor="let action of showTooltipActions" [value]="action">
@@ -101,24 +99,24 @@
           <mat-slide-toggle formControlName="useTooltipFunction" class="slide-block">
             {{ 'widgets.maps.use-tooltip-function' | translate }}
           </mat-slide-toggle>
-          <tb-html [fxShow]="!markersSettingsFormGroup.get('useTooltipFunction').value"
+          <tb-html [class.!hidden]="markersSettingsFormGroup.get('useTooltipFunction').value"
                    formControlName="tooltipPattern"
                    minHeight="100px"
                    label="{{ 'widgets.maps.tooltip-pattern' | translate }}">
           </tb-html>
-          <tb-js-func [fxShow]="markersSettingsFormGroup.get('useTooltipFunction').value"
+          <tb-js-func [class.!hidden]="!markersSettingsFormGroup.get('useTooltipFunction').value"
                       formControlName="tooltipFunction"
                       [globalVariables]="functionScopeVariables"
                       [functionArgs]="['data', 'dsData', 'dsIndex']"
                       functionTitle="{{ 'widgets.maps.tooltip-function' | translate }}"
                       helpId="widget/lib/map/tooltip_fn">
           </tb-js-func>
-          <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-            <mat-form-field fxFlex class="mat-block">
+          <section class="flex flex-row xs:flex-col gt-xs:gap-2">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.tooltip-offset-x</mat-label>
               <input matInput type="number" formControlName="tooltipOffsetX">
             </mat-form-field>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.tooltip-offset-y</mat-label>
               <input matInput type="number" formControlName="tooltipOffsetY">
             </mat-form-field>
@@ -134,14 +132,13 @@
         label="{{ 'widgets.maps.color' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
       <mat-expansion-panel class="tb-settings" [expanded]="markersSettingsFormGroup.get('useColorFunction').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle formControlName="useColorFunction" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle formControlName="useColorFunction" (click)="$event.stopPropagation()">
               {{ 'widgets.maps.use-color-function' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
@@ -158,35 +155,34 @@
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.maps.marker-image</legend>
       <mat-expansion-panel class="tb-settings" expanded>
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle formControlName="useMarkerImageFunction" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle formControlName="useMarkerImageFunction" (click)="$event.stopPropagation()">
               {{ 'widgets.maps.use-marker-image-function' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-          <tb-gallery-image-input [fxShow]="!markersSettingsFormGroup.get('useMarkerImageFunction').value"
+          <tb-gallery-image-input [class.!hidden]="markersSettingsFormGroup.get('useMarkerImageFunction').value"
                           label="{{ 'widgets.maps.custom-marker-image' | translate }}"
                           formControlName="markerImage">
           </tb-gallery-image-input>
-          <mat-form-field [fxShow]="!markersSettingsFormGroup.get('useMarkerImageFunction').value"
-                          fxFlex class="mat-block">
+          <mat-form-field [class.!hidden]="markersSettingsFormGroup.get('useMarkerImageFunction').value"
+                          class="mat-block">
             <mat-label translate>widgets.maps.custom-marker-image-size</mat-label>
             <input matInput type="number" min="1" formControlName="markerImageSize">
           </mat-form-field>
-          <tb-js-func [fxShow]="markersSettingsFormGroup.get('useMarkerImageFunction').value"
+          <tb-js-func [class.!hidden]="!markersSettingsFormGroup.get('useMarkerImageFunction').value"
                       formControlName="markerImageFunction"
                       [globalVariables]="functionScopeVariables"
                       [functionArgs]="['data', 'images', 'dsData', 'dsIndex']"
                       functionTitle="{{ 'widgets.maps.marker-image-function' | translate }}"
                       helpId="widget/lib/map/marker_image_fn">
           </tb-js-func>
-          <tb-multiple-gallery-image-input [fxShow]="markersSettingsFormGroup.get('useMarkerImageFunction').value"
+          <tb-multiple-gallery-image-input [class.!hidden]="!markersSettingsFormGroup.get('useMarkerImageFunction').value"
                                            label="{{ 'widgets.maps.marker-images' | translate }}"
                                            formControlName="markerImages">
           </tb-multiple-gallery-image-input>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/openstreet-map-provider-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/openstreet-map-provider-settings.component.html
index 9951c12bac..6633039e7d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/openstreet-map-provider-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/openstreet-map-provider-settings.component.html
@@ -16,7 +16,7 @@
 
 -->
 <section class="tb-widget-settings" [formGroup]="providerSettingsFormGroup">
-  <mat-form-field fxFlex class="mat-block">
+  <mat-form-field class="mat-block">
     <mat-label translate>widgets.maps.openstreet-provider</mat-label>
     <mat-select required formControlName="mapProvider">
       <mat-option *ngFor="let provider of mapProviders" [value]="provider">
@@ -25,19 +25,18 @@
     </mat-select>
   </mat-form-field>
   <mat-expansion-panel class="tb-settings" [expanded]="providerSettingsFormGroup.get('useCustomProvider').value">
-    <mat-expansion-panel-header fxLayout="row wrap">
+    <mat-expansion-panel-header class="flex-wrap">
       <mat-panel-title>
-        <mat-slide-toggle formControlName="useCustomProvider" (click)="$event.stopPropagation()"
-                          fxLayoutAlign="center">
+        <mat-slide-toggle formControlName="useCustomProvider" (click)="$event.stopPropagation()">
           {{ 'widgets.maps.use-custom-provider' | translate }}
         </mat-slide-toggle>
       </mat-panel-title>
-      <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+      <mat-panel-description class="justify-end xs:!hidden" translate>
         widget-config.advanced-settings
       </mat-panel-description>
     </mat-expansion-panel-header>
     <ng-template matExpansionPanelContent>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block">
         <mat-label translate>widgets.maps.custom-provider-tile-url</mat-label>
         <input required matInput formControlName="customProviderTileUrl">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/polygon-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/polygon-settings.component.html
index 91984ca955..136c380d1a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/polygon-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/polygon-settings.component.html
@@ -19,20 +19,18 @@
   <fieldset class="fields-group fields-group-slider">
     <legend class="group-title" translate>widgets.maps.polygon-settings</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="polygonSettingsFormGroup.get('showPolygon').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle formControlName="showPolygon" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle formControlName="showPolygon" (click)="$event.stopPropagation()">
             {{ 'widgets.maps.show-polygon' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <tb-datasources-key-autocomplete fxFlex
-                                         required
+        <tb-datasources-key-autocomplete required
                                          [datasources]="widget?.config?.datasources"
                                          label="widgets.maps.polygon-key-name"
                                          formControlName="polygonKeyName">
@@ -43,14 +41,13 @@
         <fieldset class="fields-group fields-group-slider">
           <legend class="group-title" translate>widgets.maps.polygon-label</legend>
           <mat-expansion-panel class="tb-settings" [expanded]="polygonSettingsFormGroup.get('showPolygonLabel').value">
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex-wrap">
               <mat-panel-title>
-                <mat-slide-toggle formControlName="showPolygonLabel" (click)="$event.stopPropagation()"
-                                  fxLayoutAlign="center">
+                <mat-slide-toggle formControlName="showPolygonLabel" (click)="$event.stopPropagation()">
                   {{ 'widgets.maps.show-polygon-label' | translate }}
                 </mat-slide-toggle>
               </mat-panel-title>
-              <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+              <mat-panel-description class="justify-end xs:!hidden" translate>
                 widget-config.advanced-settings
               </mat-panel-description>
             </mat-expansion-panel-header>
@@ -58,12 +55,12 @@
               <mat-slide-toggle formControlName="usePolygonLabelFunction" class="slide-block">
                 {{ 'widgets.maps.use-polygon-label-function' | translate }}
               </mat-slide-toggle>
-              <tb-html [fxShow]="!polygonSettingsFormGroup.get('usePolygonLabelFunction').value"
+              <tb-html [class.!hidden]="polygonSettingsFormGroup.get('usePolygonLabelFunction').value"
                        formControlName="polygonLabel"
                        minHeight="100px"
                        label="{{ 'widgets.maps.polygon-label-pattern' | translate }}">
               </tb-html>
-              <tb-js-func [fxShow]="polygonSettingsFormGroup.get('usePolygonLabelFunction').value"
+              <tb-js-func [class.!hidden]="!polygonSettingsFormGroup.get('usePolygonLabelFunction').value"
                           formControlName="polygonLabelFunction"
                           [globalVariables]="functionScopeVariables"
                           [functionArgs]="['data', 'dsData', 'dsIndex']"
@@ -76,19 +73,18 @@
         <fieldset class="fields-group fields-group-slider">
           <legend class="group-title" translate>widgets.maps.polygon-tooltip</legend>
           <mat-expansion-panel class="tb-settings" [expanded]="polygonSettingsFormGroup.get('showPolygonTooltip').value">
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex-wrap">
               <mat-panel-title>
-                <mat-slide-toggle formControlName="showPolygonTooltip" (click)="$event.stopPropagation()"
-                                  fxLayoutAlign="center">
+                <mat-slide-toggle formControlName="showPolygonTooltip" (click)="$event.stopPropagation()">
                   {{ 'widgets.maps.show-polygon-tooltip' | translate }}
                 </mat-slide-toggle>
               </mat-panel-title>
-              <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+              <mat-panel-description class="justify-end xs:!hidden" translate>
                 widget-config.advanced-settings
               </mat-panel-description>
             </mat-expansion-panel-header>
             <ng-template matExpansionPanelContent>
-              <mat-form-field fxFlex class="mat-block">
+              <mat-form-field class="mat-block">
                 <mat-label translate>widgets.maps.show-tooltip-action</mat-label>
                 <mat-select required formControlName="showPolygonTooltipAction">
                   <mat-option *ngFor="let action of showTooltipActions" [value]="action">
@@ -102,12 +98,12 @@
               <mat-slide-toggle formControlName="usePolygonTooltipFunction" class="slide-block">
                 {{ 'widgets.maps.use-polygon-tooltip-function' | translate }}
               </mat-slide-toggle>
-              <tb-html [fxShow]="!polygonSettingsFormGroup.get('usePolygonTooltipFunction').value"
+              <tb-html [class.!hidden]="polygonSettingsFormGroup.get('usePolygonTooltipFunction').value"
                        formControlName="polygonTooltipPattern"
                        minHeight="100px"
                        label="{{ 'widgets.maps.polygon-tooltip-pattern' | translate }}">
               </tb-html>
-              <tb-js-func [fxShow]="polygonSettingsFormGroup.get('usePolygonTooltipFunction').value"
+              <tb-js-func [class.!hidden]="!polygonSettingsFormGroup.get('usePolygonTooltipFunction').value"
                           formControlName="polygonTooltipFunction"
                           [globalVariables]="functionScopeVariables"
                           [functionArgs]="['data', 'dsData', 'dsIndex']"
@@ -119,27 +115,26 @@
         </fieldset>
         <fieldset class="fields-group">
           <legend class="group-title" translate>widgets.maps.polygon-color</legend>
-          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
+          <section class="!flex flex-col gt-xs:flex-row gt-xs:gap-2">
             <tb-color-input
-              fxFlex
+              class="flex-1"
               formControlName="polygonColor"
               icon="format_color_fill"
               label="{{ 'widgets.maps.polygon-color' | translate }}" openOnInput colorClearButton>
             </tb-color-input>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.polygon-opacity</mat-label>
               <input matInput type="number" min="0" max="1" formControlName="polygonOpacity">
             </mat-form-field>
           </section>
           <mat-expansion-panel class="tb-settings" [expanded]="polygonSettingsFormGroup.get('usePolygonColorFunction').value">
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex-wrap">
               <mat-panel-title>
-                <mat-slide-toggle formControlName="usePolygonColorFunction" (click)="$event.stopPropagation()"
-                                  fxLayoutAlign="center">
+                <mat-slide-toggle formControlName="usePolygonColorFunction" (click)="$event.stopPropagation()">
                   {{ 'widgets.maps.use-polygon-color-function' | translate }}
                 </mat-slide-toggle>
               </mat-panel-title>
-              <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+              <mat-panel-description class="justify-end xs:!hidden" translate>
                 widget-config.advanced-settings
               </mat-panel-description>
             </mat-expansion-panel-header>
@@ -155,31 +150,30 @@
         </fieldset>
         <fieldset class="fields-group">
           <legend class="group-title" translate>widgets.maps.polygon-stroke</legend>
-          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
+          <section class="!flex flex-col gt-xs:flex-row gt-xs:gap-2">
             <tb-color-input
-              fxFlex
+              class="flex-1"
               formControlName="polygonStrokeColor"
               icon="format_color_fill"
               label="{{ 'widgets.maps.stroke-color' | translate }}" openOnInput colorClearButton>
             </tb-color-input>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.stroke-opacity</mat-label>
               <input matInput type="number" min="0" max="1" formControlName="polygonStrokeOpacity">
             </mat-form-field>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.stroke-weight</mat-label>
               <input matInput type="number" min="0" formControlName="polygonStrokeWeight">
             </mat-form-field>
           </section>
           <mat-expansion-panel class="tb-settings" [expanded]="polygonSettingsFormGroup.get('usePolygonStrokeColorFunction').value">
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex-wrap">
               <mat-panel-title>
-                <mat-slide-toggle formControlName="usePolygonStrokeColorFunction" (click)="$event.stopPropagation()"
-                                  fxLayoutAlign="center">
+                <mat-slide-toggle formControlName="usePolygonStrokeColorFunction" (click)="$event.stopPropagation()">
                   {{ 'widgets.maps.use-polygon-stroke-color-function' | translate }}
                 </mat-slide-toggle>
               </mat-panel-title>
-              <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+              <mat-panel-description class="justify-end xs:!hidden" translate>
                 widget-config.advanced-settings
               </mat-panel-description>
             </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/route-map-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/route-map-settings.component.html
index 27f9b1dad7..4d4cec8cf4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/route-map-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/route-map-settings.component.html
@@ -18,12 +18,12 @@
 <section class="tb-widget-settings" [formGroup]="routeMapSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.maps.route-map-settings</legend>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="!flex flex-row xs:flex-col gt-xs:gap-2">
+      <mat-form-field class="flex-1">
         <mat-label translate>widgets.maps.stroke-weight</mat-label>
         <input matInput type="number" min="0" formControlName="strokeWeight">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="flex-1">
         <mat-label translate>widgets.maps.stroke-opacity</mat-label>
         <input matInput type="number" min="0" max="1" formControlName="strokeOpacity">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/tencent-map-provider-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/tencent-map-provider-settings.component.html
index eeeb7ae7d4..cd8f10d242 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/tencent-map-provider-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/tencent-map-provider-settings.component.html
@@ -16,11 +16,11 @@
 
 -->
 <section class="tb-widget-settings" [formGroup]="providerSettingsFormGroup">
-  <mat-form-field fxFlex class="mat-block">
+  <mat-form-field class="mat-block">
     <mat-label translate>widgets.maps.tencent-maps-api-key</mat-label>
     <input required matInput formControlName="tmApiKey">
   </mat-form-field>
-  <mat-form-field fxFlex class="mat-block">
+  <mat-form-field class="mat-block">
     <mat-label translate>widgets.maps.default-map-type</mat-label>
     <mat-select required formControlName="tmDefaultMapType">
       <mat-option *ngFor="let type of tencentMapTypes" [value]="type">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-common-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-common-settings.component.html
index f3146aa7fd..d34fde33aa 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-common-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-common-settings.component.html
@@ -18,18 +18,18 @@
 <section class="tb-widget-settings" [formGroup]="tripAnimationCommonSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.maps.trip-animation-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block">
       <mat-label translate>widgets.maps.normalization-step</mat-label>
       <input matInput type="number" min="1" formControlName="normalizationStep">
     </mat-form-field>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
-      <tb-datasources-key-autocomplete fxFlex
+    <section class="flex flex-col gt-xs:flex-row gt-xs:gap-2">
+      <tb-datasources-key-autocomplete class="flex-1"
                                        required
                                        [datasources]="widget?.config?.datasources"
                                        label="widgets.maps.latitude-key-name"
                                        formControlName="latKeyName">
       </tb-datasources-key-autocomplete>
-      <tb-datasources-key-autocomplete fxFlex
+      <tb-datasources-key-autocomplete class="flex-1"
                                        required
                                        [datasources]="widget?.config?.datasources"
                                        label="widgets.maps.longitude-key-name"
@@ -39,32 +39,31 @@
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.maps.tooltip</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="tripAnimationCommonSettingsFormGroup.get('showTooltip').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle formControlName="showTooltip" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle formControlName="showTooltip" (click)="$event.stopPropagation()">
               {{ 'widgets.maps.show-tooltip' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
+          <section class="flex flex-col gt-xs:flex-row gt-xs:gap-2">
             <tb-color-input
-              fxFlex
+              class="flex-1"
               formControlName="tooltipColor"
               icon="format_color_fill"
               label="{{ 'widgets.maps.tooltip-background-color' | translate }}" openOnInput colorClearButton>
             </tb-color-input>
             <tb-color-input
-              fxFlex
+              class="flex-1"
               formControlName="tooltipFontColor"
               icon="format_color_fill"
               label="{{ 'widgets.maps.tooltip-font-color' | translate }}" openOnInput colorClearButton>
             </tb-color-input>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.tooltip-opacity</mat-label>
               <input matInput type="number" min="0" max="1" formControlName="tooltipOpacity">
             </mat-form-field>
@@ -75,12 +74,12 @@
           <mat-slide-toggle formControlName="useTooltipFunction" class="slide-block">
             {{ 'widgets.maps.use-tooltip-function' | translate }}
           </mat-slide-toggle>
-          <tb-html [fxShow]="!tripAnimationCommonSettingsFormGroup.get('useTooltipFunction').value"
+          <tb-html [class.!hidden]="tripAnimationCommonSettingsFormGroup.get('useTooltipFunction').value"
                    formControlName="tooltipPattern"
                    minHeight="100px"
                    label="{{ 'widgets.maps.tooltip-pattern' | translate }}">
           </tb-html>
-          <tb-js-func [fxShow]="tripAnimationCommonSettingsFormGroup.get('useTooltipFunction').value"
+          <tb-js-func [class.!hidden]="!tripAnimationCommonSettingsFormGroup.get('useTooltipFunction').value"
                       formControlName="tooltipFunction"
                       [globalVariables]="functionScopeVariables"
                       [functionArgs]="['data', 'dsData', 'dsIndex']"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-marker-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-marker-settings.component.html
index 60557ee9e6..b9495b8a6a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-marker-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-marker-settings.component.html
@@ -18,21 +18,20 @@
 <section class="tb-widget-settings" [formGroup]="tripAnimationMarkerSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.maps.markers-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block">
       <mat-label translate>widgets.maps.rotation-angle</mat-label>
       <input matInput type="number" min="0" max="360" formControlName="rotationAngle">
     </mat-form-field>
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.maps.label</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="tripAnimationMarkerSettingsFormGroup.get('showLabel').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle formControlName="showLabel" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle formControlName="showLabel" (click)="$event.stopPropagation()">
               {{ 'widgets.maps.show-label' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
@@ -40,12 +39,12 @@
           <mat-slide-toggle formControlName="useLabelFunction" class="slide-block">
             {{ 'widgets.maps.use-label-function' | translate }}
           </mat-slide-toggle>
-          <tb-html [fxShow]="!tripAnimationMarkerSettingsFormGroup.get('useLabelFunction').value"
+          <tb-html [class.!hidden]="tripAnimationMarkerSettingsFormGroup.get('useLabelFunction').value"
                    formControlName="label"
                    minHeight="100px"
                    label="{{ 'widgets.maps.label-pattern' | translate }}">
           </tb-html>
-          <tb-js-func [fxShow]="tripAnimationMarkerSettingsFormGroup.get('useLabelFunction').value"
+          <tb-js-func [class.!hidden]="!tripAnimationMarkerSettingsFormGroup.get('useLabelFunction').value"
                       formControlName="labelFunction"
                       [globalVariables]="functionScopeVariables"
                       [functionArgs]="['data', 'dsData', 'dsIndex']"
@@ -58,35 +57,34 @@
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.maps.marker-image</legend>
       <mat-expansion-panel class="tb-settings" expanded>
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle formControlName="useMarkerImageFunction" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle formControlName="useMarkerImageFunction" (click)="$event.stopPropagation()">
               {{ 'widgets.maps.use-marker-image-function' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-          <tb-gallery-image-input [fxShow]="!tripAnimationMarkerSettingsFormGroup.get('useMarkerImageFunction').value"
+          <tb-gallery-image-input [class.!hidden]="tripAnimationMarkerSettingsFormGroup.get('useMarkerImageFunction').value"
                           label="{{ 'widgets.maps.custom-marker-image' | translate }}"
                           formControlName="markerImage">
           </tb-gallery-image-input>
-          <mat-form-field [fxShow]="!tripAnimationMarkerSettingsFormGroup.get('useMarkerImageFunction').value"
-                          fxFlex class="mat-block">
+          <mat-form-field [class.!hidden]="tripAnimationMarkerSettingsFormGroup.get('useMarkerImageFunction').value"
+                          class="mat-block">
             <mat-label translate>widgets.maps.custom-marker-image-size</mat-label>
             <input matInput type="number" min="1" formControlName="markerImageSize">
           </mat-form-field>
-          <tb-js-func [fxShow]="tripAnimationMarkerSettingsFormGroup.get('useMarkerImageFunction').value"
+          <tb-js-func [class.!hidden]="!tripAnimationMarkerSettingsFormGroup.get('useMarkerImageFunction').value"
                       formControlName="markerImageFunction"
                       [globalVariables]="functionScopeVariables"
                       [functionArgs]="['data', 'images', 'dsData', 'dsIndex']"
                       functionTitle="{{ 'widgets.maps.marker-image-function' | translate }}"
                       helpId="widget/lib/map/marker_image_fn">
           </tb-js-func>
-          <tb-multiple-gallery-image-input [fxShow]="tripAnimationMarkerSettingsFormGroup.get('useMarkerImageFunction').value"
+          <tb-multiple-gallery-image-input [class.!hidden]="!tripAnimationMarkerSettingsFormGroup.get('useMarkerImageFunction').value"
                                            label="{{ 'widgets.maps.marker-images' | translate }}"
                                            formControlName="markerImages">
           </tb-multiple-gallery-image-input>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-path-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-path-settings.component.html
index e7b0443208..f921677041 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-path-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-path-settings.component.html
@@ -18,31 +18,30 @@
 <section class="tb-widget-settings" [formGroup]="tripAnimationPathSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.maps.path-settings</legend>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
+    <section class="!flex flex-col gt-xs:flex-row gt-xs:gap-2">
       <tb-color-input
-        fxFlex
+        class="flex-1"
         formControlName="color"
         icon="format_color_fill"
         label="{{ 'widgets.maps.path-color' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="flex-1">
         <mat-label translate>widgets.maps.stroke-weight</mat-label>
         <input matInput type="number" min="0" formControlName="strokeWeight">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="flex-1">
         <mat-label translate>widgets.maps.stroke-opacity</mat-label>
         <input matInput type="number" min="0" max="1" formControlName="strokeOpacity">
       </mat-form-field>
     </section>
     <mat-expansion-panel class="tb-settings" [expanded]="tripAnimationPathSettingsFormGroup.get('useColorFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle formControlName="useColorFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle formControlName="useColorFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.maps.use-path-color-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -58,20 +57,19 @@
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.maps.path-decorator</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="tripAnimationPathSettingsFormGroup.get('usePolylineDecorator').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle formControlName="usePolylineDecorator" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle formControlName="usePolylineDecorator" (click)="$event.stopPropagation()">
               {{ 'widgets.maps.use-path-decorator' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
-            <mat-form-field fxFlex class="mat-block">
+          <section class="flex flex-col gt-xs:flex-row gt-xs:gap-2">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.decorator-symbol</mat-label>
               <mat-select required formControlName="decoratorSymbol">
                 <mat-option *ngFor="let symbol of polylineDecoratorSymbols" [value]="symbol">
@@ -79,32 +77,32 @@
                 </mat-option>
               </mat-select>
             </mat-form-field>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.decorator-symbol-size</mat-label>
               <input matInput type="number" min="1" formControlName="decoratorSymbolSize">
             </mat-form-field>
           </section>
-          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center">
-            <mat-slide-toggle fxFlex formControlName="useDecoratorCustomColor">
+          <section class="flex flex-col gap-2 gt-xs:flex-row gt-xs:items-center">
+            <mat-slide-toggle class="flex-1" formControlName="useDecoratorCustomColor">
               {{ 'widgets.maps.use-path-decorator-custom-color' | translate }}
             </mat-slide-toggle>
             <tb-color-input
-              fxFlex
+              class="flex-1"
               formControlName="decoratorCustomColor"
               icon="format_color_fill"
               label="{{ 'widgets.maps.decorator-custom-color' | translate }}" openOnInput colorClearButton>
             </tb-color-input>
           </section>
-          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
-            <mat-form-field fxFlex class="mat-block">
+          <section class="flex flex-col gt-xs:flex-row gt-xs:gap-2">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.decorator-offset</mat-label>
               <input matInput formControlName="decoratorOffset">
             </mat-form-field>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.end-decorator-offset</mat-label>
               <input matInput formControlName="endDecoratorOffset">
             </mat-form-field>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.decorator-repeat</mat-label>
               <input matInput formControlName="decoratorRepeat">
             </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-point-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-point-settings.component.html
index 2beba0639f..9e42753e34 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-point-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-point-settings.component.html
@@ -19,39 +19,37 @@
   <fieldset class="fields-group fields-group-slider">
     <legend class="group-title" translate>widgets.maps.points-settings</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="tripAnimationPointSettingsFormGroup.get('showPoints').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle formControlName="showPoints" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle formControlName="showPoints" (click)="$event.stopPropagation()">
             {{ 'widgets.maps.show-points' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
+        <section class="flex flex-col gt-xs:flex-row gt-xs:gap-2">
           <tb-color-input
-            fxFlex
+            class="flex-1"
             formControlName="pointColor"
             icon="format_color_fill"
             label="{{ 'widgets.maps.point-color' | translate }}" openOnInput colorClearButton>
           </tb-color-input>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="flex-1">
             <mat-label translate>widgets.maps.point-size</mat-label>
             <input matInput type="number" min="1" formControlName="pointSize">
           </mat-form-field>
         </section>
         <mat-expansion-panel class="tb-settings" [expanded]="tripAnimationPointSettingsFormGroup.get('useColorPointFunction').value">
-          <mat-expansion-panel-header fxLayout="row wrap">
+          <mat-expansion-panel-header class="flex-wrap">
             <mat-panel-title>
-              <mat-slide-toggle formControlName="useColorPointFunction" (click)="$event.stopPropagation()"
-                                fxLayoutAlign="center">
+              <mat-slide-toggle formControlName="useColorPointFunction" (click)="$event.stopPropagation()">
                 {{ 'widgets.maps.use-point-color-function' | translate }}
               </mat-slide-toggle>
             </mat-panel-title>
-            <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+            <mat-panel-description class="justify-end xs:!hidden" translate>
               widget-config.advanced-settings
             </mat-panel-description>
           </mat-expansion-panel-header>
@@ -65,14 +63,13 @@
           </ng-template>
         </mat-expansion-panel>
         <mat-expansion-panel class="tb-settings" [expanded]="tripAnimationPointSettingsFormGroup.get('usePointAsAnchor').value">
-          <mat-expansion-panel-header fxLayout="row wrap">
+          <mat-expansion-panel-header class="flex-wrap">
             <mat-panel-title>
-              <mat-slide-toggle formControlName="usePointAsAnchor" (click)="$event.stopPropagation()"
-                                fxLayoutAlign="center">
+              <mat-slide-toggle formControlName="usePointAsAnchor" (click)="$event.stopPropagation()">
                 {{ 'widgets.maps.use-point-as-anchor' | translate }}
               </mat-slide-toggle>
             </mat-panel-title>
-            <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+            <mat-panel-description class="justify-end xs:!hidden" translate>
               widget-config.advanced-settings
             </mat-panel-description>
           </mat-expansion-panel-header>

From fe80bb3c050092c4110acd05360f32d203c34765 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Tue, 15 Oct 2024 13:03:15 +0300
Subject: [PATCH 15/34] UI: Add tailwindcss eslint rules

---
 ui-ngx/.eslintrc.json |  9 +++++++--
 ui-ngx/package.json   |  1 +
 ui-ngx/yarn.lock      | 12 ++++++++++--
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/ui-ngx/.eslintrc.json b/ui-ngx/.eslintrc.json
index 598c8074a6..2d17064e40 100644
--- a/ui-ngx/.eslintrc.json
+++ b/ui-ngx/.eslintrc.json
@@ -61,9 +61,14 @@
         "*.html"
       ],
       "extends": [
-        "plugin:@angular-eslint/template/recommended"
+        "plugin:@angular-eslint/template/recommended",
+        "plugin:tailwindcss/recommended"
       ],
-      "rules": {}
+      "rules": {
+          "tailwindcss/no-custom-classname": "off",
+          "tailwindcss/migration-from-tailwind-2": "off",
+          "tailwindcss/enforces-negative-arbitrary-values": "off"
+      }
     }
   ]
 }
diff --git a/ui-ngx/package.json b/ui-ngx/package.json
index a753381720..719e0923c0 100644
--- a/ui-ngx/package.json
+++ b/ui-ngx/package.json
@@ -154,6 +154,7 @@
     "eslint-plugin-import": "latest",
     "eslint-plugin-jsdoc": "latest",
     "eslint-plugin-prefer-arrow": "latest",
+    "eslint-plugin-tailwindcss": "^3.17.5",
     "ngrx-store-freeze": "^0.2.4",
     "patch-package": "^8.0.0",
     "postcss": "^8.4.47",
diff --git a/ui-ngx/yarn.lock b/ui-ngx/yarn.lock
index d9a8a1a343..290e4a5500 100644
--- a/ui-ngx/yarn.lock
+++ b/ui-ngx/yarn.lock
@@ -5719,6 +5719,14 @@ eslint-plugin-prefer-arrow@latest:
   resolved "https://registry.yarnpkg.com/eslint-plugin-prefer-arrow/-/eslint-plugin-prefer-arrow-1.2.3.tgz#e7fbb3fa4cd84ff1015b9c51ad86550e55041041"
   integrity sha512-J9I5PKCOJretVuiZRGvPQxCbllxGAV/viI20JO3LYblAodofBxyMnZAJ+WGeClHgANnSJberTNoFWWjrWKBuXQ==
 
+eslint-plugin-tailwindcss@^3.17.5:
+  version "3.17.5"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.17.5.tgz#6bf9403e77a5f3f930fb3444a3e22b29cd0fee07"
+  integrity sha512-8Mi7p7dm+mO1dHgRHHFdPu4RDTBk69Cn4P0B40vRQR+MrguUpwmKwhZy1kqYe3Km8/4nb+cyrCF+5SodOEmaow==
+  dependencies:
+    fast-glob "^3.2.5"
+    postcss "^8.4.4"
+
 eslint-scope@5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
@@ -5940,7 +5948,7 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@3.3.2, fast-glob@^3.3.0, fast-glob@^3.3.2:
+fast-glob@3.3.2, fast-glob@^3.2.5, fast-glob@^3.3.0, fast-glob@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
   integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
@@ -8776,7 +8784,7 @@ postcss@8.4.41:
     picocolors "^1.0.1"
     source-map-js "^1.2.0"
 
-postcss@^8.2.14, postcss@^8.4.23, postcss@^8.4.33, postcss@^8.4.43, postcss@^8.4.47:
+postcss@^8.2.14, postcss@^8.4.23, postcss@^8.4.33, postcss@^8.4.4, postcss@^8.4.43, postcss@^8.4.47:
   version "8.4.47"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.47.tgz#5bf6c9a010f3e724c503bf03ef7947dcb0fea365"
   integrity sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==

From 8ab2c9cd20141742729d4b2f253ddf2cb78cf6c6 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Tue, 15 Oct 2024 13:10:46 +0300
Subject: [PATCH 16/34] Flex layout replacements. Switch to tailwind.css.

---
 ...ification-type-filter-panel.component.html |  6 +-
 .../cards/value-card-widget.component.html    |  2 +-
 .../date-range-navigator-panel.component.html |  6 +-
 .../date-range-navigator.component.html       | 12 ++-
 .../entities-hierarchy-widget.component.html  |  8 +-
 .../entities-table-widget.component.html      | 98 ++++++++++---------
 6 files changed, 69 insertions(+), 63 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/notification-type-filter-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/cards/notification-type-filter-panel.component.html
index 3637a502bd..4e39c80cd5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/notification-type-filter-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/notification-type-filter-panel.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form fxLayout="column" fxFlex class="mat-content mat-padding" (ngSubmit)="update()">
+<form class="mat-content mat-padding flex-1 flex flex-col" (ngSubmit)="update()">
   <div class="tb-form-panel no-padding">
     <div class="tb-form-row column-xs">
       <div class="fixed-title-width" translate>widgets.notification.notification-types</div>
@@ -54,14 +54,14 @@
     </div>
   </div>
 
-  <div fxLayout="row" class="tb-panel-actions" fxLayoutAlign="end center">
+  <div class="tb-panel-actions flex flex-row justify-end items-center">
     <button type="button"
             mat-button
             (click)="reset()"
             color="primary">
       {{ 'action.reset' | translate }}
     </button>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button type="button"
             (click)="cancel()"
             mat-button>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html
index 814f9f08d8..c97984c352 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html
@@ -46,7 +46,7 @@
       <ng-template [ngSwitchCase]="layout === valueCardLayout.horizontal ||
                                    layout === valueCardLayout.horizontal_reversed ? layout : ''">
         <ng-container *ngTemplateOutlet="iconWithLabelTpl"></ng-container>
-        <div fxFlex></div>
+        <div class="flex-1"></div>
         <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
       </ng-template>
     </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator-panel.component.html
index b559f8de6c..045165f0a3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator-panel.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" class="mat-content mat-padding">
+<div class="mat-content mat-padding flex flex-col">
   <mat-form-field *ngIf="settings.showTemplate" class="mat-block">
     <input readonly [ngModel]="model.chosenLabel" matInput type="text">
   </mat-form-field>
@@ -25,8 +25,8 @@
                                 [singleDatePicker]="settings.onePanel"
                                 [autoApply]="true" (choosedDate)="choosedDate($event)">
   </ngx-daterangepicker-material>
-  <div class="tb-panel-actions" fxLayout="row" *ngIf="!settings.autoConfirm">
-    <span fxFlex></span>
+  <div class="tb-panel-actions flex flex-row" *ngIf="!settings.autoConfirm">
+    <span class="flex-1"></span>
     <button mat-button mat-raised-button color="primary"
             type="button" (click)="apply()">
       {{ 'action.ok' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.html
index 0decaaf7ee..1dc4a46216 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.html
@@ -16,8 +16,10 @@
 
 -->
 <div class="date-range-navigator"
-     [ngClass]="{'short-mode':ctx.width < 400, 'labels-hidden': settings.hideLabels, 'long-mode': ctx.width >= 400}">
-  <mat-form-field class="mat-block" [fxHide]="settings.hidePicker" (click)="openNavigatorPanel($event)">
+     [class.short-mode]="ctx.width < 400"
+     [class.labels-hidden]="settings.hideLabels"
+     [class.long-mode]="ctx.width >= 400">
+  <mat-form-field class="mat-block" [class.!hidden]="settings.hidePicker" (click)="openNavigatorPanel($event)">
     <mat-label *ngIf="!settings.hideLabels" translate>widgets.date-range-navigator.localizationMap.Date picker</mat-label>
     <mat-select #datePicker [ngModel]="advancedModel.chosenLabel">
       <mat-option [value]="advancedModel.chosenLabel">
@@ -25,7 +27,7 @@
       </mat-option>
     </mat-select>
   </mat-form-field>
-  <mat-form-field class="mat-block" [fxHide]="settings.hideInterval">
+  <mat-form-field class="mat-block" [class.!hidden]="settings.hideInterval">
     <mat-label translate *ngIf="!settings.hideLabels">widgets.date-range-navigator.localizationMap.Interval</mat-label>
     <mat-select [(ngModel)]="selectedDateInterval" (ngModelChange)="changeInterval()">
       <mat-option *ngIf="customInterval" [value]="customInterval.ts">
@@ -37,11 +39,11 @@
     </mat-select>
   </mat-form-field>
 
-  <div class="drn__element step" [fxHide]="settings.hideStepSize">
+  <div class="drn__element step" [class.!hidden]="settings.hideStepSize">
     <button mat-icon-button (click)="goBack()">
       <mat-icon>keyboard_arrow_left</mat-icon>
     </button>
-    <mat-form-field class="mat-block" fxFlex.gt-sm>
+    <mat-form-field class="mat-block gt-sm:flex-1">
       <mat-label translate *ngIf="!settings.hideLabels">widgets.date-range-navigator.localizationMap.Step size</mat-label>
       <mat-select [(ngModel)]="selectedStepSize">
         <mat-option *ngFor="let date of datesMap | keyvalue: originalOrder" [value]="date.value.ts">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-hierarchy-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-hierarchy-widget.component.html
index 7f30329e07..8d9a83d289 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-hierarchy-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-hierarchy-widget.component.html
@@ -16,15 +16,15 @@
 
 -->
 <div class="tb-entities-hierarchy tb-absolute-fill" tb-toast toastTarget="{{ toastTargetId }}">
-  <div fxFlex fxLayout="column" class="tb-absolute-fill">
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode">
+  <div class="tb-absolute-fill flex-1 flex flex-col">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode">
       <div class="mat-toolbar-tools">
         <button mat-icon-button
                 matTooltip="{{ 'action.search' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>search</mat-icon>
         </button>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>&nbsp;</mat-label>
           <input #searchInput matInput
                  [formControl]="textSearch"
@@ -37,7 +37,7 @@
         </button>
       </div>
     </mat-toolbar>
-    <div fxFlex class="tb-entities-nav-tree-panel">
+    <div class="tb-entities-nav-tree-panel flex-1">
       <tb-nav-tree
         [loadNodes]="loadNodes"
         [onNodeSelected]="onNodeSelected"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.html
index 36d58742a6..bcaf9d186d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.html
@@ -16,15 +16,15 @@
 
 -->
 <div class="tb-table-widget tb-absolute-fill">
-  <div fxFlex fxLayout="column" class="tb-absolute-fill">
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode">
+  <div class="tb-absolute-fill flex-1 flex flex-col">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode">
       <div class="mat-toolbar-tools">
         <button mat-icon-button
                 matTooltip="{{ 'action.search' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>search</mat-icon>
         </button>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>&nbsp;</mat-label>
           <input #searchInput matInput
                  [formControl]="textSearch"
@@ -37,71 +37,75 @@
         </button>
       </div>
     </mat-toolbar>
-    <div fxFlex class="table-container">
+    <div class="table-container flex-1">
       <table mat-table [dataSource]="entityDatasource" [trackBy]="trackByEntityId"
                  matSort [matSortActive]="sortOrderProperty" [matSortDirection]="pageLinkSortDirection()" matSortDisableClear>
         <ng-container [matColumnDef]="column.def" *ngFor="let column of columns; let $index = index; trackBy: trackByColumnDef;">
-          <mat-header-cell [ngStyle]="headerStyle(column)" *matHeaderCellDef mat-sort-header [disabled]="!column.sortable"> {{ column.title }} </mat-header-cell>
+          <mat-header-cell [style]="headerStyle(column)" *matHeaderCellDef mat-sort-header [disabled]="!column.sortable"> {{ column.title }} </mat-header-cell>
             <mat-cell *matCellDef="let entity; let row = index"
                       [innerHTML]="cellContent(entity, column, row)"
-                      [ngStyle]="cellStyle(entity, column, row)"
+                      [style]="cellStyle(entity, column, row)"
                       (click)="onCellClick($event, entity, column, $index)"
                       [class.tb-pointer]="columnHasCellClick($index)">
             </mat-cell>
         </ng-container>
         <ng-container matColumnDef="actions" [stickyEnd]="enableStickyAction">
-          <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (entityDatasource.countCellButtonAction * 48) + 'px',
-                                                                maxWidth: (entityDatasource.countCellButtonAction * 48) + 'px',
-                                                                width: (entityDatasource.countCellButtonAction * 48) + 'px' }">
+          <mat-header-cell *matHeaderCellDef>
+            <ng-container *ngIf="entityDatasource.countCellButtonAction">
+              <div class="gt-md:!hidden" style="min-width: 48px;">
+              </div>
+              <div class="lt-lg:!hidden"
+                   [style.min-width]="(entityDatasource.countCellButtonAction * 48) + 'px'">
+              </div>
+            </ng-container>
           </mat-header-cell>
-          <mat-cell *matCellDef="let entity; let row = index" [style]="rowStyle(entity, row)" [ngStyle.gt-md]="{ minWidth: (entityDatasource.countCellButtonAction * 48) + 'px',
-                                                                maxWidth: (entityDatasource.countCellButtonAction * 48) + 'px',
-                                                                width: (entityDatasource.countCellButtonAction * 48) + 'px' }">
-            <div [fxHide]="showCellActionsMenu && entityDatasource.countCellButtonAction !== 1" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
-              <ng-container *ngFor="let actionDescriptor of entity.actionCellButtons; trackBy: trackByActionCellDescriptionId">
-                <span *ngIf="!actionDescriptor.icon" style="width: 48px;"></span>
-                <button mat-icon-button [disabled]="isLoading$ | async"
-                        *ngIf="actionDescriptor.icon"
-                        matTooltip="{{ actionDescriptor.displayName }}"
-                        matTooltipPosition="above"
-                        (click)="onActionButtonClick($event, entity, actionDescriptor)">
-                  <tb-icon>{{actionDescriptor.icon}}</tb-icon>
-                </button>
-              </ng-container>
-            </div>
-            <div fxHide [fxShow.lt-lg]="showCellActionsMenu && entityDatasource.countCellButtonAction !== 1" *ngIf="entity.hasActions">
-              <button mat-icon-button
-                      (click)="$event.stopPropagation(); ctx.detectChanges();"
-                      [matMenuTriggerFor]="cellActionsMenu">
-                <mat-icon class="material-icons">more_vert</mat-icon>
-              </button>
-              <mat-menu #cellActionsMenu="matMenu" xPosition="before">
+          <mat-cell *matCellDef="let entity; let row = index" [style]="rowStyle(entity, row)">
+            <ng-container *ngIf="entityDatasource.countCellButtonAction">
+              <div [class.lt-lg:!hidden]="showCellActionsMenu && entityDatasource.countCellButtonAction !== 1" class="flex flex-row justify-end items-stretch"
+                   [style.min-width]="(entityDatasource.countCellButtonAction * 48) + 'px'">
                 <ng-container *ngFor="let actionDescriptor of entity.actionCellButtons; trackBy: trackByActionCellDescriptionId">
-                  <button mat-menu-item *ngIf="actionDescriptor.icon"
-                          [disabled]="isLoading$ | async"
+                  <span *ngIf="!actionDescriptor.icon" style="width: 48px;"></span>
+                  <button mat-icon-button [disabled]="isLoading$ | async"
+                          *ngIf="actionDescriptor.icon"
+                          matTooltip="{{ actionDescriptor.displayName }}"
+                          matTooltipPosition="above"
                           (click)="onActionButtonClick($event, entity, actionDescriptor)">
-                    <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
-                    <span>{{ actionDescriptor.displayName }}</span>
+                    <tb-icon>{{actionDescriptor.icon}}</tb-icon>
                   </button>
                 </ng-container>
-              </mat-menu>
-            </div>
+              </div>
+              <div [class.!hidden]="!showCellActionsMenu || entityDatasource.countCellButtonAction === 1" class="gt-md:!hidden" *ngIf="entity.hasActions">
+                <button mat-icon-button
+                        (click)="$event.stopPropagation(); ctx.detectChanges();"
+                        [matMenuTriggerFor]="cellActionsMenu">
+                  <mat-icon class="material-icons">more_vert</mat-icon>
+                </button>
+                <mat-menu #cellActionsMenu="matMenu" xPosition="before">
+                  <ng-container *ngFor="let actionDescriptor of entity.actionCellButtons; trackBy: trackByActionCellDescriptionId">
+                    <button mat-menu-item *ngIf="actionDescriptor.icon"
+                            [disabled]="isLoading$ | async"
+                            (click)="onActionButtonClick($event, entity, actionDescriptor)">
+                      <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
+                      <span>{{ actionDescriptor.displayName }}</span>
+                    </button>
+                  </ng-container>
+                </mat-menu>
+              </div>
+            </ng-container>
           </mat-cell>
         </ng-container>
         <mat-header-row *matHeaderRowDef="displayedColumns; sticky: enableStickyHeader"></mat-header-row>
-        <mat-row [ngClass]="{'tb-current-entity': entityDatasource.isCurrentEntity(entity),
-                             'invisible': entityDatasource.dataLoading,
-                             'tb-pointer': hasRowAction}"
+        <mat-row [class.tb-current-entity]="entityDatasource.isCurrentEntity(entity)"
+                 [class.invisible]="entityDatasource.dataLoading"
+                 [class.tb-pointer]="hasRowAction"
                  *matRowDef="let entity; columns: displayedColumns; let row = index"
-                 [ngStyle]="rowStyle(entity, row)"
+                 [style]="rowStyle(entity, row)"
                  (click)="onRowClick($event, entity)" (dblclick)="onRowClick($event, entity, true)"></mat-row>
       </table>
-      <span [fxShow]="(entityDatasource.isEmpty() | async) && !entityDatasource.dataLoading"
-            fxLayoutAlign="center center"
-            class="no-data-found">{{ noDataDisplayMessageText }}</span>
-      <span [fxShow]="entityDatasource.dataLoading"
-            fxLayoutAlign="center center"
-            class="no-data-found">{{ 'common.loading' | translate }}</span>
+      <span [class.!hidden]="(entityDatasource.isEmpty() | async) === false || entityDatasource.dataLoading"
+            class="no-data-found flex justify-center items-center">{{ noDataDisplayMessageText }}</span>
+      <span [class.!hidden]="!entityDatasource.dataLoading"
+            class="no-data-found flex justify-center items-center">{{ 'common.loading' | translate }}</span>
     </div>
     <mat-divider *ngIf="displayPagination"></mat-divider>
     <mat-paginator *ngIf="displayPagination"

From 7c2be48474b8fa3da6c6e71b54d460d731571ebb Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Tue, 15 Oct 2024 13:23:36 +0300
Subject: [PATCH 17/34] Apply tailwind.css style recommendations.

---
 .../alarm/alarm-comment.component.html        | 16 ++---
 .../alarm/alarm-details-dialog.component.html |  2 +-
 .../alarm/alarm-filter-config.component.html  |  2 +-
 .../aliases-entity-select.component.html      |  2 +-
 .../alias/entity-alias-dialog.component.html  |  2 +-
 .../entity-aliases-dialog.component.html      | 20 +++---
 .../add-attribute-dialog.component.html       |  2 +-
 .../attribute/attribute-table.component.html  | 16 ++---
 .../audit-log-details-dialog.component.html   |  2 +-
 .../add-widget-dialog.component.html          |  4 +-
 .../dashboard-image-dialog.component.html     | 12 ++--
 .../dashboard-page.component.html             | 12 ++--
 .../dashboard-settings-dialog.component.html  |  4 +-
 .../dashboard-widget-select.component.html    |  8 +--
 .../dashboard-page/edit-widget.component.html |  4 +-
 .../add-new-breakpoint-dialog.component.html  |  2 +-
 .../layout/dashboard-layout.component.html    |  4 +-
 ...ge-dashboard-layouts-dialog.component.html | 16 ++---
 .../layout/move-widgets-dialog.component.html |  4 +-
 .../dashboard-state-dialog.component.html     |  2 +-
 .../entity-state-controller.component.html    |  2 +-
 ...age-dashboard-states-dialog.component.html |  6 +-
 .../dashboard/dashboard.component.html        |  2 +-
 ...select-target-layout-dialog.component.html |  2 +-
 .../select-target-state-dialog.component.html |  2 +-
 .../components/details-panel.component.html   | 10 +--
 .../device/device-info-filter.component.html  |  2 +-
 .../entity/add-entity-dialog.component.html   |  2 +-
 .../entity/entities-table.component.html      |  8 +--
 .../entity/entity-details-page.component.html |  6 +-
 .../entity/entity-filter.component.html       | 14 ++--
 .../event/event-filter-panel.component.html   |  2 +-
 .../boolean-filter-predicate.component.html   |  6 +-
 ...lex-filter-predicate-dialog.component.html |  2 +-
 .../complex-filter-predicate.component.html   |  2 +-
 .../filter/filter-dialog.component.html       |  6 +-
 .../filter-predicate-list.component.html      | 20 +++---
 .../filter-predicate-value.component.html     | 10 +--
 .../filter/filter-predicate.component.html    |  6 +-
 .../filter-user-info-dialog.component.html    |  4 +-
 .../filter/filters-dialog.component.html      | 16 ++---
 .../filter/filters-edit-panel.component.html  |  2 +-
 .../filter/filters-edit.component.html        |  2 +-
 .../filter/key-filter-dialog.component.html   |  8 +--
 .../filter/key-filter-list.component.html     | 14 ++--
 .../numeric-filter-predicate.component.html   |  6 +-
 .../string-filter-predicate.component.html    |  8 +--
 .../filter/user-filter-dialog.component.html  |  2 +-
 .../send-notification-button.component.html   |  2 +-
 .../show-notification-popover.component.html  |  4 +-
 .../add-device-profile-dialog.component.html  |  4 +-
 ...rm-duration-predicate-value.component.html | 12 ++--
 .../alarm/alarm-dynamic-value.component.html  | 12 ++--
 ...alarm-rule-condition-dialog.component.html |  8 +--
 .../alarm/alarm-rule-condition.component.html |  4 +-
 .../profile/alarm/alarm-rule.component.html   |  4 +-
 .../alarm-schedule-dialog.component.html      |  2 +-
 .../alarm/alarm-schedule-info.component.html  |  2 +-
 .../alarm/alarm-schedule.component.html       | 20 +++---
 .../alarm/create-alarm-rules.component.html   |  8 +--
 .../alarm/device-profile-alarm.component.html | 14 ++--
 .../device-profile-alarms.component.html      |  2 +-
 .../edit-alarm-details-dialog.component.html  |  4 +-
 .../asset-profile-dialog.component.html       |  2 +-
 .../device-profile-dialog.component.html      |  2 +-
 ...ile-provision-configuration.component.html |  2 +-
 .../lwm2m-attributes-dialog.component.html    |  2 +-
 .../lwm2m-attributes-key-list.component.html  | 12 ++--
 ...2m-bootstrap-config-servers.component.html |  2 +-
 .../lwm2m-device-config-server.component.html | 12 ++--
 ...ile-transport-configuration.component.html |  2 +-
 ...object-add-instances-dialog.component.html |  2 +-
 ...ve-attr-telemetry-instances.component.html |  8 +--
 ...ve-attr-telemetry-resources.component.html | 24 +++----
 ...wm2m-observe-attr-telemetry.component.html |  2 +-
 ...ile-transport-configuration.component.html |  2 +-
 ...rofile-communication-config.component.html |  6 +-
 ...snmp-device-profile-mapping.component.html | 24 +++----
 ...ile-transport-configuration.component.html |  2 +-
 .../tenant-profile-queues.component.html      |  4 +-
 .../tenant-profile-dialog.component.html      |  2 +-
 ...enant-profile-configuration.component.html | 66 +++++++++----------
 .../rate-limits-details-dialog.component.html |  2 +-
 .../rate-limits-list.component.html           |  4 +-
 .../rate-limits/rate-limits.component.html    |  4 +-
 .../queue/queue-form.component.html           | 16 ++---
 .../relation/relation-filters.component.html  |  2 +-
 .../relation/relation-table.component.html    | 10 +--
 ...-sms-provider-configuration.component.html |  4 +-
 .../vc/auto-commit-settings.component.html    | 12 ++--
 .../vc/complex-version-create.component.html  |  6 +-
 .../vc/complex-version-load.component.html    |  6 +-
 ...entity-types-version-create.component.html | 14 ++--
 .../entity-types-version-load.component.html  | 14 ++--
 .../vc/entity-version-create.component.html   |  8 +--
 .../vc/entity-version-diff.component.html     |  2 +-
 .../vc/entity-version-restore.component.html  |  8 +--
 .../vc/entity-versions-table.component.html   | 12 ++--
 ...move-other-entities-confirm.component.html |  2 +-
 .../vc/repository-settings.component.html     |  2 +-
 ...anage-widget-actions-dialog.component.html |  2 +-
 .../manage-widget-actions.component.html      |  6 +-
 .../widget-action-dialog.component.html       |  4 +-
 .../alarm-count-basic-config.component.html   |  2 +-
 .../alarms-table-basic-config.component.html  |  6 +-
 .../power-button-basic-config.component.html  | 24 +++----
 .../toggle-button-basic-config.component.html | 10 +--
 .../aggregated-data-key-row.component.html    |  2 +-
 .../aggregated-data-keys-panel.component.html |  2 +-
 ...ted-value-card-basic-config.component.html | 14 ++--
 .../label-card-basic-config.component.html    |  6 +-
 ...bel-value-card-basic-config.component.html | 10 +--
 ...le-app-qr-code-basic-config.component.html |  2 +-
 .../progress-bar-basic-config.component.html  | 14 ++--
 ...meseries-table-basic-config.component.html |  4 +-
 ...d-notification-basic-config.component.html |  8 +--
 .../value-card-basic-config.component.html    | 12 ++--
 ...lue-chart-card-basic-config.component.html | 10 +--
 ...rt-with-labels-basic-config.component.html | 22 +++----
 .../comparison-keys-table.component.html      |  2 +-
 .../chart/flot-basic-config.component.html    |  6 +-
 .../latest-chart-basic-config.component.html  | 34 +++++-----
 .../range-chart-basic-config.component.html   | 20 +++---
 ...e-series-chart-basic-config.component.html | 26 ++++----
 .../common/data-keys-panel.component.html     |  2 +-
 .../widget-actions-panel.component.html       |  2 +-
 ...entities-table-basic-config.component.html |  4 +-
 .../analog-gauge-basic-config.component.html  | 10 +--
 .../compass-gauge-basic-config.component.html |  8 +--
 ...l-simple-gauge-basic-config.component.html | 10 +--
 .../battery-level-basic-config.component.html |  8 +--
 ...uid-level-card-basic-config.component.html | 10 +--
 ...ignal-strength-basic-config.component.html | 16 ++---
 .../status-widget-basic-config.component.html |  2 +-
 .../single-switch-basic-config.component.html | 26 ++++----
 .../rpc/slider-basic-config.component.html    | 36 +++++-----
 .../scada-symbol-basic-config.component.html  |  6 +-
 ...peed-direction-basic-config.component.html | 14 ++--
 .../data-key-config-dialog.component.html     |  2 +-
 .../config/data-key-config.component.html     |  4 +-
 .../widget/config/data-keys.component.html    |  2 +-
 .../widget/config/datasource.component.html   |  2 +-
 .../widget/config/datasources.component.html  |  6 +-
 .../config/target-device.component.html       |  2 +-
 .../timewindow-config-panel.component.html    |  4 +-
 .../timewindow-style-panel.component.html     |  2 +-
 .../embed-dashboard-dialog.component.html     |  4 +-
 .../alarm/alarms-table-widget.component.html  | 10 +--
 ...ification-type-filter-panel.component.html |  6 +-
 .../lib/edges-overview-widget.component.html  |  2 +-
 .../entities-hierarchy-widget.component.html  |  2 +-
 .../entities-table-widget.component.html      |  8 +--
 ...eway-advanced-configuration.component.html |  2 +-
 ...gateway-basic-configuration.component.html |  2 +-
 .../mapping-data-keys-panel.component.html    |  2 +-
 .../mapping-table.component.html              |  6 +-
 .../modbus-data-keys-panel.component.html     |  2 +-
 .../modbus-master-table.component.html        |  6 +-
 .../modbus-rpc-parameters.component.html      |  4 +-
 .../opc-rpc-parameters.component.html         |  8 +--
 .../type-value-panel.component.html           |  2 +-
 .../gateway/gateway-connectors.component.html |  6 +-
 .../lib/gateway/gateway-form.component.html   | 10 +--
 .../lib/gateway/gateway-logs.component.html   |  2 +-
 ...teway-service-rpc-connector.component.html | 28 ++++----
 .../gateway-service-rpc.component.html        |  8 +--
 .../gateway/gateway-statistics.component.html |  6 +-
 .../lib/json-input-widget.component.html      |  6 +-
 .../lib/photo-camera-input.component.html     | 10 +--
 .../widget/lib/qrcode-widget.component.html   |  2 +-
 .../label-card-widget-settings.component.html |  2 +-
 ...-value-card-widget-settings.component.html |  2 +-
 .../value-card-widget-settings.component.html |  2 +-
 ...value-action-settings-panel.component.html |  2 +-
 ...value-action-settings-panel.component.html |  2 +-
 .../widget-button-appearance.component.html   |  2 +-
 .../count-widget-settings.component.html      |  6 +-
 ...tatus-widget-state-settings.component.html |  2 +-
 ...ngle-switch-widget-settings.component.html |  2 +-
 .../slider-widget-settings.component.html     |  6 +-
 ...-level-card-widget-settings.component.html |  4 +-
 .../map/common-map-settings.component.html    |  4 +-
 .../marker-clustering-settings.component.html |  2 +-
 .../timeseries-table-widget.component.html    |  6 +-
 .../widget/widget-config.component.html       | 10 +--
 .../components/widget/widget.component.html   |  4 +-
 .../src/app/modules/home/home.component.html  |  4 +-
 .../home/menu/side-menu.component.html        |  2 +-
 ...scada-symbol-behavior-panel.component.html |  2 +-
 .../login/create-password.component.html      |  4 +-
 .../pages/login/link-expired.component.html   |  2 +-
 .../reset-password-request.component.html     |  2 +-
 .../pages/login/reset-password.component.html |  4 +-
 .../two-factor-auth-login.component.html      |  8 +--
 .../app/shared/components/css.component.html  |  2 +-
 .../dialog/alert-dialog.component.html        |  2 +-
 .../dialog/confirm-dialog.component.html      |  2 +-
 .../entity-conflict-dialog.component.html     |  2 +-
 .../dialog/error-alert-dialog.component.html  |  2 +-
 .../json-object-edit-dialog.component.html    |  2 +-
 .../dialog/todo-dialog.component.html         |  2 +-
 .../grid/scroll-grid.component.html           |  4 +-
 .../app/shared/components/html.component.html |  2 +-
 .../image/embed-image-dialog.component.html   |  2 +-
 .../image/image-gallery.component.html        | 16 ++---
 .../image/images-in-use-dialog.component.html |  2 +-
 .../image/upload-image-dialog.component.html  |  2 +-
 .../shared/components/js-func.component.html  |  4 +-
 .../components/json-content.component.html    |  2 +-
 .../json-object-edit.component.html           |  2 +-
 .../shared/components/kv-map.component.html   |  4 +-
 .../components/markdown-editor.component.html |  2 +-
 .../notification/notification.component.html  |  4 +-
 .../protobuf-content.component.html           |  2 +-
 .../components/script-lang.component.html     |  2 +-
 .../components/snack-bar-component.html       |  2 +-
 .../shared/components/svg-xml.component.html  |  2 +-
 .../time/datapoints-limit.component.html      |  2 +-
 .../components/time/datetime.component.html   |  2 +-
 .../history-selector.component.html           |  2 +-
 .../time/quick-time-interval.component.html   |  2 +-
 .../time/timezone-select.component.html       |  2 +-
 .../components/user-menu.component.html       |  2 +-
 .../components/value-input.component.html     | 10 +--
 .../widgets-bundle-search.component.html      |  2 +-
 ...xport-widgets-bundle-dialog.component.html |  2 +-
 .../import-dialog-csv.component.html          |  8 +--
 .../import-dialog.component.html              |  2 +-
 228 files changed, 738 insertions(+), 738 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html
index 6d03da14ed..1fb162539e 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html
@@ -17,7 +17,7 @@
 -->
 <div [formGroup]="alarmCommentFormGroup" class="tb-alarm-comments flex flex-col">
   <div class="header" [class.activity-only]="alarmActivityOnly">
-    <div class="header-container flex flex-row justify-between items-center"
+    <div class="header-container flex flex-row items-center justify-between"
          [class.asc]="isDirectionAscending()"
          [class.activity-only]="alarmActivityOnly">
       <span class="header-title" translate>
@@ -67,12 +67,12 @@
           </span>
         </div>
         <ng-template #userComment>
-          <div class="user-comment flex flex-row justify-start items-center gap-2"
+          <div class="user-comment flex flex-row items-center justify-start gap-2"
                *ngIf="!displayDataElement.edit; else commentEditing"
                (mouseenter)="onCommentMouseEnter(displayDataElement.commentId, i)"
                (mouseleave)="onCommentMouseLeave(i)">
             <div *ngIf="displayDataElement.userExists; else userDeleted"
-                 class="user-avatar flex flex-row justify-center items-center self-start xs:!hidden"
+                 class="user-avatar flex flex-row items-center justify-center self-start xs:!hidden"
                  [style.background-color]="displayDataElement.avatarBgColor">
               {{ getUserInitials(displayDataElement.displayName) }}
             </div>
@@ -80,7 +80,7 @@
               <mat-icon class="mat-icon tb-mat-28 xs:!hidden">no_accounts</mat-icon>
             </ng-template>
             <div class="flex flex-1 flex-col" style="gap: 5px">
-              <div class="flex flex-row justify-start items-center gap-2">
+              <div class="flex flex-row items-center justify-start gap-2">
                 <span class="user-name">{{ displayDataElement.displayName }}</span>
                 <span class="time"
                       [matTooltip]="displayDataElement.createdTime"
@@ -110,8 +110,8 @@
             </div>
           </div>
           <ng-template #commentEditing>
-            <div class="flex flex-row justify-start items-center gap-2">
-              <div class="user-avatar flex flex-row justify-center items-center"
+            <div class="flex flex-row items-center justify-start gap-2">
+              <div class="user-avatar flex flex-row items-center justify-center"
                    [style.background-color]="displayDataElement.avatarBgColor">
                 {{ getUserInitials(displayDataElement.displayName) }}
               </div>
@@ -153,8 +153,8 @@
          [class.newest-first]="!isDirectionAscending()"
          [class.oldest-first]="isDirectionAscending()"
          [class.activity-only]="alarmActivityOnly">
-      <div class="inner-wrap flex flex-row justify-start items-center gap-2">
-        <div class="user-avatar flex flex-row justify-center items-center"
+      <div class="inner-wrap flex flex-row items-center justify-start gap-2">
+        <div class="user-avatar flex flex-row items-center justify-center"
              *ngIf="userDisplayName$ | async; let userDisplayName"
              [style.background-color]="getCurrentUserBgColor(userDisplayName)">
           {{ getUserInitials(userDisplayName) }}
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html
index c096b0a4de..70a52e9576 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html
@@ -66,7 +66,7 @@
         <mat-expansion-panel-header class="flex flex-row flex-wrap" style="margin-bottom: 8px">
           <mat-panel-title>
           </mat-panel-title>
-          <mat-panel-description class="flex justify-end items-center" translate>
+          <mat-panel-description class="flex items-center justify-end" translate>
             alarm.show-more
           </mat-panel-description>
         </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.html
index eec5624ae5..3742f4fd54 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.html
@@ -32,7 +32,7 @@
 <ng-template #alarmFilterPanel>
   <form class="mat-content mat-padding flex flex-col" (ngSubmit)="update()">
     <ng-container *ngTemplateOutlet="alarmFilter"></ng-container>
-    <div class="tb-panel-actions flex flex-row justify-end items-center">
+    <div class="tb-panel-actions flex flex-row items-center justify-end">
       <button type="button"
               mat-button
               color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.html b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.html
index 7957eaeb2c..cc714bccd0 100644
--- a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-aliases-entity-select flex flex-row justify-start items-center" *ngIf="hasSelectableAliasEntities">
+<section class="tb-aliases-entity-select flex flex-row items-center justify-start" *ngIf="hasSelectableAliasEntities">
   <button mat-icon-button
           cdkOverlayOrigin #aliasEntitySelectPanelOrigin="cdkOverlayOrigin"
           (click)="openEditMode()"
diff --git a/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html b/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html
index 42a33b8f1c..8f0243844d 100644
--- a/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html
@@ -55,7 +55,7 @@
                 ? translate.instant('alias.entity-filter-no-entity-matched') : ''"></tb-error>
     </fieldset>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html b/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html
index 3fe25965c1..438c43bc35 100644
--- a/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html
@@ -29,23 +29,23 @@
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
   <div mat-dialog-content>
-    <div class="tb-aliases-header flex flex-row justify-start items-center">
-      <span class="flex-full max-w-5%"></span>
-      <div class="flex-full max-w-95% flex flex-row justify-start items-center">
-        <span class="tb-header-label flex-1 gt-sm:basis-52 gt-sm:min-w-52 gt-sm:max-w-52" translate>alias.name</span>
+    <div class="tb-aliases-header flex flex-row items-center justify-start">
+      <span class="max-w-5% flex-full"></span>
+      <div class="flex max-w-95% flex-full flex-row items-center justify-start">
+        <span class="tb-header-label flex-1 gt-sm:min-w-52 gt-sm:max-w-52 gt-sm:basis-52" translate>alias.name</span>
         <span class="tb-header-label flex-1" translate style="padding-left: 10px;">alias.entity-filter</span>
-        <span class="tb-header-label flex-1 basis-32 min-w-32 max-w-32" translate style="padding-left: 10px;">alias.resolve-multiple</span>
+        <span class="tb-header-label min-w-32 max-w-32 flex-1 basis-32" translate style="padding-left: 10px;">alias.resolve-multiple</span>
         <span style="min-width: 80px;"></span>
       </div>
     </div>
     <fieldset [disabled]="isLoading$ | async">
       <mat-divider></mat-divider>
-      <div class="flex-1 flex flex-row justify-start items-center"
+      <div class="flex flex-1 flex-row items-center justify-start"
            formArrayName="entityAliases"
            *ngFor="let entityAliasControl of entityAliasesFormArray().controls; let $index = index">
-        <span class="flex-full max-w-5%">{{$index + 1}}.</span>
-        <div class="mat-elevation-z4 tb-alias flex-full max-w-95% flex flex-row justify-start items-center">
-          <mat-form-field class="mat-block flex-1 gt-sm:basis-52 gt-sm:min-w-52 gt-sm:max-w-52" style="padding-top: 20px;">
+        <span class="max-w-5% flex-full">{{$index + 1}}.</span>
+        <div class="mat-elevation-z4 tb-alias flex max-w-95% flex-full flex-row items-center justify-start">
+          <mat-form-field class="mat-block flex-1 gt-sm:min-w-52 gt-sm:max-w-52 gt-sm:basis-52" style="padding-top: 20px;">
             <input matInput [formControl]="entityAliasControl.get('alias')" required placeholder="{{ 'entity.alias' | translate }}">
             <mat-error *ngIf="entityAliasControl.get('alias').hasError('required')">
               {{ 'entity.alias-required' | translate }}
@@ -54,7 +54,7 @@
           <tb-entity-filter-view class="flex-1" style="padding-left: 10px;" [formControl]="entityAliasControl.get('filter')">
           </tb-entity-filter-view>
           <section style="padding-left: 10px;"
-                   class="tb-resolve-multiple-switch flex-1 basis-32 min-w-32 max-w-32 flex flex-col justify-center items-center">
+                   class="tb-resolve-multiple-switch flex min-w-32 max-w-32 flex-1 basis-32 flex-col items-center justify-center">
             <mat-slide-toggle class="resolve-multiple-switch"
                    [formControl]="entityAliasControl.get('resolveMultiple')">
             </mat-slide-toggle>
diff --git a/ui-ngx/src/app/modules/home/components/attribute/add-attribute-dialog.component.html b/ui-ngx/src/app/modules/home/components/attribute/add-attribute-dialog.component.html
index ab307ae0e8..b80bf95ddb 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/add-attribute-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/add-attribute-dialog.component.html
@@ -46,7 +46,7 @@
       </tb-value-input>
     </fieldset>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
index e99f44ce27..4ba296d79d 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
@@ -16,10 +16,10 @@
 
 -->
 <div class="mat-padding tb-entity-table tb-absolute-fill">
-  <div class="tb-entity-table-content tb-outlined-border flex-1 flex flex-col">
+  <div class="tb-entity-table-content tb-outlined-border flex flex-1 flex-col">
     <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="mode !== 'default' || textSearchMode || !dataSource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
-        <div class="title-container flex flex-row justify-start items-center xs:flex-col xs:justify-center xs:items-start">
+        <div class="title-container flex flex-row items-center justify-start xs:flex-col xs:items-start xs:justify-center">
           <span class="tb-entity-table-title">{{telemetryTypeTranslationsMap.get(attributeScope) | translate}}</span>
           <mat-form-field class="mat-block tb-attribute-scope" *ngIf="!disableAttributeScopeSelection && !attributeScopeSelectionReadonly">
             <mat-label translate>attribute.attributes-scope</mat-label>
@@ -106,7 +106,7 @@
     </mat-toolbar>
     <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [class.!hidden]="mode !== 'widget'">
       <div class="mat-toolbar-tools gap-2 xs:flex xs:flex-row xs:flex-wrap">
-        <div class="flex-1 flex flex-row justify-start items-stretch">
+        <div class="flex flex-1 flex-row items-stretch justify-start">
           <span class="tb-details-subtitle">{{ 'widgets-bundle.current' | translate }}</span>
           <tb-widgets-bundle-select class="flex-1"
                                     style="margin-left: 5%"
@@ -182,8 +182,8 @@
           <mat-cell *matCellDef="let attribute"
                     class="tb-value-cell attribute"
                     (click)="editAttribute($event, attribute)">
-            <div class="flex-1 flex flex-row" style="align-items: center">
-              <div class="flex-1 flex flex-row" style="overflow: hidden; align-items: center;">
+            <div class="flex flex-1 flex-row" style="align-items: center">
+              <div class="flex flex-1 flex-row" style="overflow: hidden; align-items: center;">
                 <span class="ellipsis">{{attribute.value | tbJson}}</span>
                 <tb-copy-button
                   *ngIf="attribute.value !== ''"
@@ -212,7 +212,7 @@
                  *matRowDef="let attribute; columns: displayedColumns;" (click)="dataSource.selection.toggle(attribute)"></mat-row>
       </table>
       <span [class.!hidden]="(dataSource.isEmpty() | async) === false"
-            class="no-data-found flex justify-center items-center" translate>{{
+            class="no-data-found flex items-center justify-center" translate>{{
           attributeScope === latestTelemetryTypes.LATEST_TELEMETRY
               ? 'attribute.no-telemetry-text'
               : 'attribute.no-attributes-text'
@@ -275,8 +275,8 @@
     <span translate *ngIf="mode === 'widget' && widgetsLoaded &&
                            widgetsList.length === 0 &&
                            widgetBundleSet"
-          class="mat-headline-5 flex-1 flex justify-center items-center">widgets-bundle.empty</span>
+          class="mat-headline-5 flex flex-1 items-center justify-center">widgets-bundle.empty</span>
     <span translate *ngIf="mode === 'widget' && !widgetBundleSet"
-          class="mat-headline-5 flex-1 flex justify-center items-center">widget.select-widgets-bundle</span>
+          class="mat-headline-5 flex flex-1 items-center justify-center">widget.select-widgets-bundle</span>
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.html
index 38b514a6dc..cc28e8c307 100644
--- a/ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.html
@@ -33,7 +33,7 @@
   <div #failureDetailsEditor [class.!hidden]="!displayFailureDetails" class="tb-audit-log-failure-details">
   </div>
 </div>
-<div mat-dialog-actions class="flex justify-end items-center">
+<div mat-dialog-actions class="flex items-center justify-end">
   <button mat-button color="primary"
           type="button"
           [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html
index 98c4251c8f..3fbfcdaa9c 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html
@@ -20,7 +20,7 @@
     <div class="tb-add-widget-toolbar">
       <h2>{{'widget.add' | translate}}:</h2>
       <span class="flex-1">{{data.widgetInfo.widgetName}}</span>
-      <div class="flex flex-row justify-start items-center gt-xs:gap-4" style="min-width: fit-content;">
+      <div class="flex flex-row items-center justify-start gt-xs:gap-4" style="min-width: fit-content;">
         <tb-toggle-select *ngIf="widgetConfig.hasBasicMode" appearance="fill-invert" selectMediaBreakpoint="xs"
                           [(ngModel)]="widgetConfigMode" [ngModelOptions]="{standalone: true}">
           <tb-toggle-option value="basic">{{ 'widget.basic-mode' | translate }}</tb-toggle-option>
@@ -66,7 +66,7 @@
       </div>
     </tb-widget-preview>
   </div>
-  <div mat-dialog-actions class="flex justify-between items-center">
+  <div mat-dialog-actions class="flex items-center justify-between">
     <button mat-button color="primary"
             type="button"
             (click)="cancel()"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html
index 2ee4c482d6..1586a8b872 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html
@@ -28,13 +28,13 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div mat-dialog-content style="position: relative;">
-    <fieldset [disabled]="(isLoading$ | async) || (takingScreenshot$ | async)" class="flex flex-col justify-center items-stretch gap-2">
-      <div [formGroup]="dashboardRectFormGroup" class="flex flex-col gap-2 justify-center items-center">
+    <fieldset [disabled]="(isLoading$ | async) || (takingScreenshot$ | async)" class="flex flex-col items-stretch justify-center gap-2">
+      <div [formGroup]="dashboardRectFormGroup" class="flex flex-col items-center justify-center gap-2">
         <mat-form-field class="rect-field">
           <mat-label>Top %</mat-label>
           <input matInput formControlName="top" type="number" step="1" min="0" max="100">
         </mat-form-field>
-        <div class="flex flex-row gap-2 justify-center items-center">
+        <div class="flex flex-row items-center justify-center gap-2">
           <mat-form-field  class="rect-field">
             <mat-label>Left %</mat-label>
             <input matInput formControlName="left" type="number" step="1" min="0" max="100">
@@ -53,7 +53,7 @@
           <input matInput formControlName="bottom" type="number" step="1" min="0" max="100">
         </mat-form-field>
       </div>
-      <div class="flex flex-row justify-center items-center">
+      <div class="flex flex-row items-center justify-center">
         <button mat-raised-button color="accent"
                 type="button"
                 [disabled]="(isLoading$ | async) || (takingScreenshot$ | async)"
@@ -67,11 +67,11 @@
         </tb-gallery-image-input>
       </div>
     </fieldset>
-    <div *ngIf="takingScreenshot$ | async" class="taking-screenshot-progress tb-absolute-fill flex flex-col justify-center items-center">
+    <div *ngIf="takingScreenshot$ | async" class="taking-screenshot-progress tb-absolute-fill flex flex-col items-center justify-center">
         <mat-progress-spinner color="accent" mode="indeterminate"></mat-progress-spinner>
     </div>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async) || (takingScreenshot$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
index b36349f34a..ddf97d1c85 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
@@ -23,13 +23,13 @@
            [class.tb-dashboard-toolbar-closed]="!toolbarOpened">
     <tb-dashboard-toolbar [class.!hidden]="widgetEditMode || hideToolbar" [forceFullscreen]="forceFullscreen"
                           [toolbarOpened]="toolbarOpened" (triggerClick)="openToolbar()">
-      <div class="tb-dashboard-action-panels flex flex-col justify-center items-stretch gt-sm:flex-row gt-sm:justify-between gt-sm:items-center">
+      <div class="tb-dashboard-action-panels flex flex-col items-stretch justify-center gt-sm:flex-row gt-sm:items-center gt-sm:justify-between">
         <div class="tb-dashboard-action-panel tb-left-panel" [class.!hidden]="isMobileApp && !isEdit">
           <tb-user-menu *ngIf="!isPublicUser() && forceFullscreen" class="gt-sm:!hidden" displayUserInfo="true">
           </tb-user-menu>
           <ng-container *ngIf="isEdit">
             <div style="flex: 1 1 100%" class="gt-sm:!hidden"></div>
-            <div class="flex flex-row justify-end items-center lt-md:flex-1 gt-sm:justify-start gt-sm:items-center lt-lg:gap-0.75 lg:gap-1.5 gt-lg:gap-3">
+            <div class="flex flex-row items-center justify-end lg:gap-1.5 lt-md:flex-1 lt-lg:gap-0.75 gt-sm:items-center gt-sm:justify-start gt-lg:gap-3">
               <mat-divider class="tb-toolbar-divider" vertical></mat-divider>
               <button class="gt-md:!hidden" mat-icon-button
                       matTooltip="{{'layout.manage' | translate}}"
@@ -275,7 +275,7 @@
            [class.tb-dashboard-toolbar-animated]="isToolbarOpenedAnimate"
            [class.tb-dashboard-toolbar-closed]="!toolbarOpened">
     <mat-drawer-container hasBackdrop="false" class="tb-absolute-fill tb-dashboard-drawer-container">
-      <mat-drawer-content #dashboardContent class="flex flex-col justify-center items-start">
+      <mat-drawer-content #dashboardContent class="flex flex-col items-start justify-center">
         <section *ngIf="!widgetEditMode" class="tb-dashboard-title"
                  [style.color]="dashboard.configuration.settings.titleColor">
           <h3 [class.!hidden]="isEdit || !displayTitle()">{{ translatedDashboardTitle }}</h3>
@@ -335,7 +335,7 @@
             </div>
           </mat-drawer-content>
         </mat-drawer-container>
-        <section data-html2canvas-ignore class="tb-header-buttons tb-enter-edit-mode flex flex-row flex-wrap justify-start items-end" *ngIf="!readonly && (hideToolbar || widgetEditMode)">
+        <section data-html2canvas-ignore class="tb-header-buttons tb-enter-edit-mode flex flex-row flex-wrap items-end justify-start" *ngIf="!readonly && (hideToolbar || widgetEditMode)">
           <button [class.!hidden]="isEdit"
                   color="primary"
                   mat-mini-fab
@@ -380,7 +380,7 @@
                           headerSubtitle="{{ editingWidgetSubtitle }}"
                           [isReadOnly]="true"
                           (closeDetails)="onEditWidgetClosed()">
-          <div class="details-buttons flex flex-row justify-start items-center gap-4">
+          <div class="details-buttons flex flex-row items-center justify-start gap-4">
             <tb-toggle-select *ngIf="tbEditWidget.widgetConfig?.hasBasicMode" appearance="fill-invert" selectMediaBreakpoint="xs" [(ngModel)]="tbEditWidget.widgetConfigMode">
               <tb-toggle-option value="basic">{{ 'widget.basic-mode' | translate }}</tb-toggle-option>
               <tb-toggle-option value="advanced">{{ 'widget.advanced-mode' | translate }}</tb-toggle-option>
@@ -425,7 +425,7 @@
                                                         ? 'widgets-bundle.search' : 'widget.search') | translate }}">
             </tb-widgets-bundle-search>
           </div>
-          <div class="details-buttons flex flex-row justify-start items-center" *ngIf="isAddingWidget">
+          <div class="details-buttons flex flex-row items-center justify-start" *ngIf="isAddingWidget">
             <button mat-button type="button" (click)="importWidget($event)"
                     *ngIf="dashboardWidgetSelectComponent?.selectWidgetMode === 'bundles' && !dashboardWidgetSelectComponent?.widgetsBundle">
               <mat-icon>file_upload</mat-icon>{{ 'dashboard.import-widget' | translate }}</button>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html
index 49047f08b1..719fc375f3 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html
@@ -92,7 +92,7 @@
       </div>
       <mat-expansion-panel class="tb-settings">
         <mat-expansion-panel-header>
-          <mat-panel-description class="flex justify-end items-stretch" translate>
+          <mat-panel-description class="flex items-stretch justify-end" translate>
             dashboard.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
@@ -244,7 +244,7 @@
       </div>
     </div>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html
index 2f022764fd..bfaaf700ce 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html
@@ -56,7 +56,7 @@
       </mat-card>
     </ng-template>
     <ng-template #loadingWidgets>
-      <div class="tb-absolute-fill flex flex-col justify-center items-center">
+      <div class="tb-absolute-fill flex flex-col items-center justify-center">
         <span class="mat-headline-5" style="padding-bottom: 20px;">
           {{ 'widget.loading-widgets' | translate }}
         </span>
@@ -64,7 +64,7 @@
       </div>
     </ng-template>
     <ng-template #noWidgets>
-        <span class="mat-headline-5 tb-absolute-fill flex justify-center items-center">{{(selectWidgetMode === 'bundles' ? 'widgets-bundle.empty' : 'widget.no-widgets-text') | translate}}</span>
+        <span class="mat-headline-5 tb-absolute-fill flex items-center justify-center">{{(selectWidgetMode === 'bundles' ? 'widgets-bundle.empty' : 'widget.no-widgets-text') | translate}}</span>
     </ng-template>
   </ng-template>
 
@@ -97,7 +97,7 @@
       </mat-card>
     </ng-template>
     <ng-template #loadingWidgetBundles>
-      <div class="tb-absolute-fill flex flex-col justify-center items-center">
+      <div class="tb-absolute-fill flex flex-col items-center justify-center">
         <span class="mat-headline-5" style="padding-bottom: 20px;">
           {{ 'widgets-bundle.loading-widgets-bundles' | translate }}
         </span>
@@ -106,7 +106,7 @@
     </ng-template>
     <ng-template #noWidgetBundles>
         <span translate
-              class="mat-headline-5 tb-absolute-fill flex justify-center items-center">widgets-bundle.no-widgets-bundles-text</span>
+              class="mat-headline-5 tb-absolute-fill flex items-center justify-center">widgets-bundle.no-widgets-bundles-text</span>
     </ng-template>
   </ng-template>
   <ng-template #widgetLoadingCard>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/edit-widget.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/edit-widget.component.html
index da0f1903d6..4b8259fefd 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/edit-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/edit-widget.component.html
@@ -43,7 +43,7 @@
           {{ 'widget-config.preview' | translate }}
         </button>
       </div>
-      <div class="tb-widget-config-header-suffix lt-md:flex-1 flex flex-row justify-end items-center gap-3">
+      <div class="tb-widget-config-header-suffix flex flex-row items-center justify-end gap-3 lt-md:flex-1">
         <button *ngIf="!previewMode"
                 class="lt-md:!hidden"
                 [disabled]="!widgetFormGroup.valid"
@@ -52,7 +52,7 @@
           <mat-icon>visibility</mat-icon>
           {{ 'widget-config.preview' | translate }}
         </button>
-        <div class="flex flex-row justify-start items-center gap-3">
+        <div class="flex flex-row items-center justify-start gap-3">
           <button [disabled]="!widgetFormGroup.dirty"
             mat-stroked-button color="primary"
             (click)="onRevertWidgetConfig()">
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html
index 9381f47d19..72c6520270 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html
@@ -50,7 +50,7 @@
     </mat-form-field>
   </form>
 </div>
-<div mat-dialog-actions class="flex justify-end items-center">
+<div mat-dialog-actions class="flex items-center justify-end">
   <button mat-button
           color="primary"
           type="button"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html
index 55bad44765..103f98d757 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-progress-cover flex flex-col justify-center items-center"
+<div class="tb-progress-cover flex flex-col items-center justify-center"
   *ngIf="layoutCtx.widgets.isLoading()">
   <mat-spinner color="warn" mode="indeterminate" diameter="100">
   </mat-spinner>
@@ -27,7 +27,7 @@
           [style]="dashboardStyle">
   <section *ngIf="layoutCtx.widgets.isEmpty()"
            style="z-index: 1; pointer-events: none;"
-           class="mat-headline-5 tb-absolute-fill flex justify-center items-center">
+           class="mat-headline-5 tb-absolute-fill flex items-center justify-center">
     <span *ngIf="!isEdit" style="text-align: center;">
       {{'dashboard.no-widgets' | translate}}
     </span>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
index 5df31abb68..56287982ed 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
@@ -92,7 +92,7 @@
       </div>
     </section>
     <ng-template #dividerLayout>
-    <div class="flex flex-col justify-start items-center gap-5">
+    <div class="flex flex-col items-center justify-start gap-5">
       <mat-button-toggle-group aria-label="Select width value type"
                                formControlName="type"
                                [class.!hidden]="!isDividerLayout">
@@ -103,13 +103,13 @@
           {{ 'layout.fixed-width' | translate }}
         </mat-button-toggle>
       </mat-button-toggle-group>
-      <div class="tb-layout-preview flex flex-row justify-center items-center">
-        <div class="tb-layout-preview-container flex flex-row justify-start items-center"
+      <div class="tb-layout-preview flex flex-row items-center justify-center">
+        <div class="tb-layout-preview-container flex flex-row items-center justify-start"
              #tooltip="matTooltip"
              matTooltip=""
              matTooltipPosition="below">
           <div [style.flex-basis]="buttonFlexValue() + '%'" [style.max-width]="buttonFlexValue() + '%'"
-               class="tb-layout-preview-container-main flex-1 flex flex-col justify-start items-center">
+               class="tb-layout-preview-container-main flex flex-1 flex-col items-center justify-start">
             <button mat-icon-button
                     type="button"
                     matTooltip="{{ 'layout.settings' | translate }}"
@@ -152,7 +152,7 @@
                      required>
             </div>
           </div>
-          <div class="flex-1 flex flex-col justify-start items-center" *ngIf="isDividerLayout" matTooltip="">
+          <div class="flex flex-1 flex-col items-center justify-start" *ngIf="isDividerLayout" matTooltip="">
             <button mat-icon-button
                     type="button"
                     matTooltip="{{ 'layout.settings' | translate }}"
@@ -196,7 +196,7 @@
           </div>
         </div>
       </div>
-      <div class="flex flex-col justify-center items-center gap-2" *ngIf="isDividerLayout" style="width: 80%">
+      <div class="flex flex-col items-center justify-center gap-2" *ngIf="isDividerLayout" style="width: 80%">
         <mat-slider *ngIf="layoutsFormGroup.get('type').value === layoutWidthType.PERCENTAGE"
                     step="1"
                     min="{{ layoutPercentageSize.MIN }}"
@@ -215,7 +215,7 @@
                     discrete
                     [displayWith]="formatSliderTooltipLabel.bind(this)"><input matSliderThumb formControlName="sliderFixed"/>
         </mat-slider>
-        <div class="tb-hint tb-hint-group flex flex-row justify-between items-center" style="width: 100%;">
+        <div class="tb-hint tb-hint-group flex flex-row items-center justify-between" style="width: 100%;">
           <label>
             {{layoutsFormGroup.get('type').value === layoutWidthType.PERCENTAGE ? layoutPercentageSize.MIN + '%' : layoutFixedSize.MIN + 'px'}}
           </label>
@@ -227,7 +227,7 @@
     </div>
     </ng-template>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button
             color="primary"
             type="button"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/move-widgets-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/move-widgets-dialog.component.html
index e5cc2d07e7..aae19ed6e7 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/move-widgets-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/move-widgets-dialog.component.html
@@ -30,7 +30,7 @@
   <div mat-dialog-content class="tb-form-panel no-border no-padding" [formGroup]="moveWidgetsFormGroup">
     <div class="tb-form-row space-between column-xs">
       <div translate>dashboard.move-by</div>
-      <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input required matInput formControlName="cols"
                  type="number" step="1" placeholder="{{ 'widget-config.set' | translate }}">
@@ -44,7 +44,7 @@
       </div>
     </div>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.html
index f5d79a08d9..98c26d0cf3 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.html
@@ -51,7 +51,7 @@
       </mat-checkbox>
     </fieldset>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/entity-state-controller.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/states/entity-state-controller.component.html
index 05c4895987..33bca0dab5 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/entity-state-controller.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/entity-state-controller.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div class="entity-state-controller">
-  <div *ngIf="!isMobile || stateObject.length === 1" class="flex flex-row justify-start items-center">
+  <div *ngIf="!isMobile || stateObject.length === 1" class="flex flex-row items-center justify-start">
         <span *ngFor="let state of stateObject; index as i; last as isLast" class="state-entry"
               [style.font-weight]="isLast ? 'bold' : 'normal'"
               [style.cursor]="isLast ? 'default' : 'pointer'" (click)="navigatePrevState(i)">
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
index dd05f277ef..0119c8e757 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
@@ -99,7 +99,7 @@
                   <mat-header-cell *matHeaderCellDef style="min-width: 120px; max-width: 120px; width: 120px">
                   </mat-header-cell>
                   <mat-cell *matCellDef="let state">
-                    <div class="flex-1 flex flex-row">
+                    <div class="flex flex-1 flex-row">
                       <button mat-icon-button [disabled]="isLoading$ | async"
                               type="button"
                               matTooltip="{{ 'dashboard.edit-state' | translate }}"
@@ -129,7 +129,7 @@
                          *matRowDef="let state; columns: displayedColumns;"></mat-row>
               </table>
               <span [class.!hidden]="(dataSource.isEmpty() | async) === false"
-                    class="no-data-found flex justify-center items-center" translate>{{ 'dashboard.no-states-text' }}</span>
+                    class="no-data-found flex items-center justify-center" translate>{{ 'dashboard.no-states-text' }}</span>
             </div>
             <mat-divider></mat-divider>
             <mat-paginator [length]="dataSource.total() | async"
@@ -141,7 +141,7 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html
index 3df5f6a9df..50c66eaaf3 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-progress-cover flex-1 flex flex-col justify-center items-center"
+<div class="tb-progress-cover flex flex-1 flex-col items-center justify-center"
      [style]="dashboardStyle"
      [style.background-image]="backgroundImage"
      [class.!hidden]="(isLoading$ | async) === false || ignoreLoading || isEdit">
diff --git a/ui-ngx/src/app/modules/home/components/dashboard/select-target-layout-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard/select-target-layout-dialog.component.html
index ace5ed1bf6..6425997c09 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard/select-target-layout-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard/select-target-layout-dialog.component.html
@@ -29,7 +29,7 @@
   </mat-progress-bar>
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async" class="flex flex-col gap-2">
-      <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-2">
         <button mat-raised-button color="primary"
                 type="button"
                 class="tb-layout-button flex-1"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard/select-target-state-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard/select-target-state-dialog.component.html
index 6e6c20b546..4cc0f1131b 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard/select-target-state-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard/select-target-state-dialog.component.html
@@ -39,7 +39,7 @@
       </mat-form-field>
     </fieldset>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/details-panel.component.html b/ui-ngx/src/app/modules/home/components/details-panel.component.html
index 398c9b0645..9b3ebc5762 100644
--- a/ui-ngx/src/app/modules/home/components/details-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/details-panel.component.html
@@ -17,9 +17,9 @@
 -->
 <header>
   <mat-toolbar class="details-toolbar" color="primary" [style.height]="headerHeightPx+'px'">
-    <div class="mat-toolbar-tools flex flex-row justify-start items-center" style="height: 100%;">
-      <div class="mat-toolbar-tools tb-details-title-header flex flex-1 flex-col justify-start items-start" [class.!hidden]="showSearchPane">
-        <div class="tb-details-title flex flex-row justify-start items-center">
+    <div class="mat-toolbar-tools flex flex-row items-center justify-start" style="height: 100%;">
+      <div class="mat-toolbar-tools tb-details-title-header flex flex-1 flex-col items-start justify-start" [class.!hidden]="showSearchPane">
+        <div class="tb-details-title flex flex-row items-center justify-start">
           <ng-content select=".prefix-title-buttons"></ng-content>
           <span class="tb-details-title-text">{{ headerTitle }}</span>
         </div>
@@ -28,7 +28,7 @@
           <ng-content select=".header-pane"></ng-content>
         </span>
       </div>
-      <div *ngIf="isShowSearch" [class.!hidden]="!showSearchPane" class="flex flex-row justify-start items-center" style="width: 100%;">
+      <div *ngIf="isShowSearch" [class.!hidden]="!showSearchPane" class="flex flex-row items-center justify-start" style="width: 100%;">
         <button mat-icon-button (click)="onToggleSearch()">
           <mat-icon class="material-icons">arrow_back</mat-icon>
         </button>
@@ -44,7 +44,7 @@
         <mat-icon class="material-icons">close</mat-icon>
       </button>
     </div>
-    <section *ngIf="!isReadOnly" class="flex flex-row layout-wrap tb-header-buttons">
+    <section *ngIf="!isReadOnly" class="layout-wrap tb-header-buttons flex flex-row">
       <button [disabled]="(isLoading$ | async) || theForm?.invalid || !theForm?.dirty"
               mat-fab
               matTooltip="{{ 'action.apply-changes' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/device/device-info-filter.component.html b/ui-ngx/src/app/modules/home/components/device/device-info-filter.component.html
index 6852f642e8..c08f042331 100644
--- a/ui-ngx/src/app/modules/home/components/device/device-info-filter.component.html
+++ b/ui-ngx/src/app/modules/home/components/device/device-info-filter.component.html
@@ -32,7 +32,7 @@
 <ng-template #deviceFilterPanel>
   <form class="mat-content mat-padding flex flex-col" (ngSubmit)="update()">
     <ng-container *ngTemplateOutlet="deviceFilter"></ng-container>
-    <div class="tb-panel-actions flex flex-row justify-end items-center">
+    <div class="tb-panel-actions flex flex-row items-center justify-end">
       <button type="button"
               mat-button
               (click)="cancel()">
diff --git a/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html b/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html
index 3ee1230c73..8122273fd7 100644
--- a/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html
@@ -32,7 +32,7 @@
   <div mat-dialog-content>
     <tb-anchor #entityDetailsForm></tb-anchor>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
diff --git a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
index 3103f5dfdb..feac5e4532 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
@@ -37,7 +37,7 @@
       <div class="tb-entity-table-content tb-outlined-border flex flex-col">
         <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode || !dataSource.selection.isEmpty()">
           <div class="mat-toolbar-tools">
-            <div class="title-container flex flex-row justify-start items-center xs:flex-col xs:justify-center xs:items-start">
+            <div class="title-container flex flex-row items-center justify-start xs:flex-col xs:items-start xs:justify-center">
               <span *ngIf="entitiesTableConfig.tableTitle" class="tb-entity-table-title">{{ entitiesTableConfig.tableTitle }}</span>
               <tb-anchor #entityTableHeader></tb-anchor>
               <tb-timewindow *ngIf="entitiesTableConfig.useTimePageLink" [(ngModel)]="timewindow"
@@ -237,7 +237,7 @@
               </mat-header-cell>
               <mat-cell *matCellDef="let entity">
                 <ng-container *ngIf="cellActionDescriptors.length">
-                  <div [class.lt-lg:!hidden]="cellActionDescriptors.length !== 1" class="flex flex-row justify-end items-stretch"
+                  <div [class.lt-lg:!hidden]="cellActionDescriptors.length !== 1" class="flex flex-row items-stretch justify-end"
                        [style.width]="(cellActionDescriptors.length * 48) + 'px'"
                        [style.min-width]="(cellActionDescriptors.length * 48) + 'px'"
                        [style.max-width]="(cellActionDescriptors.length * 48) + 'px'">
@@ -281,9 +281,9 @@
                      *matRowDef="let entity; columns: displayedColumns;" (click)="onRowClick($event, entity)"></mat-row>
           </table>
           <span [class.!hidden]="(isLoading$ | async) || (dataSource.isEmpty() | async) === false || dataSource.dataLoading"
-                class="no-data-found flex justify-center items-center">{{ translations.noEntities | translate }}</span>
+                class="no-data-found flex items-center justify-center">{{ translations.noEntities | translate }}</span>
           <span [class.!hidden]="!dataSource.dataLoading"
-                class="no-data-found flex justify-center items-center">{{ 'common.loading' | translate }}</span>
+                class="no-data-found flex items-center justify-center">{{ 'common.loading' | translate }}</span>
         </div>
         <mat-divider *ngIf="displayPagination"></mat-divider>
         <mat-paginator *ngIf="displayPagination"
diff --git a/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.html b/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.html
index 0d79d338b3..49a868a7e7 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.html
@@ -17,14 +17,14 @@
 -->
 <mat-card appearance="outlined" class="settings-card">
   <mat-toolbar class="details-toolbar">
-    <div class="mat-toolbar-tools flex flex-row justify-start items-center gap-2">
+    <div class="mat-toolbar-tools flex flex-row items-center justify-start gap-2">
       <button mat-icon-button
               matTooltip="{{ 'action.back' | translate }}"
               matTooltipPosition="above"
               (click)="goBack()">
         <mat-icon>arrow_back</mat-icon>
       </button>
-      <div class="tb-details-title-header flex flex-col justify-center items-start">
+      <div class="tb-details-title-header flex flex-col items-start justify-center">
         <div class="tb-details-title tb-ellipsis">{{ headerTitle }}</div>
         <div class="tb-details-subtitle tb-ellipsis">{{ headerSubtitle }}</div>
       </div>
@@ -52,7 +52,7 @@
     </div>
   </mat-toolbar>
   <mat-card-content class="flex-full">
-    <mat-tab-group mat-stretch-tabs="false" class="tb-absolute-fill w-full h-full" [class.tb-headless]="hideDetailsTabs()" [(selectedIndex)]="selectedTab">
+    <mat-tab-group mat-stretch-tabs="false" class="tb-absolute-fill size-full" [class.tb-headless]="hideDetailsTabs()" [(selectedIndex)]="selectedTab">
       <mat-tab label="{{ 'details.details' | translate }}">
         <tb-anchor #entityDetailsForm></tb-anchor>
       </mat-tab>
diff --git a/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.html b/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.html
index 41ae0c938e..6b7f358310 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.html
@@ -192,26 +192,26 @@
                                  entityFilterFormGroup.get('type').value === aliasFilterType.entityViewSearchQuery ?
                                  entityFilterFormGroup.get('type').value : ''">
       <label class="tb-small">{{ 'alias.root-entity' | translate }}</label>
-      <section class="tb-root-state-entity-switch flex flex-row justify-start items-center" style="padding-left: 0;">
+      <section class="tb-root-state-entity-switch flex flex-row items-center justify-start" style="padding-left: 0;">
         <mat-slide-toggle class="root-state-entity-switch"
                           formControlName="rootStateEntity">
         </mat-slide-toggle>
         <label class="tb-small root-state-entity-label" translate>alias.root-state-entity</label>
       </section>
-      <div class="flex-1 flex flex-row" *ngIf="!filterFormGroup.get('rootStateEntity').value">
+      <div class="flex flex-1 flex-row" *ngIf="!filterFormGroup.get('rootStateEntity').value">
         <tb-entity-select class="flex-1"
                           required
                           useAliasEntityTypes="true"
                           formControlName="rootEntity">
         </tb-entity-select>
       </div>
-      <div class="flex-1 flex flex-col gt-sm:flex-row" *ngIf="filterFormGroup.get('rootStateEntity').value">
+      <div class="flex flex-1 flex-col gt-sm:flex-row" *ngIf="filterFormGroup.get('rootStateEntity').value">
         <mat-form-field floatLabel="always" class="mat-block" style="margin-top: 24px; padding-right: 8px;">
           <mat-label translate>alias.state-entity-parameter-name</mat-label>
           <input matInput formControlName="stateEntityParamName"
                  placeholder="{{ 'alias.default-entity-parameter-name' | translate }}">
         </mat-form-field>
-        <div class="flex-1 flex flex-col">
+        <div class="flex flex-1 flex-col">
           <label class="tb-small">{{ 'alias.default-state-entity' | translate }}</label>
           <tb-entity-select class="flex-1"
                             useAliasEntityTypes="true"
@@ -219,15 +219,15 @@
           </tb-entity-select>
         </div>
       </div>
-      <div class="flex-1 flex flex-row">
-        <section class="tb-root-state-entity-switch flex flex-row justify-start items-center" style="padding-left: 0;">
+      <div class="flex flex-1 flex-row">
+        <section class="tb-root-state-entity-switch flex flex-row items-center justify-start" style="padding-left: 0;">
           <mat-slide-toggle class="root-state-entity-switch"
                             formControlName="fetchLastLevelOnly">
           </mat-slide-toggle>
           <label class="tb-small root-state-entity-label" translate>alias.last-level-relation</label>
         </section>
       </div>
-      <div class="flex-1 flex flex-row xs:flex-col gap-2">
+      <div class="flex flex-1 flex-row gap-2 xs:flex-col">
         <mat-form-field class="mat-block" style="min-width: 100px;">
           <mat-label translate>relation.direction</mat-label>
           <mat-select required formControlName="direction">
diff --git a/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html b/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html
index 91879f5f51..31eac384d5 100644
--- a/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html
@@ -60,7 +60,7 @@
       </ng-container>
     </ng-container>
   </div>
-  <div class="tb-panel-actions mat-padding flex flex-row justify-end items-center">
+  <div class="tb-panel-actions mat-padding flex flex-row items-center justify-end">
     <button type="button"
             mat-button
             (click)="cancel()">
diff --git a/ui-ngx/src/app/modules/home/components/filter/boolean-filter-predicate.component.html b/ui-ngx/src/app/modules/home/components/filter/boolean-filter-predicate.component.html
index 68f107dd65..d3d9121032 100644
--- a/ui-ngx/src/app/modules/home/components/filter/boolean-filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/boolean-filter-predicate.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div class="flex-1 flex flex-row justify-start items-start gap-2" [formGroup]="booleanFilterPredicateFormGroup">
-  <mat-form-field hideRequiredMarker class="mat-block flex-full max-w-30%">
+<div class="flex flex-1 flex-row items-start justify-start gap-2" [formGroup]="booleanFilterPredicateFormGroup">
+  <mat-form-field hideRequiredMarker class="mat-block max-w-30% flex-full">
     <mat-select required formControlName="operation" placeholder="{{'filter.operation.operation' | translate}}">
       <mat-option *ngFor="let operation of booleanOperations" [value]="operation">
         {{booleanOperationTranslations.get(booleanOperationEnum[operation]) | translate}}
@@ -25,7 +25,7 @@
   </mat-form-field>
   <tb-filter-predicate-value [allowUserDynamicSource]="allowUserDynamicSource"
                              [onlyUserDynamicSource]="onlyUserDynamicSource"
-                             class="flex-full max-w-70%"
+                             class="max-w-70% flex-full"
                              [valueType]="valueTypeEnum.BOOLEAN"
                              formControlName="value">
   </tb-filter-predicate-value>
diff --git a/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.html
index 088e5e6a31..62f3521543 100644
--- a/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.html
@@ -46,7 +46,7 @@
       </tb-filter-predicate-list>
     </fieldset>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate.component.html b/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate.component.html
index d12d989277..78f4a7badf 100644
--- a/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="flex-1 flex flex-row justify-start items-center gap-2">
+<div class="flex flex-1 flex-row items-center justify-start gap-2">
   <mat-label translate>filter.complex-filter</mat-label>
   <button mat-icon-button color="primary"
           class="tb-mat-32"
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.html
index 1b93e92649..9d3c120ddb 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.html
@@ -29,7 +29,7 @@
   </mat-progress-bar>
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
-      <div class="flex-1 flex flex-col">
+      <div class="flex flex-1 flex-col">
         <div class="flex flex-row">
           <mat-form-field class="mat-block flex-1">
             <mat-label translate>filter.name</mat-label>
@@ -41,7 +41,7 @@
               {{ 'filter.duplicate-filter' | translate }}
             </mat-error>
           </mat-form-field>
-          <section class="tb-editable-switch flex flex-col justify-start items-center">
+          <section class="tb-editable-switch flex flex-col items-center justify-start">
             <label class="tb-small editable-label" translate>filter.editable</label>
             <mat-slide-toggle class="editable-switch"
                               formControlName="editable">
@@ -54,7 +54,7 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions  class="flex justify-end items-center">
+  <div mat-dialog-actions  class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-list.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-list.component.html
index 3708938cad..2e9f12da2b 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-list.component.html
@@ -23,15 +23,15 @@
       </mat-panel-title>
     </mat-expansion-panel-header>
     <div class="flex flex-row">
-      <span class="flex-full max-w-8%"></span>
-      <div class="flex-full max-w-92% flex flex-row justify-start items-center gap-2">
-        <div class="flex-1 flex flex-row gap-2">
-          <div class="flex-full max-w-30% flex flex-row justify-start items-center gap-2">
+      <span class="max-w-8% flex-full"></span>
+      <div class="flex max-w-92% flex-full flex-row items-center justify-start gap-2">
+        <div class="flex flex-1 flex-row gap-2">
+          <div class="flex max-w-30% flex-full flex-row items-center justify-start gap-2">
             <label translate class="tb-title no-padding flex-1">filter.operation.operation</label>
             <label *ngIf="valueType === valueTypeEnum.STRING"
                    translate class="tb-title no-padding" style="min-width: 70px;">filter.ignore-case</label>
           </div>
-          <label translate class="tb-title no-padding flex-full max-w-70%">filter.value</label>
+          <label translate class="tb-title no-padding max-w-70% flex-full">filter.value</label>
         </div>
         <label *ngIf="displayUserParameters"
                translate class="tb-title no-padding" style="width: 60px;">filter.user-parameters</label>
@@ -40,14 +40,14 @@
     </div>
     <mat-divider style="padding-bottom: 5px;"></mat-divider>
     <div class="predicate-list">
-      <div class="flex flex-row justify-start items-stretch" style="height: 76px;"
+      <div class="flex flex-row items-stretch justify-start" style="height: 76px;"
            formArrayName="predicates"
            *ngFor="let predicateControl of predicatesFormArray.controls; let $index = index">
-        <div class="filters-operation flex-full max-w-8% flex flex-row justify-center items-stretch">
+        <div class="filters-operation flex max-w-8% flex-full flex-row items-stretch justify-center">
           <span *ngIf="$index > 0">{{ complexOperationTranslations.get(operation) | translate }}</span>
         </div>
-        <div class="flex-full max-w-92% flex flex-col">
-          <div class="flex-1 flex flex-row justify-start items-center gap-2">
+        <div class="flex max-w-92% flex-full flex-col">
+          <div class="flex flex-1 flex-row items-center justify-start gap-2">
             <tb-filter-predicate
               class="flex-1"
               [valueType]="valueType"
@@ -70,7 +70,7 @@
       </div>
       <span [class.!hidden]="!!predicatesFormArray.length"
             [class.disabled]="disabled"
-            class="no-data-found flex justify-center items-center" translate>filter.no-filters</span>
+            class="no-data-found flex items-center justify-center" translate>filter.no-filters</span>
     </div>
     <div style="margin-top: 16px;" class="flex flex-row gap-2">
       <button mat-button mat-raised-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html
index 6c7906d327..6784a63e2a 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div class="flex-1 flex flex-row justify-start items-center gap-2" [formGroup]="filterPredicateValueFormGroup">
-  <div class="flex-1 flex flex-col" [class.!hidden]="dynamicMode || onlyUserDynamicSource">
+<div class="flex flex-1 flex-row items-center justify-start gap-2" [formGroup]="filterPredicateValueFormGroup">
+  <div class="flex flex-1 flex-col" [class.!hidden]="dynamicMode || onlyUserDynamicSource">
     <div class="flex flex-col" [ngSwitch]="valueType">
       <ng-template [ngSwitchCase]="valueTypeEnum.STRING">
         <mat-form-field hideRequiredMarker class="mat-block">
@@ -44,8 +44,8 @@
     <div class="tb-hint">{{ hintText | translate }}</div>
   </div>
   <div class="flex flex-col" [class.!hidden]="!dynamicMode && !onlyUserDynamicSource">
-    <div formGroupName="dynamicValue" class="flex flex-row justify-start items-center gap-2">
-      <div class="flex-full max-w-35% flex flex-col">
+    <div formGroupName="dynamicValue" class="flex flex-row items-center justify-start gap-2">
+      <div class="flex max-w-35% flex-full flex-col">
         <mat-form-field hideRequiredMarker class="mat-block">
           <mat-select formControlName="sourceType" placeholder="{{'filter.dynamic-source-type' | translate}}">
             <mat-option [value]="null">
@@ -58,7 +58,7 @@
         </mat-form-field>
         <div class="tb-hint" translate>filter.dynamic-source-type</div>
       </div>
-      <div class="flex-1 flex flex-col">
+      <div class="flex flex-1 flex-col">
         <mat-form-field hideRequiredMarker class="mat-block">
           <input matInput formControlName="sourceAttribute" placeholder="{{'filter.source-attribute' | translate}}">
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-predicate.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-predicate.component.html
index d4157ac25b..372702a20d 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-predicate.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div class="flex-1 flex flex-row justify-start items-center gap-2" [formGroup]="filterPredicateFormGroup">
-  <div class="flex-1 flex flex-col" [ngSwitch]="type">
+<div class="flex flex-1 flex-row items-center justify-start gap-2" [formGroup]="filterPredicateFormGroup">
+  <div class="flex flex-1 flex-col" [ngSwitch]="type">
     <ng-template [ngSwitchCase]="filterPredicateType.STRING">
       <tb-string-filter-predicate
         [allowUserDynamicSource]="allowUserDynamicSource"
@@ -52,7 +52,7 @@
   </div>
   <tb-filter-user-info *ngIf="type !== filterPredicateType.COMPLEX && displayUserParameters"
                        style="width: 60px;"
-                       class="flex flex-row justify-center items-stretch"
+                       class="flex flex-row items-stretch justify-center"
                        [valueType]="valueType"
                        [operation]="filterPredicateFormGroup.get('predicate').value?.operation"
                        [key]="key"
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html
index 37b70e9244..d44e8fb12f 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html
@@ -30,7 +30,7 @@
       <mat-checkbox formControlName="editable" style="margin-bottom: 16px;">
         {{ 'filter.editable' | translate }}
       </mat-checkbox>
-      <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-form-field class="mat-block flex-1">
           <mat-label translate>filter.display-label</mat-label>
           <input matInput formControlName="label">
@@ -45,7 +45,7 @@
       </mat-form-field>
     </fieldset>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html
index 1a0e7688e5..d52bdf8d77 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html
@@ -29,25 +29,25 @@
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
   <div mat-dialog-content>
-    <div class="tb-filters-header flex flex-row justify-start items-center">
-      <span class="flex-full max-w-5%"></span>
-      <div class="flex-full max-w-95% flex flex-row justify-start items-center">
+    <div class="tb-filters-header flex flex-row items-center justify-start">
+      <span class="max-w-5% flex-full"></span>
+      <div class="flex max-w-95% flex-full flex-row items-center justify-start">
         <div class="tb-header-label flex-1" translate>filter.filter</div>
-        <div class="tb-header-label flex-1 basis-20 min-w-20 max-w-20 flex flex-col justify-center items-center" translate
+        <div class="tb-header-label flex min-w-20 max-w-20 flex-1 basis-20 flex-col items-center justify-center" translate
              style="padding-left: 5px;">filter.editable</div>
         <div style="min-width: 132px;"></div>
       </div>
     </div>
     <fieldset [disabled]="isLoading$ | async">
       <mat-divider></mat-divider>
-      <div class="flex-1 flex flex-row justify-start items-center"
+      <div class="flex flex-1 flex-row items-center justify-start"
            formArrayName="filters"
            *ngFor="let filterControl of filtersFormArray().controls; let $index = index">
-        <span class="flex-full max-w-5%">{{$index + 1}}.</span>
-        <div class="mat-elevation-z4 tb-filter flex-full max-w-5% flex flex-row justify-start items-center">
+        <span class="max-w-5% flex-full">{{$index + 1}}.</span>
+        <div class="mat-elevation-z4 tb-filter flex max-w-5% flex-full flex-row items-center justify-start">
           <mat-label class="flex-1">{{filterControl.get('filter').value}}</mat-label>
           <section style="padding-left: 10px;"
-                   class="tb-editable-switch flex-1 basis-20 min-w-20 max-w-20 flex flex-col justify-center items-center">
+                   class="tb-editable-switch flex min-w-20 max-w-20 flex-1 basis-20 flex-col items-center justify-center">
             <mat-slide-toggle class="editable-switch"
                               [formControl]="filterControl.get('editable')">
             </mat-slide-toggle>
diff --git a/ui-ngx/src/app/modules/home/components/filter/filters-edit-panel.component.html b/ui-ngx/src/app/modules/home/components/filter/filters-edit-panel.component.html
index d2a1110479..9710b7bf3f 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filters-edit-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filters-edit-panel.component.html
@@ -17,7 +17,7 @@
 -->
 <div class="mat-content mat-padding flex flex-col">
   <div *ngFor="let filter of filtersInfo | keyvalue; let last = last">
-    <div class="flex flex-row justify-start items-center">
+    <div class="flex flex-row items-center justify-start">
       <mat-label class="flex-1">{{filter.value.filter}}</mat-label>
       <button mat-icon-button color="primary"
               style="min-width: 40px;"
diff --git a/ui-ngx/src/app/modules/home/components/filter/filters-edit.component.html b/ui-ngx/src/app/modules/home/components/filter/filters-edit.component.html
index 4ad6ccf06b..fc661d1cac 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filters-edit.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filters-edit.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-filters-edit flex flex-row justify-start items-center" *ngIf="hasEditableFilters">
+<section class="tb-filters-edit flex flex-row items-center justify-start" *ngIf="hasEditableFilters">
   <button mat-icon-button
           cdkOverlayOrigin #filtersEditPanelOrigin="cdkOverlayOrigin"
           (click)="openEditMode()"
diff --git a/ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html
index 3ce82ebc2a..2b4ed91214 100644
--- a/ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html
@@ -28,13 +28,13 @@
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async" class="flex flex-col">
       <section class="entity-key flex flex-row gap-2">
-        <section class="flex-full flex flex-row gap-2"
+        <section class="flex flex-full flex-row gap-2"
                  [class]="{
                     'max-w-45%': isConstantKeyType,
                     'max-w-70%': !isConstantKeyType
                  }"
                  formGroupName="key">
-          <mat-form-field class="mat-block flex-full max-w-40%">
+          <mat-form-field class="mat-block max-w-40% flex-full">
             <mat-label translate>filter.key-type.key-type</mat-label>
             <mat-select required formControlName="type">
               <mat-option *ngFor="let type of entityKeyTypes" [value]="type">
@@ -42,7 +42,7 @@
               </mat-option>
             </mat-select>
           </mat-form-field>
-          <mat-form-field class="mat-block flex-full max-w-60%">
+          <mat-form-field class="mat-block max-w-60% flex-full">
             <mat-label translate>filter.key-name</mat-label>
             <input matInput required formControlName="key"
                    #keyNameInput
@@ -123,7 +123,7 @@
       </tb-filter-predicate-list>
     </fieldset>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.html b/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.html
index 31afdddb62..96936acbae 100644
--- a/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.html
@@ -24,8 +24,8 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <div class="flex flex-row">
-        <span class="flex-full max-w-8%"></span>
-        <div class="flex-full max-w-92% flex flex-row justify-start items-center">
+        <span class="max-w-8% flex-full"></span>
+        <div class="flex max-w-92% flex-full flex-row items-center justify-start">
           <label translate class="tb-title no-padding flex-1">filter.key-name</label>
           <label translate class="tb-title no-padding flex-1">filter.key-type.key-type</label>
           <span [class.!hidden]="disabled" style="min-width: 80px;">&nbsp;</span>
@@ -34,14 +34,14 @@
       </div>
       <mat-divider></mat-divider>
       <div class="key-filter-list">
-        <div class="flex flex-row justify-start items-stretch" style="max-height: 76px;"
+        <div class="flex flex-row items-stretch justify-start" style="max-height: 76px;"
              formArrayName="keyFilters"
              *ngFor="let keyFilterControl of keyFiltersFormArray.controls; let $index = index">
-          <div class="filters-operation flex-full max-w-8%">
+          <div class="filters-operation max-w-8% flex-full">
             <span *ngIf="$index > 0" translate>filter.operation.and</span>
           </div>
-          <div class="flex-full max-w-92% flex flex-col">
-            <div class="flex flex-row justify-start items-center">
+          <div class="flex max-w-92% flex-full flex-col">
+            <div class="flex flex-row items-center justify-start">
               <div class="flex-1">{{ keyFilterControl.value.key.key }}</div>
               <div class="flex-1">{{ entityKeyTypeTranslations.get(keyFilterControl.value.key.type) | translate }}</div>
               <button mat-icon-button color="primary"
@@ -65,7 +65,7 @@
         </div>
         <span [class.!hidden]="!!keyFiltersFormArray.length"
               [class.disabled]="disabled"
-              class="no-data-found flex justify-center items-center" translate>filter.no-key-filters</span>
+              class="no-data-found flex items-center justify-center" translate>filter.no-key-filters</span>
       </div>
       <div style="margin-top: 16px;">
         <button mat-button mat-raised-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.html b/ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.html
index 87ac3649bc..ef8fc5b181 100644
--- a/ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div class="flex-1 flex flex-row justify-start items-start gap-2" [formGroup]="numericFilterPredicateFormGroup">
-  <mat-form-field hideRequiredMarker class="mat-block flex-full max-w-30%">
+<div class="flex flex-1 flex-row items-start justify-start gap-2" [formGroup]="numericFilterPredicateFormGroup">
+  <mat-form-field hideRequiredMarker class="mat-block max-w-30% flex-full">
     <mat-select required formControlName="operation" placeholder="{{'filter.operation.operation' | translate}}">
       <mat-option *ngFor="let operation of numericOperations" [value]="operation">
         {{numericOperationTranslations.get(numericOperationEnum[operation]) | translate}}
@@ -25,7 +25,7 @@
   </mat-form-field>
   <tb-filter-predicate-value [allowUserDynamicSource]="allowUserDynamicSource"
                              [onlyUserDynamicSource]="onlyUserDynamicSource"
-                             class="flex-full max-w-70%"
+                             class="max-w-70% flex-full"
                              [valueType]="valueType"
                              formControlName="value">
   </tb-filter-predicate-value>
diff --git a/ui-ngx/src/app/modules/home/components/filter/string-filter-predicate.component.html b/ui-ngx/src/app/modules/home/components/filter/string-filter-predicate.component.html
index 6957d5cdd8..8ed736f79c 100644
--- a/ui-ngx/src/app/modules/home/components/filter/string-filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/string-filter-predicate.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div class="flex-1 flex flex-row justify-start items-start gap-2" [formGroup]="stringFilterPredicateFormGroup">
-  <div class="flex-full max-w-30% flex flex-row justify-start items-center gap-2">
+<div class="flex flex-1 flex-row items-start justify-start gap-2" [formGroup]="stringFilterPredicateFormGroup">
+  <div class="flex max-w-30% flex-full flex-row items-center justify-start gap-2">
     <mat-form-field hideRequiredMarker class="mat-block flex-1">
       <mat-select required formControlName="operation" placeholder="{{'filter.operation.operation' | translate}}">
         <mat-option *ngFor="let operation of stringOperations" [value]="operation">
@@ -24,12 +24,12 @@
         </mat-option>
       </mat-select>
     </mat-form-field>
-    <mat-checkbox class="flex flex-row justify-center items-stretch" formControlName="ignoreCase" style="min-width: 70px;">
+    <mat-checkbox class="flex flex-row items-stretch justify-center" formControlName="ignoreCase" style="min-width: 70px;">
     </mat-checkbox>
   </div>
   <tb-filter-predicate-value [allowUserDynamicSource]="allowUserDynamicSource"
                              [onlyUserDynamicSource]="onlyUserDynamicSource"
-                             class="flex-full max-w-70%"
+                             class="max-w-70% flex-full"
                              [valueType]="valueTypeEnum.STRING"
                              [operation]="stringFilterPredicateFormGroup.get('operation').value"
                              formControlName="value">
diff --git a/ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.html
index 3b0b389859..c5b19aac1f 100644
--- a/ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.html
@@ -60,7 +60,7 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/notification/send-notification-button.component.html b/ui-ngx/src/app/modules/home/components/notification/send-notification-button.component.html
index 0dc3af27ea..dbce8894c1 100644
--- a/ui-ngx/src/app/modules/home/components/notification/send-notification-button.component.html
+++ b/ui-ngx/src/app/modules/home/components/notification/send-notification-button.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div *ngIf="show()" class="flex flex-row justify-end items-end" style="height: 100%; padding: 0 16px;">
+<div *ngIf="show()" class="flex flex-row items-end justify-end" style="height: 100%; padding: 0 16px;">
   <button class="lt-md:!hidden" mat-flat-button color="primary" (click)="sendNotification($event)">
     <mat-icon>send</mat-icon>
     <span translate>notification.send-notification</span>
diff --git a/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html b/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html
index 29e49e52bc..0e40d8e6a5 100644
--- a/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html
+++ b/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="flex flex-row justify-between items-center" style="margin: 0 10px 4px; min-height: 36px">
+<section class="flex flex-row items-center justify-between" style="margin: 0 10px 4px; min-height: 36px">
   <div style="font-weight: 500; letter-spacing: .25px" translate>notification.notification</div>
   <button mat-button color="primary"
           *ngIf="(notifications$ | async).length"
@@ -37,7 +37,7 @@
     </section>
   </div>
   <mat-divider *ngIf="(notifications$ | async).length"></mat-divider>
-  <section class="flex justify-center items-center" *ngIf="(notifications$ | async).length">
+  <section class="flex items-center justify-center" *ngIf="(notifications$ | async).length">
     <button class="flex-1" mat-button color="primary" (click)="viewAll($event)">
       {{ 'notification.view-all' | translate }}
     </button>
diff --git a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html
index 524456a8c8..e5519990e8 100644
--- a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html
@@ -134,7 +134,7 @@
   </mat-horizontal-stepper>
 </div>
 <div mat-dialog-actions style="padding: 0">
-  <div class="dialog-actions-row flex-1 flex flex-row justify-end items-center">
+  <div class="dialog-actions-row flex flex-1 flex-row items-center justify-end">
     <button mat-stroked-button *ngIf="selectedIndex > 0"
             [disabled]="(isLoading$ | async)"
             (click)="previousStep()">{{ 'action.back' | translate }}</button>
@@ -146,7 +146,7 @@
             (click)="nextStep()">{{ 'action.next-with-label' | translate:{label: (getFormLabel(this.selectedIndex+1) | translate)} }}</button>
   </div>
   <mat-divider style="width: 100%"></mat-divider>
-  <div class="dialog-actions-row flex-1 flex flex-row justify-end items-center gap-2">
+  <div class="dialog-actions-row flex flex-1 flex-row items-center justify-end gap-2">
     <button mat-button
             [disabled]="(isLoading$ | async)"
             (click)="cancel()">{{ 'action.cancel' | translate }}</button>
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html
index 6f3ee1eead..20e543c4a4 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div class="flex-1 flex flex-row justify-start items-center gap-2" [formGroup]="alarmDurationPredicateValueFormGroup">
-  <div class="flex-1 flex flex-col" [class.!hidden]="dynamicMode">
+<div class="flex flex-1 flex-row items-center justify-start gap-2" [formGroup]="alarmDurationPredicateValueFormGroup">
+  <div class="flex flex-1 flex-col" [class.!hidden]="dynamicMode">
     <mat-form-field class="mat-block" subscriptSizing="dynamic">
       <input required type="number" matInput
              step="1" min="1" max="2147483647"
@@ -36,9 +36,9 @@
       </mat-error>
     </mat-form-field>
   </div>
-  <div class="flex-1 flex flex-col" [class.!hidden]="!dynamicMode">
-    <div formGroupName="dynamicValue" class="flex flex-row justify-start items-center gap-2">
-      <div class="flex-full max-w-40% flex flex-col">
+  <div class="flex flex-1 flex-col" [class.!hidden]="!dynamicMode">
+    <div formGroupName="dynamicValue" class="flex flex-row items-center justify-start gap-2">
+      <div class="flex max-w-40% flex-full flex-col">
         <mat-form-field class="mat-block" subscriptSizing="dynamic">
           <mat-select formControlName="sourceType" placeholder="{{'filter.dynamic-source-type' | translate}}">
             <mat-option [value]="null">
@@ -50,7 +50,7 @@
           </mat-select>
         </mat-form-field>
       </div>
-      <div class="flex-1 flex flex-col">
+      <div class="flex flex-1 flex-col">
         <mat-form-field class="mat-block source-attribute" subscriptSizing="dynamic">
           <input matInput formControlName="sourceAttribute" placeholder="{{'filter.source-attribute' | translate}}">
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-dynamic-value.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-dynamic-value.component.html
index 99114f1aa0..e32766f3a4 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-dynamic-value.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-dynamic-value.component.html
@@ -17,9 +17,9 @@
 -->
 <mat-expansion-panel [formGroup] = "dynamicValue" class="device-profile-alarm flex-1" style = "margin-bottom: 26px;">
   <mat-expansion-panel-header>
-    <div class="flex-1 flex flex-row justify-start items-center">
+    <div class="flex flex-1 flex-row items-center justify-start">
       <mat-panel-title>
-        <div class="flex-1 flex flex-row justify-start items-center">
+        <div class="flex flex-1 flex-row items-center justify-start">
           {{'filter.dynamic-value' | translate}}
         </div>
       </mat-panel-title>
@@ -27,9 +27,9 @@
     </div>
   </mat-expansion-panel-header>
   <ng-template matExpansionPanelContent>
-    <div class="flex-1 flex flex-col">
-      <div class="flex flex-row justify-start items-center gap-2">
-        <div class="flex-full max-w-40% flex flex-col">
+    <div class="flex flex-1 flex-col">
+      <div class="flex flex-row items-center justify-start gap-2">
+        <div class="flex max-w-40% flex-full flex-col">
           <mat-form-field class="mat-block">
             <mat-select formControlName="sourceType" placeholder="{{'filter.dynamic-source-type' | translate}}">
               <mat-option [value]="null">
@@ -41,7 +41,7 @@
             </mat-select>
           </mat-form-field>
         </div>
-        <div class="flex-1 flex flex-col">
+        <div class="flex flex-1 flex-col">
           <mat-form-field class="mat-block source-attribute">
             <input matInput formControlName="sourceAttribute" placeholder="{{'filter.source-attribute' | translate}}">
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html
index 1a7aa46f01..1179c3037d 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html
@@ -29,7 +29,7 @@
   </mat-progress-bar>
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
-      <div class="flex-1 flex flex-col">
+      <div class="flex flex-1 flex-col">
         <tb-key-filter-list
           [displayUserParameters]="false"
           [allowUserDynamicSource]="false"
@@ -51,12 +51,12 @@
           </mat-form-field>
           <div class="flex flex-row xs:flex-col gt-xs:gap-4" *ngIf="conditionFormGroup.get('spec.type').value != AlarmConditionType.SIMPLE">
             <tb-alarm-duration-predicate-value
-              class="flex-1 flex flex-row"
+              class="flex flex-1 flex-row"
               formControlName="predicate"
               [alarmConditionType]="conditionFormGroup.get('spec.type').value"
             >
             </tb-alarm-duration-predicate-value>
-            <div class="flex-full max-w-23%" *ngIf="conditionFormGroup.get('spec.type').value == AlarmConditionType.DURATION">
+            <div class="max-w-23% flex-full" *ngIf="conditionFormGroup.get('spec.type').value == AlarmConditionType.DURATION">
               <mat-form-field class="mat-block" subscriptSizing="dynamic">
                 <mat-select formControlName="unit" required
                             placeholder="{{ 'device-profile.condition-duration-time-unit' | translate }}">
@@ -74,7 +74,7 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition.component.html
index d7432ac303..74b1a01f93 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<div class="flex flex-row justify-start items-center" [formGroup]="alarmRuleConditionFormGroup" (click)="openFilterDialog($event)" style="min-width: 0;">
+<div class="flex flex-row items-center justify-start" [formGroup]="alarmRuleConditionFormGroup" (click)="openFilterDialog($event)" style="min-width: 0;">
   <span class="tb-alarm-rule-condition title">{{('device-profile.condition' | translate) + ': '}}</span>
-  <div class="tb-alarm-rule-condition flex-1 flex flex-col justify-center items-stretch">
+  <div class="tb-alarm-rule-condition flex flex-1 flex-col items-stretch justify-center">
     <tb-filter-text formControlName="condition"
                     [nowrap]="true"
                     required
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.html
index d279ce99d3..9e296cdea7 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.html
@@ -20,7 +20,7 @@
   </tb-alarm-rule-condition>
   <tb-alarm-schedule-info formControlName="schedule">
   </tb-alarm-schedule-info>
-  <div *ngIf="!disabled || alarmRuleFormGroup.get('alarmDetails').value" class="flex flex-row justify-start items-center">
+  <div *ngIf="!disabled || alarmRuleFormGroup.get('alarmDetails').value" class="flex flex-row items-center justify-start">
     <span class="tb-alarm-rule-details title" (click)="openEditDetailsDialog($event)">
       {{ ('device-profile.alarm-rule-additional-info' | translate) + ': ' }}
     </span>
@@ -35,7 +35,7 @@
       <mat-icon>{{ disabled ? 'visibility' : (alarmRuleFormGroup.get('alarmDetails').value ? 'edit' : 'add') }}</mat-icon>
     </button>
   </div>
-  <div *ngIf="!disabled || alarmRuleFormGroup.get('dashboardId').value" class="flex flex-col justify-start items-start gt-sm:flex-row gt-sm:items-center">
+  <div *ngIf="!disabled || alarmRuleFormGroup.get('dashboardId').value" class="flex flex-col items-start justify-start gt-sm:flex-row gt-sm:items-center">
     <span class="tb-alarm-rule-dashboard title">
       {{ ('device-profile.alarm-rule-mobile-dashboard' | translate) + ': ' }}
     </span>
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-dialog.component.html
index aecae6275a..24be59e26e 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-dialog.component.html
@@ -32,7 +32,7 @@
       formControlName="alarmSchedule">
     </tb-alarm-schedule>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-info.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-info.component.html
index 4914d9d53b..a2a3c96e03 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-info.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-info.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="flex flex-row justify-start items-center" style="min-width: 0;">
+<div class="flex flex-row items-center justify-start" style="min-width: 0;">
   <span class="tb-alarm-rule-schedule title" (click)="openScheduleDialog($event)">{{('device-profile.schedule' | translate) + ': '}}</span>
   <span class="tb-alarm-rule-schedule" (click)="openScheduleDialog($event)"
        [innerHTML]="scheduleText">
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.html
index 8876b113c9..a58cdc72db 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.html
@@ -35,7 +35,7 @@
     <section *ngIf="alarmScheduleForm.get('type').value === alarmScheduleType.SPECIFIC_TIME">
       <tb-alarm-dynamic-value formControlName = 'dynamicValue' helpId = 'device-profile/alarm_specific_schedule_format'></tb-alarm-dynamic-value>
       <div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-days</div>
-      <div class="flex flex-col gt-md:flex-row gap-2">
+      <div class="flex flex-col gap-2 gt-md:flex-row">
         <div class="flex flex-row gap-2">
           <mat-checkbox *ngFor="let day of firstRowDays" [formControl]="weeklyRepeatControl(day)">
             {{ dayOfWeekTranslationsArray[day] | translate }}
@@ -52,20 +52,20 @@
       <div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-time</div>
       <div class="flex flex-row xs:flex-col gt-xs:gap-2">
         <div class="flex flex-row gap-2 gt-md:flex-1">
-          <mat-form-field class="flex-1 sm:basis-37.5 sm:min-w-37.5 sm:max-w-37.5 md:basis-37.5 md:min-w-37.5 md:max-w-37.5">
+          <mat-form-field class="flex-1 sm:min-w-37.5 sm:max-w-37.5 sm:basis-37.5 md:min-w-37.5 md:max-w-37.5 md:basis-37.5">
             <mat-label translate>device-profile.schedule-time-from</mat-label>
             <mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle>
             <mat-datetimepicker #startTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
             <input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker">
           </mat-form-field>
-          <mat-form-field class="flex-1 sm:basis-37.5 sm:min-w-37.5 sm:max-w-37.5 md:basis-37.5 md:min-w-37.5 md:max-w-37.5">
+          <mat-form-field class="flex-1 sm:min-w-37.5 sm:max-w-37.5 sm:basis-37.5 md:min-w-37.5 md:max-w-37.5 md:basis-37.5">
             <mat-label translate>device-profile.schedule-time-to</mat-label>
             <mat-datetimepicker-toggle [for]="endTimePicker" matPrefix></mat-datetimepicker-toggle>
             <mat-datetimepicker #endTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
             <input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker">
           </mat-form-field>
         </div>
-        <div class="flex-1 flex justify-center items-center" style="margin: auto">
+        <div class="flex flex-1 items-center justify-center" style="margin: auto">
           <div style="text-align: center"
                [innerHTML]="getSchedulerRangeText(alarmScheduleForm)">
           </div>
@@ -76,25 +76,25 @@
       <tb-alarm-dynamic-value formControlName = 'dynamicValue' helpId = 'device-profile/alarm_custom_schedule_format'></tb-alarm-dynamic-value>
       <div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-days</div>
       <div *ngFor="let day of allDays" class="flex flex-col gap-4" formArrayName="items">
-        <div class="flex flex-row justify-start items-center xs:flex-col xs:justify-center xs:items-start gap-2" [formGroupName]="''+day">
-          <mat-checkbox formControlName="enabled" class="flex-full max-w-17%" (change)="changeCustomScheduler($event, day)">
+        <div class="flex flex-row items-center justify-start gap-2 xs:flex-col xs:items-start xs:justify-center" [formGroupName]="''+day">
+          <mat-checkbox formControlName="enabled" class="max-w-17% flex-full" (change)="changeCustomScheduler($event, day)">
             {{ dayOfWeekTranslationsArray[day] | translate }}
           </mat-checkbox>
-          <div class="flex-1 flex flex-row gap-2">
-            <mat-form-field class="xs:flex-1 sm:flex-1 sm:basis-25 sm:min-w-25 sm:max-w-25 md:flex-1 md:basis-25 md:min-w-25 md:max-w-25">
+          <div class="flex flex-1 flex-row gap-2">
+            <mat-form-field class="xs:flex-1 sm:min-w-25 sm:max-w-25 sm:flex-1 sm:basis-25 md:min-w-25 md:max-w-25 md:flex-1 md:basis-25">
               <mat-label translate>device-profile.schedule-time-from</mat-label>
               <mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle>
               <mat-datetimepicker #startTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
               <input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker">
             </mat-form-field>
-            <mat-form-field class="xs:flex-1 sm:flex-1 sm:basis-25 sm:min-w-25 sm:max-w-25 md:flex-1 md:basis-25 md:min-w-25 md:max-w-25">
+            <mat-form-field class="xs:flex-1 sm:min-w-25 sm:max-w-25 sm:flex-1 sm:basis-25 md:min-w-25 md:max-w-25 md:flex-1 md:basis-25">
               <mat-label translate>device-profile.schedule-time-to</mat-label>
               <mat-datetimepicker-toggle [for]="endTimePicker" matPrefix></mat-datetimepicker-toggle>
               <mat-datetimepicker #endTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
               <input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker">
             </mat-form-field>
           </div>
-          <div class="flex-1 flex justify-center items-center"
+          <div class="flex flex-1 items-center justify-center"
                style="text-align: center"
                [innerHTML]="getSchedulerRangeText(itemsSchedulerForm.at(day))">
           </div>
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.html
index 0948964b43..36e1e97678 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.html
@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<div class="flex-1 flex flex-col">
+<div class="flex flex-1 flex-col">
   <div *ngFor="let createAlarmRuleControl of createAlarmRulesFormArray().controls; let $index = index;
-               last as isLast;" class="flex flex-row justify-start items-center gap-2"
+               last as isLast;" class="flex flex-row items-center justify-start gap-2"
                style="padding-bottom: 8px;" [formGroup]="createAlarmRuleControl">
-    <div class="create-alarm-rule flex-1 flex flex-row justify-start items-stretch gap-2">
+    <div class="create-alarm-rule flex flex-1 flex-row items-stretch justify-start gap-2">
       <mat-form-field class="severity mat-block" floatLabel="always" hideRequiredMarker>
         <mat-label translate>alarm.severity</mat-label>
         <mat-select formControlName="severity"
@@ -48,7 +48,7 @@
     </button>
   </div>
   <div *ngIf="!createAlarmRulesFormArray().controls.length && !disabled">
-      <span translate class="flex justify-center items-center" style="margin: 16px 0"
+      <span translate class="flex items-center justify-center" style="margin: 16px 0"
             class="tb-prompt required">device-profile.add-create-alarm-rule-prompt</span>
   </div>
   <div *ngIf="!disabled">
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html
index 72fd44e1e8..eb3f06d85b 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html
@@ -17,9 +17,9 @@
 -->
 <mat-expansion-panel class="device-profile-alarm flex-1" [formGroup]="alarmFormGroup" [(expanded)]="expanded">
   <mat-expansion-panel-header>
-    <div class="flex-1 flex flex-row justify-start items-center">
+    <div class="flex flex-1 flex-row items-center justify-start">
       <mat-panel-title>
-        <div class="flex-1 flex flex-row justify-start items-center">
+        <div class="flex flex-1 flex-row items-center justify-start">
           {{ alarmTypeTitle }}
         </div>
       </mat-panel-title>
@@ -53,7 +53,7 @@
     <mat-expansion-panel class="advanced-settings" [expanded]="false">
       <mat-expansion-panel-header>
         <mat-panel-title>
-          <div class="flex-1 flex flex-row justify-end items-center">
+          <div class="flex flex-1 flex-row items-center justify-end">
             <div class="tb-small" translate>device-profile.advanced-settings</div>
           </div>
         </mat-panel-title>
@@ -89,17 +89,17 @@
         </mat-checkbox>
       </ng-template>
     </mat-expansion-panel>
-    <div class="flex-1 flex flex-col">
+    <div class="flex flex-1 flex-col">
       <div translate class="tb-small" style="padding-bottom: 8px;">device-profile.create-alarm-rules</div>
       <tb-create-alarm-rules formControlName="createRules"
                              style="padding-bottom: 16px;"
                              [deviceProfileId]="deviceProfileId">
       </tb-create-alarm-rules>
       <div translate class="tb-small" style="padding-bottom: 8px;">device-profile.clear-alarm-rule</div>
-      <div class="flex flex-row justify-start items-center gap-2"
+      <div class="flex flex-row items-center justify-start gap-2"
            [class.!hidden]="!alarmFormGroup.get('clearRule').value"
            style="padding-bottom: 8px;">
-        <div class="clear-alarm-rule flex-1 flex flex-row">
+        <div class="clear-alarm-rule flex flex-1 flex-row">
           <tb-alarm-rule formControlName="clearRule" class="flex-1" [deviceProfileId]="deviceProfileId">
           </tb-alarm-rule>
         </div>
@@ -114,7 +114,7 @@
       </div>
       <div *ngIf="disabled && !alarmFormGroup.get('clearRule').value">
         <span translate style="margin: 16px 0"
-              class="tb-prompt flex justify-center items-center">device-profile.no-clear-alarm-rule</span>
+              class="tb-prompt flex items-center justify-center">device-profile.no-clear-alarm-rule</span>
       </div>
       <div *ngIf="!disabled" [class.!hidden]="alarmFormGroup.get('clearRule').value">
         <button mat-stroked-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.html
index 84c2f5bbda..da30c52e22 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.html
@@ -29,7 +29,7 @@
   </div>
   <div *ngIf="!alarmsFormArray.controls.length">
       <span translate
-            class="tb-prompt flex justify-center items-center">device-profile.no-alarm-rules</span>
+            class="tb-prompt flex items-center justify-center">device-profile.no-alarm-rules</span>
   </div>
   <div *ngIf="!disabled" style="padding-top: 16px;">
     <button mat-raised-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/edit-alarm-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/edit-alarm-details-dialog.component.html
index d03f5d2cef..1fe91175b1 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/edit-alarm-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/edit-alarm-details-dialog.component.html
@@ -29,7 +29,7 @@
   </mat-progress-bar>
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
-      <div class="flex-1 flex flex-col">
+      <div class="flex flex-1 flex-col">
         <mat-form-field class="mat-block">
           <textarea matInput formControlName="alarmDetails" rows="5"
             placeholder="{{ 'device-profile.alarm-rule-additional-info-placeholder' | translate }}"></textarea>
@@ -38,7 +38,7 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.html
index f8a3a9de2f..4ac7ec4eda 100644
--- a/ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.html
@@ -36,7 +36,7 @@
       [isEdit]="true">
     </tb-asset-profile>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/device-profile-dialog.component.html
index 79e0939dd7..d9066a7fd6 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device-profile-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile-dialog.component.html
@@ -36,7 +36,7 @@
       [isEdit]="true">
     </tb-device-profile>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html
index 5001968224..9793146eb5 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html
@@ -35,7 +35,7 @@
       <ng-container *ngTemplateOutlet="default"></ng-container>
     </ng-template>
     <ng-template [ngSwitchCase]="deviceProvisionType.X509_CERTIFICATE_CHAIN">
-      <div class="tb-hint flex-1 flex justify-start items-center">
+      <div class="tb-hint flex flex-1 items-center justify-start">
         <span [innerHTML]="'device-profile.provision-strategy-x509.certificate-chain-hint' | translate"></span>
         <span tb-help-popup="device-profile/x509-chain-hint"
              tb-help-popup-placement="top"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-dialog.component.html
index 65e4e63538..cf2848648a 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-dialog.component.html
@@ -35,7 +35,7 @@
       formControlName="attributes">
     </tb-lwm2m-attributes-key-list>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-key-list.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-key-list.component.html
index 61d6b4793c..e06289305f 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-key-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-key-list.component.html
@@ -17,15 +17,15 @@
 -->
 <section class="name-value-map flex flex-col" [formGroup]="attributesValueFormGroup">
   <div class="flex flex-row gap-2" style="max-height: 40px; margin-top: 8px;">
-    <label class="tb-title no-padding flex-full max-w-40%" style="min-width: 230px;" translate>device-profile.lwm2m.attribute-name</label>
-    <label class="tb-title no-padding flex-full max-w-60%" translate>device-profile.lwm2m.attribute-value</label>
+    <label class="tb-title no-padding max-w-40% flex-full" style="min-width: 230px;" translate>device-profile.lwm2m.attribute-name</label>
+    <label class="tb-title no-padding max-w-60% flex-full" translate>device-profile.lwm2m.attribute-value</label>
     <span [class.!hidden]="disabled" style="width: 40px;"></span>
   </div>
   <div class="map-list flex flex-col"
        *ngFor="let nameValueControl of attributesValueFormArray().controls; let $index = index"
         [formGroup]="nameValueControl">
-    <div class="flex flex-row justify-start items-center gap-2">
-      <mat-form-field class="flex-full max-w-40%">
+    <div class="flex flex-row items-center justify-start gap-2">
+      <mat-form-field class="max-w-40% flex-full">
         <mat-select formControlName="name" required>
           <mat-option *ngFor="let attributeName of attributeNames" [value]="attributeName"
                       [disabled]="isDisabledAttributeName(attributeName, $index)">
@@ -36,7 +36,7 @@
           {{ 'device-profile.lwm2m.attribute-name-required' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-form-field class="flex-full max-w-60%">
+      <mat-form-field class="max-w-60% flex-full">
         <input formControlName="value" matInput required type="number"
                placeholder="{{ 'key-val.value' | translate }}">
         <mat-error class="flex flex-row" *ngIf="nameValueControl.get('value').hasError('required')">
@@ -58,7 +58,7 @@
     </div>
   </div>
   <div [class.!hidden]="attributesValueFormArray().length"
-        class="map-list flex justify-center items-center" translate>device-profile.lwm2m.no-attributes-set</div>
+        class="map-list flex items-center justify-center" translate>device-profile.lwm2m.no-attributes-set</div>
   <div style="margin-top: 9px;" *ngIf="!disabled && isAddEnabled">
     <button mat-stroked-button color="primary"
             [disabled]="isLoading$ | async"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-config-servers.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-config-servers.component.html
index e190d38d6b..21953a1350 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-config-servers.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-config-servers.component.html
@@ -28,7 +28,7 @@
   </mat-accordion>
   <div *ngIf="!serverConfigsFromArray.controls.length" style="margin:32px 0">
       <span translate
-            class="tb-prompt flex justify-center items-center">device-profile.lwm2m.no-config-servers</span>
+            class="tb-prompt flex items-center justify-center">device-profile.lwm2m.no-config-servers</span>
   </div>
   <div *ngIf="!disabled" style="padding-top: 16px;">
     <button mat-raised-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-config-server.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-config-server.component.html
index 9b9dff6217..e760a17518 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-config-server.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-config-server.component.html
@@ -17,9 +17,9 @@
 -->
 <mat-expansion-panel [formGroup]="serverFormGroup" #serverPanel>
   <mat-expansion-panel-header>
-    <div class="flex-1 flex flex-row justify-start items-center">
+    <div class="flex flex-1 flex-row items-center justify-start">
       <mat-panel-title>
-        <div class="flex-1 flex flex-row justify-start items-center">
+        <div class="flex flex-1 flex-row items-center justify-start">
           <div style="min-width:150px">{{ (serverFormGroup.get('bootstrapServerIs').value ?
             'device-profile.lwm2m.bootstrap-server' : 'device-profile.lwm2m.lwm2m-server') | translate }}</div>
           <div *ngIf="!serverPanel.expanded" style="font-size:14px" class="no-wrap flex flex-row">
@@ -44,7 +44,7 @@
   </mat-expansion-panel-header>
   <ng-template matExpansionPanelContent>
     <section>
-      <div class="flex flex-row xs:flex-col gap-2 xs:gap-0">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
         <mat-form-field class="flex-1">
           <mat-label>{{ 'device-profile.lwm2m.mode' | translate }}</mat-label>
           <mat-select formControlName="securityMode">
@@ -71,7 +71,7 @@
           </mat-error>
         </mat-form-field>
       </div>
-      <div class="flex flex-row xs:flex-col gap-2 xs:gap-0">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
         <mat-form-field class="flex-1">
           <mat-label>{{ 'device-profile.lwm2m.server-host' | translate }}</mat-label>
           <input matInput type="text" formControlName="host" required>
@@ -94,7 +94,7 @@
           </mat-error>
         </mat-form-field>
       </div>
-      <div class="flex flex-row xs:flex-col gap-2 xs:gap-0">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
         <mat-form-field class="flex-1">
           <mat-label>{{ 'device-profile.lwm2m.client-hold-off-time' | translate }}</mat-label>
           <mat-icon *ngIf="!disabled" class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
@@ -140,7 +140,7 @@
           </mat-error>
         </mat-form-field>
       </div>
-      <div class="flex flex-row xs:flex-col gap-2 xs:gap-0">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
         <mat-form-field class="flex-1">
           <mat-label>{{ 'device-profile.lwm2m.lifetime' | translate }}</mat-label>
           <input matInput type="number" min="0" formControlName="lifetime" required>
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-profile-transport-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-profile-transport-configuration.component.html
index 203b8fbff2..75a9725f0b 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-profile-transport-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-profile-transport-configuration.component.html
@@ -33,7 +33,7 @@
     </mat-tab>
     <mat-tab label="{{ 'device-profile.lwm2m.bootstrap-tab' | translate }}">
       <section [formGroup]="lwm2mDeviceProfileFormGroup">
-        <div *ngIf="!isTransportWasRunWithBootstrap" style="padding:16px 0 0 8px;" class="flex flex-row justify-start items-end">
+        <div *ngIf="!isTransportWasRunWithBootstrap" style="padding:16px 0 0 8px;" class="flex flex-row items-end justify-start">
           <mat-icon color="warn" class="material-icons" style="margin-right:8px;">warning</mat-icon>
           <span style="font-weight:500">LwM2M transport was run without bootstrap server</span>
         </div>
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-dialog.component.html
index 207999546f..0071858983 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-dialog.component.html
@@ -36,7 +36,7 @@
       </tb-profile-lwm2m-object-add-instances-list>
     </fieldset>
   </div>
-  <div mat-dialog-actions class="flex flex-row justify-end items-center">
+  <div mat-dialog-actions class="flex flex-row items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-instances.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-instances.component.html
index 34a1d19f62..2f53ebaaec 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-instances.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-instances.component.html
@@ -25,10 +25,10 @@
       [disabled]="isExpend">
       <mat-expansion-panel-header>
         <mat-panel-title class="tb-panel flex flex-row">
-          <div class="flex-full max-w-30% flex justify-start items-center">
+          <div class="flex max-w-30% flex-full items-center justify-start">
             <span class="tb-panel-title">{{ 'device-profile.lwm2m.instance' | translate }}</span>&nbsp;#{{instances.get('id').value}}
           </div>
-          <div class="flex-full max-w-10% flex justify-center items-center">
+          <div class="flex max-w-10% flex-full items-center justify-center">
             <mat-checkbox color="warn"
                           [disabled]="this.disabled"
                           [checked]="getChecked(instances, 'attribute')"
@@ -37,7 +37,7 @@
                           [indeterminate]="getIndeterminate(instances, 'attribute')">
             </mat-checkbox>
           </div>
-          <div class="flex-full max-w-10% flex justify-center items-center">
+          <div class="flex max-w-10% flex-full items-center justify-center">
             <mat-checkbox color="primary"
                           [disabled]="this.disabled"
                           [checked]="getChecked(instances, 'telemetry')"
@@ -46,7 +46,7 @@
                           [indeterminate]="getIndeterminate(instances, 'telemetry')">
             </mat-checkbox>
           </div>
-          <div class="flex-full max-w-10% flex justify-center items-center">
+          <div class="flex max-w-10% flex-full items-center justify-center">
             <mat-checkbox color="primary"
                           [disabled]="disableObserve(instances)"
                           [checked]="getChecked(instances, 'observe')"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-resources.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-resources.component.html
index 34e299f1f7..7d7be1a104 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-resources.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-resources.component.html
@@ -16,17 +16,17 @@
 
 -->
 <section [formGroup]="resourcesFormGroup">
-  <div class="flex flex-row justify-start items-center">
-    <div class="flex-full max-w-30%">
+  <div class="flex flex-row items-center justify-start">
+    <div class="max-w-30% flex-full">
       <mat-label translate>device-profile.lwm2m.resource-label</mat-label>
     </div>
-    <div class="checkbox-column-title flex-full max-w-10%">
+    <div class="checkbox-column-title max-w-10% flex-full">
       <mat-label translate>device-profile.lwm2m.attribute-label</mat-label>
     </div>
-    <div class="checkbox-column-title flex-full max-w-10%">
+    <div class="checkbox-column-title max-w-10% flex-full">
       <mat-label translate>device-profile.lwm2m.telemetry-label</mat-label>
     </div>
-    <div class="checkbox-column-title flex-full max-w-10%">
+    <div class="checkbox-column-title max-w-10% flex-full">
       <mat-label translate>device-profile.lwm2m.observe-label</mat-label>
     </div>
     <div class="flex-1">
@@ -36,26 +36,26 @@
   <mat-divider></mat-divider>
   <div formArrayName="resources"
     *ngFor="let resourceLwM2M of resourcesFormArray.controls; let $index = index; trackBy: trackByParams">
-    <div [formGroupName]="$index" class="resource-list flex flex-row justify-start items-center">
-      <div class="resource-name flex-full max-w-30%">
+    <div [formGroupName]="$index" class="resource-list flex flex-row items-center justify-start">
+      <div class="resource-name max-w-30% flex-full">
         #{{resourceLwM2M.get('id').value}} <span class="name">{{resourceLwM2M.get('name').value}}</span>
       </div>
-      <div class="flex-full max-w-10% flex justify-center items-center">
+      <div class="flex max-w-10% flex-full items-center justify-center">
         <mat-checkbox formControlName="attribute" color="warn">
         </mat-checkbox>
       </div>
-      <div class="flex-full max-w-10% flex justify-center items-center">
+      <div class="flex max-w-10% flex-full items-center justify-center">
         <mat-checkbox formControlName="telemetry" color="primary">
         </mat-checkbox>
       </div>
-      <div class="flex-full max-w-10% flex justify-center items-center">
-        <mat-checkbox class="flex-full max-w-10%" formControlName="observe" color="primary"
+      <div class="flex max-w-10% flex-full items-center justify-center">
+        <mat-checkbox class="max-w-10% flex-full" formControlName="observe" color="primary"
                       matTooltip="{{ 'device-profile.lwm2m.edit-observe-select'  | translate }}"
                       [matTooltipDisabled]="disabled || !isDisabledObserve($index)"
                       matTooltipPosition="above">
         </mat-checkbox>
       </div>
-      <mat-form-field class="flex-full max-w-33%">
+      <mat-form-field class="max-w-33% flex-full">
         <input matInput type="text" formControlName="keyName" required>
         <mat-error *ngIf="resourceLwM2M.get('keyName').hasError('required') ||
                             resourceLwM2M.get('keyName').hasError('pattern')">
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry.component.html
index 0b3b6ca5fe..a4564ea26e 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry.component.html
@@ -21,7 +21,7 @@
       *ngFor="let objectLwM2M of modelsFormArray.controls; let $index = index; trackBy: trackByParams"
       [formGroupName]="$index">
       <mat-expansion-panel-header >
-        <mat-panel-title class="flex justify-start items-center">
+        <mat-panel-title class="flex items-center justify-start">
           <span class="tb-panel-title">{{ objectLwM2M.get('name').value}}</span>&nbsp;#{{ objectLwM2M.get('keyId').value}}
           <span class="flex-1"></span>
           <tb-profile-lwm2m-attributes
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html
index cc408de91e..2c11e6e9d1 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html
@@ -35,7 +35,7 @@
   <fieldset class="fields-group">
     <legend class="group-title" translate>device-profile.mqtt-device-topic-filters</legend>
     <div class="flex flex-col gap-2">
-      <div class="flex flex-row xs:flex-col gap-2">
+      <div class="flex flex-row gap-2 xs:flex-col">
         <mat-form-field class="flex-1">
           <mat-label translate>device-profile.telemetry-topic-filter</mat-label>
           <input matInput required
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-communication-config.component.html b/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-communication-config.component.html
index 82265d225b..4d9208cfa3 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-communication-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-communication-config.component.html
@@ -18,7 +18,7 @@
 <div class="flex flex-col">
   <div *ngFor="let deviceProfileCommunication of communicationConfigFormArray.controls; let $index = index;
                last as isLast;"
-       class="scope-row flex flex-row justify-start items-center gap-2" [formGroup]="deviceProfileCommunication">
+       class="scope-row flex flex-row items-center justify-start gap-2" [formGroup]="deviceProfileCommunication">
     <div class="communication-config">
       <mat-form-field class="spec mat-block" floatLabel="always" hideRequiredMarker>
         <mat-label translate>device-profile.snmp.scope</mat-label>
@@ -33,7 +33,7 @@
         </mat-error>
       </mat-form-field>
       <mat-divider vertical></mat-divider>
-      <section class="flex-1 flex flex-col">
+      <section class="flex flex-1 flex-col">
         <mat-form-field *ngIf="isShowFrequency(deviceProfileCommunication.get('spec').value)">
           <mat-label translate>device-profile.snmp.querying-frequency</mat-label>
           <input matInput formControlName="queryingFrequencyMs" type="number" min="0" required/>
@@ -59,7 +59,7 @@
     </button>
   </div>
   <div *ngIf="!communicationConfigFormArray.controls.length && !disabled">
-      <span class="tb-prompt required required-text flex justify-center items-center" translate>device-profile.snmp.please-add-communication-config</span>
+      <span class="tb-prompt required required-text flex items-center justify-center" translate>device-profile.snmp.please-add-communication-config</span>
   </div>
   <div *ngIf="!disabled && isAddEnabled">
     <button mat-stroked-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.html b/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.html
index e04d64f674..89b66c4036 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.html
@@ -15,21 +15,21 @@
     limitations under the License.
 
 -->
-<div class="mapping-config flex-1 flex flex-col">
-  <div class="flex-full flex flex-row justify-start items-center gap-2">
-    <div class="flex-1 flex flex-row gap-2">
-      <label class="tb-title no-padding flex-full max-w-26%" translate>device-profile.snmp.data-type</label>
-      <label class="tb-title tb-required no-padding flex-full max-w-37%" translate>device-profile.snmp.data-key</label>
-      <label class="tb-title tb-required no-padding flex-full max-w-37%" translate>device-profile.snmp.oid</label>
+<div class="mapping-config flex flex-1 flex-col">
+  <div class="flex flex-full flex-row items-center justify-start gap-2">
+    <div class="flex flex-1 flex-row gap-2">
+      <label class="tb-title no-padding max-w-26% flex-full" translate>device-profile.snmp.data-type</label>
+      <label class="tb-title tb-required no-padding max-w-37% flex-full" translate>device-profile.snmp.data-key</label>
+      <label class="tb-title tb-required no-padding max-w-37% flex-full" translate>device-profile.snmp.oid</label>
       <span style="min-width: 40px" [class.!hidden]="disabled"></span>
     </div>
   </div>
   <mat-divider></mat-divider>
   <div *ngFor="let mappingConfig of mappingsConfigFormArray.controls; let $index = index;
                last as isLast;"
-       [formGroup]="mappingConfig" class="mapping-list flex flex-row justify-start items-center gap-2">
-    <div class="tb-layout-fill flex-1 flex flex-row justify-start items-stretch gap-2">
-      <mat-form-field class="flex-full max-w-26%">
+       [formGroup]="mappingConfig" class="mapping-list flex flex-row items-center justify-start gap-2">
+    <div class="tb-layout-fill flex flex-1 flex-row items-stretch justify-start gap-2">
+      <mat-form-field class="max-w-26% flex-full">
         <mat-select formControlName="dataType" required>
           <mat-option *ngFor="let dataType of dataTypes" [value]="dataType">
             {{ dataTypesTranslationMap.get(dataType) | translate }}
@@ -39,13 +39,13 @@
           {{ 'device-profile.snmp.data-type-required' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-form-field class="flex-full max-w-37%">
+      <mat-form-field class="max-w-37% flex-full">
         <input matInput formControlName="key" required/>
         <mat-error *ngIf="mappingConfig.get('key').hasError('required')">
           {{ 'device-profile.snmp.data-key-required' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-form-field class="flex-full max-w-37%">
+      <mat-form-field class="max-w-37% flex-full">
         <input matInput formControlName="oid" required/>
         <mat-error *ngIf="mappingConfig.get('oid').hasError('required')">
           {{ 'device-profile.snmp.oid-required' | translate }}
@@ -65,7 +65,7 @@
     </div>
   </div>
   <div *ngIf="!mappingsConfigFormArray.controls.length && !disabled">
-      <span class="tb-prompt required required-text flex justify-center items-center" translate>device-profile.snmp.please-add-mapping-config</span>
+      <span class="tb-prompt required required-text flex items-center justify-center" translate>device-profile.snmp.please-add-mapping-config</span>
   </div>
   <div *ngIf="!disabled">
     <button mat-stroked-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-transport-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-transport-configuration.component.html
index 729ca64c4d..4f84e7438c 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-transport-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-transport-configuration.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="snmpDeviceProfileTransportConfigurationFormGroup" style="padding: 8px 0 16px;">
-  <section class="flex flex-row xs:flex-col gap-2">
+  <section class="flex flex-row gap-2 xs:flex-col">
     <mat-form-field class="flex-1">
       <mat-label translate>device-profile.snmp.timeout-ms</mat-label>
       <input matInput formControlName="timeoutMs" type="number" min="0" required/>
diff --git a/ui-ngx/src/app/modules/home/components/profile/queue/tenant-profile-queues.component.html b/ui-ngx/src/app/modules/home/components/profile/queue/tenant-profile-queues.component.html
index ff85dabe76..c343edaa35 100644
--- a/ui-ngx/src/app/modules/home/components/profile/queue/tenant-profile-queues.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/queue/tenant-profile-queues.component.html
@@ -22,7 +22,7 @@
        [class.pb-2]="!isLast">
     <mat-expansion-panel class="flex-1" [expanded]="true">
       <mat-expansion-panel-header>
-        <div class="flex-1 flex flex-row justify-start items-center">
+        <div class="flex flex-1 flex-row items-center justify-start">
           <mat-panel-title>
             {{ getTitle(queuesControl.value.name) }}
           </mat-panel-title>
@@ -43,7 +43,7 @@
   </div>
   <div *ngIf="!queuesFormArray.controls.length">
       <span translate
-            class="tb-prompt flex justify-center items-center">tenant-profile.no-queue</span>
+            class="tb-prompt flex items-center justify-center">tenant-profile.no-queue</span>
   </div>
   <div *ngIf="!disabled" style="padding-top: 16px;">
     <button mat-raised-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.html
index b3c3e4504a..a140987f5d 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.html
@@ -36,7 +36,7 @@
       [isEdit]="true">
     </tb-tenant-profile>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html
index 2a9e9a66f0..d511125eec 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html
@@ -20,7 +20,7 @@
     <legend class="group-title">
       {{ 'tenant-profile.entities' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
-    <div class="fields-element flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+    <div class="fields-element flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.maximum-devices</mat-label>
         <input matInput required min="0" step="1"
@@ -48,7 +48,7 @@
         <mat-hint></mat-hint>
       </mat-form-field>
     </div>
-    <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+    <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.maximum-assets</mat-label>
         <input matInput required min="0" step="1"
@@ -78,12 +78,12 @@
     </div>
     <mat-expansion-panel class="configuration-panel">
       <mat-expansion-panel-header>
-        <mat-panel-description class="flex justify-end items-stretch" translate>
+        <mat-panel-description class="flex items-stretch justify-end" translate>
           tenant-profile.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
           <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.maximum-customers</mat-label>
             <input matInput required min="0" step="1"
@@ -119,7 +119,7 @@
     <legend class="group-title">
       {{ 'tenant-profile.rule-engine' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
-    <div class="fields-element flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+    <div class="fields-element flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.max-r-e-executions</mat-label>
         <input matInput required min="0" step="1"
@@ -149,12 +149,12 @@
     </div>
     <mat-expansion-panel class="configuration-panel">
       <mat-expansion-panel-header>
-        <mat-panel-description class="flex justify-end items-stretch" translate>
+        <mat-panel-description class="flex items-stretch justify-end" translate>
           tenant-profile.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
           <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.max-j-s-executions</mat-label>
             <input matInput required min="0" step="1"
@@ -182,7 +182,7 @@
             <mat-hint></mat-hint>
           </mat-form-field>
         </div>
-        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
           <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.max-rule-node-executions-per-message</mat-label>
             <input matInput required min="0" step="1"
@@ -218,7 +218,7 @@
     <legend class="group-title">
       {{ 'tenant-profile.time-to-live' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
-    <div class="fields-element flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+    <div class="fields-element flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.max-d-p-storage-days</mat-label>
         <input matInput required min="0" step="1"
@@ -246,7 +246,7 @@
         <mat-hint></mat-hint>
       </mat-form-field>
     </div>
-    <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+    <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.default-storage-ttl-days</mat-label>
         <input matInput required min="0" step="1"
@@ -274,7 +274,7 @@
         <mat-hint></mat-hint>
       </mat-form-field>
     </div>
-    <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+    <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.queue-stats-ttl-days</mat-label>
         <input matInput required min="0" step="1"
@@ -324,7 +324,7 @@
         {{ 'tenant-profile.max-sms-range' | translate}}
       </mat-error>
     </mat-form-field>
-    <div class="fields-element flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+    <div class="fields-element flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.max-emails</mat-label>
         <input matInput required min="0" step="1"
@@ -358,7 +358,7 @@
     <legend class="group-title">
       {{ 'tenant-profile.ota-files-in-bytes' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
-    <div class="fields-element flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+    <div class="fields-element flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.maximum-resources-sum-data-size</mat-label>
         <input matInput required min="0" step="1"
@@ -386,7 +386,7 @@
         <mat-hint></mat-hint>
       </mat-form-field>
     </div>
-    <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+    <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <mat-form-field class="mat-block flex-1" appearance="fill">
         <mat-label translate>tenant-profile.maximum-resource-size</mat-label>
         <input matInput required min="0" step="1"
@@ -408,7 +408,7 @@
     <legend class="group-title">
       {{ 'tenant-profile.ws-title' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
-    <div class="fields-element flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+    <div class="fields-element flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <mat-form-field class="mat-block flex-1" appearance="fill">
         <mat-label translate>tenant-profile.ws-limit-max-sessions-per-tenant</mat-label>
         <input matInput type="number" formControlName="maxWsSessionsPerTenant">
@@ -424,7 +424,7 @@
         </mat-error>
       </mat-form-field>
     </div>
-    <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+    <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <mat-form-field class="mat-block flex-1" appearance="fill">
         <mat-label translate>tenant-profile.ws-limit-max-sessions-per-customer</mat-label>
         <input matInput type="number" formControlName="maxWsSessionsPerCustomer">
@@ -442,12 +442,12 @@
     </div>
     <mat-expansion-panel class="configuration-panel">
       <mat-expansion-panel-header>
-        <mat-panel-description class="flex justify-end items-stretch" translate>
+        <mat-panel-description class="flex items-stretch justify-end" translate>
           tenant-profile.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
           <mat-form-field class="mat-block flex-1" appearance="fill">
             <mat-label translate>tenant-profile.ws-limit-max-sessions-per-public-user</mat-label>
             <input matInput type="number" formControlName="maxWsSessionsPerPublicUser">
@@ -463,7 +463,7 @@
             </mat-error>
           </mat-form-field>
         </div>
-        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
           <mat-form-field class="mat-block flex-1" appearance="fill">
             <mat-label translate>tenant-profile.ws-limit-max-sessions-per-regular-user</mat-label>
             <input matInput type="number" formControlName="maxWsSessionsPerRegularUser">
@@ -479,7 +479,7 @@
             </mat-error>
           </mat-form-field>
         </div>
-        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
           <mat-form-field class="mat-block flex-1" appearance="fill">
             <mat-label translate>tenant-profile.ws-limit-queue-per-session</mat-label>
             <input matInput type="number" formControlName="wsMsgQueueLimitPerSession">
@@ -500,7 +500,7 @@
     <legend class="group-title">
       {{ 'tenant-profile.rate-limits.rate-limits' | translate }}
     </legend>
-    <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+    <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <tb-rate-limits class="flex-1" formControlName="transportTenantMsgRateLimit"
                       [type]="rateLimitsType.TENANT_MESSAGES">
       </tb-rate-limits>
@@ -508,7 +508,7 @@
                       [type]="rateLimitsType.DEVICE_MESSAGES">
       </tb-rate-limits>
     </div>
-    <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+    <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <tb-rate-limits class="flex-1" formControlName="transportTenantTelemetryMsgRateLimit"
                       [type]="rateLimitsType.TENANT_TELEMETRY_MESSAGES">
       </tb-rate-limits>
@@ -516,7 +516,7 @@
                       [type]="rateLimitsType.DEVICE_TELEMETRY_MESSAGES">
       </tb-rate-limits>
     </div>
-    <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+    <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <tb-rate-limits class="flex-1" formControlName="transportGatewayMsgRateLimit"
                       [type]="rateLimitsType.GATEWAY_MESSAGES">
       </tb-rate-limits>
@@ -524,7 +524,7 @@
                       [type]="rateLimitsType.GATEWAY_DEVICE_MESSAGES">
       </tb-rate-limits>
     </div>
-    <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+    <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <tb-rate-limits class="flex-1" formControlName="transportGatewayTelemetryMsgRateLimit"
                       [type]="rateLimitsType.GATEWAY_TELEMETRY_MESSAGES">
       </tb-rate-limits>
@@ -534,12 +534,12 @@
     </div>
     <mat-expansion-panel class="configuration-panel">
       <mat-expansion-panel-header>
-        <mat-panel-description class="flex justify-end items-stretch" translate>
+        <mat-panel-description class="flex items-stretch justify-end" translate>
           tenant-profile.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
           <tb-rate-limits class="flex-1" formControlName="transportTenantTelemetryDataPointsRateLimit"
                           [type]="rateLimitsType.TENANT_TELEMETRY_DATA_POINTS">
           </tb-rate-limits>
@@ -547,7 +547,7 @@
                           [type]="rateLimitsType.DEVICE_TELEMETRY_DATA_POINTS">
           </tb-rate-limits>
         </div>
-        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
           <tb-rate-limits class="flex-1" formControlName="transportGatewayTelemetryDataPointsRateLimit"
                           [type]="rateLimitsType.GATEWAY_TELEMETRY_DATA_POINTS">
           </tb-rate-limits>
@@ -555,7 +555,7 @@
                           [type]="rateLimitsType.GATEWAY_DEVICE_TELEMETRY_DATA_POINTS">
           </tb-rate-limits>
         </div>
-        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
           <tb-rate-limits class="flex-1" formControlName="tenantServerRestLimitsConfiguration"
                           [type]="rateLimitsType.TENANT_SERVER_REST_LIMITS_CONFIGURATION">
           </tb-rate-limits>
@@ -563,7 +563,7 @@
                           [type]="rateLimitsType.CUSTOMER_SERVER_REST_LIMITS_CONFIGURATION">
           </tb-rate-limits>
         </div>
-        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
           <tb-rate-limits class="flex-1" formControlName="tenantEntityExportRateLimit"
                           [type]="rateLimitsType.TENANT_ENTITY_EXPORT_RATE_LIMIT">
           </tb-rate-limits>
@@ -571,7 +571,7 @@
                           [type]="rateLimitsType.TENANT_ENTITY_IMPORT_RATE_LIMIT">
           </tb-rate-limits>
         </div>
-        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
           <tb-rate-limits class="flex-1" formControlName="wsUpdatesPerSessionRateLimit"
                           [type]="rateLimitsType.WS_UPDATE_PER_SESSION_RATE_LIMIT">
           </tb-rate-limits>
@@ -579,7 +579,7 @@
                           [type]="rateLimitsType.CASSANDRA_QUERY_TENANT_RATE_LIMITS_CONFIGURATION">
           </tb-rate-limits>
         </div>
-        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
           <tb-rate-limits class="flex-1" formControlName="tenantNotificationRequestsRateLimit"
                           [type]="rateLimitsType.TENANT_NOTIFICATION_REQUEST_RATE_LIMIT">
           </tb-rate-limits>
@@ -587,7 +587,7 @@
                           [type]="rateLimitsType.TENANT_NOTIFICATION_REQUESTS_PER_RULE_RATE_LIMIT">
           </tb-rate-limits>
         </div>
-        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
           <tb-rate-limits class="flex-1" formControlName="edgeEventRateLimits"
                           [type]="rateLimitsType.EDGE_EVENTS_RATE_LIMIT">
           </tb-rate-limits>
@@ -595,7 +595,7 @@
                           [type]="rateLimitsType.EDGE_EVENTS_PER_EDGE_RATE_LIMIT">
           </tb-rate-limits>
         </div>
-        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
           <tb-rate-limits class="flex-1" formControlName="edgeUplinkMessagesRateLimits"
                           [type]="rateLimitsType.EDGE_UPLINK_MESSAGES_RATE_LIMIT">
           </tb-rate-limits>
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component.html
index ee2d2b9ecf..d7636e2c41 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component.html
@@ -28,7 +28,7 @@
   <div mat-dialog-content>
     <tb-rate-limits-list formControlName="rateLimits"></tb-rate-limits-list>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [matDialogClose]="undefined"
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.html
index e72fdc13f3..a53854cc66 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.html
@@ -20,7 +20,7 @@
     <div class="tb-rate-limits-operation" *ngIf="$index > 0 && rateLimitsFormArray.controls.length > 1" translate>
       tenant-profile.rate-limits.but-less-than
     </div>
-    <div class="flex-1 flex flex-row gap-2">
+    <div class="flex flex-1 flex-row gap-2">
       <mat-form-field hideRequiredMarker appearance="fill" class="mat-block flex-1">
         <mat-label translate>tenant-profile.rate-limits.number-of-messages</mat-label>
         <input matInput placeholder="{{ 'tenant-profile.rate-limits.number-of-messages' | translate }}"
@@ -59,7 +59,7 @@
           [matTooltip]="'tenant-profile.rate-limits.add-limit' | translate" matTooltipPosition="above">
     <span translate>tenant-profile.rate-limits.add-limit</span>
   </button>
-  <div class="tb-rate-limits-preview flex-1 flex flex-col gap-2" [class.tb-rate-limits-preview-short]="!disabled">
+  <div class="tb-rate-limits-preview flex flex-1 flex-col gap-2" [class.tb-rate-limits-preview-short]="!disabled">
     <span translate>tenant-profile.rate-limits.preview</span>
     <tb-rate-limits-text [rateLimitsArray]="rateLimitsArray" [disabled]="disabled"></tb-rate-limits-text>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.component.html
index 629276a3ed..4f6b791c7c 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.component.html
@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<div class="flex-1 flex flex-row gap-2">
+<div class="flex flex-1 flex-row gap-2">
   <fieldset class="fieldset-element">
     <legend class="legend-element">{{ label | translate }}</legend>
-    <div [formGroup]="rateLimitsFormGroup" class="flex-1 flex flex-row gap-2"
+    <div [formGroup]="rateLimitsFormGroup" class="flex flex-1 flex-row gap-2"
          (click)="onClick($event)"
          [matTooltip]="'tenant-profile.rate-limits.edit-limit' | translate" matTooltipPosition="above">
       <tb-rate-limits-text [rateLimitsArray]="rateLimitsArray" [disabled]="disabled"></tb-rate-limits-text>
diff --git a/ui-ngx/src/app/modules/home/components/queue/queue-form.component.html b/ui-ngx/src/app/modules/home/components/queue/queue-form.component.html
index 26c74a5a34..0165f75ccc 100644
--- a/ui-ngx/src/app/modules/home/components/queue/queue-form.component.html
+++ b/ui-ngx/src/app/modules/home/components/queue/queue-form.component.html
@@ -37,10 +37,10 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div class="flex-1 flex flex-row lt-md:flex-col gap-4" formGroupName="submitStrategy">
+        <div class="flex flex-1 flex-row gap-4 lt-md:flex-col" formGroupName="submitStrategy">
           <div class="flex-1">
             <label class="group-label" translate>queue.submit-strategy</label>
-            <mat-radio-group class="flex-1 flex flex-col" formControlName="type" required>
+            <mat-radio-group class="flex flex-1 flex-col" formControlName="type" required>
               <mat-radio-button *ngFor="let strategy of submitStrategies" [value]="strategy">
                 {{ queueSubmitStrategyTypesMap.get(queueSubmitStrategyTypes[strategy]).label | translate }}
                 <mat-icon
@@ -75,10 +75,10 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div class="flex-1 flex flex-row lt-md:flex-col gap-4" formGroupName="processingStrategy">
+        <div class="flex flex-1 flex-row gap-4 lt-md:flex-col" formGroupName="processingStrategy">
           <div class="flex-1">
             <label class="group-label" translate>queue.processing-strategy</label>
-              <mat-radio-group class="flex-1 flex flex-col" formControlName="type" required>
+              <mat-radio-group class="flex flex-1 flex-col" formControlName="type" required>
                 <mat-radio-button *ngFor="let strategy of processingStrategies" [value]="strategy">
                   {{ queueProcessingStrategyTypesMap.get(queueProcessingStrategyTypes[strategy]).label | translate }}
                   <mat-icon
@@ -156,10 +156,10 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div class="flex-1 flex flex-col gap-2.5">
+        <div class="flex flex-1 flex-col gap-2.5">
           <div class="flex-1">
             <label class="group-label" translate>queue.batch-processing</label>
-            <div class="flex-1 flex flex-row xs:flex-col gap-2.5">
+            <div class="flex flex-1 flex-row gap-2.5 xs:flex-col">
               <mat-form-field class="mat-block flex-1">
                 <mat-label translate>queue.poll-interval</mat-label>
                 <input type="number" matInput formControlName="pollInterval" required>
@@ -186,8 +186,8 @@
           </div>
           <div class="flex-1">
             <label class="group-label" translate>queue.immediate-processing</label>
-            <div class="flex-1 flex flex-row xs:flex-col gap-2.5">
-              <mat-checkbox class="flex-1 gt-xs:flex gt-xs:justify-center gt-xs:items-stretch" formControlName="consumerPerPartition">
+            <div class="flex flex-1 flex-row gap-2.5 xs:flex-col">
+              <mat-checkbox class="flex-1 gt-xs:flex gt-xs:items-stretch gt-xs:justify-center" formControlName="consumerPerPartition">
                 {{ 'queue.consumer-per-partition' | translate }}
               </mat-checkbox>
               <mat-form-field class="mat-block flex-1">
diff --git a/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html b/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html
index 7ca3705364..f7d2908c8e 100644
--- a/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html
+++ b/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html
@@ -53,7 +53,7 @@
         </div>
       </div>
       <div [class.!hidden]="relationFiltersFormArray.length">
-        <span class="tb-prompt flex justify-center items-center" translate>relation.any-relation</span>
+        <span class="tb-prompt flex items-center justify-center" translate>relation.any-relation</span>
       </div>
     </div>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/relation/relation-table.component.html b/ui-ngx/src/app/modules/home/components/relation/relation-table.component.html
index 08002e6e0f..fb49f299e9 100644
--- a/ui-ngx/src/app/modules/home/components/relation/relation-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/relation/relation-table.component.html
@@ -16,10 +16,10 @@
 
 -->
 <div class="mat-padding tb-entity-table tb-absolute-fill">
-  <div class="tb-entity-table-content tb-outlined-border flex-1 flex flex-col">
+  <div class="tb-entity-table-content tb-outlined-border flex flex-1 flex-col">
     <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode || !dataSource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
-        <div class="title-container flex flex-row justify-start items-center xs:flex-col xs:justify-center xs:items-start">
+        <div class="title-container flex flex-row items-center justify-start xs:flex-col xs:items-start xs:justify-center">
           <span class="tb-entity-table-title">
             {{(direction == directions.FROM ? 'relation.from-relations' : 'relation.to-relations') | translate}}
           </span>
@@ -73,7 +73,7 @@
       </div>
     </mat-toolbar>
     <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [class.!hidden]="dataSource.selection.isEmpty()">
-      <div class="mat-toolbar-tools flex justify-between items-center">
+      <div class="mat-toolbar-tools flex items-center justify-between">
         <span class="tb-entity-table-info">
           {{ 'relation.selected-relations' | translate:{count: dataSource.selection.selected.length} }}
         </span>
@@ -140,7 +140,7 @@
           <mat-header-cell *matHeaderCellDef style="min-width: 80px; max-width: 80px; width: 80px">
           </mat-header-cell>
           <mat-cell *matCellDef="let relation">
-            <div class="flex-1 flex flex-row justify-end items-stretch">
+            <div class="flex flex-1 flex-row items-stretch justify-end">
               <button mat-icon-button [disabled]="isLoading$ | async"
                       matTooltip="{{ 'relation.edit' | translate }}"
                       matTooltipPosition="above"
@@ -162,7 +162,7 @@
                  *matRowDef="let relation; columns: displayedColumns;" (click)="dataSource.selection.toggle(relation)"></mat-row>
       </table>
       <span [class.!hidden]="(dataSource.isEmpty() | async) === false"
-            class="no-data-found flex justify-center items-center" translate>{{ 'relation.no-relations-text' }}</span>
+            class="no-data-found flex items-center justify-center" translate>{{ 'relation.no-relations-text' }}</span>
     </div>
     <mat-divider></mat-divider>
     <mat-paginator [length]="dataSource.total() | async"
diff --git a/ui-ngx/src/app/modules/home/components/sms/smpp-sms-provider-configuration.component.html b/ui-ngx/src/app/modules/home/components/sms/smpp-sms-provider-configuration.component.html
index 7621f9a575..449a6f5642 100644
--- a/ui-ngx/src/app/modules/home/components/sms/smpp-sms-provider-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/sms/smpp-sms-provider-configuration.component.html
@@ -17,7 +17,7 @@
 -->
 <form [formGroup]="smppSmsProviderConfigurationFormGroup" style="padding-bottom: 16px;">
   <div class="flex flex-row flex-wrap gap-1.5">
-    <mat-form-field class="mat-block lt-sm:flex-full gt-xs:flex-full gt-xs:max-w-25%">
+    <mat-form-field class="mat-block lt-sm:flex-full gt-xs:max-w-25% gt-xs:flex-full">
       <mat-label translate>admin.smpp-provider.smpp-version</mat-label>
       <mat-select formControlName="protocolVersion">
         <mat-option *ngFor="let smppVersion of smppVersions" [value]="smppVersion.value">
@@ -32,7 +32,7 @@
         {{'admin.smpp-provider.smpp-host-required' | translate}}
       </mat-error>
     </mat-form-field>
-    <mat-form-field class="mat-block lt-sm:flex-full gt-xs:flex-full gt-xs:max-w-25%">
+    <mat-form-field class="mat-block lt-sm:flex-full gt-xs:max-w-25% gt-xs:flex-full">
       <mat-label translate>admin.smpp-provider.smpp-port</mat-label>
       <input required matInput type="number" formControlName="port">
       <mat-error *ngIf="smppSmsProviderConfigurationFormGroup.get('port').hasError('required')">
diff --git a/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html b/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html
index cabadf231f..6c85983ebc 100644
--- a/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html
@@ -34,12 +34,12 @@
           <div class="flex flex-col">
             <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
                let $index = index; last as isLast;"
-                 class="flex flex-row justify-start items-center" [class.pb-2]="!isLast">
+                 class="flex flex-row items-center justify-start" [class.pb-2]="!isLast">
               <mat-expansion-panel class="entity-type-config flex-1" [formGroup]="entityTypeFormGroup" [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)">
                 <mat-expansion-panel-header>
-                  <div class="flex-1 flex flex-row justify-start items-center">
+                  <div class="flex flex-1 flex-row items-center justify-start">
                     <mat-panel-title>
-                      <div class="flex-1 flex flex-row justify-start items-center">
+                      <div class="flex flex-1 flex-row items-center justify-start">
                         <div [innerHTML]="entityTypeText(entityTypeFormGroup)"></div>
                       </div>
                     </mat-panel-title>
@@ -73,7 +73,7 @@
                           </tb-branch-autocomplete>
                         </div>
                       </div>
-                      <div class="flex-1 flex flex-row justify-start items-center gap-4 xs:flex-col xs:justify-start xs:items-start xs:gap-0"
+                      <div class="flex flex-1 flex-row items-center justify-start gap-4 xs:flex-col xs:items-start xs:justify-start xs:gap-0"
                            formGroupName="config">
                         <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="saveCredentials">
                           {{ 'version-control.export-credentials' | translate }}
@@ -92,7 +92,7 @@
             </div>
             <div *ngIf="!entityTypesFormGroupArray().length">
               <span translate
-                    class="tb-prompt flex justify-center items-center">admin.no-auto-commit-entities-prompt</span>
+                    class="tb-prompt flex items-center justify-center">admin.no-auto-commit-entities-prompt</span>
             </div>
             <div style="padding-top: 16px;"  class="flex flex-row">
               <button mat-raised-button color="primary"
@@ -112,7 +112,7 @@
           </div>
         </fieldset>
         <div class="tb-hint" *ngIf="isReadOnly | async" translate>version-control.auto-commit-settings-read-only-hint</div>
-        <div class="flex flex-row justify-end items-center gap-4 xs:flex-col xs:justify-end xs:items-stretch">
+        <div class="flex flex-row items-center justify-end gap-4 xs:flex-col xs:items-stretch xs:justify-end">
           <button mat-raised-button color="warn" type="button" [class.!hidden]="!settings"
                   [disabled]="(isLoading$ | async) || (isReadOnly | async)" (click)="delete(formDirective)">
             {{'action.delete' | translate}}
diff --git a/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html b/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html
index 327620355f..e1c6c6cf88 100644
--- a/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html
@@ -52,7 +52,7 @@
       formControlName="entityTypes">
     </tb-entity-types-version-create>
   </form>
-  <div class="flex justify-end items-center gap-2" style="padding-top: 16px;">
+  <div class="flex items-center justify-end gap-2" style="padding-top: 16px;">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -71,7 +71,7 @@
   <section *ngIf="resultMessage">
     <div class="mat-headline-6 vc-result-message" [innerHtml]="resultMessage"></div>
   </section>
-  <div *ngIf="(versionCreateResult$ | async)?.done || hasError; else progress" class="flex justify-end items-center gap-2">
+  <div *ngIf="(versionCreateResult$ | async)?.done || hasError; else progress" class="flex items-center justify-end gap-2">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -80,7 +80,7 @@
     </button>
   </div>
   <ng-template #progress>
-    <section class="flex flex-col justify-center items-center">
+    <section class="flex flex-col items-center justify-center">
       <div class="mat-headline-6 vc-result-message progress">
         <span translate>version-control.creating-version</span>
         <mat-progress-bar mode="indeterminate"></mat-progress-bar>
diff --git a/ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html b/ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html
index 516f10934b..60b2b50fb5 100644
--- a/ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html
@@ -33,7 +33,7 @@
       {{ 'version-control.rollback-on-error' | translate }}
     </mat-slide-toggle>
   </div>
-  <div class="flex justify-end items-center gap-2" style="padding-top: 16px;">
+  <div class="flex items-center justify-end gap-2" style="padding-top: 16px;">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -54,7 +54,7 @@
   </div>
   <div *ngIf="errorMessage" class="mat-headline-6 vc-result-message error" [innerHTML]="errorMessage"></div>
   <div *ngFor="let entityTypeLoadResult of entityTypeLoadResults" class="mat-headline-6 vc-result-message">{{ entityTypeLoadResultMessage(entityTypeLoadResult) }}</div>
-  <div *ngIf="(versionLoadResult$ | async)?.done || hasError; else progress" class="flex justify-end items-center gap-2">
+  <div *ngIf="(versionLoadResult$ | async)?.done || hasError; else progress" class="flex items-center justify-end gap-2">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -63,7 +63,7 @@
     </button>
   </div>
   <ng-template #progress>
-    <section class="flex flex-col justify-center items-center">
+    <section class="flex flex-col items-center justify-center">
       <div class="mat-headline-6 vc-result-message progress">
         <span translate>version-control.restoring-entities-from-version</span>
         <mat-progress-bar mode="indeterminate"></mat-progress-bar>
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
index c988746e48..f4d5502a69 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
@@ -20,13 +20,13 @@
   <div class="flex flex-col" style="flex: 1; overflow: auto;">
     <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
              let $index = index; last as isLast;"
-         class="flex flex-row justify-start items-center" [class.pb-2]="!isLast">
+         class="flex flex-row items-center justify-start" [class.pb-2]="!isLast">
       <mat-expansion-panel class="entity-type-config flex-1" [class.load]="loading" [formGroup]="entityTypeFormGroup"
                            [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)" (opened)="loading = false">
         <mat-expansion-panel-header>
-          <div class="flex-1 flex flex-row justify-start items-center">
+          <div class="flex flex-1 flex-row items-center justify-start">
             <mat-panel-title>
-              <div class="flex-1 flex flex-row justify-start items-center">
+              <div class="flex flex-1 flex-row items-center justify-start">
                 <div>{{ entityTypeText(entityTypeFormGroup) }}</div>
               </div>
             </mat-panel-title>
@@ -50,7 +50,7 @@
               [filterAllowedEntityTypes]="false"
               [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
             </tb-entity-type-select>
-            <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4" formGroupName="config">
+            <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4" formGroupName="config">
               <mat-form-field class="mat-block flex-1">
                 <mat-label translate>version-control.sync-strategy</mat-label>
                 <mat-select formControlName="syncStrategy">
@@ -62,7 +62,7 @@
                   </mat-option>
                 </mat-select>
               </mat-form-field>
-              <div class="flex-1 flex flex-col">
+              <div class="flex flex-1 flex-col">
                 <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="saveCredentials">
                   {{ 'version-control.export-credentials' | translate }}
                 </mat-checkbox>
@@ -75,7 +75,7 @@
               </div>
             </div>
           </div>
-          <div class="flex flex-row xs:flex-col gt-xs:gap-4 gt-xs:justify-start gt-xs:items-center gt-xs:min-h-19"
+          <div class="flex flex-row xs:flex-col gt-xs:min-h-19 gt-xs:items-center gt-xs:justify-start gt-xs:gap-4"
                formGroupName="config">
             <mat-slide-toggle formControlName="allEntities">
               {{ 'version-control.all-entities' | translate }}
@@ -93,7 +93,7 @@
     </div>
     <div *ngIf="!entityTypesFormGroupArray().length">
           <span translate
-                class="tb-prompt flex justify-center items-center">version-control.no-entities-to-export-prompt</span>
+                class="tb-prompt flex items-center justify-center">version-control.no-entities-to-export-prompt</span>
     </div>
   </div>
   <div style="padding-top: 16px;" class="flex flex-row">
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html
index 0179c1c0f8..468f640b23 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html
@@ -20,13 +20,13 @@
   <div class="flex flex-col" style="flex: 1; overflow: auto;">
     <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
              let $index = index; last as isLast;"
-         class="flex flex-row justify-start items-center" [class.pb-2]="!isLast">
+         class="flex flex-row items-center justify-start" [class.pb-2]="!isLast">
       <mat-expansion-panel class="entity-type-config flex-1" [class.load]="loading" [formGroup]="entityTypeFormGroup"
                            [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)" (opened)="loading = false">
         <mat-expansion-panel-header>
-          <div class="flex-1 flex flex-row justify-start items-center">
+          <div class="flex flex-1 flex-row items-center justify-start">
             <mat-panel-title>
-              <div class="flex-1 flex flex-row justify-start items-center">
+              <div class="flex flex-1 flex-row items-center justify-start">
                 <div>{{ entityTypeText(entityTypeFormGroup) }}</div>
               </div>
             </mat-panel-title>
@@ -51,8 +51,8 @@
               [filterAllowedEntityTypes]="false"
               [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
             </tb-entity-type-select>
-            <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4 xs:gap-2" formGroupName="config">
-              <div class="flex-1 flex flex-col">
+            <div class="flex flex-1 flex-row xs:flex-col xs:gap-2 gt-xs:gap-4" formGroupName="config">
+              <div class="flex flex-1 flex-col">
                 <mat-checkbox #removeOtherEntitiesCheckbox
                               formControlName="removeOtherEntities"
                               (change)="onRemoveOtherEntities(removeOtherEntitiesCheckbox, entityTypeFormGroup)">
@@ -62,7 +62,7 @@
                   {{ 'version-control.find-existing-entity-by-name' | translate }}
                 </mat-checkbox>
               </div>
-              <div class="flex-1 flex flex-col">
+              <div class="flex flex-1 flex-col">
                 <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="loadCredentials">
                   {{ 'version-control.load-credentials' | translate }}
                 </mat-checkbox>
@@ -80,7 +80,7 @@
     </div>
     <div *ngIf="!entityTypesFormGroupArray().length">
           <span translate
-                class="tb-prompt flex justify-center items-center">version-control.no-entities-to-restore-prompt</span>
+                class="tb-prompt flex items-center justify-center">version-control.no-entities-to-restore-prompt</span>
     </div>
   </div>
   <div style="padding-top: 16px;" class="flex flex-row">
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html
index 73565b07ff..67ef5908e5 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html
@@ -25,7 +25,7 @@
   </mat-progress-bar>
   <form [formGroup]="createVersionFormGroup" style="padding-top: 16px;">
     <fieldset [disabled]="isLoading$ | async">
-      <div class="flex-1 flex flex-col">
+      <div class="flex flex-1 flex-col">
         <tb-branch-autocomplete
           required
           formControlName="branch">
@@ -50,7 +50,7 @@
       </div>
     </fieldset>
   </form>
-  <div class="flex justify-end items-center gap-2">
+  <div class="flex items-center justify-end gap-2">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -69,7 +69,7 @@
   <section *ngIf="(versionCreateResult$ | async)?.done || resultMessage; else progress">
     <section *ngIf="resultMessage">
       <div class="mat-headline-6 vc-result-message">{{ resultMessage }}</div>
-      <div class="flex justify-end items-center gap-2">
+      <div class="flex items-center justify-end gap-2">
         <button mat-button color="primary"
                 type="button"
                 [disabled]="(isLoading$ | async)"
@@ -80,7 +80,7 @@
     </section>
   </section>
   <ng-template #progress>
-    <section class="flex flex-col justify-center items-center">
+    <section class="flex flex-col items-center justify-center">
       <div class="mat-headline-6 vc-result-message progress">
         <span translate>version-control.creating-version</span>
         <mat-progress-bar mode="indeterminate"></mat-progress-bar>
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.html
index 273207ca24..04a4fe4c33 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.html
@@ -60,7 +60,7 @@
   </div>
   <mat-spinner *ngIf="!contentReady" mode="indeterminate" diameter="80"></mat-spinner>
   <div [class.!hidden]="!contentReady" class="diff-viewer flex-1" #diffViewer></div>
-  <div class="bottom-panel flex justify-end items-center gap-2" *ngIf="contentReady">
+  <div class="bottom-panel flex items-center justify-end gap-2" *ngIf="contentReady">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html
index fa670c9ae0..67f5b4a419 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html
@@ -26,7 +26,7 @@
   <mat-spinner *ngIf="!entityDataInfo" mode="indeterminate" diameter="80"></mat-spinner>
   <form *ngIf="entityDataInfo" [formGroup]="restoreFormGroup" style="padding-top: 16px;">
     <fieldset [disabled]="isLoading$ | async">
-      <div class="flex-1 flex flex-col">
+      <div class="flex flex-1 flex-col">
         <mat-checkbox *ngIf="entityDataInfo.hasCredentials" formControlName="loadCredentials" style="margin-bottom: 16px;">
           {{ 'version-control.load-credentials' | translate }}
         </mat-checkbox>
@@ -39,7 +39,7 @@
       </div>
     </fieldset>
   </form>
-  <div *ngIf="entityDataInfo"  class="flex justify-end items-center gap-2">
+  <div *ngIf="entityDataInfo"  class="flex items-center justify-end gap-2">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -58,7 +58,7 @@
   <section *ngIf="(versionLoadResult$ | async)?.done || errorMessage; else progress">
     <section *ngIf="errorMessage">
       <div class="mat-headline-6 vc-result-message error" [innerHTML]="errorMessage"></div>
-      <div class="flex justify-end items-center gap-2">
+      <div class="flex items-center justify-end gap-2">
         <button mat-button color="primary"
                 type="button"
                 [disabled]="(isLoading$ | async)"
@@ -69,7 +69,7 @@
     </section>
   </section>
   <ng-template #progress>
-    <section class="flex flex-col justify-center items-center">
+    <section class="flex flex-col items-center justify-center">
       <div class="mat-headline-6 vc-result-message progress">
         <span translate>version-control.restoring-entity-version</span>
         <mat-progress-bar mode="indeterminate"></mat-progress-bar>
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html
index b2818368e2..b8a31ce399 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html
@@ -16,10 +16,10 @@
 
 -->
 <div class="mat-padding tb-entity-table tb-absolute-fill" [class.tb-popover-mode]="popoverComponent">
-  <div class="tb-entity-table-content flex-1 flex flex-col" [class.tb-outlined-border]="!popoverComponent">
+  <div class="tb-entity-table-content flex flex-1 flex-col" [class.tb-outlined-border]="!popoverComponent">
     <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode">
       <div class="mat-toolbar-tools">
-        <div class="title-container flex flex-row justify-start items-center xs:flex-col xs:justify-center xs:items-start">
+        <div class="title-container flex flex-row items-center justify-start xs:flex-col xs:items-start xs:justify-center">
           <span class="tb-entity-table-title">{{(singleEntityMode ? 'version-control.entity-versions' : 'version-control.versions') | translate}}</span>
           <tb-branch-autocomplete
             #branchAutocompleteComponent
@@ -32,7 +32,7 @@
           </tb-branch-autocomplete>
         </div>
         <span class="flex-1"></span>
-        <div class="flex flex-row justify-center items-center xs:flex-col xs:justify-center xs:items-end">
+        <div class="flex flex-row items-center justify-center xs:flex-col xs:items-end xs:justify-center">
           <button *ngIf="singleEntityMode" mat-stroked-button color="primary"
                   #createVersionButton
                   [disabled]="(isLoading$ | async) || (isReadOnly | async)"
@@ -128,7 +128,7 @@
                                              [class.min-w-10]="!singleEntityMode" [class.max-w-10]="!singleEntityMode" [class.w-10]="!singleEntityMode">
           </mat-header-cell>
           <mat-cell *matCellDef="let entityVersion">
-            <div class="flex-1 flex flex-row justify-end items-stretch">
+            <div class="flex flex-1 flex-row items-stretch justify-end">
               <button *ngIf="singleEntityMode" mat-icon-button [disabled]="isLoading$ | async"
                       matTooltip="{{ 'version-control.compare-with-current' | translate }}"
                       matTooltipPosition="above"
@@ -157,13 +157,13 @@
         <mat-row [class.!hidden]="dataSource.dataLoading" *matRowDef="let entityVersion; columns: displayedColumns;"></mat-row>
       </table>
       <span [class.!hidden]="(isLoading$ | async) || (dataSource.isEmpty() | async) === false || dataSource.dataLoading"
-            class="no-data-found flex justify-center items-center" translate>{{
+            class="no-data-found flex items-center justify-center" translate>{{
         singleEntityMode
           ? 'version-control.no-entity-versions-text'
           : 'version-control.no-versions-text'
         }}</span>
       <span [class.!hidden]="!dataSource.dataLoading"
-            class="no-data-found flex justify-center items-center">{{ 'common.loading' | translate }}</span>
+            class="no-data-found flex items-center justify-center">{{ 'common.loading' | translate }}</span>
     </div>
     <mat-divider></mat-divider>
     <mat-paginator [length]="dataSource.total() | async"
diff --git a/ui-ngx/src/app/modules/home/components/vc/remove-other-entities-confirm.component.html b/ui-ngx/src/app/modules/home/components/vc/remove-other-entities-confirm.component.html
index 15060f44bc..0d37d5b3f1 100644
--- a/ui-ngx/src/app/modules/home/components/vc/remove-other-entities-confirm.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/remove-other-entities-confirm.component.html
@@ -24,7 +24,7 @@
       </mat-form-field>
     </fieldset>
   </form>
-  <div class="flex justify-end items-center gap-2">
+  <div class="flex items-center justify-end gap-2">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/vc/repository-settings.component.html b/ui-ngx/src/app/modules/home/components/vc/repository-settings.component.html
index 78f12d5c20..3bc21b2409 100644
--- a/ui-ngx/src/app/modules/home/components/vc/repository-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/repository-settings.component.html
@@ -99,7 +99,7 @@
               </mat-form-field>
             </section>
           </fieldset>
-          <div class="flex flex-row justify-end items-center gap-4 xs:flex-col xs:justify-end xs:items-stretch">
+          <div class="flex flex-row items-center justify-end gap-4 xs:flex-col xs:items-stretch xs:justify-end">
             <button mat-raised-button color="warn" type="button" [class.!hidden]="!settings"
                     [disabled]="(isLoading$ | async)" (click)="delete(formDirective)">
               {{'action.delete' | translate}}
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.html
index 6e4cb4c1e8..95163a1f49 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.html
@@ -36,7 +36,7 @@
       formControlName="actions">
     </tb-manage-widget-actions>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html
index 36504791dd..02d386f118 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div class="tb-entity-table tb-absolute-fill">
-  <div class="tb-entity-table-content flex-1 flex flex-col">
+  <div class="tb-entity-table-content flex flex-1 flex-col">
     <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode">
       <div class="mat-toolbar-tools">
         <span class="tb-entity-table-title" translate>widget-config.actions</span>
@@ -109,7 +109,7 @@
           <mat-header-cell *matHeaderCellDef style="min-width: 80px; max-width: 80px; width: 80px">
           </mat-header-cell>
           <mat-cell *matCellDef="let action">
-            <div class="flex-1 flex flex-row justify-end items-stretch">
+            <div class="flex flex-1 flex-row items-stretch justify-end">
               <button mat-icon-button [disabled]="isLoading$ | async"
                       type="button"
                       matTooltip="{{ 'widget-config.edit-action' | translate }}"
@@ -133,7 +133,7 @@
                  cdkDrag [cdkDragData]="action"></mat-row>
       </table>
       <span [class.!hidden]="(dataSource.isEmpty() | async) === false"
-            class="no-data-found flex justify-center items-center" translate>{{ 'widget-config.no-actions-text' }}</span>
+            class="no-data-found flex items-center justify-center" translate>{{ 'widget-config.no-actions-text' }}</span>
     </div>
     <mat-divider></mat-divider>
     <mat-paginator [length]="dataSource.total() | async"
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html
index a4a4baa0da..d06493594e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html
@@ -99,7 +99,7 @@
                                [disabled]="!widgetActionFormGroup.get('useShowWidgetActionFunction').value">
             <mat-expansion-panel-header class="flex flex-row flex-wrap">
               <mat-panel-title>
-                <mat-slide-toggle class="mat-slide flex justify-center items-stretch" formControlName="useShowWidgetActionFunction" (click)="$event.stopPropagation()">
+                <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useShowWidgetActionFunction" (click)="$event.stopPropagation()">
                   {{ 'widget-config.show-hide-action-using-function' | translate }}
                 </mat-slide-toggle>
               </mat-panel-title>
@@ -125,7 +125,7 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/alarm/alarm-count-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/alarm/alarm-count-basic-config.component.html
index 861f302109..b2a81420e5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/alarm/alarm-count-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/alarm/alarm-count-basic-config.component.html
@@ -17,7 +17,7 @@
 -->
 <ng-container [formGroup]="alarmCountWidgetConfigForm">
   <div class="tb-form-panel">
-    <div class="flex flex-row justify-between items-center">
+    <div class="flex flex-row items-center justify-between">
       <div class="tb-form-panel-title" translate>alarm.filter</div>
       <button mat-button color="primary"
               (click)="alarmFilterConfig.reset()">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/alarm/alarms-table-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/alarm/alarms-table-basic-config.component.html
index 5ca931b083..5e0fbdcc22 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/alarm/alarms-table-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/alarm/alarms-table-basic-config.component.html
@@ -24,7 +24,7 @@
     formControlName="datasources">
   </tb-datasources>
   <div class="tb-form-panel">
-    <div class="flex flex-row justify-between items-center">
+    <div class="flex flex-row items-center justify-between">
       <div class="tb-form-panel-title" translate>alarm.filter</div>
       <button mat-button color="primary"
         (click)="alarmFilterConfig.reset()">
@@ -55,7 +55,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.card-title' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -74,7 +74,7 @@
       <mat-slide-toggle class="mat-slide"  formControlName="showTitleIcon">
         {{ 'widget-config.card-icon' | translate }}
       </mat-slide-toggle>
-      <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="alarmsTableWidgetConfigForm.get('iconColor').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html
index 9ce93c7f24..75fcf791b0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html
@@ -81,7 +81,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -100,8 +100,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widget-config.card-icon' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
@@ -118,15 +118,15 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.power-button.power-on-colors' | translate }}</div>
-      <div class="flex flex-row justify-start items-center gap-3">
-        <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-3">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.power-button.main</div>
           <tb-color-input asBoxInput
                           formControlName="mainColorOn">
           </tb-color-input>
         </div>
         <mat-divider vertical></mat-divider>
-        <div class="flex flex-row justify-start items-center gap-2">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.power-button.background</div>
           <tb-color-input asBoxInput
                           formControlName="backgroundColorOn">
@@ -136,15 +136,15 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.power-button.power-off-colors' | translate }}</div>
-      <div class="flex flex-row justify-start items-center gap-3">
-        <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-3">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.power-button.main</div>
           <tb-color-input asBoxInput
                           formControlName="mainColorOff">
           </tb-color-input>
         </div>
         <mat-divider vertical></mat-divider>
-        <div class="flex flex-row justify-start items-center gap-2">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.power-button.background</div>
           <tb-color-input asBoxInput
                           formControlName="backgroundColorOff">
@@ -154,15 +154,15 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.power-button.disabled-colors' | translate }}</div>
-      <div class="flex flex-row justify-start items-center gap-3">
-        <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-3">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.power-button.main</div>
           <tb-color-input asBoxInput
                           formControlName="mainColorDisabled">
           </tb-color-input>
         </div>
         <mat-divider vertical></mat-divider>
-        <div class="flex flex-row justify-start items-center gap-2">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.power-button.background</div>
           <tb-color-input asBoxInput
                           formControlName="backgroundColorDisabled">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.html
index 72af4e50f1..ea055f6ae8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.html
@@ -68,7 +68,7 @@
       <mat-expansion-panel class="tb-settings" [expanded]="!toggleButtonWidgetConfigForm.get('autoScale').value" disabled>
         <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide flex justify-center items-stretch" formControlName="autoScale" (click)="$event.stopPropagation()">
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="autoScale" (click)="$event.stopPropagation()">
               {{ 'widgets.toggle-button.auto-scale' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
@@ -91,7 +91,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -110,8 +110,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widget-config.card-icon' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
@@ -128,7 +128,7 @@
     </div>
   </div>
   <div class="tb-form-panel">
-    <div class="flex flex-row justify-between items-center">
+    <div class="flex flex-row items-center justify-between">
       <div class="tb-form-panel-title" translate>widgets.toggle-button.button-appearance</div>
       <tb-toggle-select [(ngModel)]="buttonAppearanceType" [ngModelOptions]="{standalone: true}">
         <tb-toggle-option value="checked">{{ 'widgets.toggle-button.checked' | translate }}</tb-toggle-option>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.html
index 1a9db0a1c3..7a038410c8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.html
@@ -26,7 +26,7 @@
   <mat-form-field class="tb-inline-field tb-aggregation-field" subscriptSizing="dynamic">
     <mat-chip-grid #chipList>
       <mat-chip-row class="tb-datakey-chip">
-        <div class="tb-attribute-chip flex flex-row justify-start items-center gap-1">
+        <div class="tb-attribute-chip flex flex-row items-center justify-start gap-1">
           <div class="tb-chip-labels">
             <div class="tb-chip-label tb-chip-text">
               <ng-container *ngTemplateOutlet="keyName"></ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.html
index 4030ccf0cf..361e7a654f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.html
@@ -47,5 +47,5 @@
   </div>
 </div>
 <ng-template #noKeys>
-  <span class="tb-prompt flex justify-center items-center">{{ 'widgets.aggregated-value-card.no-values' | translate }}</span>
+  <span class="tb-prompt flex items-center justify-center">{{ 'widgets.aggregated-value-card.no-values' | translate }}</span>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html
index 8e1eb658e8..8c40126d69 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html
@@ -38,7 +38,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -57,8 +57,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.value-card.icon' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
@@ -77,7 +77,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showSubtitle">
         {{ 'widgets.aggregated-value-card.subtitle' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="subtitle" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -95,7 +95,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showDate">
         {{ 'widgets.value-card.date' | translate }}
       </mat-slide-toggle>
-      <div class="gt-xs:flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
         <tb-date-format-select class="flex-1" formControlName="dateFormat"></tb-date-format-select>
         <tb-font-settings formControlName="dateFont"
                           [previewText]="datePreviewFn">
@@ -110,9 +110,9 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showChart">
         {{ 'widgets.aggregated-value-card.chart' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <tb-unit-input class="flex" formControlName="chartUnits"></tb-unit-input>
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="chartDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
           <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-card-basic-config.component.html
index 8b97a5262a..95e9c86654 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-card-basic-config.component.html
@@ -25,7 +25,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" translate>widgets.label-card.label</div>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -42,8 +42,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.label-card.icon' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.html
index b87596d39a..4be767ef0b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.html
@@ -40,7 +40,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
         {{ 'widgets.label-card.label' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -55,8 +55,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.label-card.icon' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
@@ -71,9 +71,9 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" translate>widgets.label-value-card.value</div>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <tb-unit-input class="flex" formControlName="units"></tb-unit-input>
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
           <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/mobile-app-qr-code-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/mobile-app-qr-code-basic-config.component.html
index 071401a9bb..4cb4c1dcfb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/mobile-app-qr-code-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/mobile-app-qr-code-basic-config.component.html
@@ -68,7 +68,7 @@
           {{ 'widgets.liquid-level-card.icon' | translate }}
         </mat-slide-toggle>
         <div class="tb-flex row flex-end align-center">
-          <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+          <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
             <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
           </mat-form-field>
           <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html
index 39b5e6e4a6..327a2acdbe 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html
@@ -51,7 +51,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -70,8 +70,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.progress-bar.icon' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
@@ -90,9 +90,9 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValue">
         {{ 'widgets.progress-bar.value' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <tb-unit-input class="flex" formControlName="units"></tb-unit-input>
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
           <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
         </mat-form-field>
@@ -108,7 +108,7 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.progress-bar.range' | translate }}</div>
-      <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-2">
         <div class="tb-small-label" translate>widgets.progress-bar.min</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="tickMin" type="number" placeholder="{{ 'widget-config.set' | translate }}">
@@ -123,7 +123,7 @@
       <mat-slide-toggle class="mat-slide" formControlName="showTicks">
         {{ 'widgets.progress-bar.range-ticks' | translate }}
       </mat-slide-toggle>
-      <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="ticksFont"
                           previewText="100">
         </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/timeseries-table-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/timeseries-table-basic-config.component.html
index 296cc80545..82aa43dbff 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/timeseries-table-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/timeseries-table-basic-config.component.html
@@ -43,7 +43,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width"  formControlName="showTitle">
         {{ 'widget-config.card-title' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -62,7 +62,7 @@
       <mat-slide-toggle class="mat-slide"  formControlName="showTitleIcon">
         {{ 'widget-config.card-icon' | translate }}
       </mat-slide-toggle>
-      <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="timeseriesTableWidgetConfigForm.get('iconColor').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/unread-notification-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/unread-notification-basic-config.component.html
index 66c7e08658..3ff7ab6c98 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/unread-notification-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/unread-notification-basic-config.component.html
@@ -23,7 +23,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -42,8 +42,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.notification.icon' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
@@ -74,7 +74,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div>{{ 'widgets.notification.counter-value' | translate }}</div>
-      <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="counterValueFont"
                           clearButton
                           [previewText]="countPreviewFn"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
index 81209d8b5e..f70b0515eb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
@@ -52,7 +52,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
         {{ 'widgets.value-card.label' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -67,8 +67,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.value-card.icon' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
@@ -83,9 +83,9 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" translate>widgets.value-card.value</div>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <tb-unit-input class="flex" formControlName="units"></tb-unit-input>
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
           <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
         </mat-form-field>
@@ -100,7 +100,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showDate">
         {{ 'widgets.value-card.date' | translate }}
       </mat-slide-toggle>
-      <div class="gt-xs:flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
         <tb-date-format-select class="flex-1" formControlName="dateFormat"></tb-date-format-select>
         <tb-font-settings formControlName="dateFont"
                           [previewText]="datePreviewFn">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.html
index df14c54cf0..abd3e450eb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.html
@@ -50,7 +50,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -69,8 +69,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.value-chart-card.icon' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
@@ -89,9 +89,9 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValue">
         {{ 'widgets.value-chart-card.value' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <tb-unit-input class="flex" formControlName="units"></tb-unit-input>
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
           <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html
index d0b8ed4096..966e6fb9f4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html
@@ -48,7 +48,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -67,8 +67,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widget-config.card-icon' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
@@ -113,7 +113,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showBarLabel">
         {{ 'widgets.bar-chart.label-on-bar' | translate }}
       </mat-slide-toggle>
-      <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="barLabelFont"
                           disabledLineHeight
                           forceSizeUnit="px"
@@ -129,7 +129,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showBarValue">
         {{ 'widgets.bar-chart.value-on-bar' | translate }}
       </mat-slide-toggle>
-      <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="barValueFont"
                           disabledLineHeight
                           forceSizeUnit="px"
@@ -196,7 +196,7 @@
     <mat-expansion-panel class="tb-settings" [expanded]="barChartWidgetConfigForm.get('showLegend').value" [disabled]="!barChartWidgetConfigForm.get('showLegend').value">
       <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide flex justify-center items-stretch" formControlName="showLegend" (click)="$event.stopPropagation()">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLegend" (click)="$event.stopPropagation()">
             {{ 'widget-config.legend' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -214,7 +214,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'legend.label' | translate }}</div>
-          <div class="flex flex-row justify-start items-center gap-2">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="legendLabelFont"
                               previewText="Humidity">
             </tb-font-settings>
@@ -231,7 +231,7 @@
     <mat-expansion-panel class="tb-settings" [expanded]="barChartWidgetConfigForm.get('showTooltip').value" [disabled]="!barChartWidgetConfigForm.get('showTooltip').value">
       <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide flex justify-center items-stretch" formControlName="showTooltip" (click)="$event.stopPropagation()">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
             {{ 'widget-config.tooltip' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -239,7 +239,7 @@
       <ng-template matExpansionPanelContent>
         <div class="tb-form-row space-between">
           <div>{{ 'tooltip.label' | translate }}</div>
-          <div class="flex flex-row justify-start items-center gap-2">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="tooltipLabelFont"
                               [initialPreviewStyle]="{ color: barChartWidgetConfigForm.get('tooltipLabelColor').value }"
                               previewText="Temperature">
@@ -252,7 +252,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'tooltip.value' | translate }}</div>
-          <div class="flex flex-row justify-start items-center gap-2">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="tooltipValueFont"
                               [initialPreviewStyle]="{ color: barChartWidgetConfigForm.get('tooltipValueColor').value }"
                               [previewText]="tooltipValuePreviewFn">
@@ -267,7 +267,7 @@
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="tooltipShowDate">
             {{ 'tooltip.date' | translate }}
           </mat-slide-toggle>
-          <div class="gt-xs:flex-1 flex flex-row justify-start items-center gap-2">
+          <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
             <tb-date-format-select class="flex-1" excludeLastUpdateAgo includeAuto
                                    formControlName="tooltipDateFormat"></tb-date-format-select>
             <tb-font-settings formControlName="tooltipDateFont"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/comparison-keys-table.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/comparison-keys-table.component.html
index 5b528baa7b..4fe4c0dc07 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/comparison-keys-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/comparison-keys-table.component.html
@@ -33,5 +33,5 @@
   </div>
 </div>
 <ng-template #noKeys>
-  <span class="tb-prompt flex justify-center items-center">{{ 'widgets.chart.no-series' | translate }}</span>
+  <span class="tb-prompt flex items-center justify-center">{{ 'widgets.chart.no-series' | translate }}</span>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/flot-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/flot-basic-config.component.html
index 4637deceeb..cf3bfbb2dc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/flot-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/flot-basic-config.component.html
@@ -43,7 +43,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width"  formControlName="showTitle">
         {{ 'widget-config.card-title' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -62,7 +62,7 @@
       <mat-slide-toggle class="mat-slide"  formControlName="showTitleIcon">
         {{ 'widget-config.card-icon' | translate }}
       </mat-slide-toggle>
-      <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="flotWidgetConfigForm.get('iconColor').value"
@@ -111,7 +111,7 @@
       <mat-expansion-panel class="tb-settings" [expanded]="flotWidgetConfigForm.get('showLegend').value" [disabled]="!flotWidgetConfigForm.get('showLegend').value">
         <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide flex justify-center items-stretch" formControlName="showLegend" (click)="$event.stopPropagation()">
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLegend" (click)="$event.stopPropagation()">
               {{ 'widget-config.legend' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html
index d77a806677..b6869437d8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html
@@ -49,7 +49,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width"  formControlName="showTitle">
         {{ 'widget-config.card-title' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -68,7 +68,7 @@
       <mat-slide-toggle class="mat-slide"  formControlName="showTitleIcon">
         {{ 'widget-config.card-icon' | translate }}
       </mat-slide-toggle>
-      <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="latestChartWidgetConfigForm.get('iconColor').value"
@@ -103,7 +103,7 @@
     <mat-expansion-panel class="tb-settings" [expanded]="latestChartWidgetConfigForm.get('showLegend').value" [disabled]="!latestChartWidgetConfigForm.get('showLegend').value">
       <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide flex justify-center items-stretch" formControlName="showLegend" (click)="$event.stopPropagation()">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLegend" (click)="$event.stopPropagation()">
             {{ 'widget-config.legend' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -121,7 +121,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'legend.label' | translate }}</div>
-          <div class="flex flex-row justify-start items-center gap-2">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="legendLabelFont"
                               previewText="Wind">
             </tb-font-settings>
@@ -133,7 +133,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'legend.value' | translate }}</div>
-          <div class="flex flex-row justify-start items-center gap-2">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="legendValueFont"
                               [previewText]="valuePreviewFn">
             </tb-font-settings>
@@ -150,7 +150,7 @@
     <mat-expansion-panel class="tb-settings" [expanded]="latestChartWidgetConfigForm.get('showTooltip').value" [disabled]="!latestChartWidgetConfigForm.get('showTooltip').value">
       <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide flex justify-center items-stretch" formControlName="showTooltip" (click)="$event.stopPropagation()">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
             {{ 'widget-config.tooltip' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -158,7 +158,7 @@
       <ng-template matExpansionPanelContent>
         <div class="tb-form-row space-between column-xs">
           <div>{{ 'tooltip.value' | translate }}</div>
-          <div class="flex flex-row justify-start items-center gap-2">
+          <div class="flex flex-row items-center justify-start gap-2">
             <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
               <mat-select formControlName="tooltipValueType">
                 <mat-option *ngFor="let type of latestChartTooltipValueTypes" [value]="type">
@@ -238,7 +238,7 @@
         <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
           {{ 'widgets.pie-chart.label' | translate }}
         </mat-slide-toggle>
-        <div class="flex-1 flex flex-row justify-start items-center gap-2">
+        <div class="flex flex-1 flex-row items-center justify-start gap-2">
           <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="labelPosition">
               <mat-option *ngFor="let position of pieChartLabelPositions" [value]="position">
@@ -259,7 +259,7 @@
       </div>
       <div class="tb-form-row space-between">
         <div>{{ 'widgets.pie-chart.border' | translate }}</div>
-        <div class="flex flex-row justify-start items-center gap-2">
+        <div class="flex flex-row items-center justify-start gap-2">
           <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
             <input matInput formControlName="borderWidth" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}">
             <div matSuffix>px</div>
@@ -272,7 +272,7 @@
       </div>
       <div class="tb-form-row space-between">
         <div>{{ 'widgets.pie-chart.radius' | translate }}</div>
-        <div class="flex flex-row justify-start items-center gap-2">
+        <div class="flex flex-row items-center justify-start gap-2">
           <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
             <input matInput formControlName="radius" type="number" min="0" max="100" step="1" placeholder="{{ 'widget-config.set' | translate }}">
             <div matSuffix>%</div>
@@ -316,7 +316,7 @@
       </div>
       <div [class.!hidden]="!doughnutTotalEnabled" class="tb-form-row space-between">
         <div>{{ 'widgets.doughnut.central-total-value' | translate }}</div>
-        <div class="flex flex-row justify-start items-center gap-2">
+        <div class="flex flex-row items-center justify-start gap-2">
           <tb-font-settings formControlName="totalValueFont"
                             [previewText]="valuePreviewFn">
           </tb-font-settings>
@@ -341,7 +341,7 @@
       <div class="tb-form-panel-title" translate>widgets.bar-chart.bar-axis</div>
       <div class="tb-form-row space-between column-xs">
         <div translate>widgets.chart.chart-axis.scale</div>
-        <div class="flex flex-row justify-start items-center gap-2">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div class="tb-small-label" translate>widgets.chart.chart-axis.scale-min</div>
           <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
             <input matInput formControlName="axisMin"
@@ -381,7 +381,7 @@
       <div class="tb-form-panel-title" translate>widgets.polar-area-chart.polar-axis</div>
       <div class="tb-form-row space-between column-xs">
         <div translate>widgets.chart.chart-axis.scale</div>
-        <div class="flex flex-row justify-start items-center gap-2">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div class="tb-small-label" translate>widgets.chart.chart-axis.scale-min</div>
           <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
             <input matInput formControlName="axisMin"
@@ -438,7 +438,7 @@
         <mat-slide-toggle class="mat-slide" formControlName="showLine">
           {{ 'widgets.radar-chart.line' | translate }}
         </mat-slide-toggle>
-        <div class="flex flex-row justify-start items-center gap-2">
+        <div class="flex flex-row items-center justify-start gap-2">
           <mat-form-field class="medium-width xs:flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="lineType">
               <mat-option *ngFor="let type of chartLineTypes" [value]="type">
@@ -456,7 +456,7 @@
         <mat-slide-toggle class="mat-slide" formControlName="showPoints">
           {{ 'widgets.radar-chart.points' | translate }}
         </mat-slide-toggle>
-        <div class="flex flex-row justify-start items-center gap-2">
+        <div class="flex flex-row items-center justify-start gap-2">
           <mat-form-field class="medium-width xs:flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="pointShape">
               <mat-option *ngFor="let shape of chartShapes" [value]="shape">
@@ -474,7 +474,7 @@
         <mat-slide-toggle class="mat-slide" formControlName="showLabel">
           {{ 'widgets.radar-chart.points-label' | translate }}
         </mat-slide-toggle>
-        <div class="lt-md:flex-1 flex flex-row justify-start items-center gap-2">
+        <div class="flex flex-row items-center justify-start gap-2 lt-md:flex-1">
           <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="labelPosition">
               <mat-option *ngFor="let position of chartLabelPositions" [value]="position">
@@ -515,7 +515,7 @@
         <mat-slide-toggle class="mat-slide" formControlName="axisShowTickLabels">
           {{ 'widgets.radar-chart.ticks-label' | translate }}
         </mat-slide-toggle>
-        <div class="flex flex-row justify-start items-center gap-2">
+        <div class="flex flex-row items-center justify-start gap-2">
           <tb-font-settings formControlName="axisTickLabelFont"
                             clearButton
                             disabledLineHeight
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html
index 213b08bcfe..5388f7c16b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html
@@ -32,7 +32,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -51,8 +51,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widget-config.card-icon' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
@@ -183,7 +183,7 @@
             {{ 'widgets.time-series-chart.series.point.point-label' | translate }}
           </div>
         </mat-slide-toggle>
-        <div class="lt-md:flex-1 flex flex-row justify-start items-center gap-2">
+        <div class="flex flex-row items-center justify-start gap-2 lt-md:flex-1">
           <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="pointLabelPosition">
               <mat-option *ngFor="let position of chartLabelPositions" [value]="position">
@@ -258,7 +258,7 @@
     <mat-expansion-panel class="tb-settings" [expanded]="rangeChartWidgetConfigForm.get('showLegend').value" [disabled]="!rangeChartWidgetConfigForm.get('showLegend').value">
       <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide flex justify-center items-stretch" formControlName="showLegend" (click)="$event.stopPropagation()">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLegend" (click)="$event.stopPropagation()">
             {{ 'widget-config.legend' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -276,7 +276,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'legend.label' | translate }}</div>
-          <div class="flex flex-row justify-start items-center gap-2">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="legendLabelFont"
                               previewText="20 - 30">
             </tb-font-settings>
@@ -293,7 +293,7 @@
     <mat-expansion-panel class="tb-settings" [expanded]="rangeChartWidgetConfigForm.get('showTooltip').value" [disabled]="!rangeChartWidgetConfigForm.get('showTooltip').value">
       <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide flex justify-center items-stretch" formControlName="showTooltip" (click)="$event.stopPropagation()">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
             {{ 'widget-config.tooltip' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -301,7 +301,7 @@
       <ng-template matExpansionPanelContent>
         <div class="tb-form-row space-between">
           <div>{{ 'tooltip.label' | translate }}</div>
-          <div class="flex flex-row justify-start items-center gap-2">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="tooltipLabelFont"
                               [initialPreviewStyle]="{ color: rangeChartWidgetConfigForm.get('tooltipLabelColor').value }"
                               previewText="Temperature">
@@ -314,7 +314,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'tooltip.value' | translate }}</div>
-          <div class="flex flex-row justify-start items-center gap-2">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="tooltipValueFont"
                               [initialPreviewStyle]="{ color: rangeChartWidgetConfigForm.get('tooltipValueColor').value }"
                               [previewText]="tooltipValuePreviewFn">
@@ -328,7 +328,7 @@
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="tooltipShowDate">
             {{ 'tooltip.date' | translate }}
           </mat-slide-toggle>
-          <div class="gt-xs:flex-1 flex flex-row justify-start items-center gap-2">
+          <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
             <tb-date-format-select class="flex-1" excludeLastUpdateAgo includeAuto
                                    formControlName="tooltipDateFormat"></tb-date-format-select>
             <tb-font-settings formControlName="tooltipDateFont"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html
index d3c327e19d..7e8d78c15c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html
@@ -26,7 +26,7 @@
       formControlName="datasources">
   </tb-datasources>
   <div class="tb-form-panel">
-    <div class="flex flex-row justify-between items-center">
+    <div class="flex flex-row items-center justify-between">
       <div class="tb-form-panel-title" tb-hint-tooltip-icon="{{ seriesMode === 'comparison' ? ('widgets.time-series-chart.comparison.comparison-hint' | translate) : null }}">
         {{ 'widgets.chart.series' | translate }}
       </div>
@@ -58,7 +58,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="comparisonEnabled">
         {{ 'widgets.time-series-chart.comparison.comparison' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <mat-select formControlName="timeForComparison">
             <mat-option [value]="'previousInterval'">
@@ -120,7 +120,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -139,8 +139,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widget-config.card-icon' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
@@ -190,7 +190,7 @@
                          [disabled]="!timeSeriesChartWidgetConfigForm.get('showLegend').value">
       <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide flex justify-center items-stretch" formControlName="showLegend" (click)="$event.stopPropagation()">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLegend" (click)="$event.stopPropagation()">
             {{ 'widget-config.legend' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -198,7 +198,7 @@
       <ng-template matExpansionPanelContent>
         <div class="tb-form-row space-between">
           <div>{{ 'legend.label' | translate }}</div>
-          <div class="flex flex-row justify-start items-center gap-2">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="legendLabelFont"
                               [initialPreviewStyle]="{color: timeSeriesChartWidgetConfigForm.get('legendLabelColor').value}"
                               previewText="Temperature">
@@ -211,7 +211,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'legend.value' | translate }}</div>
-          <div class="flex flex-row justify-start items-center gap-2">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="legendValueFont"
                               [initialPreviewStyle]="{color: timeSeriesChartWidgetConfigForm.get('legendValueColor').value}"
                               previewText="22 °C">
@@ -224,7 +224,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'legend.column-title' | translate }}</div>
-          <div class="flex flex-row justify-start items-center gap-2">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="legendColumnTitleFont"
                               [initialPreviewStyle]="{color: timeSeriesChartWidgetConfigForm.get('legendColumnTitleColor').value}"
                               previewText="{{ 'legend.Avg' | translate }}">
@@ -246,7 +246,7 @@
                          [disabled]="!timeSeriesChartWidgetConfigForm.get('showTooltip').value">
       <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide flex justify-center items-stretch" formControlName="showTooltip" (click)="$event.stopPropagation()">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
             {{ 'widget-config.tooltip' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -263,7 +263,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'tooltip.label' | translate }}</div>
-          <div class="flex flex-row justify-start items-center gap-2">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="tooltipLabelFont"
                               [initialPreviewStyle]="{ color: timeSeriesChartWidgetConfigForm.get('tooltipLabelColor').value }"
                               previewText="Temperature">
@@ -276,7 +276,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'tooltip.value' | translate }}</div>
-          <div class="flex flex-row justify-start items-center gap-2">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="tooltipValueFont"
                               [initialPreviewStyle]="{ color: timeSeriesChartWidgetConfigForm.get('tooltipValueColor').value }"
                               [previewText]="tooltipValuePreviewFn">
@@ -291,7 +291,7 @@
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="tooltipShowDate">
             {{ 'tooltip.date' | translate }}
           </mat-slide-toggle>
-          <div class="gt-xs:flex-1 flex flex-row justify-start items-center gap-2">
+          <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
             <tb-date-format-select class="flex-1" excludeLastUpdateAgo includeAuto
                                    formControlName="tooltipDateFormat"></tb-date-format-select>
             <tb-font-settings formControlName="tooltipDateFont"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.html
index 96b4ad2813..2526037d00 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.html
@@ -81,5 +81,5 @@
   </div>
 </div>
 <ng-template #noKeys>
-  <span class="tb-prompt flex justify-center items-center">{{ noKeysText }}</span>
+  <span class="tb-prompt flex items-center justify-center">{{ noKeysText }}</span>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/widget-actions-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/widget-actions-panel.component.html
index 45dd4c050c..57af5716aa 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/widget-actions-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/widget-actions-panel.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div class="tb-form-panel" (click)="manageWidgetActions()" style="cursor: pointer;">
-  <div class="flex flex-row justify-start items-center gap-4">
+  <div class="flex flex-row items-center justify-start gap-4">
     <div class="tb-form-panel-title" translate style="padding-right: 48px;">widget-config.actions</div>
     <mat-chip-listbox class="flex-1">
       <ng-container *ngFor="let actionSourceId of widgetActionSourceIds">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entities-table-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entities-table-basic-config.component.html
index 1ff1770f4f..903df04aba 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entities-table-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entities-table-basic-config.component.html
@@ -43,7 +43,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.card-title' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -62,7 +62,7 @@
       <mat-slide-toggle class="mat-slide"  formControlName="showTitleIcon">
         {{ 'widget-config.card-icon' | translate }}
       </mat-slide-toggle>
-      <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="entitiesTableWidgetConfigForm.get('iconColor').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.html
index 4de408ebfe..a47366733f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.html
@@ -34,7 +34,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showUnitTitle">
         {{ 'widgets.gauge.units-title' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="unitTitle" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -51,7 +51,7 @@
 
     <div class="tb-form-row space-between">
       <div translate>widget-config.units-short</div>
-      <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-unit-input
           formControlName="units">
         </tb-unit-input>
@@ -70,8 +70,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="valueBox">
         {{ 'widgets.gauge.value' | translate }}
       </mat-slide-toggle>
-      <div class="flex flex-row justify-start items-center gap-2">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="valueInt" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
           <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
         </mat-form-field>
@@ -88,7 +88,7 @@
 
     <div class="tb-form-row space-between column-xs">
       <div translate>widgets.gauge.ticks</div>
-      <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-2">
         <div class="tb-small-label" translate>widgets.gauge.min-value-short</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="minValue" type="number" step="1" placeholder="{{ 'widget-config.set' | translate }}">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.html
index aff6ed4444..46f7553d42 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.html
@@ -35,7 +35,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width"  formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -54,7 +54,7 @@
       <mat-slide-toggle class="mat-slide"  formControlName="showTitleIcon">
         {{ 'widget-config.icon' | translate }}
       </mat-slide-toggle>
-      <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="compassGaugeWidgetConfigForm.get('iconColor').value"
@@ -72,7 +72,7 @@
     <div class="tb-form-panel-title" translate>widgets.gauge.compass-appearance</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" translate>widgets.gauge.labels</div>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <tb-string-items-list
           style="display: flex"
           class="flex-1"
@@ -85,7 +85,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div translate>widgets.gauge.label-style</div>
-      <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="majorTickFont"
                           disabledLineHeight>
         </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html
index a924dffa9b..1f5d3996f0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html
@@ -55,7 +55,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showMinMax">
         {{ 'widgets.gauge.min-and-max-label' | translate }}
       </mat-slide-toggle>
-      <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="minMaxFont"
                           disabledLineHeight
                           [previewText]="previewFn">
@@ -68,7 +68,7 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div class="fixed-title-width">{{ 'widgets.gauge.min-and-max-value' | translate }}</div>
-      <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-2">
         <div class="tb-small-label" translate>widgets.gauge.min-value-short</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="minValue" type="number" step="1" placeholder="{{ 'widget-config.set' | translate }}">
@@ -92,12 +92,12 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValue">
         {{ 'widgets.gauge.value' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <tb-unit-input
           class="flex"
           formControlName="units">
         </tb-unit-input>
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
           <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
         </mat-form-field>
@@ -116,7 +116,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widgets.gauge.label' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html
index ce0f79eda7..7ac93f9d0c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html
@@ -52,7 +52,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -71,8 +71,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.battery-level.icon' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
@@ -91,7 +91,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValue">
         {{ 'widgets.battery-level.value' | translate }}
       </mat-slide-toggle>
-      <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-chip-listbox formControlName="autoScaleValueSize">
           <mat-chip-option [value]="true">{{ 'widgets.battery-level.auto-scale' | translate }}</mat-chip-option>
         </mat-chip-listbox>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
index 63da3f10fe..9808548bbe 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
@@ -50,7 +50,7 @@
         {{ 'widgets.liquid-level-card.icon' | translate }}
       </mat-slide-toggle>
       <div class="tb-flex row flex-end align-center">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
@@ -165,7 +165,7 @@
           </mat-select>
         </mat-form-field>
         <mat-form-field *ngIf="levelCardWidgetConfigForm.get('volumeSource').value === DataSourceType.static; else volumeAttributes"
-                        appearance="outline" class="flex number" subscriptSizing="dynamic">
+                        appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="volumeConstant" type="number"
                  min="0.1" step="1" placeholder="{{ 'widget-config.set' | translate }}">
           <mat-icon matSuffix
@@ -227,7 +227,7 @@
          *ngIf="levelCardWidgetConfigForm.get('layout').value !== LevelCardLayout.simple">
       <div class="fixed-title-width" translate>widgets.liquid-level-card.value</div>
       <div class="tb-flex row flex-end align-center">
-        <mat-form-field style="max-width: 40%;" appearance="outline" class="flex number" subscriptSizing="dynamic">
+        <mat-form-field style="max-width: 40%;" appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="decimals" type="number"
                  min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
           <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
@@ -256,7 +256,7 @@
       [disabled]="!levelCardWidgetConfigForm.get('showTooltip').value">
       <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide flex justify-center items-stretch" formControlName="showTooltip" (click)="$event.stopPropagation()">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
             {{ 'widget-config.tooltip' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -271,7 +271,7 @@
                            [tagFilter]="unitsType.capacity"
                            formControlName="tooltipUnits">
             </tb-unit-input>
-            <mat-form-field style="width: 40%;" appearance="outline" class="flex number" subscriptSizing="dynamic">
+            <mat-form-field style="width: 40%;" appearance="outline" class="number flex" subscriptSizing="dynamic">
               <input matInput formControlName="tooltipLevelDecimals" type="number" min="0"
                      max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
               <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html
index edfb39e4ed..6a147c18db 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html
@@ -46,7 +46,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -65,8 +65,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.signal-strength.icon' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize"
                  placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -86,7 +86,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showDate">
         {{ 'widgets.signal-strength.date' | translate }}
       </mat-slide-toggle>
-      <div class="gt-xs:flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
         <tb-date-format-select class="flex-1" formControlName="dateFormat"></tb-date-format-select>
         <tb-font-settings formControlName="dateFont"
                           [previewText]="datePreviewFn">
@@ -115,7 +115,7 @@
                          [disabled]="!signalStrengthWidgetConfigForm.get('showTooltip').value">
       <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide flex justify-center items-stretch" formControlName="showTooltip" (click)="$event.stopPropagation()">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
             {{ 'widget-config.tooltip' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -125,9 +125,9 @@
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipValue">
             {{ 'tooltip.value' | translate }}
           </mat-slide-toggle>
-          <div class="flex-1 flex flex-row justify-start items-center gap-2">
+          <div class="flex flex-1 flex-row items-center justify-start gap-2">
             <tb-unit-input class="flex" formControlName="units"></tb-unit-input>
-            <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+            <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
               <input matInput formControlName="decimals" type="number" min="0" max="15" step="1"
                      placeholder="{{ 'widget-config.set' | translate }}">
               <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
@@ -145,7 +145,7 @@
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipDate">
             {{ 'tooltip.date' | translate }}
           </mat-slide-toggle>
-          <div class="gt-xs:flex-1 flex flex-row justify-start items-center gap-2">
+          <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
             <tb-date-format-select class="flex-1" formControlName="tooltipDateFormat"></tb-date-format-select>
             <tb-font-settings formControlName="tooltipDateFont"
                               [previewText]="tooltipDatePreviewFn">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html
index d901901126..4233427e8c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html
@@ -61,7 +61,7 @@
     </tb-image-cards-select>
   </div>
   <div class="tb-form-panel">
-    <div class="flex flex-row justify-between items-center">
+    <div class="flex flex-row items-center justify-between">
       <div class="tb-form-panel-title" translate>widget-config.card-style</div>
       <tb-toggle-select [(ngModel)]="cardStyleMode"
                         [ngModelOptions]="{ standalone: true }">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
index 59cdfa56eb..187a1f4a16 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
@@ -86,7 +86,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
         {{ 'widgets.single-switch.label' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -103,8 +103,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.single-switch.icon' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
@@ -121,22 +121,22 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.single-switch.switch-color' | translate }}</div>
-      <div class="flex flex-row justify-start items-center gap-3 lt-sm:justify-between lt-sm:items-center">
-        <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-3 lt-sm:items-center lt-sm:justify-between">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.single-switch.on</div>
           <tb-color-input asBoxInput
                           formControlName="switchColorOn">
           </tb-color-input>
         </div>
         <mat-divider vertical class="lt-sm:!hidden"></mat-divider>
-        <div class="flex flex-row justify-start items-center gap-2">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.single-switch.off</div>
           <tb-color-input asBoxInput
                           formControlName="switchColorOff">
           </tb-color-input>
         </div>
         <mat-divider vertical class="lt-sm:!hidden"></mat-divider>
-        <div class="flex flex-row justify-start items-center gap-2">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.single-switch.disabled</div>
           <tb-color-input asBoxInput
                           formControlName="switchColorDisabled">
@@ -146,22 +146,22 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.single-switch.tumbler-color' | translate }}</div>
-      <div class="flex flex-row justify-start items-center gap-3 lt-sm:justify-between lt-sm:items-center">
-        <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-3 lt-sm:items-center lt-sm:justify-between">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.single-switch.on</div>
           <tb-color-input asBoxInput
                           formControlName="tumblerColorOn">
           </tb-color-input>
         </div>
         <mat-divider vertical class="lt-sm:!hidden"></mat-divider>
-        <div class="flex flex-row justify-start items-center gap-2">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.single-switch.off</div>
           <tb-color-input asBoxInput
                           formControlName="tumblerColorOff">
           </tb-color-input>
         </div>
         <mat-divider vertical class="lt-sm:!hidden"></mat-divider>
-        <div class="flex flex-row justify-start items-center gap-2">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.single-switch.disabled</div>
           <tb-color-input asBoxInput
                           formControlName="tumblerColorDisabled">
@@ -173,7 +173,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showOnLabel">
         {{ 'widgets.single-switch.on-label' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="onLabel" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -190,7 +190,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showOffLabel">
         {{ 'widgets.single-switch.off-label' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="offLabel" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
index 400ae2dc24..8c49a4809e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
@@ -75,7 +75,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -94,8 +94,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.slider.icon' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
@@ -114,9 +114,9 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValue">
         {{ 'widgets.slider.value' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <tb-unit-input class="flex" formControlName="valueUnits"></tb-unit-input>
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="valueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
           <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
         </mat-form-field>
@@ -131,7 +131,7 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.slider.range' | translate }}</div>
-      <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-2">
         <div class="tb-small-label" translate>widgets.slider.min</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="tickMin" type="number" placeholder="{{ 'widget-config.set' | translate }}">
@@ -146,7 +146,7 @@
       <mat-slide-toggle class="mat-slide" formControlName="showTicks">
         {{ 'widgets.slider.range-ticks' | translate }}
       </mat-slide-toggle>
-      <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="ticksFont"
                           previewText="100">
         </tb-font-settings>
@@ -160,7 +160,7 @@
       <mat-slide-toggle class="mat-slide" formControlName="showTickMarks">
         {{ 'widgets.slider.tick-marks' | translate }}
       </mat-slide-toggle>
-      <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="tickMarksCount" type="number" min="2"
                  step="1" placeholder="{{ 'widget-config.set' | translate }}">
@@ -172,15 +172,15 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.slider.colors' | translate }}</div>
-      <div class="flex flex-row justify-start items-center gap-3">
-        <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-3">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.slider.main</div>
           <tb-color-input asBoxInput
                           formControlName="mainColor">
           </tb-color-input>
         </div>
         <mat-divider vertical></mat-divider>
-        <div class="flex flex-row justify-start items-center gap-2">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.slider.background</div>
           <tb-color-input asBoxInput
                           formControlName="backgroundColor">
@@ -190,15 +190,15 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.rpc-state.disabled-state' | translate }}</div>
-      <div class="flex flex-row justify-start items-center gap-3">
-        <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-3">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.slider.main</div>
           <tb-color-input asBoxInput
                           formControlName="mainColorDisabled">
           </tb-color-input>
         </div>
         <mat-divider vertical></mat-divider>
-        <div class="flex flex-row justify-start items-center gap-2">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.slider.background</div>
           <tb-color-input asBoxInput
                           formControlName="backgroundColorDisabled">
@@ -211,8 +211,8 @@
       <div class="fixed-title-width">
         {{ 'widgets.slider.left-icon' | translate }}
       </div>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="leftIconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-css-unit-select class="flex-1" formControlName="leftIconSizeUnit"></tb-css-unit-select>
@@ -230,8 +230,8 @@
       <div class="fixed-title-width">
         {{ 'widgets.slider.right-icon' | translate }}
       </div>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="rightIconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-css-unit-select class="flex-1" formControlName="rightIconSizeUnit"></tb-css-unit-select>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.html
index 56a2e0b588..d3e31fe189 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.html
@@ -34,7 +34,7 @@
         <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
           {{ 'widget-config.title' | translate }}
         </mat-slide-toggle>
-        <div class="flex-1 flex flex-row justify-start items-center gap-2">
+        <div class="flex flex-1 flex-row items-center justify-start gap-2">
           <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
             <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
           </mat-form-field>
@@ -53,8 +53,8 @@
         <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
           {{ 'widget-config.card-icon' | translate }}
         </mat-slide-toggle>
-        <div class="flex-1 flex flex-row justify-start items-center gap-2">
-          <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+        <div class="flex flex-1 flex-row items-center justify-start gap-2">
+          <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
             <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
           </mat-form-field>
           <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html
index d9f71aad72..5b74a67d38 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html
@@ -30,7 +30,7 @@
     <div class="tb-form-panel-title" translate>widgets.wind-speed-direction.values</div>
     <div class="tb-form-row">
       <div class="fixed-title-width tb-required" translate>widgets.wind-speed-direction.wind-direction</div>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <tb-data-key-row class="flex-1"
                          formControlName="windDirectionKey"
                          required
@@ -55,7 +55,7 @@
     </div>
     <div class="tb-form-row column-xs">
       <div class="fixed-title-width" translate>widgets.wind-speed-direction.center-value</div>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <tb-data-key-row class="flex-1"
                          formControlName="centerValueKey"
                          [datasourceType]="datasource?.type"
@@ -94,7 +94,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -113,8 +113,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.wind-speed-direction.icon' | translate }}
       </mat-slide-toggle>
-      <div class="flex-1 flex flex-row justify-start items-center gap-2">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
@@ -153,7 +153,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div>{{ 'widgets.wind-speed-direction.major-ticks' | translate }}</div>
-      <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings [class.!hidden]="!majorTicksFontEnabled"
                           formControlName="majorTicksFont"
                           [initialPreviewStyle]="{ color: windSpeedDirectionWidgetConfigForm.get('majorTicksColor').value }"
@@ -167,7 +167,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div>{{ 'widgets.wind-speed-direction.minor-ticks' | translate }}</div>
-      <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings [class.!hidden]="!minorTicksFontEnabled"
                           formControlName="minorTicksFont"
                           [initialPreviewStyle]="{ color: windSpeedDirectionWidgetConfigForm.get('minorTicksColor').value }"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/data-key-config-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/config/data-key-config-dialog.component.html
index f2bb7b6f9d..4d5f38d30e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/data-key-config-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/data-key-config-dialog.component.html
@@ -53,7 +53,7 @@
       formControlName="dataKey">
     </tb-data-key-config>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/data-key-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/data-key-config.component.html
index 8e479436b0..1930016656 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/data-key-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/data-key-config.component.html
@@ -104,7 +104,7 @@
       <div class="tb-form-panel stroked tb-slide-toggle">
         <mat-expansion-panel class="tb-settings" [expanded]="dataKeyFormGroup.get('comparisonEnabled').value" [disabled]="!dataKeyFormGroup.get('comparisonEnabled').value">
         <mat-expansion-panel-header class="flex flex-row flex-wrap">
-          <mat-panel-title class="flex flex-col justify-center items-start gap-2">
+          <mat-panel-title class="flex flex-col items-start justify-center gap-2">
             <mat-slide-toggle class="mat-slide" formControlName="comparisonEnabled" (click)="$event.stopPropagation()">
               {{ 'datakey.enable-delta-calculation' | translate }}
             </mat-slide-toggle>
@@ -164,7 +164,7 @@
       <mat-expansion-panel class="tb-settings" [expanded]="dataKeyFormGroup.get('usePostProcessing').value" [disabled]="!dataKeyFormGroup.get('usePostProcessing').value">
         <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide flex justify-center items-stretch" formControlName="usePostProcessing" (click)="$event.stopPropagation()">
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="usePostProcessing" (click)="$event.stopPropagation()">
               {{ 'datakey.use-data-post-processing-func' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.html b/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.html
index 22c24af920..524037f2af 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.html
@@ -40,7 +40,7 @@
                     dndDraggingSourceClass="tb-chip-dragging"
                     [removable]="!disabled && !isCountDatasource"
                     (removed)="remove(key)">
-        <div dndDragImageRef class="tb-attribute-chip flex flex-row justify-start items-center gap-1"
+        <div dndDragImageRef class="tb-attribute-chip flex flex-row items-center justify-start gap-1"
              [class.tb-dragging-chip-image]="$index === dragIndex">
           <div class="tb-absolute-fill tb-dragging-chip-image-fill"></div>
           <div dndHandle *ngIf="!disabled && !dragDisabled" class="tb-chip-drag-handle">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/datasource.component.html b/ui-ngx/src/app/modules/home/components/widget/config/datasource.component.html
index d8d14ca953..18eb6f7a23 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/datasource.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/datasource.component.html
@@ -62,7 +62,7 @@
       </mat-form-field>
     </ng-template>
   </section>
-  <section *ngIf="!hideDataKeys" class="flex-1 flex flex-col justify-start items-stretch">
+  <section *ngIf="!hideDataKeys" class="flex flex-1 flex-col items-stretch justify-start">
     <tb-data-keys class="tb-data-keys flex-1"
                   [widgetType]="widgetType"
                   [datasourceType]="datasourceFormGroup.get('type').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.html b/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.html
index 453f0c2b4d..c5342ab804 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.html
@@ -17,9 +17,9 @@
 -->
 <div [formGroup]="datasourcesFormGroup" class="tb-form-panel tb-datasources" [class.no-padding-bottom]="!showAddDatasource">
   <div class="flex flex-col">
-    <div class="flex flex-row justify-between items-center">
+    <div class="flex flex-row items-center justify-between">
       <div class="tb-form-panel-title">{{ (singleDatasource ? (isAlarmSource ? 'widget-config.alarm-source' : 'widget-config.datasource') : 'widget-config.datasources') | translate }}</div>
-      <div class="flex-1 flex flex-row justify-center items-center" *ngIf="timeseriesKeyError">
+      <div class="flex flex-1 flex-row items-center justify-center" *ngIf="timeseriesKeyError">
         <mat-error >{{ 'widget-config.timeseries-key-error' | translate }}</mat-error>
       </div>
       <tb-toggle-select *ngIf="basicMode && !hideDatasourcesMode" [ngModel]="datasourcesMode" (ngModelChange)="datasourcesModeChange($event)"
@@ -33,7 +33,7 @@
   </div>
   <div *ngIf="datasourcesFormArray.length === 0; else datasourcesTemplate">
                 <span translate
-                      class="tb-prompt flex justify-center items-center">datasource.add-datasource-prompt</span>
+                      class="tb-prompt flex items-center justify-center">datasource.add-datasource-prompt</span>
   </div>
   <ng-template #datasourcesTemplate>
     <div style="overflow: auto;">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/target-device.component.html b/ui-ngx/src/app/modules/home/components/widget/config/target-device.component.html
index 952a482fd1..0f20ac2e29 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/target-device.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/target-device.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div [formGroup]="targetDeviceFormGroup" class="tb-form-panel">
-  <div class="flex flex-row justify-between items-center">
+  <div class="flex flex-row items-center justify-between">
     <div class="tb-form-panel-title" translate>widget-config.target-device</div>
     <tb-toggle-select formControlName="type">
       <tb-toggle-option [value]="targetDeviceType.device">{{ 'device.device' | translate }}</tb-toggle-option>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/timewindow-config-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/config/timewindow-config-panel.component.html
index f2e1ab04e5..803c8e42ed 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/timewindow-config-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/timewindow-config-panel.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div [formGroup]="timewindowConfig" class="tb-form-panel">
-  <div class="flex flex-row justify-between items-center">
+  <div class="flex flex-row items-center justify-between">
     <div class="tb-form-panel-title" translate>timewindow.timewindow</div>
     <tb-toggle-select formControlName="useDashboardTimewindow" selectMediaBreakpoint="xs">
       <tb-toggle-option [value]="true">{{ 'widget-config.use-dashboard-timewindow' | translate }}</tb-toggle-option>
@@ -27,7 +27,7 @@
     <mat-slide-toggle class="mat-slide" formControlName="displayTimewindow">
       {{ 'widget-config.display-timewindow' | translate }}
     </mat-slide-toggle>
-    <div class="flex-1 flex flex-row justify-between items-center">
+    <div class="flex flex-1 flex-row items-center justify-between">
       <tb-timewindow asButton="true"
                      strokedButton
                      noMargin
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/timewindow-style-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/config/timewindow-style-panel.component.html
index e47b836061..0450949e3a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/timewindow-style-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/timewindow-style-panel.component.html
@@ -21,7 +21,7 @@
     <mat-slide-toggle class="mat-slide" formControlName="showIcon">
       {{ 'timewindow.icon' | translate }}
     </mat-slide-toggle>
-    <div class="flex justify-start items-center gap-2">
+    <div class="flex items-center justify-start gap-2">
       <mat-form-field appearance="outline" subscriptSizing="dynamic">
         <input matInput formControlName="iconSize">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.html
index 934052caa3..d2b1e9a6a2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.html
@@ -26,11 +26,11 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-  <div class="dashboard-state-dialog-content flex-1 flex flex-col" mat-dialog-content style="padding: 8px;">
+  <div class="dashboard-state-dialog-content flex flex-1 flex-col" mat-dialog-content style="padding: 8px;">
     <tb-dashboard-page [embedded]="true" [syncStateWithQueryParam]="false" [hideToolbar]="hideToolbar"
                        [currentState]="state" [dashboard]="dashboard" [parentDashboard]="parentDashboard" style="width: 100%; height: 100%;"></tb-dashboard-page>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.html
index 01d29edc96..7db8a28556 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div class="tb-table-widget tb-absolute-fill">
-  <div class="tb-absolute-fill flex-1 flex flex-col">
+  <div class="tb-absolute-fill flex flex-1 flex-col">
     <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode || !alarmsDatasource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
         <button mat-icon-button
@@ -87,7 +87,7 @@
                     [class.tb-pointer]="columnHasCellClick($index)">
             <span [innerHTML]="cellContent(alarm, column, row)"></span>
             <ng-container *ngIf="column.entityKey.key === 'assignee'">
-              <span class="assignee-cell flex flex-row justify-start items-center">
+              <span class="assignee-cell flex flex-row items-center justify-start">
                 <span *ngIf="alarm.assigneeId && checkAssigneeHasName(alarm.assignee); else unassigned"
                       class="assigned-container">
                   <span class="user-avatar" [style.backgroundColor]="getAvatarBgColor(alarm.assignee)">
@@ -131,7 +131,7 @@
           </mat-header-cell>
           <mat-cell *matCellDef="let alarm; let row = index" [style]="rowStyle(alarm, row)">
             <ng-container *ngIf="alarmsDatasource.countCellButtonAction">
-              <div [class.lt-lg:!hidden]="showCellActionsMenu && alarmsDatasource.countCellButtonAction !== 1" class="flex flex-row justify-end items-stretch"
+              <div [class.lt-lg:!hidden]="showCellActionsMenu && alarmsDatasource.countCellButtonAction !== 1" class="flex flex-row items-stretch justify-end"
                    [style.min-width]="(alarmsDatasource.countCellButtonAction * 48) + 'px'">
                 <ng-container *ngFor="let actionDescriptor of alarm.actionCellButtons; trackBy: trackByActionCellDescriptionId">
                   <span *ngIf="!actionDescriptor.icon" style="width: 48px;"></span>
@@ -175,9 +175,9 @@
                  (click)="onRowClick($event, alarm)"></mat-row>
       </table>
       <span [class.!hidden]="(alarmsDatasource.isEmpty() | async) === false || alarmsDatasource.dataLoading"
-            class="no-data-found flex justify-center items-center">{{ noDataDisplayMessageText }}</span>
+            class="no-data-found flex items-center justify-center">{{ noDataDisplayMessageText }}</span>
       <span [class.!hidden]="!alarmsDatasource.dataLoading"
-            class="no-data-found flex justify-center items-center" >{{ 'common.loading' | translate }}</span>
+            class="no-data-found flex items-center justify-center" >{{ 'common.loading' | translate }}</span>
     </div>
     <mat-divider *ngIf="displayPagination"></mat-divider>
     <mat-paginator *ngIf="displayPagination"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/notification-type-filter-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/cards/notification-type-filter-panel.component.html
index 4e39c80cd5..6d7234f235 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/notification-type-filter-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/notification-type-filter-panel.component.html
@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<form class="mat-content mat-padding flex-1 flex flex-col" (ngSubmit)="update()">
+<form class="mat-content mat-padding flex flex-1 flex-col" (ngSubmit)="update()">
   <div class="tb-form-panel no-padding">
     <div class="tb-form-row column-xs">
       <div class="fixed-title-width" translate>widgets.notification.notification-types</div>
-      <mat-form-field floatLabel="auto" appearance="outline" subscriptSizing="dynamic" class="flex fb-chips">
+      <mat-form-field floatLabel="auto" appearance="outline" subscriptSizing="dynamic" class="fb-chips flex">
         <mat-chip-grid #chipList>
           <mat-chip-row
             *ngFor="let type of selectedNotificationTypes"
@@ -54,7 +54,7 @@
     </div>
   </div>
 
-  <div class="tb-panel-actions flex flex-row justify-end items-center">
+  <div class="tb-panel-actions flex flex-row items-center justify-end">
     <button type="button"
             mat-button
             (click)="reset()"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/edges-overview-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/edges-overview-widget.component.html
index cc3cdcc01d..c94e1cf83a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/edges-overview-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/edges-overview-widget.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div class="tb-edges-overview tb-absolute-fill" tb-toast toastTarget="{{ toastTargetId }}">
-  <div class="tb-absolute-fill flex-1 flex flex-col">
+  <div class="tb-absolute-fill flex flex-1 flex-col">
     <span class="mat-subheader flex flex-row" *ngIf="customerTitle">{{ customerTitle }}</span>
     <span class="mat-subheader flex flex-row" *ngIf="!edgeIsDatasource" translate>edge.widget-datasource-error</span>
     <div class="tb-entities-nav-tree-panel flex-1">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-hierarchy-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-hierarchy-widget.component.html
index 8d9a83d289..599010d76c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-hierarchy-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-hierarchy-widget.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div class="tb-entities-hierarchy tb-absolute-fill" tb-toast toastTarget="{{ toastTargetId }}">
-  <div class="tb-absolute-fill flex-1 flex flex-col">
+  <div class="tb-absolute-fill flex flex-1 flex-col">
     <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode">
       <div class="mat-toolbar-tools">
         <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.html
index bcaf9d186d..1a72f6ecdb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div class="tb-table-widget tb-absolute-fill">
-  <div class="tb-absolute-fill flex-1 flex flex-col">
+  <div class="tb-absolute-fill flex flex-1 flex-col">
     <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode">
       <div class="mat-toolbar-tools">
         <button mat-icon-button
@@ -61,7 +61,7 @@
           </mat-header-cell>
           <mat-cell *matCellDef="let entity; let row = index" [style]="rowStyle(entity, row)">
             <ng-container *ngIf="entityDatasource.countCellButtonAction">
-              <div [class.lt-lg:!hidden]="showCellActionsMenu && entityDatasource.countCellButtonAction !== 1" class="flex flex-row justify-end items-stretch"
+              <div [class.lt-lg:!hidden]="showCellActionsMenu && entityDatasource.countCellButtonAction !== 1" class="flex flex-row items-stretch justify-end"
                    [style.min-width]="(entityDatasource.countCellButtonAction * 48) + 'px'">
                 <ng-container *ngFor="let actionDescriptor of entity.actionCellButtons; trackBy: trackByActionCellDescriptionId">
                   <span *ngIf="!actionDescriptor.icon" style="width: 48px;"></span>
@@ -103,9 +103,9 @@
                  (click)="onRowClick($event, entity)" (dblclick)="onRowClick($event, entity, true)"></mat-row>
       </table>
       <span [class.!hidden]="(entityDatasource.isEmpty() | async) === false || entityDatasource.dataLoading"
-            class="no-data-found flex justify-center items-center">{{ noDataDisplayMessageText }}</span>
+            class="no-data-found flex items-center justify-center">{{ noDataDisplayMessageText }}</span>
       <span [class.!hidden]="!entityDatasource.dataLoading"
-            class="no-data-found flex justify-center items-center">{{ 'common.loading' | translate }}</span>
+            class="no-data-found flex items-center justify-center">{{ 'common.loading' | translate }}</span>
     </div>
     <mat-divider *ngIf="displayPagination"></mat-divider>
     <mat-paginator *ngIf="displayPagination"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/advanced/gateway-advanced-configuration.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/advanced/gateway-advanced-configuration.component.html
index 1a3f358fd1..b788537af1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/advanced/gateway-advanced-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/advanced/gateway-advanced-configuration.component.html
@@ -17,7 +17,7 @@
 -->
 <tb-json-object-edit
   fillHeight="true"
-  class="flex flex-col config-container"
+  class="config-container flex flex-col"
   jsonRequired
   label="{{ 'gateway.configuration' | translate }}"
   [formControl]="advancedFormControl"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/basic/gateway-basic-configuration.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/basic/gateway-basic-configuration.component.html
index ef9d7e8b87..e2785acbf2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/basic/gateway-basic-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/basic/gateway-basic-configuration.component.html
@@ -593,7 +593,7 @@
           <div class="tb-form-panel-title" translate>gateway.statistics.commands</div>
           <div class="tb-form-panel-hint" translate>gateway.hints.commands</div>
           <ng-container formGroupName="statistics">
-            <div formArrayName="commands" class="flex flex-row statistics-container"
+            <div formArrayName="commands" class="statistics-container flex flex-row"
                  *ngFor="let commandControl of commandFormArray().controls; let $index = index">
               <section [formGroupName]="$index" class="tb-form-panel stroked no-padding-bottom no-gap command-container">
                 <section class="tb-form-row no-border no-padding tb-standard-fields column-xs">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel/mapping-data-keys-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel/mapping-data-keys-panel.component.html
index b129cef3f8..666d146279 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel/mapping-data-keys-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel/mapping-data-keys-panel.component.html
@@ -141,7 +141,7 @@
                   </div>
                   <div class="tb-form-row column-xs">
                     <div class="fixed-title-width tb-required" translate>gateway.value</div>
-                    <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute">
+                    <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-inline-field tb-suffix-absolute flex">
                       <input matInput required formControlName="value"
                              placeholder="{{ 'gateway.set' | translate }}"/>
                       <mat-icon matSuffix
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.html
index a0bb6c4734..cd7de3c344 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.html
@@ -89,7 +89,7 @@
                 <tb-icon>delete</tb-icon>
               </button>
             </ng-template>
-            <div class="flex flex-1 flex-row justify-end items-stretch lt-lg:!hidden"
+            <div class="flex flex-1 flex-row items-stretch justify-end lt-lg:!hidden"
                  [style]="{ minWidth: '96px', textAlign: 'center'}">
               <ng-container [ngTemplateOutlet]="rowActions"></ng-container>
             </div>
@@ -109,7 +109,7 @@
         <mat-row *matRowDef="let mapping; columns: displayedColumns;"></mat-row>
       </table>
       <section [class.!hidden]="textSearchMode || (dataSource.isEmpty() | async) === false"
-               class="mat-headline-5 tb-absolute-fill tb-add-new justify-center items-center">
+               class="mat-headline-5 tb-absolute-fill tb-add-new items-center justify-center">
         <button mat-button class="connector"
                 (click)="manageMapping($event)">
           <mat-icon class="tb-mat-96">add</mat-icon>
@@ -118,7 +118,7 @@
       </section>
     </div>
     <span [class.!hidden]="!textSearchMode || (dataSource.isEmpty() | async) === false"
-          class="no-data-found justify-center items-center" translate>
+          class="no-data-found items-center justify-center" translate>
       widget.no-data-found
     </span>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.html
index 7ce388e3b8..be0ae76ee6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.html
@@ -175,7 +175,7 @@
                       </div>
                       <div class="tb-form-row column-xs">
                         <div class="fixed-title-width" translate>gateway.value</div>
-                        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute">
+                        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-inline-field tb-suffix-absolute flex">
                           <input matInput required formControlName="modifierValue" step="0.1" type="number"
                                  placeholder="{{ 'gateway.set' | translate }}" />
                           <mat-icon matSuffix
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.html
index dc64372d05..e621c05fcd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.html
@@ -114,7 +114,7 @@
                 <tb-icon>delete</tb-icon>
               </button>
             </ng-template>
-            <div class="flex flex-1 flex-row justify-end items-stretch lt-lg:!hidden"
+            <div class="flex flex-1 flex-row items-stretch justify-end lt-lg:!hidden"
                  [style]="{ minWidth: '96px', textAlign: 'center'}">
               <ng-container [ngTemplateOutlet]="rowActions"></ng-container>
             </div>
@@ -134,7 +134,7 @@
         <mat-row *matRowDef="let slave; columns: ['deviceName', 'info', 'unitId', 'type', 'actions']"></mat-row>
       </table>
       <section [class.!hidden]="textSearchMode || (dataSource.isEmpty() | async) === false"
-               class="mat-headline-5 tb-absolute-fill tb-add-new justify-center items-center">
+               class="mat-headline-5 tb-absolute-fill tb-add-new items-center justify-center">
         <button mat-button class="connector"
                 (click)="manageSlave($event)">
           <mat-icon class="tb-mat-96">add</mat-icon>
@@ -143,7 +143,7 @@
       </section>
     </div>
     <span [class.!hidden]="!textSearchMode || (dataSource.isEmpty() | async) === false"
-          class="no-data-found justify-center items-center" translate>
+          class="no-data-found items-center justify-center" translate>
       widget.no-data-found
     </span>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/modbus-rpc-parameters/modbus-rpc-parameters.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/modbus-rpc-parameters/modbus-rpc-parameters.component.html
index c393bb7122..3b1f041575 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/modbus-rpc-parameters/modbus-rpc-parameters.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/modbus-rpc-parameters/modbus-rpc-parameters.component.html
@@ -20,7 +20,7 @@
     {{ 'gateway.rpc.hint.modbus-response-reading' | translate }}<br>
     {{ 'gateway.rpc.hint.modbus-writing-functions' | translate }}
   </div>
-  <div class="flex flex-row flex-1 gap-2.5">
+  <div class="flex flex-1 flex-row gap-2.5">
     <mat-form-field class="flex-1">
       <mat-label>{{ 'gateway.rpc.type' | translate }}</mat-label>
       <mat-select formControlName="type">
@@ -34,7 +34,7 @@
       </mat-select>
     </mat-form-field>
   </div>
-  <div class="flex flex-row flex-1 gap-2.5">
+  <div class="flex flex-1 flex-row gap-2.5">
     <mat-form-field class="flex-1">
       <mat-label>{{ 'gateway.rpc.address' | translate }}</mat-label>
       <input matInput type="number" min="0" max="50000" name="value" formControlName="address" placeholder="{{ 'gateway.set' | translate }}"/>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/opc-rpc-parameters/opc-rpc-parameters.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/opc-rpc-parameters/opc-rpc-parameters.component.html
index c02084b8bf..5e80c05ffb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/opc-rpc-parameters/opc-rpc-parameters.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/opc-rpc-parameters/opc-rpc-parameters.component.html
@@ -27,9 +27,9 @@
     <strong>
       <span class="fields-label">{{ 'gateway.rpc.arguments' | translate }}</span>
     </strong>
-    <div class="flex flex-1 justify-center items-center gap-2.5"
+    <div class="flex flex-1 items-center justify-center gap-2.5"
          *ngFor="let argumentFormGroup of rpcParametersFormGroup.get('arguments')['controls']; let i = index" [formGroup]="argumentFormGroup">
-      <div class="tb-form-row column-xs type-container justify-between items-center">
+      <div class="tb-form-row column-xs type-container items-center justify-between">
         <div class="tb-required" translate>gateway.type</div>
         <div class="tb-flex no-gap">
           <mat-form-field class="tb-flex no-gap fill-width" appearance="outline" subscriptSizing="dynamic">
@@ -50,9 +50,9 @@
           </mat-form-field>
         </div>
       </div>
-      <div class="tb-form-row column-xs value-container justify-between item-center">
+      <div class="tb-form-row column-xs value-container item-center justify-between">
         <div class="tb-required" translate>gateway.value</div>
-        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute">
+        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-inline-field tb-suffix-absolute flex">
           <ng-container [ngSwitch]="argumentFormGroup.get('type').value">
             <input *ngSwitchCase="MappingValueType.STRING" matInput required formControlName="string"
                    placeholder="{{ 'gateway.set' | translate }}" />
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component.html
index deb0d6b1b3..7c3bb8e13f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component.html
@@ -51,7 +51,7 @@
                 </div>
                 <div class="tb-form-row column-xs">
                   <div class="fixed-title-width tb-required" translate>gateway.value</div>
-                  <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex flex-1 tb-suffix-absolute">
+                  <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-inline-field tb-suffix-absolute flex flex-1">
                     <ng-container [ngSwitch]="keyControl.get('type').value">
                       <input *ngSwitchCase="MappingValueType.STRING" matInput required formControlName="string"
                              placeholder="{{ 'gateway.set' | translate }}" />
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html
index 75d6fc8559..d455a3febe 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div class="connector-container tb-form-panel no-border">
-  <section class="table-section tb-form-panel no-padding flex section-container">
+  <section class="table-section tb-form-panel no-padding section-container flex">
     <mat-toolbar class="mat-mdc-table-toolbar justify-between">
       <h2>{{ 'gateway.connectors' | translate }}</h2>
       <button *ngIf="dataSource?.data?.length"
@@ -30,7 +30,7 @@
     </mat-toolbar>
     <div class="table-container">
       <section *ngIf="!dataSource?.data?.length"
-               class="mat-headline-5 tb-absolute-fill tb-add-new justify-center items-center">
+               class="mat-headline-5 tb-absolute-fill tb-add-new items-center justify-center">
         <button mat-button class="connector"
         (click)="onAddConnector($event)">
           <mat-icon class="tb-mat-96">add</mat-icon>
@@ -167,7 +167,7 @@
       </tb-toggle-select>
     </div>
     <span [class.!hidden]="initialConnector"
-          class="no-data-found justify-center items-center" translate>
+          class="no-data-found items-center justify-center" translate>
       gateway.select-connector
     </span>
     <section class="tb-form-panel section-container no-border no-padding tb-flex space-between" *ngIf="initialConnector">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.html
index 24e51f60fd..22ea0364d2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.html
@@ -205,9 +205,9 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
 
-      <div class="flex flex-col gateway-config">
+      <div class="gateway-config flex flex-col">
         <section formArrayName="connectors" *ngFor="let connector of connectors.controls; let i = index;">
-          <div [formGroupName]="i" class="flex flex-row justify-between items-stretch gap-2">
+          <div [formGroupName]="i" class="flex flex-row items-stretch justify-between gap-2">
             <div class="flex flex-col justify-center">
               <mat-slide-toggle formControlName="enabled"></mat-slide-toggle>
             </div>
@@ -236,7 +236,7 @@
                 </mat-error>
               </mat-form-field>
             </div>
-            <div class="flex action-buttons" [class]="{
+            <div class="action-buttons flex" [class]="{
                 'gap-1.25': layoutGap,
                 'flex-row justify-end item-center': alignment,
                 'flex-col justify-evenly item-center': !alignment
@@ -256,7 +256,7 @@
             </div>
           </div>
         </section>
-        <span [class.!hidden]="connectors.length" class="no-data-found justify-center items-center">{{'gateway.no-connectors' | translate}}</span>
+        <span [class.!hidden]="connectors.length" class="no-data-found items-center justify-center">{{'gateway.no-connectors' | translate}}</span>
         <div>
           <button [class.!hidden]="isReadOnlyForm" mat-raised-button type="button" (click)="addNewConnector()"
                   matTooltip="{{ 'gateway.connector-add' | translate }}"
@@ -267,7 +267,7 @@
       </div >
     </mat-expansion-panel>
   </mat-accordion>
-  <section [class.!hidden]="isReadOnlyForm" class="flex flex-row justify-end items-center form-action-buttons">
+  <section [class.!hidden]="isReadOnlyForm" class="form-action-buttons flex flex-row items-center justify-end">
     <button mat-raised-button color="primary" type="button"
             (click)="exportConfig()"
             *ngIf="!gatewayConfigurationGroup.get('remoteConfiguration').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-logs.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-logs.component.html
index c7d518bd74..97c5d598e0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-logs.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-logs.component.html
@@ -46,7 +46,7 @@
   <mat-row class="mat-row-select" *matRowDef="let attribute; columns: displayedColumns;"></mat-row>
 </table>
 <span [class.!hidden]="dataSource.data.length !== 0"
-      class="flex-1 justify-center items-center no-data-found">{{ 'attribute.no-telemetry-text' | translate }}</span>
+      class="no-data-found flex-1 items-center justify-center">{{ 'attribute.no-telemetry-text' | translate }}</span>
 <span class="flex-1" [class.!hidden]="dataSource.data.length === 0"></span>
 <mat-divider></mat-divider>
 <mat-paginator [length]="dataSource.data.length"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector.component.html
index 2de0343833..539f374078 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector.component.html
@@ -205,9 +205,9 @@
         <mat-slide-toggle class="mat-slide margin" formControlName="withResponse">
           {{ 'gateway.rpc.withResponse' | translate }}
         </mat-slide-toggle>
-        <fieldset class="fields border flex flex-col gap-2.5" formArrayName="oid">
+        <fieldset class="fields flex flex-col gap-2.5 border" formArrayName="oid">
           <span class="fields-label">{{ 'gateway.rpc.oids' | translate }}*</span>
-          <div class="flex flex-1 flex-row justify-center items-center gap-2.5"
+          <div class="flex flex-1 flex-row items-center justify-center gap-2.5"
                *ngFor="let control of getFormArrayControls('oid'); let i = index">
             <mat-form-field class="tb-inline-field flex-1" appearance="outline" subscriptSizing="dynamic">
               <input matInput [formControl]="control" required/>
@@ -231,7 +231,7 @@
           <input matInput formControlName="methodFilter" placeholder="post_attributes"/>
         </mat-form-field>
         <div class="flex flex-1 flex-row gap-2.5">
-          <mat-form-field class="flex-[1_1_33%] max-w-4/12">
+          <mat-form-field class="max-w-4/12 flex-[1_1_33%]">
             <mat-label>{{ 'gateway.rpc.httpMethod' | translate }}</mat-label>
             <mat-select formControlName="httpMethod">
               <mat-option *ngFor="let method of hTTPMethods" [value]="method">
@@ -266,16 +266,16 @@
           <mat-label>{{ 'gateway.rpc.valueExpression' | translate }}</mat-label>
           <input matInput formControlName="valueExpression" placeholder="${params}"/>
         </mat-form-field>
-        <fieldset class="fields border flex flex-col gap-2.5" formArrayName="httpHeaders">
+        <fieldset class="fields flex flex-col gap-2.5 border" formArrayName="httpHeaders">
           <span class="fields-label">{{ 'gateway.rpc.httpHeaders' | translate }}</span>
-          <div class="border flex flex-col gap-2.5" *ngIf="getFormArrayControls('httpHeaders').length">
-            <div class="flex flex-row justify-center items-center gap-2.5">
+          <div class="flex flex-col gap-2.5 border" *ngIf="getFormArrayControls('httpHeaders').length">
+            <div class="flex flex-row items-center justify-center gap-2.5">
               <span class="title flex-1">{{ 'gateway.rpc.header-name' | translate }}</span>
               <span class="title flex-1">{{ 'gateway.rpc.value' | translate }}</span>
               <span style="width: 30px"></span>
             </div>
             <mat-divider></mat-divider>
-            <div class="flex flex-row justify-center items-center gap-2.5"
+            <div class="flex flex-row items-center justify-center gap-2.5"
                  *ngFor="let control of getFormArrayControls('httpHeaders'); let i = index">
               <ng-container [formGroupName]="i">
                 <mat-form-field appearance="outline" class="flex-1">
@@ -304,8 +304,8 @@
           <mat-label>{{ 'gateway.rpc.methodFilter' | translate }}</mat-label>
           <input matInput formControlName="methodFilter" placeholder="echo"/>
         </mat-form-field>
-        <div class="flex flex-row justify-center items-center gap-2.5">
-          <mat-form-field class="flex-[1_1_33%] max-w-4/12">
+        <div class="flex flex-row items-center justify-center gap-2.5">
+          <mat-form-field class="max-w-4/12 flex-[1_1_33%]">
             <mat-label>{{ 'gateway.rpc.httpMethod' | translate }}</mat-label>
             <mat-select formControlName="httpMethod">
               <mat-option *ngFor="let method of hTTPMethods" [value]="method">
@@ -318,7 +318,7 @@
             <input matInput formControlName="requestUrlExpression" placeholder="http://127.0.0.1:5000/my_devices"/>
           </mat-form-field>
         </div>
-        <div class="flex flex-row justify-center items-center gap-2.5">
+        <div class="flex flex-row items-center justify-center gap-2.5">
           <mat-form-field class="flex-1">
             <mat-label>{{ 'gateway.rpc.responseTimeout' | translate }}</mat-label>
             <input matInput formControlName="responseTimeout" type="number"
@@ -343,16 +343,16 @@
           <mat-label>{{ 'gateway.rpc.responseValueExpression' | translate }}</mat-label>
           <input matInput formControlName="responseValueExpression" placeholder="${temp}"/>
         </mat-form-field>
-        <fieldset class="fields border flex flex-col gap-2.5" formArrayName="httpHeaders">
+        <fieldset class="fields flex flex-col gap-2.5 border" formArrayName="httpHeaders">
           <span class="fields-label">{{ 'gateway.rpc.httpHeaders' | translate }}</span>
-          <div class="border flex flex-col gap-2.5" *ngIf="getFormArrayControls('httpHeaders').length">
-            <div class="flex flex-row justify-center items-center gap-2.5">
+          <div class="flex flex-col gap-2.5 border" *ngIf="getFormArrayControls('httpHeaders').length">
+            <div class="flex flex-row items-center justify-center gap-2.5">
               <span class="title flex-1">{{ 'gateway.rpc.header-name' | translate }}</span>
               <span class="title flex-1">{{ 'gateway.rpc.value' | translate }}</span>
               <span style="width: 30px"></span>
             </div>
             <mat-divider></mat-divider>
-            <div class="flex flex-row justify-center items-center gap-2.5"
+            <div class="flex flex-row items-center justify-center gap-2.5"
                  *ngFor="let control of getFormArrayControls('httpHeaders'); let i = index">
               <ng-container [formGroupName]="i">
                 <mat-form-field appearance="outline" class="flex-1">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.html
index 2f9b380e4a..a85eaa0cd0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div class="flex flex-1 flex-col" [class]="{'border': isConnector}">
-  <div class="command-form flex flex-row lt-sm:flex-col gap-2.5" [formGroup]="commandForm">
+  <div class="command-form flex flex-row gap-2.5 lt-sm:flex-col" [formGroup]="commandForm">
     <ng-container *ngIf="!isConnector; else connectorForm">
       <mat-form-field>
         <mat-label>{{ 'gateway.statistics.command' | translate }}</mat-label>
@@ -49,14 +49,14 @@
         (saveTemplate)="saveTemplate()"
       />
       <ng-template #updatedParameters>
-        <div class="flex flex-col rpc-parameters">
+        <div class="rpc-parameters flex flex-col">
           <div class="mat-subtitle-1 tb-form-panel-title">{{ 'gateway.rpc.title' | translate: {type: gatewayConnectorDefaultTypesTranslates.get(connectorType)} }}</div>
           <ng-container [ngSwitch]="connectorType">
             <tb-modbus-rpc-parameters *ngSwitchCase="ConnectorType.MODBUS" formControlName="params"/>
             <tb-mqtt-rpc-parameters *ngSwitchCase="ConnectorType.MQTT" formControlName="params"/>
             <tb-opc-rpc-parameters *ngSwitchCase="ConnectorType.OPCUA" formControlName="params"/>
           </ng-container>
-          <div class="flex flex-1 fex-row justify-end items-center template-actions gap-2.5">
+          <div class="fex-row template-actions flex flex-1 items-center justify-end gap-2.5">
             <button mat-raised-button
                     (click)="saveTemplate()"
                     [disabled]="commandForm.get('params').invalid">
@@ -75,7 +75,7 @@
   </div>
   <section class="result-block" [formGroup]="commandForm">
     <span>{{ 'gateway.rpc-command-result' | translate }}
-      <div *ngIf="resultTime" class="flex flex-1 flex-row justify-center items-center result-time">
+      <div *ngIf="resultTime" class="result-time flex flex-1 flex-row items-center justify-center">
         <mat-icon class="material-icons">schedule</mat-icon>
         <span>{{ resultTime | date: 'yyyy/MM/dd HH:mm:ss' }}</span>
       </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.html
index dd51d8a4e8..08a56606bd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.html
@@ -68,9 +68,9 @@
                *matRowDef="let row; columns: displayedColumns;"></mat-row>
     </table>
     <span [class.!hidden]="dataSource.data.length !== 0 || isNumericData"
-          class="no-data-found justify-center items-start">{{ 'attribute.no-telemetry-text' | translate }}</span>
-    <div class="legend flex flex-1 flex-row justify-center items-center" [class.!hidden]="!isNumericData">
-      <div class="legend-keys flex flex-row justify-center items-center" *ngFor="let legendKey of legendData?.keys">
+          class="no-data-found items-start justify-center">{{ 'attribute.no-telemetry-text' | translate }}</span>
+    <div class="legend flex flex-1 flex-row items-center justify-center" [class.!hidden]="!isNumericData">
+      <div class="legend-keys flex flex-row items-center justify-center" *ngFor="let legendKey of legendData?.keys">
         <span class="legend-line" [style.background-color]="legendKey.dataKey.color"></span>
         <div class="legend-label"
              (click)="onLegendKeyHiddenChange(legendKey.dataIndex)"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.html
index 1b354c09fd..d858e83a47 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.html
@@ -20,7 +20,7 @@
         class="tb-json-input__form flex flex-col"
         [formGroup]="attributeUpdateFormGroup"
         (ngSubmit)="save()">
-      <div class="flex-1 flex flex-col gap-2.5" *ngIf="datasourceDetected && !errorMessage; else errorContainer">
+      <div class="flex flex-1 flex-col gap-2.5" *ngIf="datasourceDetected && !errorMessage; else errorContainer">
         <fieldset class="flex-1">
           <tb-json-object-edit
             [editorStyle]="{minHeight: '100px'}"
@@ -32,7 +32,7 @@
             (focusout)="isFocused = false;"
           ></tb-json-object-edit>
         </fieldset>
-        <div class="tb-json-input__actions flex flex-row justify-end items-center gap-5">
+        <div class="tb-json-input__actions flex flex-row items-center justify-end gap-5">
           <button mat-button color="primary"
                   type="button"
                   [disabled]="!attributeUpdateFormGroup.dirty"
@@ -50,7 +50,7 @@
       </div>
 
     <ng-template #errorContainer>
-      <div class="tb-json-input__error flex-1 flex flex-col justify-center items-center">
+      <div class="tb-json-input__error flex flex-1 flex-col items-center justify-center">
         {{ errorMessage | translate }}
       </div>
     </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/photo-camera-input.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/photo-camera-input.component.html
index f5d51880c2..5a64bdaf62 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/photo-camera-input.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/photo-camera-input.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<div class="tb-web-camera flex flex-col justify-center items-center" tb-fullscreen [fullscreen]="isShowCamera">
+<div class="tb-web-camera flex flex-col items-center justify-center" tb-fullscreen [fullscreen]="isShowCamera">
   <div *ngIf="isEntityDetected && dataKeyDetected && isCameraSupport && isProtocolHttps" class="image-container">
-    <div [class.!hidden]="isShowCamera" class="flex flex-col justify-between items-center w-full h-full">
+    <div [class.!hidden]="isShowCamera" class="flex size-full flex-col items-center justify-between">
       <div class="tb-web-camera__last-photo flex-1">
         <span [class.!hidden]="lastPhoto" class="tb-web-camera__last-photo_text" translate>widgets.input-widgets.no-image</span>
         <img [class.!hidden]="!lastPhoto" class="tb-web-camera__last-photo_img" [src]="lastPhoto" alt="last photo"/>
@@ -26,10 +26,10 @@
         {{ "widgets.input-widgets.take-photo" | translate }}
       </button>
     </div>
-    <div [class.!hidden]="!isShowCamera" class="camera-container flex flex-col justify-center items-center">
+    <div [class.!hidden]="!isShowCamera" class="camera-container flex flex-col items-center justify-center">
       <div class="camera" [class.!hidden]="isPreviewPhoto">
         <video autoplay muted playsinline class="camera-stream" #videoStream></video>
-        <div class="camera-controls flex flex-row flex-wrap justify-between items-end">
+        <div class="camera-controls flex flex-row flex-wrap items-end justify-between">
           <div class="flex-1"></div>
           <button mat-mini-fab color="primary" (click)="switchWebCamera()" [disabled]="singleDevice">
             <mat-icon>switch_camera</mat-icon>
@@ -46,7 +46,7 @@
       <div class="camera" [class.!hidden]="!isPreviewPhoto">
         <img alt="preview photo" class="camera-stream" [src]="previewPhoto">
         <canvas #canvas style="display:none;"></canvas>
-        <div class="camera-controls flex flex-row justify-between items-end">
+        <div class="camera-controls flex flex-row items-end justify-between">
           <div class="flex-1"></div>
           <button mat-fab color="primary" [disabled]="updatePhoto" (click)="cancelPhoto()">
             <mat-icon>close</mat-icon>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.html
index 66981fc62f..520b160265 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="flex flex-col justify-center items-center w-full h-full">
+<div class="flex size-full flex-col items-center justify-center">
   <canvas class="flex-1" #canvas [class.!hidden]="!qrCodeText || invalidQrCodeText"></canvas>
   <div *ngIf="!qrCodeText && !invalidQrCodeText" style="text-align: center" translate>entity.no-data</div>
   <div *ngIf="invalidQrCodeText" style="text-align: center" translate>widgets.invalid-qr-code-text</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-card-widget-settings.component.html
index 5f7e4e6359..f4ba5c6b04 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-card-widget-settings.component.html
@@ -43,7 +43,7 @@
         {{ 'widgets.label-card.icon' | translate }}
       </mat-slide-toggle>
       <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-value-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-value-card-widget-settings.component.html
index b10d497f6c..9bc1abdfa5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-value-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-value-card-widget-settings.component.html
@@ -43,7 +43,7 @@
         {{ 'widgets.label-card.icon' | translate }}
       </mat-slide-toggle>
       <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
index 5077c93d8e..a60f22d939 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
@@ -52,7 +52,7 @@
         {{ 'widgets.value-card.icon' | translate }}
       </mat-slide-toggle>
       <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings-panel.component.html
index 53e6fb3e8a..9826385d38 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings-panel.component.html
@@ -41,7 +41,7 @@
       <ng-template [ngSwitchCase]="getValueAction.EXECUTE_RPC">
         <div class="tb-form-row" formGroupName="executeRpc">
           <div class="fixed-title-width" >{{ 'widgets.value-action.method' | translate }}*</div>
-          <mat-form-field class="flex tb-suffix-absolute" appearance="outline" subscriptSizing="dynamic">
+          <mat-form-field class="tb-suffix-absolute flex" appearance="outline" subscriptSizing="dynamic">
             <input matInput required formControlName="method" placeholder="{{ 'widget-config.set' | translate }}">
             <mat-icon matSuffix
                       matTooltipPosition="above"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings-panel.component.html
index 59e9d0413b..954f284631 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings-panel.component.html
@@ -32,7 +32,7 @@
       <ng-template [ngSwitchCase]="setValueAction.EXECUTE_RPC">
         <div class="tb-form-row" formGroupName="executeRpc">
           <div class="fixed-title-width" >{{ 'widgets.value-action.method' | translate }}*</div>
-          <mat-form-field class="flex tb-suffix-absolute" appearance="outline" subscriptSizing="dynamic">
+          <mat-form-field class="tb-suffix-absolute flex" appearance="outline" subscriptSizing="dynamic">
             <input matInput required formControlName="method" placeholder="{{ 'widget-config.set' | translate }}">
             <mat-icon matSuffix
                       matTooltipPosition="above"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.html
index 8acbdb1de0..b6775d0d80 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.html
@@ -46,7 +46,7 @@
       {{ 'widgets.button.icon' | translate }}
     </mat-slide-toggle>
     <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-      <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
         <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
       <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html
index 5fb473a821..3a9145565c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html
@@ -53,7 +53,7 @@
       {{ 'widgets.count.icon' | translate }}
     </mat-slide-toggle>
     <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-      <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
         <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
       <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
@@ -74,7 +74,7 @@
       {{ 'widgets.count.icon-background' | translate }}
     </mat-slide-toggle>
     <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-      <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
         <input matInput type="number" min="0" formControlName="iconBackgroundSize" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
       <tb-css-unit-select fxFlex formControlName="iconBackgroundSizeUnit"></tb-css-unit-select>
@@ -97,7 +97,7 @@
       {{ 'widgets.count.chevron' | translate }}
     </mat-slide-toggle>
     <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-      <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
         <input matInput type="number" min="0" formControlName="chevronSize" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
       <tb-css-unit-select fxFlex formControlName="chevronSizeUnit"></tb-css-unit-select>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.html
index 40f26c6e9c..5e761c52cc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.html
@@ -47,7 +47,7 @@
       {{ 'widgets.status-widget.icon' | translate }}
     </div>
     <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-      <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
         <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
       <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
index 2709266f2f..d5df22f3a6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
@@ -103,7 +103,7 @@
         {{ 'widgets.single-switch.icon' | translate }}
       </mat-slide-toggle>
       <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html
index 709741b565..1c7d3c8402 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html
@@ -90,7 +90,7 @@
       </mat-slide-toggle>
       <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
         <tb-unit-input class="flex" formControlName="valueUnits"></tb-unit-input>
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="valueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
           <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
         </mat-form-field>
@@ -186,7 +186,7 @@
         {{ 'widgets.slider.left-icon' | translate }}
       </div>
       <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="leftIconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-css-unit-select fxFlex formControlName="leftIconSizeUnit"></tb-css-unit-select>
@@ -205,7 +205,7 @@
         {{ 'widgets.slider.right-icon' | translate }}
       </div>
       <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="rightIconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-css-unit-select fxFlex formControlName="rightIconSizeUnit"></tb-css-unit-select>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
index f4a1c9c6cb..81e2b2b1da 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
@@ -122,7 +122,7 @@
             </mat-select>
           </mat-form-field>
           <mat-form-field *ngIf="levelCardWidgetSettingsForm.get('volumeSource').value ===  DataSourceType.static; else volumeAttributes"
-                          appearance="outline" class="flex number" subscriptSizing="dynamic">
+                          appearance="outline" class="number flex" subscriptSizing="dynamic">
             <input matInput formControlName="volumeConstant" type="number"
                    min="0.1" step="1" placeholder="{{ 'widget-config.set' | translate }}">
             <mat-icon matSuffix
@@ -242,7 +242,7 @@
               <tb-unit-input [tagFilter]="unitsType.capacity"
                              required class="flex" formControlName="tooltipUnits">
               </tb-unit-input>
-              <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+              <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
                 <input matInput formControlName="tooltipLevelDecimals" type="number" min="0"
                        max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
                 <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/common-map-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/common-map-settings.component.html
index 3f9a83d819..1f72897a55 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/common-map-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/common-map-settings.component.html
@@ -65,8 +65,8 @@
             <input matInput formControlName="defaultCenterPosition">
           </mat-form-field>
         </section>
-        <section class="flex flex-row xs:flex-col gt-xs:gap-2 mb-3.5">
-          <section class="flex flex-col flex-1">
+        <section class="mb-3.5 flex flex-row xs:flex-col gt-xs:gap-2">
+          <section class="flex flex-1 flex-col">
             <mat-slide-toggle formControlName="disableScrollZooming" class="slide-block">
               {{ 'widgets.maps.disable-scroll-zooming' | translate }}
             </mat-slide-toggle>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/marker-clustering-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/marker-clustering-settings.component.html
index 4a14c4d040..302637180e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/marker-clustering-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/marker-clustering-settings.component.html
@@ -43,7 +43,7 @@
             <input matInput type="number" min="0" formControlName="maxClusterRadius">
           </mat-form-field>
         </section>
-        <section class="flex-gap-xs flex flex-col gt-xs:flex-row gap-2 xs:gap-4">
+        <section class="flex-gap-xs flex flex-col gap-2 xs:gap-4 gt-xs:flex-row">
           <mat-slide-toggle formControlName="animate" class="slide-block flex-1">
             {{ 'widgets.maps.cluster-zoom-animation' | translate }}
           </mat-slide-toggle>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
index 06ad7e4144..9c45801f29 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div class="tb-table-widget tb-absolute-fill">
-  <div class="tb-absolute-fill flex-1 flex flex-col">
+  <div class="tb-absolute-fill flex flex-1 flex-col">
     <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode">
       <div class="mat-toolbar-tools">
         <button mat-icon-button
@@ -72,7 +72,7 @@
                 </mat-header-cell>
                 <mat-cell *matCellDef="let row; let rowIndex = index" [style]="rowStyle(source, row, rowIndex)">
                   <ng-container *ngIf="source.timeseriesDatasource.countCellButtonAction">
-                    <div [class.lt-lg:!hidden]="showCellActionsMenu && source.timeseriesDatasource.countCellButtonAction !== 1" class="flex flex-row justify-end items-stretch"
+                    <div [class.lt-lg:!hidden]="showCellActionsMenu && source.timeseriesDatasource.countCellButtonAction !== 1" class="flex flex-row items-stretch justify-end"
                          [style.min-width]="(source.timeseriesDatasource.countCellButtonAction * 40) + 'px'">
                       <ng-container *ngFor="let actionDescriptor of row.actionCellButtons; trackBy: trackByActionCellDescriptionId">
                         <span *ngIf="!actionDescriptor.icon" style="width: 40px;"></span>
@@ -114,7 +114,7 @@
                        (click)="onRowClick($event, row)"></mat-row>
             </table>
             <span [class.!hidden]="(source.timeseriesDatasource.isEmpty() | async) === false"
-                  class="no-data-found flex justify-center items-center">{{ noDataDisplayMessageText }}</span>
+                  class="no-data-found flex items-center justify-center">{{ noDataDisplayMessageText }}</span>
           </div>
           <mat-divider *ngIf="displayPagination"></mat-divider>
           <mat-paginator *ngIf="displayPagination"
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
index 63d054f778..b2d1d68ed0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
@@ -40,7 +40,7 @@
         </mat-slide-toggle>
         <div class="tb-form-row">
           <div class="fixed-title-width" translate>widget-config.title</div>
-          <div class="flex-1 flex flex-row justify-start items-center gap-2">
+          <div class="flex flex-1 flex-row items-center justify-start gap-2">
             <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
               <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
             </mat-form-field>
@@ -65,7 +65,7 @@
           <mat-slide-toggle class="mat-slide"  formControlName="showTitleIcon">
             {{ 'widget-config.display-icon' | translate }}
           </mat-slide-toggle>
-          <div class="flex flex-row justify-start items-center gap-2">
+          <div class="flex flex-row items-center justify-start gap-2">
             <mat-form-field appearance="outline" subscriptSizing="dynamic">
               <input matInput formControlName="iconSize">
             </mat-form-field>
@@ -82,7 +82,7 @@
         </div>
         <mat-expansion-panel class="tb-settings">
           <mat-expansion-panel-header>
-            <mat-panel-description class="flex justify-start items-stretch" translate>
+            <mat-panel-description class="flex items-stretch justify-start" translate>
               widget-config.advanced-title-style
             </mat-panel-description>
           </mat-expansion-panel-header>
@@ -134,7 +134,7 @@
         </mat-slide-toggle>
         <mat-expansion-panel class="tb-settings">
           <mat-expansion-panel-header>
-            <mat-panel-description class="flex justify-start items-stretch" translate>
+            <mat-panel-description class="flex items-stretch justify-start" translate>
               widget-config.advanced-widget-style
             </mat-panel-description>
           </mat-expansion-panel-header>
@@ -236,7 +236,7 @@
       </tb-timewindow-config-panel>
     </ng-container>
     <div *ngIf="widgetType === widgetTypes.alarm" [formGroup]="dataSettings" class="tb-form-panel">
-      <div class="flex flex-row justify-between items-center">
+      <div class="flex flex-row items-center justify-between">
         <div class="tb-form-panel-title" translate>alarm.filter</div>
         <button mat-button color="primary"
                 (click)="alarmFilterConfig.reset()">
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget.component.html b/ui-ngx/src/app/modules/home/components/widget/widget.component.html
index 7357f2398e..2207109eb1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget.component.html
@@ -26,8 +26,8 @@
 </div>
 <div class="tb-absolute-fill tb-widget-no-data" *ngIf="displayNoData">
   <span style="display: flex;"
-        class="tb-absolute-fill flex justify-center items-center">{{ noDataDisplayMessageText }}</span>
+        class="tb-absolute-fill flex items-center justify-center">{{ noDataDisplayMessageText }}</span>
 </div>
-<div class="tb-absolute-fill tb-widget-loading flex flex-col justify-center items-center" [class.!hidden]="!loadingData">
+<div class="tb-absolute-fill tb-widget-loading flex flex-col items-center justify-center" [class.!hidden]="!loadingData">
   <mat-spinner color="accent" mode="indeterminate" diameter="40"></mat-spinner>
 </div>
diff --git a/ui-ngx/src/app/modules/home/home.component.html b/ui-ngx/src/app/modules/home/home.component.html
index 78ac52ed97..dfe4d6b04c 100644
--- a/ui-ngx/src/app/modules/home/home.component.html
+++ b/ui-ngx/src/app/modules/home/home.component.html
@@ -29,7 +29,7 @@
         </div>
       </mat-toolbar>
     </header>
-    <mat-toolbar color="primary" class="flex flex-1 flex-col tb-side-menu-toolbar" role="navigation">
+    <mat-toolbar color="primary" class="tb-side-menu-toolbar flex flex-1 flex-col" role="navigation">
       <tb-side-menu></tb-side-menu>
     </mat-toolbar>
   </mat-sidenav>
@@ -55,7 +55,7 @@
             [class.!hidden]="displaySearchMode()"
             class="mat-toolbar-tools flex-1">
         </tb-breadcrumb>
-        <div [class.!hidden]="!displaySearchMode()" class="tb-dark flex-1 flex flex-row">
+        <div [class.!hidden]="!displaySearchMode()" class="tb-dark flex flex-1 flex-row">
           <mat-form-field class="tb-appearance-transparent flex-1">
             <input #searchInput matInput
                    [formControl]="textSearch"
diff --git a/ui-ngx/src/app/modules/home/menu/side-menu.component.html b/ui-ngx/src/app/modules/home/menu/side-menu.component.html
index 6e5a666e84..519dd64fae 100644
--- a/ui-ngx/src/app/modules/home/menu/side-menu.component.html
+++ b/ui-ngx/src/app/modules/home/menu/side-menu.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<ul class="tb-side-menu flex flex-col justify-start items-stretch">
+<ul class="tb-side-menu flex flex-col items-stretch justify-start">
   <li *ngFor="let section of menuSections$ | async; trackBy: trackByMenuSection" [ngSwitch]="section.type === 'link'">
     <tb-menu-link *ngSwitchCase="true" [section]="section"></tb-menu-link>
     <tb-menu-toggle *ngSwitchCase="false" [section]="section"></tb-menu-toggle>
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html
index 96d8788a38..849a8661ab 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html
@@ -54,7 +54,7 @@
     </div>
     <div *ngIf="[ScadaSymbolBehaviorType.value, ScadaSymbolBehaviorType.action].includes(behaviorFormGroup.get('type').value)" class="tb-form-row">
       <div class="fixed-title-width" translate>scada.behavior.value-type</div>
-      <mat-form-field appearance="outline" subscriptSizing="dynamic" class="flex tb-value-type">
+      <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-value-type flex">
         <mat-select formControlName="valueType">
           <mat-select-trigger *ngIf="behaviorFormGroup.get('valueType').value">
             <div class="tb-value-type-row">
diff --git a/ui-ngx/src/app/modules/login/pages/login/create-password.component.html b/ui-ngx/src/app/modules/login/pages/login/create-password.component.html
index 752d6cf319..275a66d0dc 100644
--- a/ui-ngx/src/app/modules/login/pages/login/create-password.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/create-password.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-create-password-content mat-app-background tb-dark flex flex-row justify-center items-center" style="width: 100%;">
+<div class="tb-create-password-content mat-app-background tb-dark flex flex-row items-center justify-center" style="width: 100%;">
   <mat-card appearance="raised" class="tb-create-password-card flex-initial">
     <mat-card-header>
       <mat-card-title class="layout-padding">
@@ -42,7 +42,7 @@
               <mat-icon class="material-icons" matPrefix>lock</mat-icon>
               <tb-toggle-password matSuffix></tb-toggle-password>
             </mat-form-field>
-            <div class="flex flex-col gap-4 justify-start items-center gt-xs:flex-row gt-xs:justify-center gt-xs:items-start">
+            <div class="flex flex-col items-center justify-start gap-4 gt-xs:flex-row gt-xs:items-start gt-xs:justify-center">
               <button mat-raised-button color="accent" type="submit" [disabled]="(isLoading$ | async)">
                 {{ 'login.create-password' | translate }}
               </button>
diff --git a/ui-ngx/src/app/modules/login/pages/login/link-expired.component.html b/ui-ngx/src/app/modules/login/pages/login/link-expired.component.html
index 2d9fa4d58b..796509569a 100644
--- a/ui-ngx/src/app/modules/login/pages/login/link-expired.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/link-expired.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-expired-link-content mat-app-background tb-dark flex flex-row justify-center items-center"
+<div class="tb-expired-link-content mat-app-background tb-dark flex flex-row items-center justify-center"
      style="width: 100%;">
   <mat-card appearance="raised" class="tb-expired-link-card">
     <mat-card-header style="justify-content: center">
diff --git a/ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html b/ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html
index eb4123624e..8c156c9e16 100644
--- a/ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html
@@ -39,7 +39,7 @@
                 {{ 'user.invalid-email-format' | translate }}
               </mat-error>
             </mat-form-field>
-            <div class="flex flex-col gap-4 justify-start items-center gt-xs:flex-row gt-xs:justify-center gt-xs:items-start">
+            <div class="flex flex-col items-center justify-start gap-4 gt-xs:flex-row gt-xs:items-start gt-xs:justify-center">
               <button mat-raised-button color="accent" type="submit" [disabled]="(isLoading$ | async) || this.clicked">
                 {{ 'login.request-password-reset' | translate }}
               </button>
diff --git a/ui-ngx/src/app/modules/login/pages/login/reset-password.component.html b/ui-ngx/src/app/modules/login/pages/login/reset-password.component.html
index 465eee53fc..1629180238 100644
--- a/ui-ngx/src/app/modules/login/pages/login/reset-password.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/reset-password.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-reset-password-content mat-app-background tb-dark flex flex-row justify-center items-center" style="width: 100%;">
+<div class="tb-reset-password-content mat-app-background tb-dark flex flex-row items-center justify-center" style="width: 100%;">
   <mat-card appearance="raised" class="tb-reset-password-card flex-initial">
     <mat-card-header>
       <mat-card-title class="layout-padding tb-card-title">
@@ -45,7 +45,7 @@
               <mat-icon class="material-icons" matPrefix>lock</mat-icon>
               <tb-toggle-password matSuffix></tb-toggle-password>
             </mat-form-field>
-            <div class="flex flex-col gap-4 justify-start items-center gt-sm:flex-row gt-sm:justify-center gt-sm:items-start">
+            <div class="flex flex-col items-center justify-start gap-4 gt-sm:flex-row gt-sm:items-start gt-sm:justify-center">
               <button mat-raised-button color="accent" type="submit" [disabled]="(isLoading$ | async)">
                 {{ 'login.reset-password' | translate }}
               </button>
diff --git a/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.html b/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.html
index ca5f9ea7d2..27d97824b7 100644
--- a/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.html
@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<div class="tb-two-factor-auth-login-content mat-app-background tb-dark flex flex-row justify-center items-center"
+<div class="tb-two-factor-auth-login-content mat-app-background tb-dark flex flex-row items-center justify-center"
      style="width: 100%;">
   <mat-card appearance="raised" class="tb-two-factor-auth-login-card flex-initial">
     <mat-card-header>
-      <mat-card-title class="mat-headline-5 flex flex-row justify-start items-center">
+      <mat-card-title class="mat-headline-5 flex flex-row items-center justify-start">
         <button mat-icon-button type="button" (click)="cancelLogin()">
           <mat-icon>chevron_left</mat-icon>
         </button>
@@ -69,8 +69,8 @@
               {{ 'action.continue' | translate }}
             </button>
             <span style="height: 16px;"></span>
-            <div class="action-row flex flex-row justify-between items-center gap-2">
-              <div *ngIf="showResendAction" class="action-resend flex flex-1 justify-center items-center">
+            <div class="action-row flex flex-row items-center justify-between gap-2">
+              <div *ngIf="showResendAction" class="action-resend flex flex-1 items-center justify-center">
                 <div *ngIf="countDownTime" class="timer">
                   {{ 'login.resend-code-wait' | translate : {time: countDownTime} }}
                 </div>
diff --git a/ui-ngx/src/app/shared/components/css.component.html b/ui-ngx/src/app/shared/components/css.component.html
index f82cee1d61..cc6ac9ba18 100644
--- a/ui-ngx/src/app/shared/components/css.component.html
+++ b/ui-ngx/src/app/shared/components/css.component.html
@@ -18,7 +18,7 @@
 <div class="tb-css flex flex-col" style="background: #fff;" [class]="{'tb-disabled': disabled, 'fill-height': fillHeight}"
      tb-fullscreen
      [fullscreen]="fullscreen">
-  <div style="height: 40px;" class="tb-css-toolbar flex flex-row justify-start items-center">
+  <div style="height: 40px;" class="tb-css-toolbar flex flex-row items-center justify-start">
     <label class="tb-title no-padding" [class]="{'tb-error': !disabled && (hasErrors || required && !modelValue), 'tb-required': !disabled && required}">{{ label }}</label>
     <span class="flex-1"></span>
     <button type='button' *ngIf="!disabled" mat-button class="tidy" (click)="beautifyCss()">
diff --git a/ui-ngx/src/app/shared/components/dialog/alert-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/alert-dialog.component.html
index 3b656b43fc..1073cb7c95 100644
--- a/ui-ngx/src/app/shared/components/dialog/alert-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/alert-dialog.component.html
@@ -22,6 +22,6 @@
 <ng-template #htmlMode>
   <div mat-dialog-content [innerHTML]="data.message | safe:'html'"></div>
 </ng-template>
-<div mat-dialog-actions class="flex justify-end items-center">
+<div mat-dialog-actions class="flex items-center justify-end">
   <button mat-button color="primary" [mat-dialog-close]="true" cdkFocusInitial>{{data.ok}}</button>
 </div>
diff --git a/ui-ngx/src/app/shared/components/dialog/confirm-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/confirm-dialog.component.html
index 782af9cdb3..70522b87da 100644
--- a/ui-ngx/src/app/shared/components/dialog/confirm-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/confirm-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <h2 mat-dialog-title>{{data.title}}</h2>
 <div mat-dialog-content [innerHTML]="data.message | safe: 'html'"></div>
-<div mat-dialog-actions class="flex justify-end items-center">
+<div mat-dialog-actions class="flex items-center justify-end">
   <button mat-button color="primary" [mat-dialog-close]="false">{{data.cancel}}</button>
   <button mat-button color="primary" [mat-dialog-close]="true" cdkFocusInitial>{{data.ok}}</button>
 </div>
diff --git a/ui-ngx/src/app/shared/components/dialog/entity-conflict-dialog/entity-conflict-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/entity-conflict-dialog/entity-conflict-dialog.component.html
index f2ed025e1a..7eaf782398 100644
--- a/ui-ngx/src/app/shared/components/dialog/entity-conflict-dialog/entity-conflict-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/entity-conflict-dialog/entity-conflict-dialog.component.html
@@ -36,7 +36,7 @@
     <span>{{ 'entity.version-conflict.message' | translate }}</span>
   </div>
 </div>
-<div mat-dialog-actions class="flex flex-row justify-end items-center">
+<div mat-dialog-actions class="flex flex-row items-center justify-end">
   <button mat-button color="primary"
           type="button"
           (click)="onDiscard()"
diff --git a/ui-ngx/src/app/shared/components/dialog/error-alert-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/error-alert-dialog.component.html
index 0a10fe9923..34512afe3c 100644
--- a/ui-ngx/src/app/shared/components/dialog/error-alert-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/error-alert-dialog.component.html
@@ -25,6 +25,6 @@
     <small class="error-details-content" [innerHTML]="errorDetails"></small>
   </mat-expansion-panel>
 </div>
-<div mat-dialog-actions class="flex justify-end items-center">
+<div mat-dialog-actions class="flex items-center justify-end">
   <button mat-button color="primary" [mat-dialog-close]="true" cdkFocusInitial>{{data.ok}}</button>
 </div>
diff --git a/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.html
index 684b009b5d..9cce511a6b 100644
--- a/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.html
@@ -38,7 +38,7 @@
       </tb-json-object-edit>
     </fieldset>
   </div>
-  <div mat-dialog-actions class="flex flex-row justify-end items-center">
+  <div mat-dialog-actions class="flex flex-row items-center justify-end">
     <span class="flex-1"></span>
     <button mat-button color="primary"
             type="button"
diff --git a/ui-ngx/src/app/shared/components/dialog/todo-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/todo-dialog.component.html
index fba57b4d72..460dcb1b6e 100644
--- a/ui-ngx/src/app/shared/components/dialog/todo-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/todo-dialog.component.html
@@ -19,6 +19,6 @@
 <div mat-dialog-content>
   <h1>COMING SOON!</h1>
 </div>
-<div mat-dialog-actions class="flex flex-row justify-end items-center">
+<div mat-dialog-actions class="flex flex-row items-center justify-end">
   <button mat-button color="primary" [mat-dialog-close]="true" cdkFocusInitial>Ok</button>
 </div>
diff --git a/ui-ngx/src/app/shared/components/grid/scroll-grid.component.html b/ui-ngx/src/app/shared/components/grid/scroll-grid.component.html
index 666d19ea5d..421bd9fd09 100644
--- a/ui-ngx/src/app/shared/components/grid/scroll-grid.component.html
+++ b/ui-ngx/src/app/shared/components/grid/scroll-grid.component.html
@@ -42,12 +42,12 @@
   <ng-container *ngTemplateOutlet="noData"></ng-container>
 </ng-template>
 <ng-template #defaultLoadingCell>
-  <div class="flex flex-col justify-center items-center" [style]="{minHeight: itemSize + 'px'}">
+  <div class="flex flex-col items-center justify-center" [style]="{minHeight: itemSize + 'px'}">
     <mat-spinner color="accent" strokeWidth="5"></mat-spinner>
   </div>
 </ng-template>
 <ng-template #defaultDataLoading>
-  <div class="tb-absolute-fill flex flex-col justify-center items-center">
+  <div class="tb-absolute-fill flex flex-col items-center justify-center">
     <mat-spinner color="accent" strokeWidth="5"></mat-spinner>
   </div>
 </ng-template>
diff --git a/ui-ngx/src/app/shared/components/html.component.html b/ui-ngx/src/app/shared/components/html.component.html
index 22c7f19551..c69766e566 100644
--- a/ui-ngx/src/app/shared/components/html.component.html
+++ b/ui-ngx/src/app/shared/components/html.component.html
@@ -18,7 +18,7 @@
 <div class="tb-html flex flex-col" style="background: #fff;" [class]="{'tb-disabled': disabled, 'fill-height': fillHeight}"
      tb-fullscreen
      [fullscreen]="fullscreen">
-  <div style="min-height: 40px;" class="tb-html-toolbar flex flex-row justify-start items-center">
+  <div style="min-height: 40px;" class="tb-html-toolbar flex flex-row items-center justify-start">
     <label class="tb-title no-padding" [class]="{'tb-error': !disabled && (hasErrors || required && !modelValue), 'tb-required': !disabled && required}">{{ label }}</label>
     <span class="flex-1"></span>
     <button type='button' *ngIf="!disabled" mat-button class="tidy" (click)="beautifyHtml()">
diff --git a/ui-ngx/src/app/shared/components/image/embed-image-dialog.component.html b/ui-ngx/src/app/shared/components/image/embed-image-dialog.component.html
index 9f2d582ade..a5411fbe21 100644
--- a/ui-ngx/src/app/shared/components/image/embed-image-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/image/embed-image-dialog.component.html
@@ -34,7 +34,7 @@
         <mat-panel-title>
           <div *ngIf="!readonly" tb-hint-tooltip-icon="{{ 'image.embed-to-html-hint' | translate }}"
                class="tb-form-row no-border no-padding">
-            <mat-slide-toggle class="mat-slide flex justify-center items-stretch" [formControl]="publicStatusControl" (click)="$event.stopPropagation()">
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" [formControl]="publicStatusControl" (click)="$event.stopPropagation()">
               <div class="tb-form-panel-title">{{ 'image.embed-to-html' | translate }}</div>
             </mat-slide-toggle>
           </div>
diff --git a/ui-ngx/src/app/shared/components/image/image-gallery.component.html b/ui-ngx/src/app/shared/components/image/image-gallery.component.html
index acb4a50eee..685c53416c 100644
--- a/ui-ngx/src/app/shared/components/image/image-gallery.component.html
+++ b/ui-ngx/src/app/shared/components/image/image-gallery.component.html
@@ -17,16 +17,16 @@
 -->
 <div class="tb-images tb-absolute-fill" [class.tb-dialog-mode]="dialogMode" [class.mat-padding]="!dialogMode">
   <div class="tb-images-content flex flex-1 flex-col" [class.tb-outlined-border]="pageMode">
-    <mat-toolbar class="mat-mdc-table-toolbar lt-lg:flex lt-lg:flex-col lt-lg:justify-start lt-lg:items-stretch"
+    <mat-toolbar class="mat-mdc-table-toolbar lt-lg:flex lt-lg:flex-col lt-lg:items-stretch lt-lg:justify-start"
                  [class.!hidden]="textSearchMode || !(mode === 'grid' || dataSource?.selection.isEmpty())"
                  [class.multi-row]="!isSysAdmin">
-      <div class="flex flex-1 flex-row justify-start items-center">
+      <div class="flex flex-1 flex-row items-center justify-start">
         <div class="mat-toolbar-tools">
           <div class="tb-images-title lt-md:!hidden">
             <div tbTruncateWithTooltip>{{ (isScada ? 'scada.symbols' : 'image.gallery') | translate }}</div>
             <div *ngIf="isScada" tb-help="scada"></div>
           </div>
-          <div class="tb-images-view-type-toolbar flex flex-row justify-start items-center">
+          <div class="tb-images-view-type-toolbar flex flex-row items-center justify-start">
             <div class="tb-toolbar-button" [class.tb-selected]="mode === 'list'">
               <button mat-icon-button
                       (click)="setMode('list')"
@@ -49,9 +49,9 @@
                             [ngModel]="includeSystemImages"
                             (ngModelChange)="includeSystemImagesChanged($event)">{{ (isScada ? 'scada.include-system-symbols' : 'image.include-system-images') | translate }}</mat-slide-toggle>
         </div>
-        <section class="flex flex-1 flex-row justify-start items-center gt-md:gap-4">
+        <section class="flex flex-1 flex-row items-center justify-start gt-md:gap-4">
           <span class="flex-1"></span>
-          <section class="flex flex-row justify-start items-center">
+          <section class="flex flex-row items-center justify-start">
             <button [disabled]="isLoading$ | async"
                     mat-icon-button
                     (click)="enterFilterMode()"
@@ -205,7 +205,7 @@
                       [class.gt-md:min-w-48]="isScada"
                       [class.gt-md:max-w-48]="isScada"
                       [class.gt-md:w-48]="isScada">
-              <div class="lt-lg:!hidden flex flex-1 flex-row justify-end items-stretch">
+              <div class="flex flex-1 flex-row items-stretch justify-end lt-lg:!hidden">
                 <button mat-icon-button [disabled]="isLoading$ | async"
                         matTooltip="{{ (isScada ? 'scada.download-symbol' : 'image.download-image' ) | translate }}"
                         matTooltipPosition="above"
@@ -297,7 +297,7 @@
           <ng-container *ngTemplateOutlet="noImages"></ng-container>
         </ng-container>
         <span [class.!hidden]="!dataSource.dataLoading"
-              class="no-data-found flex justify-center items-center">{{ 'common.loading' | translate }}</span>
+              class="no-data-found flex items-center justify-center">{{ 'common.loading' | translate }}</span>
       </div>
       <mat-divider></mat-divider>
       <mat-paginator [length]="dataSource.total() | async"
@@ -322,7 +322,7 @@
   </div>
 </div>
 <ng-template #loadingImages>
-  <div class="tb-absolute-fill flex flex-col justify-center items-center">
+  <div class="tb-absolute-fill flex flex-col items-center justify-center">
         <span>
           {{ 'common.loading' | translate }}
         </span>
diff --git a/ui-ngx/src/app/shared/components/image/images-in-use-dialog.component.html b/ui-ngx/src/app/shared/components/image/images-in-use-dialog.component.html
index 0be6a11d1b..91ecb97da1 100644
--- a/ui-ngx/src/app/shared/components/image/images-in-use-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/image/images-in-use-dialog.component.html
@@ -71,7 +71,7 @@
     </div>
   </ng-container>
 </div>
-<div mat-dialog-actions class="flex justify-end items-center">
+<div mat-dialog-actions class="flex items-center justify-end">
   <button mat-button color="primary" (click)="cancel()">{{'action.cancel' | translate}}</button>
   <button mat-raised-button color="accent" (click)="delete()" [disabled]="data.multiple && dataSource.selection.isEmpty()"
           cdkFocusInitial>{{ (data.multiple ? 'action.delete-selected' : 'action.delete-anyway') | translate}}</button>
diff --git a/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html b/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html
index f4bc600cd2..4c3d15f4f6 100644
--- a/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html
@@ -50,7 +50,7 @@
       </mat-form-field>
     </fieldset>
   </div>
-  <div mat-dialog-actions class="flex flex-row justify-end items-center">
+  <div mat-dialog-actions class="flex flex-row items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/shared/components/js-func.component.html b/ui-ngx/src/app/shared/components/js-func.component.html
index e9d30f2dd2..5a0e358b7a 100644
--- a/ui-ngx/src/app/shared/components/js-func.component.html
+++ b/ui-ngx/src/app/shared/components/js-func.component.html
@@ -18,7 +18,7 @@
 <div class="tb-js-func flex flex-col" style="background: #fff;" [class]="{'tb-disabled': disabled, 'fill-height': fillHeight, 'tb-hide-brackets': hideBrackets}"
      tb-fullscreen
      [fullscreen]="fullscreen">
-  <div style="min-height: 40px;" class="tb-js-func-toolbar flex flex-row justify-start items-center">
+  <div style="min-height: 40px;" class="tb-js-func-toolbar flex flex-row items-center justify-start">
     <label class="tb-title no-padding"
            [class]="{'tb-error': !disabled && (hasErrors || !functionValid || required && !modelValue), 'tb-required': !disabled && required}">
       {{ functionLabel }}
@@ -44,7 +44,7 @@
   <div id="tb-javascript-panel" class="tb-js-func-panel flex flex-col" tb-toast toastTarget="{{toastTargetId}}">
     <div #javascriptEditor id="tb-javascript-input" [style]="fillHeight ? {} : {minHeight: minHeight}" [class.fill-height]="fillHeight"></div>
   </div>
-  <div *ngIf="!hideBrackets" class="flex flex-row justify-start items-center" style="height: 40px;">
+  <div *ngIf="!hideBrackets" class="flex flex-row items-center justify-start" style="height: 40px;">
     <label class="tb-title no-padding" [class]="{'tb-error': hasErrors || !functionValid || required && !modelValue}">&#125;</label>
   </div>
 </div>
diff --git a/ui-ngx/src/app/shared/components/json-content.component.html b/ui-ngx/src/app/shared/components/json-content.component.html
index c5452c92c4..33534dec9a 100644
--- a/ui-ngx/src/app/shared/components/json-content.component.html
+++ b/ui-ngx/src/app/shared/components/json-content.component.html
@@ -18,7 +18,7 @@
 <div class="tb-json-content flex flex-col" style="background: #fff;" [class]="{'fill-height': fillHeight}"
      tb-fullscreen
      [fullscreen]="fullscreen" (fullscreenChanged)="onFullscreen()">
-  <div style="height: 40px;" class="tb-json-content-toolbar flex flex-row justify-start items-center" *ngIf="!hideToolbar">
+  <div style="height: 40px;" class="tb-json-content-toolbar flex flex-row items-center justify-start" *ngIf="!hideToolbar">
     <label class="tb-title no-padding" [class]="{'tb-error': !disabled && (!contentValid || required && !contentBody), 'tb-required': !disabled && required}">{{ label }}</label>
     <span class="flex-1"></span>
     <button type="button"
diff --git a/ui-ngx/src/app/shared/components/json-object-edit.component.html b/ui-ngx/src/app/shared/components/json-object-edit.component.html
index cf60036986..0aa28474d5 100644
--- a/ui-ngx/src/app/shared/components/json-object-edit.component.html
+++ b/ui-ngx/src/app/shared/components/json-object-edit.component.html
@@ -18,7 +18,7 @@
 <div class="flex flex-col" style="background: #fff;" [class.fill-height]="fillHeight"
      tb-fullscreen
      [fullscreen]="fullscreen" (fullscreenChanged)="onFullscreen()">
-  <div class="tb-json-object-toolbar flex flex-row justify-start items-center">
+  <div class="tb-json-object-toolbar flex flex-row items-center justify-start">
     <label class="tb-title no-padding"
            [class]="{'tb-required': jsonRequired,
                      'tb-readonly': readonly,
diff --git a/ui-ngx/src/app/shared/components/kv-map.component.html b/ui-ngx/src/app/shared/components/kv-map.component.html
index 28861708e8..36c523d404 100644
--- a/ui-ngx/src/app/shared/components/kv-map.component.html
+++ b/ui-ngx/src/app/shared/components/kv-map.component.html
@@ -17,7 +17,7 @@
 -->
 <section class="tb-kv-map flex flex-col" [formGroup]="kvListFormGroup">
   <label translate class="tb-title">{{ titleText }}</label>
-  <div class="flex flex-row justify-start items-center gap-2"
+  <div class="flex flex-row items-center justify-start gap-2"
        formArrayName="keyVals"
        *ngFor="let keyValControl of keyValsFormArray().controls; let $index = index">
     <mat-form-field class="mat-block flex-1" subscriptSizing="{{ subscriptSizing }}">
@@ -42,7 +42,7 @@
           'disabled': disabled,
           '!hidden': keyValsFormArray().length
         }"
-        class="no-data-found flex justify-center items-center" translate>{{noDataText ? noDataText : 'key-val.no-data'}}</span>
+        class="no-data-found flex items-center justify-center" translate>{{noDataText ? noDataText : 'key-val.no-data'}}</span>
   <div style="margin-top: 8px;">
     <button mat-button mat-raised-button color="primary"
             [class.!hidden]="disabled"
diff --git a/ui-ngx/src/app/shared/components/markdown-editor.component.html b/ui-ngx/src/app/shared/components/markdown-editor.component.html
index a52a8ef749..5f1005ebb9 100644
--- a/ui-ngx/src/app/shared/components/markdown-editor.component.html
+++ b/ui-ngx/src/app/shared/components/markdown-editor.component.html
@@ -17,7 +17,7 @@
 -->
 <div class="markdown-content" [class.tb-edit-mode]="!readonly"
      tb-fullscreen [fullscreen]="fullscreen" (fullscreenChanged)="onFullscreen()">
-  <div style="min-height: 40px;" class="markdown-editor-toolbar flex flex-row justify-start items-center">
+  <div style="min-height: 40px;" class="markdown-editor-toolbar flex flex-row items-center justify-start">
     <label class="tb-title no-padding" [class]="{'tb-error': !disabled && required && !markdownValue, 'tb-required': !disabled && required}">{{ label }}</label>
     <span class="flex-1"></span>
     <button [class.!hidden]="editorMode"
diff --git a/ui-ngx/src/app/shared/components/notification/notification.component.html b/ui-ngx/src/app/shared/components/notification/notification.component.html
index 52c39d115f..e145c121c7 100644
--- a/ui-ngx/src/app/shared/components/notification/notification.component.html
+++ b/ui-ngx/src/app/shared/components/notification/notification.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="notification flex flex-row justify-between items-start"
+<section class="notification flex flex-row items-start justify-between"
          [style]="{borderColor: notificationColor(), backgroundColor: notificationBackgroundColor()}">
   <div *ngIf="showIcon; else defaultIcon">
     <tb-icon class="icon" [style.color]="notification.additionalConfig.icon.color">
@@ -35,7 +35,7 @@
       {{ buttonLabel }}
     </button>
   </div>
-  <div class="description flex flex-col justify-start items-end">
+  <div class="description flex flex-col items-end justify-start">
     <span class="time">{{ notification.createdTime ?? currentDate | dateAgo }}</span>
     <button mat-icon-button (click)="markRead($event)" *ngIf="!hideMarkAsReadButton"
             matTooltip="{{ 'notification.mark-as-read' | translate }}" matTooltipPosition="above">
diff --git a/ui-ngx/src/app/shared/components/protobuf-content.component.html b/ui-ngx/src/app/shared/components/protobuf-content.component.html
index 1a60aea94d..ff7871393d 100644
--- a/ui-ngx/src/app/shared/components/protobuf-content.component.html
+++ b/ui-ngx/src/app/shared/components/protobuf-content.component.html
@@ -18,7 +18,7 @@
 <div class="flex flex-col" style="background: #fff;" [class.fill-height]="fillHeight"
      tb-fullscreen
      [fullscreen]="fullscreen" (fullscreenChanged)="onFullscreen()">
-  <div style="height: 40px;" class="tb-protobuf-content-toolbar flex flex-row justify-start items-center">
+  <div style="height: 40px;" class="tb-protobuf-content-toolbar flex flex-row items-center justify-start">
     <label class="tb-title no-padding">{{ label }}</label>
     <span class="flex-1"></span>
     <button type="button"
diff --git a/ui-ngx/src/app/shared/components/script-lang.component.html b/ui-ngx/src/app/shared/components/script-lang.component.html
index 71625b698d..a27b23dcc1 100644
--- a/ui-ngx/src/app/shared/components/script-lang.component.html
+++ b/ui-ngx/src/app/shared/components/script-lang.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div [formGroup]="scriptLangFormGroup" class="flex flex-row justify-center items-stretch">
+<div [formGroup]="scriptLangFormGroup" class="flex flex-row items-stretch justify-center">
   <mat-button-toggle-group class="tb-script-lang-toggle-group"
                            formControlName="scriptLang"
                            aria-label="Script language">
diff --git a/ui-ngx/src/app/shared/components/snack-bar-component.html b/ui-ngx/src/app/shared/components/snack-bar-component.html
index 4181e7c087..f99e0ba2a7 100644
--- a/ui-ngx/src/app/shared/components/snack-bar-component.html
+++ b/ui-ngx/src/app/shared/components/snack-bar-component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="flex flex-row justify-start items-center"
+<div class="flex flex-row items-center justify-start"
      [@showHideAnimation]="{value: animationState, params: animationParams}"
      (@showHideAnimation.done)="onHideFinished($event)"
      [class.tb-toast]="!notification.modern"
diff --git a/ui-ngx/src/app/shared/components/svg-xml.component.html b/ui-ngx/src/app/shared/components/svg-xml.component.html
index f0c55b6faa..2939f1e93b 100644
--- a/ui-ngx/src/app/shared/components/svg-xml.component.html
+++ b/ui-ngx/src/app/shared/components/svg-xml.component.html
@@ -18,7 +18,7 @@
 <div class="tb-svg-xml flex flex-col" style="background: #fff;" [class]="{'tb-disabled': disabled, 'fill-height': fillHeight, 'no-label': noLabel}"
      tb-fullscreen
      [fullscreen]="fullscreen">
-  <div style="min-height: 40px;" class="tb-svg-xml-toolbar flex flex-row justify-start items-center">
+  <div style="min-height: 40px;" class="tb-svg-xml-toolbar flex flex-row items-center justify-start">
     <label *ngIf="!noLabel" class="tb-title no-padding" [class]="{'tb-error': !disabled && (hasErrors || required && !modelValue), 'tb-required': !disabled && required}">{{ label }}</label>
     <span class="flex-1"></span>
     <fieldset style="width: initial">
diff --git a/ui-ngx/src/app/shared/components/time/datapoints-limit.component.html b/ui-ngx/src/app/shared/components/time/datapoints-limit.component.html
index a0ae5dd5af..1e797d827d 100644
--- a/ui-ngx/src/app/shared/components/time/datapoints-limit.component.html
+++ b/ui-ngx/src/app/shared/components/time/datapoints-limit.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div [formGroup]="datapointsLimitFormGroup" class="limit-slider-container flex flex-row justify-start items-center">
+<div [formGroup]="datapointsLimitFormGroup" class="limit-slider-container flex flex-row items-center justify-start">
   <mat-slider class="flex-1"
               min="{{minDatapointsLimit()}}"
               max="{{maxDatapointsLimit()}}">
diff --git a/ui-ngx/src/app/shared/components/time/datetime.component.html b/ui-ngx/src/app/shared/components/time/datetime.component.html
index f2bb042775..edf59702f1 100644
--- a/ui-ngx/src/app/shared/components/time/datetime.component.html
+++ b/ui-ngx/src/app/shared/components/time/datetime.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="flex flex-row justify-start items-start gap-4">
+<section class="flex flex-row items-start justify-start gap-4">
   <mat-form-field>
     <mat-label *ngIf="showLabel">{{ dateText | translate }}</mat-label>
     <mat-datetimepicker-toggle [for]="datePicker" matPrefix></mat-datetimepicker-toggle>
diff --git a/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html b/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html
index 2119f7d7d8..75d586fa7c 100644
--- a/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html
+++ b/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html
@@ -23,7 +23,7 @@
         <button mat-icon-button class="mat-icon-button" aria-label="Previous" (click)="movePrev()">
             <mat-icon class="material-icons" [style.color]="settings.buttonColor">skip_previous</mat-icon>
         </button>
-        <div class="flex flex-col flex-full">
+        <div class="flex flex-full flex-col">
             <mat-slider [min]="minTimeIndex" [max]="maxTimeIndex" #ngSlider><input matSliderThumb [(ngModel)]="index"  (input)="changeIndex({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value}.value)" #ngSliderThumb="matSliderThumb" />
             </mat-slider>
             <div class="panel-timer">
diff --git a/ui-ngx/src/app/shared/components/time/quick-time-interval.component.html b/ui-ngx/src/app/shared/components/time/quick-time-interval.component.html
index 5ffc4679e4..40f39118c8 100644
--- a/ui-ngx/src/app/shared/components/time/quick-time-interval.component.html
+++ b/ui-ngx/src/app/shared/components/time/quick-time-interval.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="interval-section flex-1 flex flex-row">
+<section class="interval-section flex flex-1 flex-row">
   <mat-form-field class="flex-1" [subscriptSizing]="subscriptSizing" [appearance]="appearance">
     <mat-label *ngIf="displayLabel" translate>timewindow.interval</mat-label>
     <mat-select [disabled]="disabled" [(ngModel)]="modelValue" (ngModelChange)="onIntervalChange()">
diff --git a/ui-ngx/src/app/shared/components/time/timezone-select.component.html b/ui-ngx/src/app/shared/components/time/timezone-select.component.html
index d824cdd24f..eb7dc113fa 100644
--- a/ui-ngx/src/app/shared/components/time/timezone-select.component.html
+++ b/ui-ngx/src/app/shared/components/time/timezone-select.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="selectTimezoneFormGroup" class="flex flex-1 mat-block"
+<mat-form-field [formGroup]="selectTimezoneFormGroup" class="mat-block flex flex-1"
                 [subscriptSizing]="subscriptSizing" [appearance]="appearance">
   <mat-label *ngIf="displayLabel" translate>timezone.timezone</mat-label>
   <input matInput type="text" placeholder="{{ 'timezone.select-timezone' | translate }}"
diff --git a/ui-ngx/src/app/shared/components/user-menu.component.html b/ui-ngx/src/app/shared/components/user-menu.component.html
index c57bbbcc1a..3c1a3494db 100644
--- a/ui-ngx/src/app/shared/components/user-menu.component.html
+++ b/ui-ngx/src/app/shared/components/user-menu.component.html
@@ -18,7 +18,7 @@
 <section class="flex flex-row">
   <div *ngIf="displayUserInfo" class="tb-user-info flex flex-row lt-lg:!hidden">
     <mat-icon class="material-icons tb-mini-avatar">account_circle</mat-icon>
-    <div class="flex flex-col justify-center items-stretch">
+    <div class="flex flex-col items-stretch justify-center">
       <span *ngIf="userDisplayName$ | async; let userDisplayName" class="tb-user-display-name">{{ userDisplayName }}</span>
       <span *ngIf="authorityName$ | async; let authorityName" class="tb-user-authority">{{ authorityName | translate }}</span>
     </div>
diff --git a/ui-ngx/src/app/shared/components/value-input.component.html b/ui-ngx/src/app/shared/components/value-input.component.html
index cdcaf837c2..e4aa511e83 100644
--- a/ui-ngx/src/app/shared/components/value-input.component.html
+++ b/ui-ngx/src/app/shared/components/value-input.component.html
@@ -31,7 +31,7 @@
         </mat-option>
       </mat-select>
     </mat-form-field>
-    <mat-form-field *ngIf="valueType === valueTypeEnum.STRING" appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute flex-1">
+    <mat-form-field *ngIf="valueType === valueTypeEnum.STRING" appearance="outline" subscriptSizing="dynamic" class="tb-inline-field tb-suffix-absolute flex flex-1">
       <input [disabled]="disabled" matInput required name="value" #value="ngModel" [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()"
              placeholder="{{ 'value.string-value' | translate }}*"/>
       <mat-icon matSuffix
@@ -43,7 +43,7 @@
         warning
       </mat-icon>
     </mat-form-field>
-    <mat-form-field *ngIf="valueType === valueTypeEnum.INTEGER" appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute number flex-1">
+    <mat-form-field *ngIf="valueType === valueTypeEnum.INTEGER" appearance="outline" subscriptSizing="dynamic" class="tb-inline-field tb-suffix-absolute number flex flex-1">
       <input [disabled]="disabled" matInput required name="value" type="number" step="1" pattern="^-?[0-9]+$" #value="ngModel" [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()"
              placeholder="{{ 'value.integer-value' | translate }}*"/>
       <mat-icon matSuffix
@@ -56,7 +56,7 @@
         warning
       </mat-icon>
     </mat-form-field>
-    <mat-form-field *ngIf="valueType === valueTypeEnum.DOUBLE" appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute number flex-1">
+    <mat-form-field *ngIf="valueType === valueTypeEnum.DOUBLE" appearance="outline" subscriptSizing="dynamic" class="tb-inline-field tb-suffix-absolute number flex flex-1">
       <input [disabled]="disabled" matInput required name="value" type="number" step="any" #value="ngModel" [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()"
              placeholder="{{ 'value.double-value' | translate }}*"/>
       <mat-icon matSuffix
@@ -73,8 +73,8 @@
       <mat-chip-option [selectable]="!modelValue" [value]="true">{{ trueLabel }}</mat-chip-option>
       <mat-chip-option [selectable]="modelValue" [value]="false">{{ falseLabel }}</mat-chip-option>
     </mat-chip-listbox>
-    <div *ngIf="valueType === valueTypeEnum.JSON" class="flex flex-1 flex-row justify-start items-center gap-2">
-      <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute flex-1">
+    <div *ngIf="valueType === valueTypeEnum.JSON" class="flex flex-1 flex-row items-center justify-start gap-2">
+      <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-inline-field tb-suffix-absolute flex flex-1">
         <input [disabled]="disabled" matInput tb-json-to-string required name="value" #value="ngModel"
                [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()" placeholder="{{ 'value.json-value' | translate }}*"/>
         <mat-icon matSuffix
diff --git a/ui-ngx/src/app/shared/components/widgets-bundle-search.component.html b/ui-ngx/src/app/shared/components/widgets-bundle-search.component.html
index 5c9c80be7f..0c9ec720f8 100644
--- a/ui-ngx/src/app/shared/components/widgets-bundle-search.component.html
+++ b/ui-ngx/src/app/shared/components/widgets-bundle-search.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="input-wrapper flex justify-start items-center gap-4" [class.focus]="focus">
+<div class="input-wrapper flex items-center justify-start gap-4" [class.focus]="focus">
   <mat-icon>search</mat-icon>
   <input type="text"
          [(ngModel)]="searchText"
diff --git a/ui-ngx/src/app/shared/import-export/export-widgets-bundle-dialog.component.html b/ui-ngx/src/app/shared/import-export/export-widgets-bundle-dialog.component.html
index 280035075f..7f7a273420 100644
--- a/ui-ngx/src/app/shared/import-export/export-widgets-bundle-dialog.component.html
+++ b/ui-ngx/src/app/shared/import-export/export-widgets-bundle-dialog.component.html
@@ -31,7 +31,7 @@
     <mat-checkbox [formControl]="exportWidgetsFormControl">{{ 'widgets-bundle.export-widgets-bundle-widgets-prompt' | translate }}</mat-checkbox>
   </fieldset>
 </div>
-<div mat-dialog-actions class="flex justify-end items-center">
+<div mat-dialog-actions class="flex items-center justify-end">
   <button mat-button color="primary"
           type="button"
           [disabled]="(isLoading$ | async) && !ignoreLoading"
diff --git a/ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html b/ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html
index f102723d9d..843594659b 100644
--- a/ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html
+++ b/ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html
@@ -44,7 +44,7 @@
             </tb-file-input>
           </fieldset>
         </form>
-        <div class="flex flex-row justify-end items-center gap-5">
+        <div class="flex flex-row items-center justify-end gap-5">
           <button mat-button
                   [disabled]="(isLoading$ | async)"
                   (click)="cancel()">{{ 'action.cancel' | translate }}</button>
@@ -76,7 +76,7 @@
             </div>
           </fieldset>
         </form>
-        <div class="flex flex-row flex-wrap justify-between items-center">
+        <div class="flex flex-row flex-wrap items-center justify-between">
           <button mat-button
                   [disabled]="(isLoading$ | async)"
                   (click)="previousStep()">{{ 'action.back' | translate }}</button>
@@ -96,7 +96,7 @@
           <ng-template matStepLabel>{{ 'import.stepper-text.column-type' | translate }}</ng-template>
           <tb-table-columns-assignment #columnsAssignmentComponent formControlName="columnsParam" [entityType]="entityType"></tb-table-columns-assignment>
         </form>
-        <div class="flex flex-row flex-wrap justify-between items-center">
+        <div class="flex flex-row flex-wrap items-center justify-between">
           <button mat-button
                   [disabled]="(isLoading$ | async)"
                   (click)="previousStep()">{{ 'action.back' | translate }}</button>
@@ -140,7 +140,7 @@
             <div #failureDetailsEditor class="tb-failure-details"></div>
           </mat-expansion-panel>
         </div>
-        <div class="flex flex-row justify-end items-center gap-5">
+        <div class="flex flex-row items-center justify-end gap-5">
           <button mat-raised-button
                   [disabled]="(isLoading$ | async)"
                   color="primary"
diff --git a/ui-ngx/src/app/shared/import-export/import-dialog.component.html b/ui-ngx/src/app/shared/import-export/import-dialog.component.html
index 096f625d77..c472fb2526 100644
--- a/ui-ngx/src/app/shared/import-export/import-dialog.component.html
+++ b/ui-ngx/src/app/shared/import-export/import-dialog.component.html
@@ -42,7 +42,7 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"

From 6edc66c715b08d88348abea6331a42afeed247f1 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Tue, 15 Oct 2024 18:14:10 +0300
Subject: [PATCH 18/34] Flex layout replacements. Switch to tailwind.css.

---
 ...teway-service-rpc-connector.component.html |  6 +-
 .../add-doc-link-dialog.component.html        |  2 +-
 .../add-quick-link-dialog.component.html      |  2 +-
 .../cluster-info-table.component.html         | 11 ++--
 .../configured-features.component.html        | 24 +++----
 .../lib/home-page/doc-link.component.html     | 18 ++---
 .../home-page/doc-links-widget.component.html |  8 +--
 .../edit-links-dialog.component.html          | 16 ++---
 ...ng-started-completed-dialog.component.html | 12 ++--
 .../getting-started-widget.component.html     | 26 ++++----
 .../lib/home-page/quick-link.component.html   | 16 ++---
 .../quick-links-widget.component.html         |  8 +--
 .../recent-dashboards-widget.component.html   | 10 +--
 .../usage-info-widget.component.html          | 66 +++++++++----------
 .../lib/home-page/version-info.component.html | 28 ++++----
 .../select-entity-dialog.component.html       |  6 +-
 .../widget/lib/rpc/knob.component.html        | 15 ++---
 .../lib/rpc/led-indicator.component.html      | 15 +++--
 .../rpc/persistent-add-dialog.component.html  | 18 ++---
 .../persistent-details-dialog.component.html  | 27 ++++----
 .../persistent-filter-panel.component.html    |  6 +-
 .../lib/rpc/persistent-table.component.html   | 23 ++++---
 .../lib/rpc/persistent-table.component.ts     |  2 +
 .../lib/rpc/round-switch.component.html       | 14 ++--
 .../widget/lib/rpc/switch.component.html      | 26 ++++----
 .../alarms-table-key-settings.component.html  | 16 ++---
 ...larms-table-widget-settings.component.html | 13 ++--
 ...tion-button-widget-settings.component.html |  4 +-
 ...mand-button-widget-settings.component.html |  4 +-
 ...ower-button-widget-settings.component.html | 26 ++++----
 ...ggle-button-widget-settings.component.html | 19 +++---
 ...-value-card-widget-settings.component.html |  6 +-
 ...board-state-widget-settings.component.html |  6 +-
 ...ck-overview-widget-settings.component.html |  2 +-
 .../html-card-widget-settings.component.html  |  2 +-
 .../label-card-widget-settings.component.html |  6 +-
 ...-value-card-widget-settings.component.html |  8 +--
 .../cards/label-widget-label.component.html   | 18 ++---
 .../label-widget-settings.component.html      | 12 ++--
 .../markdown-widget-settings.component.html   |  6 +-
 ...rogress-bar-widget-settings.component.html |  6 +-
 .../qrcode-widget-settings.component.html     |  6 +-
 ...meseries-table-key-settings.component.html | 14 ++--
 ...s-table-latest-key-settings.component.html | 24 ++++---
 ...eries-table-widget-settings.component.html | 11 ++--
 ...otification-widget-settings.component.html |  2 +-
 .../value-card-widget-settings.component.html | 16 ++---
 ...-chart-card-widget-settings.component.html |  2 +-
 ...with-labels-widget-settings.component.html | 18 +++--
 .../chart-widget-settings.component.html      |  2 +-
 ...ghnut-chart-widget-settings.component.html | 18 ++---
 .../flot-bar-key-settings.component.html      |  2 +-
 .../flot-bar-widget-settings.component.html   |  2 +-
 .../chart/flot-key-settings.component.html    | 33 +++++-----
 .../flot-latest-key-settings.component.html   |  5 +-
 .../flot-line-key-settings.component.html     |  2 +-
 .../flot-line-widget-settings.component.html  |  2 +-
 .../flot-pie-key-settings.component.html      |  4 +-
 .../flot-pie-widget-settings.component.html   | 16 ++---
 .../chart/flot-threshold.component.html       |  2 +-
 .../chart/flot-widget-settings.component.html | 64 ++++++++----------
 .../chart/label-data-key.component.html       | 18 ++---
 ...atest-chart-widget-settings.component.html | 48 +++++++-------
 ...range-chart-widget-settings.component.html | 24 ++++---
 ...e-series-chart-key-settings.component.html | 13 ++--
 ...-series-chart-line-settings.component.html |  4 +-
 ...eries-chart-widget-settings.component.html | 28 ++++----
 ui-ngx/tailwind.config.js                     |  6 ++
 68 files changed, 467 insertions(+), 478 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector.component.html
index 539f374078..007ce7861a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector.component.html
@@ -213,7 +213,7 @@
               <input matInput [formControl]="control" required/>
             </mat-form-field>
             <mat-icon style="cursor:pointer; max-width:30px;min-width:30px"
-                      class="flex-[1_1_30px]"
+                      class=" min-w-7.5 max-w-7.5 flex-1 basis-7.5"
                       (click)="removeSNMPoid(i)"
                       matTooltip="{{ 'gateway.rpc.remove' | translate }}">delete
             </mat-icon>
@@ -231,7 +231,7 @@
           <input matInput formControlName="methodFilter" placeholder="post_attributes"/>
         </mat-form-field>
         <div class="flex flex-1 flex-row gap-2.5">
-          <mat-form-field class="max-w-4/12 flex-[1_1_33%]">
+          <mat-form-field class="max-w-4/12 flex-full">
             <mat-label>{{ 'gateway.rpc.httpMethod' | translate }}</mat-label>
             <mat-select formControlName="httpMethod">
               <mat-option *ngFor="let method of hTTPMethods" [value]="method">
@@ -305,7 +305,7 @@
           <input matInput formControlName="methodFilter" placeholder="echo"/>
         </mat-form-field>
         <div class="flex flex-row items-center justify-center gap-2.5">
-          <mat-form-field class="max-w-4/12 flex-[1_1_33%]">
+          <mat-form-field class="max-w-4/12 flex-full">
             <mat-label>{{ 'gateway.rpc.httpMethod' | translate }}</mat-label>
             <mat-select formControlName="httpMethod">
               <mat-option *ngFor="let method of hTTPMethods" [value]="method">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-doc-link-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-doc-link-dialog.component.html
index 7f86897f7e..fb950f6579 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-doc-link-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-doc-link-dialog.component.html
@@ -18,7 +18,7 @@
 <form class="tb-add-doc-link-dialog" [formGroup]="addDocLinkFormGroup">
   <mat-toolbar style="background: transparent;">
     <h2 translate>widgets.documentation.add-link-title</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-quick-link-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-quick-link-dialog.component.html
index c76f32405c..cb56e2da3a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-quick-link-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-quick-link-dialog.component.html
@@ -18,7 +18,7 @@
 <form class="tb-add-quick-link-dialog" [formGroup]="addQuickLinkFormGroup">
   <mat-toolbar style="background: transparent;">
     <h2 translate>widgets.quick-links.add-link-title</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/cluster-info-table.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/cluster-info-table.component.html
index f62d1ea61d..457d1bf316 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/cluster-info-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/cluster-info-table.component.html
@@ -41,7 +41,7 @@
               [matTooltip]="infoTooltip(serviceData, 'cpu')"
               matTooltipPosition="above"
               class="tb-resource-usage"
-              [ngClass]="statusClass(serviceData.cpuUsage)">
+              [class]="statusClass(serviceData.cpuUsage)">
       {{ serviceData.cpuUsage }}%
     </mat-cell>
   </ng-container>
@@ -53,7 +53,7 @@
               [matTooltip]="infoTooltip(serviceData, 'ram')"
               matTooltipPosition="above"
               class="tb-resource-usage"
-              [ngClass]="statusClass(serviceData.memoryUsage)">
+              [class]="statusClass(serviceData.memoryUsage)">
       {{ serviceData.memoryUsage }}%
     </mat-cell>
   </ng-container>
@@ -65,13 +65,12 @@
               [matTooltip]="infoTooltip(serviceData, 'disc')"
               matTooltipPosition="above"
               class="tb-resource-usage"
-              [ngClass]="statusClass(serviceData.discUsage)">
+              [class]="statusClass(serviceData.discUsage)">
       {{ serviceData.discUsage }}%
     </mat-cell>
   </ng-container>
   <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
   <mat-row *matRowDef="let serviceData; columns: displayedColumns;"></mat-row>
 </table>
-<span [fxShow]="dataSource.isEmpty() | async"
-      fxLayoutAlign="center center"
-      class="no-data-found" translate>widgets.cluster-info.no-data</span>
+<span [class.!hidden]="(dataSource.isEmpty() | async) === false"
+      class="no-data-found flex items-center justify-center" translate>widgets.cluster-info.no-data</span>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.html
index ec26e67111..cef21e9a01 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.html
@@ -15,55 +15,55 @@
     limitations under the License.
 
 -->
-<div class="tb-card-content" fxLayout="column" fxLayoutGap="8px">
+<div class="tb-card-content flex flex-col gap-2">
   <div class="tb-title">{{ 'widgets.configured-features.title' | translate }}
     <mat-icon
       matTooltip="{{ 'widgets.configured-features.info' | translate }}"
       matTooltipPosition="above"
       class="tb-info-icon">info</mat-icon>
   </div>
-  <mat-grid-list class="tb-features-list" fxFlex cols="6" [rowHeight]="rowHeight" [gutterSize]="gutterSize">
+  <mat-grid-list class="tb-features-list flex-1" cols="6" [rowHeight]="rowHeight" [gutterSize]="gutterSize">
     <mat-grid-tile class="tb-feature-tile" colspan="3">
-      <a class="tb-feature-button" fxFlex
+      <a class="tb-feature-button flex-1"
          [matTooltip]="featureTooltip(featuresInfo?.emailEnabled)"
          matTooltipPosition="above"
-         [ngClass]="{'configured': featuresInfo?.emailEnabled}"
+         [class.configured]="featuresInfo?.emailEnabled"
          routerLink="/settings/outgoing-mail">
         <div class="tb-feature-text"><span class="tb-feature-status">{{ featuresInfo?.emailEnabled ? 'check' : 'close' }}</span>{{ 'widgets.configured-features.email-feature' | translate}}</div>
       </a>
     </mat-grid-tile>
     <mat-grid-tile class="tb-feature-tile" colspan="3">
-      <a class="tb-feature-button" fxFlex
+      <a class="tb-feature-button flex-1"
          [matTooltip]="featureTooltip(featuresInfo?.smsEnabled)"
          matTooltipPosition="above"
-         [ngClass]="{'configured': featuresInfo?.smsEnabled}"
+         [class.configured]="featuresInfo?.smsEnabled"
          routerLink="/settings/notifications">
         <div class="tb-feature-text"><span class="tb-feature-status">{{ featuresInfo?.smsEnabled ? 'check' : 'close' }}</span>{{ 'widgets.configured-features.sms-feature' | translate}}</div>
       </a>
     </mat-grid-tile>
     <mat-grid-tile class="tb-feature-tile" [colspan]="bottomColspan">
-      <a class="tb-feature-button" fxFlex
+      <a class="tb-feature-button flex-1"
          [matTooltip]="featureTooltip(featuresInfo?.notificationEnabled)"
          matTooltipPosition="above"
-         [ngClass]="{'configured': featuresInfo?.notificationEnabled}"
+         [class.configured]="featuresInfo?.notificationEnabled"
          routerLink="/settings/notifications">
         <div class="tb-feature-text"><span class="tb-feature-status">{{ featuresInfo?.notificationEnabled ? 'check' : 'close' }}</span>{{ 'widgets.configured-features.slack-feature' | translate}}</div>
       </a>
     </mat-grid-tile>
     <mat-grid-tile class="tb-feature-tile" [colspan]="bottomColspan">
-      <a class="tb-feature-button" fxFlex
+      <a class="tb-feature-button flex-1"
          [matTooltip]="featureTooltip(featuresInfo?.oauthEnabled)"
          matTooltipPosition="above"
-         [ngClass]="{'configured': featuresInfo?.oauthEnabled}"
+         [class.configured]="featuresInfo?.oauthEnabled"
          routerLink="/security-settings/oauth2">
         <div class="tb-feature-text"><span class="tb-feature-status">{{ featuresInfo?.oauthEnabled ? 'check' : 'close' }}</span>{{ 'widgets.configured-features.oauth2-feature' | translate}}</div>
       </a>
     </mat-grid-tile>
     <mat-grid-tile class="tb-feature-tile" [colspan]="lastColspan">
-      <a class="tb-feature-button" fxFlex
+      <a class="tb-feature-button flex-1"
          [matTooltip]="featureTooltip(featuresInfo?.twoFaEnabled)"
          matTooltipPosition="above"
-         [ngClass]="{'configured': featuresInfo?.twoFaEnabled}"
+         [class.configured]="featuresInfo?.twoFaEnabled"
          routerLink="/security-settings/2fa">
         <div class="tb-feature-text"><span class="tb-feature-status">{{ featuresInfo?.twoFaEnabled ? 'check' : 'close' }}</span>{{ 'widgets.configured-features.2fa-feature' | translate}}</div>
       </a>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.html
index d4c171ab15..4db770a919 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.html
@@ -15,36 +15,36 @@
     limitations under the License.
 
 -->
-<div fxLayout="row" *ngIf="addMode || editMode; else docLinkTemplate">
-  <div fxFlex class="tb-edit-link" [ngClass]="{'edit-mode': editMode}" [formGroup]="editDocLinkFormGroup" fxLayout="column">
+<div class="flex flex-row" *ngIf="addMode || editMode; else docLinkTemplate">
+  <div class="tb-edit-link flex flex-1 flex-col" [class.edit-mode]="editMode" [formGroup]="editDocLinkFormGroup">
     <tb-material-icon-select required formControlName="icon"></tb-material-icon-select>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.documentation.name</mat-label>
       <input required matInput formControlName="name">
       <mat-error *ngIf="editDocLinkFormGroup.get('name').hasError('required')">
         {{ 'widgets.documentation.name-required' | translate }}
       </mat-error>
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.documentation.link</mat-label>
       <input required matInput formControlName="link">
       <mat-error *ngIf="editDocLinkFormGroup.get('link').hasError('required')">
         {{ 'widgets.documentation.link-required' | translate }}
       </mat-error>
     </mat-form-field>
-    <div *ngIf="addMode" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="8px">
+    <div *ngIf="addMode" class="flex flex-row items-stretch justify-end gap-2">
       <button *ngIf="!addOnly" mat-button color="primary" (click)="cancelAdd()">{{ 'action.cancel' | translate }}</button>
       <button mat-raised-button color="primary" (click)="add()">{{ 'action.add' | translate }}</button>
     </div>
   </div>
-  <div *ngIf="editMode" fxLayout="row" class="tb-edit-buttons">
+  <div *ngIf="editMode" class="tb-edit-buttons flex flex-row">
     <button mat-icon-button (click)="apply()"><tb-icon>check</tb-icon></button>
     <button mat-icon-button (click)="cancelEdit()"><tb-icon>close</tb-icon></button>
   </div>
 </div>
 <ng-template #docLinkTemplate>
-  <div fxLayout="row">
-    <div fxFlex class="tb-link">
+  <div class="flex flex-row">
+    <div class="tb-link flex-1">
       <div class="tb-link-container">
         <div class="tb-link-icon-container">
           <tb-icon color="primary">{{ docLink.icon }}</tb-icon>
@@ -52,7 +52,7 @@
         <div class="tb-link-text">{{ docLink.name }}</div>
       </div>
     </div>
-    <div fxLayout="row" fxLayoutAlign="start center" class="tb-edit-buttons">
+    <div class="tb-edit-buttons flex flex-row items-center justify-start">
       <button mat-icon-button
               matTooltip="{{ 'action.edit' | translate }}"
               matTooltipPosition="above"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.html
index 75d46f1865..474824cb12 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-card-content" fxLayout="column" fxLayoutGap="8px">
+<div class="tb-card-content flex flex-col gap-2">
   <div class="tb-card-header">
     <a class="tb-title-link" href="https://thingsboard.io/docs/" target="_blank">{{ 'widgets.documentation.title' | translate }}</a>
     <button class="tb-title-icon"
@@ -26,9 +26,9 @@
       <tb-icon>edit</tb-icon>
     </button>
   </div>
-  <mat-grid-list class="tb-links-list" fxFlex [cols]="columns" [rowHeight]="rowHeight" [gutterSize]="gutterSize">
+  <mat-grid-list class="tb-links-list flex-1" [cols]="columns" [rowHeight]="rowHeight" [gutterSize]="gutterSize">
     <mat-grid-tile class="tb-links-tile" *ngFor="let docLink of documentationLinks?.links">
-      <a fxFlex class="tb-link-button"
+      <a class="tb-link-button flex-1"
          [href]="docLink.link" target="_blank">
         <div class="tb-link-container">
           <div class="tb-link-icon-container">
@@ -39,7 +39,7 @@
       </a>
     </mat-grid-tile>
     <mat-grid-tile class="tb-links-tile">
-      <div fxFlex class="tb-add-link-button"
+      <div class="tb-add-link-button flex-1"
            matTooltip="{{ 'widgets.documentation.add-link' | translate }}"
            matTooltipPosition="above"
            (click)="addLink()">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-links-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-links-dialog.component.html
index 03a60f2714..d148c8baf9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-links-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-links-dialog.component.html
@@ -18,7 +18,7 @@
 <form class="tb-edit-links-dialog" [formGroup]="editLinksFormGroup">
   <mat-toolbar style="background: transparent;">
     <h2>{{ (mode === 'docs' ? 'widgets.documentation.title' : 'widgets.quick-links.title') | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="close()"
             type="button">
@@ -28,12 +28,12 @@
   <div mat-dialog-content>
     <div class="tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
          (cdkDropListDropped)="linkDrop($event)" [cdkDropListDisabled]="editMode || addMode">
-      <div cdkDrag class="tb-draggable" *ngFor="let linkControl of linksFormArray().controls; trackBy: trackByLink;
+      <div cdkDrag class="tb-draggable flex flex-row items-center justify-start" *ngFor="let linkControl of linksFormArray().controls; trackBy: trackByLink;
                let $index = index; last as isLast;"
-           fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+           [class.pb-2]="!isLast">
         <ng-container [ngSwitch]="mode">
           <ng-template [ngSwitchCase]="'docs'">
-            <tb-doc-link fxFlex #docLink [formControl]="linkControl"
+            <tb-doc-link class="flex-1" #docLink [formControl]="linkControl"
                          [disableEdit]="editMode || addMode"
                          (editModeChanged)="editMode = $event"
                          (docLinkUpdated)="update()"
@@ -44,7 +44,7 @@
             </ng-container>
           </ng-template>
           <ng-template [ngSwitchCase]="'quickLinks'">
-            <tb-quick-link fxFlex #quickLink [formControl]="linkControl"
+            <tb-quick-link class="flex-1" #quickLink [formControl]="linkControl"
                            [disableEdit]="editMode || addMode"
                            (editModeChanged)="editMode = $event"
                            (quickLinkUpdated)="update()"
@@ -67,7 +67,7 @@
     </div>
   </div>
   <div mat-dialog-actions>
-    <div *ngIf="!editMode && !addMode" fxFlex class="tb-add-link-button"
+    <div *ngIf="!editMode && !addMode" class="tb-add-link-button flex-1"
          matTooltip="{{ (mode === 'docs' ? 'widgets.documentation.add-link' : 'widgets.quick-links.add-link') | translate }}"
          matTooltipPosition="above"
          (click)="addLink()">
@@ -76,14 +76,14 @@
     <ng-container *ngIf="addMode">
       <ng-container [ngSwitch]="mode">
         <ng-template [ngSwitchCase]="'docs'">
-          <tb-doc-link fxFlex [(ngModel)]="addingLink"
+          <tb-doc-link class="flex-1" [(ngModel)]="addingLink"
                        [ngModelOptions]="{standalone: true}"
                        (docLinkAdded)="linkAdded($event)"
                        (docLinkAddCanceled)="addMode = false">
           </tb-doc-link>
         </ng-template>
         <ng-template [ngSwitchCase]="'quickLinks'">
-          <tb-quick-link fxFlex [(ngModel)]="addingLink"
+          <tb-quick-link class="flex-1" [(ngModel)]="addingLink"
                        [ngModelOptions]="{standalone: true}"
                        (quickLinkAdded)="linkAdded($event)"
                        (quickLinkAddCanceled)="addMode = false">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-completed-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-completed-dialog.component.html
index 41082e520c..0269fc3bd4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-completed-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-completed-dialog.component.html
@@ -15,19 +15,19 @@
     limitations under the License.
 
 -->
-<div class="tb-getting-started-completed-dialog-container" fxLayout="column">
-  <div fxLayout="row" fxLayoutAlign="start center" style="height: 64px; padding: 8px;">
-    <span fxFlex></span>
+<div class="tb-getting-started-completed-dialog-container flex flex-col">
+  <div class="flex flex-row items-center justify-start" style="height: 64px; padding: 8px;">
+    <span class="flex-1"></span>
     <button mat-icon-button (click)="close()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </div>
-  <div fxLayout="row" fxLayoutAlign="center center" style="height: 70px;">
-    <div class="tb-done-container" fxLayout="row" fxLayoutAlign="center center">
+  <div class="flex flex-row items-center justify-center" style="height: 70px;">
+    <div class="tb-done-container flex flex-row items-center justify-center">
       <mat-icon class="tb-done-icon" color="primary">done</mat-icon>
     </div>
   </div>
-  <div fxLayout="column" fxLayoutAlign="start center" style="padding-top: 30px;">
+  <div class="flex flex-col items-center justify-start" style="padding-top: 30px;">
     <div class="tb-done-welcome-title" translate>widgets.getting-started.done-welcome-title</div>
     <div class="tb-done-welcome-text" translate>widgets.getting-started.done-welcome-text</div>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.html
index 0be1ab675b..004d9807b7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.html
@@ -26,7 +26,7 @@
       <ng-template [ngSwitchCase]="authority.SYS_ADMIN">
         <mat-step [completed]="gettingStarted.maxSelectedIndex > -1">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.sys-admin.step1.title</div>
               <a *ngIf="matStepper.selectedIndex === 0" mat-button color="primary" routerLink="/tenants">{{ 'tenant.tenants' | translate }}</a>
             </div>
@@ -37,7 +37,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 0">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.sys-admin.step2.title</div>
               <a *ngIf="matStepper.selectedIndex === 1" mat-button color="primary" routerLink="/settings/outgoing-mail">{{ 'admin.settings' | translate }}</a>
             </div>
@@ -48,7 +48,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 1">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.sys-admin.step3.title</div>
               <a *ngIf="matStepper.selectedIndex === 2" mat-button color="primary" routerLink="/settings/notifications">{{ 'admin.settings' | translate }}</a>
             </div>
@@ -59,7 +59,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 2">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.sys-admin.step4.title</div>
               <a *ngIf="matStepper.selectedIndex === 3" mat-button color="primary" routerLink="/security-settings/2fa">{{ 'admin.settings' | translate }}</a>
             </div>
@@ -70,7 +70,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 3">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.sys-admin.step5.title</div>
               <a *ngIf="matStepper.selectedIndex === 4" mat-button color="primary" routerLink="/security-settings/oauth2">{{ 'admin.settings' | translate }}</a>
             </div>
@@ -81,7 +81,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 4">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.sys-admin.step6.title</div>
               <a *ngIf="matStepper.selectedIndex === 5" mat-button color="primary" routerLink="/settings/notifications">{{ 'admin.settings' | translate }}</a>
             </div>
@@ -94,7 +94,7 @@
       <ng-template [ngSwitchCase]="authority.TENANT_ADMIN">
         <mat-step [completed]="gettingStarted.maxSelectedIndex > -1">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.tenant-admin.step1.title</div>
               <a *ngIf="matStepper.selectedIndex === 0" mat-button color="primary" routerLink="/entities/devices">{{ 'device.devices' | translate }}</a>
             </div>
@@ -105,7 +105,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 0">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.tenant-admin.step2.title</div>
             </div>
           </ng-template>
@@ -153,7 +153,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 1">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.tenant-admin.step3.title</div>
               <a *ngIf="matStepper.selectedIndex === 2" mat-button color="primary" routerLink="/dashboards">{{ 'dashboard.dashboards' | translate }}</a>
             </div>
@@ -164,7 +164,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 2">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.tenant-admin.step4.title</div>
               <a *ngIf="matStepper.selectedIndex === 3" mat-button color="primary" routerLink="/profiles/deviceProfiles">{{ 'widgets.getting-started.tenant-admin.step4.alarm-rules' | translate }}</a>
             </div>
@@ -175,7 +175,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 3">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.tenant-admin.step5.title</div>
             </div>
           </ng-template>
@@ -193,7 +193,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 4">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.tenant-admin.step6.title</div>
               <a *ngIf="matStepper.selectedIndex === 5" mat-button color="primary" routerLink="/customers">{{ 'customer.customers' | translate }}</a>
             </div>
@@ -205,7 +205,7 @@
       </ng-template>
     </ng-container>
   </mat-stepper>
-  <div *ngIf="allCompleted" fxLayout="column" fxLayoutAlign="center center" style="padding-top: 24px;">
+  <div *ngIf="allCompleted" class="flex flex-col items-center justify-center" style="padding-top: 24px;">
     <button (click)="gettingStartedCompleted()" mat-flat-button color="primary">
       <mat-icon>rocket_launch</mat-icon>{{ 'widgets.getting-started.finish' | translate }}</button>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.html
index 36ce77c813..9038805e73 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<div fxLayout="row" *ngIf="addMode || editMode; else quickLinkTemplate">
-  <div fxFlex class="tb-edit-link" [ngClass]="{'edit-mode': editMode}" [formGroup]="editQuickLinkFormGroup" fxLayout="column">
-    <mat-form-field fxFlex class="mat-block">
+<div class="flex flex-row" *ngIf="addMode || editMode; else quickLinkTemplate">
+  <div class="tb-edit-link flex flex-1 flex-col" [class.edit-mode]="editMode" [formGroup]="editQuickLinkFormGroup">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.quick-links.quick-link</mat-label>
       <input matInput type="text"
              #linkInput
@@ -50,19 +50,19 @@
         {{ 'widgets.quick-links.quick-link-required' | translate }}
       </mat-error>
     </mat-form-field>
-    <div *ngIf="addMode" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="8px">
+    <div *ngIf="addMode" class="flex flex-row items-stretch justify-end gap-2">
       <button *ngIf="!addOnly" mat-button color="primary" (click)="cancelAdd()">{{ 'action.cancel' | translate }}</button>
       <button mat-raised-button color="primary" (click)="add()">{{ 'action.add' | translate }}</button>
     </div>
   </div>
-  <div *ngIf="editMode" fxLayout="row" class="tb-edit-buttons">
+  <div *ngIf="editMode" class="tb-edit-buttons flex flex-row">
     <button mat-icon-button (click)="apply()"><tb-icon>check</tb-icon></button>
     <button mat-icon-button (click)="cancelEdit()"><tb-icon>close</tb-icon></button>
   </div>
 </div>
 <ng-template #quickLinkTemplate>
-  <div fxLayout="row">
-    <div fxFlex class="tb-link">
+  <div class="flex flex-row">
+    <div class="tb-link flex-1">
       <div class="tb-link-container">
         <div class="tb-link-icon-container">
           <tb-icon color="primary">{{ quickLink?.icon }}</tb-icon>
@@ -70,7 +70,7 @@
         <div class="tb-link-text">{{ displayLinkFn(quickLink) }}</div>
       </div>
     </div>
-    <div fxLayout="row" fxLayoutAlign="start center" class="tb-edit-buttons">
+    <div class="tb-edit-buttons flex flex-row items-center justify-start">
       <button mat-icon-button
               matTooltip="{{ 'action.edit' | translate }}"
               matTooltipPosition="above"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-links-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-links-widget.component.html
index 1de9975c53..6380e116c8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-links-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-links-widget.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-card-content" fxLayout="column" fxLayoutGap="8px">
+<div class="tb-card-content flex flex-col gap-2">
   <div class="tb-card-header">
     <div class="tb-title">{{ 'widgets.quick-links.title' | translate }}</div>
     <button class="tb-title-icon"
@@ -26,9 +26,9 @@
       <tb-icon>edit</tb-icon>
     </button>
   </div>
-  <mat-grid-list class="tb-links-list" fxFlex [cols]="columns" [rowHeight]="rowHeight" [gutterSize]="gutterSize">
+  <mat-grid-list class="tb-links-list flex-1" [cols]="columns" [rowHeight]="rowHeight" [gutterSize]="gutterSize">
     <mat-grid-tile class="tb-links-tile" *ngFor="let quickLink of menuLinks$() | async">
-      <a fxFlex class="tb-link-button"
+      <a class="tb-link-button flex-1"
          [routerLink]="quickLink.path">
         <div class="tb-link-container">
           <div class="tb-link-icon-container">
@@ -39,7 +39,7 @@
       </a>
     </mat-grid-tile>
     <mat-grid-tile class="tb-links-tile">
-      <div fxFlex class="tb-add-link-button"
+      <div class="tb-add-link-button flex-1"
            matTooltip="{{ 'widgets.quick-links.add-link' | translate }}"
            matTooltipPosition="above"
            (click)="addLink()">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/recent-dashboards-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/recent-dashboards-widget.component.html
index 6c73e47574..01ebe25c10 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/recent-dashboards-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/recent-dashboards-widget.component.html
@@ -15,16 +15,16 @@
     limitations under the License.
 
 -->
-<div class="tb-card-content" fxLayout="column" fxLayoutGap="8px">
+<div class="tb-card-content flex flex-col gap-2">
   <ng-container *ngIf="hasDashboardsAccess; else noDataAvailable">
     <div class="tb-card-header">
       <a class="tb-title-link" routerLink="/dashboards">{{ 'widgets.recent-dashboards.title' | translate }}</a>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutAlign.lt-md="space-between center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2 lt-md:items-center lt-md:justify-between">
         <tb-toggle-header #dashboardsToggle [value]="toggleValue" name="usageToggle" (valueChange)="toggleValueChange($event)">
           <tb-toggle-option value="last">{{ 'widgets.recent-dashboards.last' | translate }}</tb-toggle-option>
           <tb-toggle-option value="starred">{{ 'widgets.recent-dashboards.starred' | translate }}</tb-toggle-option>
         </tb-toggle-header>
-        <a *ngIf="authUser.authority === authority.TENANT_ADMIN" fxHide.md
+        <a *ngIf="authUser.authority === authority.TENANT_ADMIN" class="md:!hidden"
            mat-flat-button color="primary" routerLink="/dashboards" [queryParams]="{action: 'add'}">{{ 'dashboard.add' | translate }}</a>
       </div>
     </div>
@@ -40,7 +40,7 @@
               </mat-header-cell>
               <mat-cell class="star-cell" *matCellDef="let lastVisitedDashboard">
                 <mat-icon (click)="toggleDashboardStar(lastVisitedDashboard)"
-                          class="star" [ngClass]="{'starred': lastVisitedDashboard.starred}">{{ lastVisitedDashboard.starred ? 'star' : 'star_border' }}</mat-icon>
+                          class="star" [class.starred]="lastVisitedDashboard.starred">{{ lastVisitedDashboard.starred ? 'star' : 'star_border' }}</mat-icon>
               </mat-cell>
             </ng-container>
             <ng-container matColumnDef="title">
@@ -75,7 +75,7 @@
           <div class="tb-starred-dashboard-row" *ngFor="let dashboard of userDashboardsInfo?.starred">
             <div class="tb-cell star-cell">
               <mat-icon (click)="toggleDashboardStar(dashboard)"
-                        class="star" [ngClass]="{'starred': dashboard.starred}">{{ dashboard.starred ? 'star' : 'star_border' }}</mat-icon>
+                        class="star" [class.starred]="dashboard.starred">{{ dashboard.starred ? 'star' : 'star_border' }}</mat-icon>
             </div>
             <div class="tb-cell title">
               <a [routerLink]="createDashboardUrl(dashboard.id)">{{ dashboard.title | customTranslate }}</a>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.html
index ebb07140f8..ede61a2618 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-card-content" fxLayout="column" fxLayoutGap="8px">
+<div class="tb-card-content flex flex-col gap-2">
   <ng-container *ngIf="hasUsageInfoAccess; else noDataAvailable">
     <div class="tb-card-header">
       <a class="tb-title-link" routerLink="/usage">{{ 'widgets.usage-info.title' | translate }}</a>
@@ -26,55 +26,55 @@
     </div>
     <ng-container [ngSwitch]="usageToggle.value">
       <ng-template [ngSwitchCase]="'entities'">
-        <div fxFlex class="tb-usage-list">
+        <div class="tb-usage-list flex-1">
           <div class="tb-usage-items">
-            <div class="tb-usage-item" [ngClass]="{'critical': entityItemCritical.devices}" translate>device.devices</div>
-            <div class="tb-usage-item" [ngClass]="{'critical': entityItemCritical.assets}" translate>asset.assets</div>
-            <div class="tb-usage-item" [ngClass]="{'critical': entityItemCritical.users}" translate>user.users</div>
-            <div class="tb-usage-item" [ngClass]="{'critical': entityItemCritical.dashboards}" translate>dashboard.dashboards</div>
-            <div class="tb-usage-item" [ngClass]="{'critical': entityItemCritical.customers}"  translate>customer.customers</div>
+            <div class="tb-usage-item" [class.critical]="entityItemCritical.devices" translate>device.devices</div>
+            <div class="tb-usage-item" [class.critical]="entityItemCritical.assets" translate>asset.assets</div>
+            <div class="tb-usage-item" [class.critical]="entityItemCritical.users" translate>user.users</div>
+            <div class="tb-usage-item" [class.critical]="entityItemCritical.dashboards" translate>dashboard.dashboards</div>
+            <div class="tb-usage-item" [class.critical]="entityItemCritical.customers" translate>customer.customers</div>
           </div>
           <div class="tb-usage-items-values">
             <div class="tb-usage-items-counts">
-              <div class="tb-usage-item-counts" [ngClass]="{'critical': entityItemCritical.devices}">{{ usageInfo?.devices | shortNumber }} / {{ maxValue(usageInfo?.maxDevices) }}</div>
-              <div class="tb-usage-item-counts" [ngClass]="{'critical': entityItemCritical.assets}">{{ usageInfo?.assets | shortNumber }} / {{ maxValue(usageInfo?.maxAssets) }}</div>
-              <div class="tb-usage-item-counts" [ngClass]="{'critical': entityItemCritical.users}">{{ usageInfo?.users | shortNumber }} / {{ maxValue(usageInfo?.maxUsers) }}</div>
-              <div class="tb-usage-item-counts" [ngClass]="{'critical': entityItemCritical.dashboards}">{{ usageInfo?.dashboards | shortNumber }} / {{ maxValue(usageInfo?.maxDashboards) }}</div>
-              <div class="tb-usage-item-counts" [ngClass]="{'critical': entityItemCritical.customers}">{{ usageInfo?.customers | shortNumber }} / {{ maxValue(usageInfo?.maxCustomers) }}</div>
+              <div class="tb-usage-item-counts" [class.critical]="entityItemCritical.devices">{{ usageInfo?.devices | shortNumber }} / {{ maxValue(usageInfo?.maxDevices) }}</div>
+              <div class="tb-usage-item-counts" [class.critical]="entityItemCritical.assets">{{ usageInfo?.assets | shortNumber }} / {{ maxValue(usageInfo?.maxAssets) }}</div>
+              <div class="tb-usage-item-counts" [class.critical]="entityItemCritical.users">{{ usageInfo?.users | shortNumber }} / {{ maxValue(usageInfo?.maxUsers) }}</div>
+              <div class="tb-usage-item-counts" [class.critical]="entityItemCritical.dashboards">{{ usageInfo?.dashboards | shortNumber }} / {{ maxValue(usageInfo?.maxDashboards) }}</div>
+              <div class="tb-usage-item-counts" [class.critical]="entityItemCritical.customers">{{ usageInfo?.customers | shortNumber }} / {{ maxValue(usageInfo?.maxCustomers) }}</div>
             </div>
             <div class="tb-usage-items-progress">
-              <mat-progress-bar [ngClass]="{'critical': entityItemCritical.devices}" color="primary" mode="determinate" [value]="progressValue(usageInfo?.devices, usageInfo?.maxDevices)"></mat-progress-bar>
-              <mat-progress-bar [ngClass]="{'critical': entityItemCritical.assets}" color="primary" mode="determinate" [value]="progressValue(usageInfo?.assets, usageInfo?.maxAssets)"></mat-progress-bar>
-              <mat-progress-bar [ngClass]="{'critical': entityItemCritical.users}" color="primary" mode="determinate" [value]="progressValue(usageInfo?.users, usageInfo?.maxUsers)"></mat-progress-bar>
-              <mat-progress-bar [ngClass]="{'critical': entityItemCritical.dashboards}"color="primary" mode="determinate" [value]="progressValue(usageInfo?.dashboards, usageInfo?.maxDashboards)"></mat-progress-bar>
-              <mat-progress-bar [ngClass]="{'critical': entityItemCritical.customers}" color="primary" mode="determinate" [value]="progressValue(usageInfo?.customers, usageInfo?.maxCustomers)"></mat-progress-bar>
+              <mat-progress-bar [class.critical]="entityItemCritical.devices" color="primary" mode="determinate" [value]="progressValue(usageInfo?.devices, usageInfo?.maxDevices)"></mat-progress-bar>
+              <mat-progress-bar [class.critical]="entityItemCritical.assets" color="primary" mode="determinate" [value]="progressValue(usageInfo?.assets, usageInfo?.maxAssets)"></mat-progress-bar>
+              <mat-progress-bar [class.critical]="entityItemCritical.users" color="primary" mode="determinate" [value]="progressValue(usageInfo?.users, usageInfo?.maxUsers)"></mat-progress-bar>
+              <mat-progress-bar [class.critical]="entityItemCritical.dashboards" color="primary" mode="determinate" [value]="progressValue(usageInfo?.dashboards, usageInfo?.maxDashboards)"></mat-progress-bar>
+              <mat-progress-bar [class.critical]="entityItemCritical.customers" color="primary" mode="determinate" [value]="progressValue(usageInfo?.customers, usageInfo?.maxCustomers)"></mat-progress-bar>
             </div>
           </div>
         </div>
       </ng-template>
       <ng-template [ngSwitchCase]="'apiCalls'">
-        <div fxFlex class="tb-usage-list">
+        <div class="tb-usage-list flex-1">
           <div class="tb-usage-items">
-            <div class="tb-usage-item" [ngClass]="{'critical': apiCallItemCritical.transportMessages}" translate>api-usage.transport-messages</div>
-            <div class="tb-usage-item" [ngClass]="{'critical': apiCallItemCritical.jsExecutions}" translate>api-usage.javascript</div>
-            <div class="tb-usage-item" [ngClass]="{'critical': apiCallItemCritical.alarms}" translate>api-usage.alarms-created</div>
-            <div class="tb-usage-item" [ngClass]="{'critical': apiCallItemCritical.emails}" translate>api-usage.email</div>
-            <div class="tb-usage-item" [ngClass]="{'critical': apiCallItemCritical.sms}"  translate>api-usage.sms</div>
+            <div class="tb-usage-item" [class.critical]="apiCallItemCritical.transportMessages" translate>api-usage.transport-messages</div>
+            <div class="tb-usage-item" [class.critical]="apiCallItemCritical.jsExecutions" translate>api-usage.javascript</div>
+            <div class="tb-usage-item" [class.critical]="apiCallItemCritical.alarms" translate>api-usage.alarms-created</div>
+            <div class="tb-usage-item" [class.critical]="apiCallItemCritical.emails" translate>api-usage.email</div>
+            <div class="tb-usage-item" [class.critical]="apiCallItemCritical.sms" translate>api-usage.sms</div>
           </div>
           <div class="tb-usage-items-values">
             <div class="tb-usage-items-counts">
-              <div class="tb-usage-item-counts" [ngClass]="{'critical': apiCallItemCritical.transportMessages}">{{ usageInfo?.transportMessages | shortNumber }} / {{ maxValue(usageInfo?.maxTransportMessages) }}</div>
-              <div class="tb-usage-item-counts" [ngClass]="{'critical': apiCallItemCritical.jsExecutions}">{{ usageInfo?.jsExecutions | shortNumber }} / {{ maxValue(usageInfo?.maxJsExecutions) }}</div>
-              <div class="tb-usage-item-counts" [ngClass]="{'critical': apiCallItemCritical.alarms}">{{ usageInfo?.alarms | shortNumber }} / {{ maxValue(usageInfo?.maxAlarms) }}</div>
-              <div class="tb-usage-item-counts" [ngClass]="{'critical': apiCallItemCritical.emails}">{{ usageInfo?.emails | shortNumber }} / {{ maxValue(usageInfo?.maxEmails) }}</div>
-              <div class="tb-usage-item-counts" [ngClass]="{'critical': apiCallItemCritical.sms}">{{ usageInfo?.sms | shortNumber }} / {{ maxValue(usageInfo?.maxSms) }}</div>
+              <div class="tb-usage-item-counts" [class.critical]="apiCallItemCritical.transportMessages">{{ usageInfo?.transportMessages | shortNumber }} / {{ maxValue(usageInfo?.maxTransportMessages) }}</div>
+              <div class="tb-usage-item-counts" [class.critical]="apiCallItemCritical.jsExecutions">{{ usageInfo?.jsExecutions | shortNumber }} / {{ maxValue(usageInfo?.maxJsExecutions) }}</div>
+              <div class="tb-usage-item-counts" [class.critical]="apiCallItemCritical.alarms">{{ usageInfo?.alarms | shortNumber }} / {{ maxValue(usageInfo?.maxAlarms) }}</div>
+              <div class="tb-usage-item-counts" [class.critical]="apiCallItemCritical.emails">{{ usageInfo?.emails | shortNumber }} / {{ maxValue(usageInfo?.maxEmails) }}</div>
+              <div class="tb-usage-item-counts" [class.critical]="apiCallItemCritical.sms">{{ usageInfo?.sms | shortNumber }} / {{ maxValue(usageInfo?.maxSms) }}</div>
             </div>
             <div class="tb-usage-items-progress">
-              <mat-progress-bar [ngClass]="{'critical': apiCallItemCritical.transportMessages}" color="primary" mode="determinate" [value]="progressValue(usageInfo?.transportMessages, usageInfo?.maxTransportMessages)"></mat-progress-bar>
-              <mat-progress-bar [ngClass]="{'critical': apiCallItemCritical.jsExecutions}" color="primary" mode="determinate" [value]="progressValue(usageInfo?.jsExecutions, usageInfo?.maxJsExecutions)"></mat-progress-bar>
-              <mat-progress-bar [ngClass]="{'critical': apiCallItemCritical.alarms}" color="primary" mode="determinate" [value]="progressValue(usageInfo?.alarms, usageInfo?.maxAlarms)"></mat-progress-bar>
-              <mat-progress-bar [ngClass]="{'critical': apiCallItemCritical.emails}"color="primary" mode="determinate" [value]="progressValue(usageInfo?.emails, usageInfo?.maxEmails)"></mat-progress-bar>
-              <mat-progress-bar [ngClass]="{'critical': apiCallItemCritical.sms}" color="primary" mode="determinate" [value]="progressValue(usageInfo?.sms, usageInfo?.maxSms)"></mat-progress-bar>
+              <mat-progress-bar [class.critical]="apiCallItemCritical.transportMessages" color="primary" mode="determinate" [value]="progressValue(usageInfo?.transportMessages, usageInfo?.maxTransportMessages)"></mat-progress-bar>
+              <mat-progress-bar [class.critical]="apiCallItemCritical.jsExecutions" color="primary" mode="determinate" [value]="progressValue(usageInfo?.jsExecutions, usageInfo?.maxJsExecutions)"></mat-progress-bar>
+              <mat-progress-bar [class.critical]="apiCallItemCritical.alarms" color="primary" mode="determinate" [value]="progressValue(usageInfo?.alarms, usageInfo?.maxAlarms)"></mat-progress-bar>
+              <mat-progress-bar [class.critical]="apiCallItemCritical.emails" color="primary" mode="determinate" [value]="progressValue(usageInfo?.emails, usageInfo?.maxEmails)"></mat-progress-bar>
+              <mat-progress-bar [class.critical]="apiCallItemCritical.sms" color="primary" mode="determinate" [value]="progressValue(usageInfo?.sms, usageInfo?.maxSms)"></mat-progress-bar>
             </div>
           </div>
         </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.html
index 94d6111b7c..be7d226a9c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.html
@@ -15,48 +15,48 @@
     limitations under the License.
 
 -->
-<div class="tb-card-content" fxLayout="column">
+<div class="tb-card-content flex flex-col">
   <div class="tb-card-header">
     <div class="tb-card-title">
       <div class="tb-title" translate>widgets.version-info.title</div>
     </div>
     <a mat-button color="primary" class="tb-contact-us" href="https://thingsboard.io/docs/contact-us/" target="_blank">{{ 'widgets.version-info.contact-us' | translate }}</a>
   </div>
-  <div fxLayout="row" fxLayoutGap="8px" fxLayout.gt-md-lg="column" fxFlex>
-    <div class="tb-version-info-container" fxLayout="row" fxFlex>
-      <div fxFlex fxLayout="column" fxLayoutAlign="space-evenly stretch">
+  <div class="flex flex-1 flex-row gap-2 gt-md-lg:flex-col">
+    <div class="tb-version-info-container flex flex-1 flex-row">
+      <div class="flex flex-1 flex-col items-stretch justify-evenly">
         <div class="tb-card-header">
           <a class="tb-version-link" [href]="updateMessage?.currentVersionReleaseNotesUrl" target="_blank">
-            <span fxHide.md-lg translate>widgets.version-info.current-version</span>
-            <span fxHide.lt-md fxHide.gt-md-lg translate>widgets.version-info.current</span>
+            <span class="md-lg:!hidden" translate>widgets.version-info.current-version</span>
+            <span class="lt-md:!hidden gt-md-lg:!hidden" translate>widgets.version-info.current</span>
           </a>
         </div>
         <div class="tb-version">{{ updateMessage?.currentVersion }}</div>
-        <div fxHide.gt-md-lg style="height: 24px;">
+        <div class="gt-md-lg:!hidden" style="height: 24px;">
         </div>
       </div>
     </div>
-    <div class="tb-version-info-container" fxLayout="row" fxFlex *ngIf="updateMessage?.updateAvailable; else versionUpToDate">
-      <div fxFlex fxLayout="column" fxLayoutAlign="space-evenly stretch">
+    <div class="tb-version-info-container flex flex-1 flex-row" *ngIf="updateMessage?.updateAvailable; else versionUpToDate">
+      <div class="flex flex-1 flex-col items-stretch justify-evenly">
         <div class="tb-card-header">
           <a class="tb-version-link" [href]="updateMessage?.latestVersionReleaseNotesUrl" target="_blank">
-            <span fxHide.md-lg translate>widgets.version-info.available-version</span>
-            <span fxHide.lt-md fxHide.gt-md-lg translate>widgets.version-info.available</span>
+            <span class="md-lg:!hidden" translate>widgets.version-info.available-version</span>
+            <span class="lt-md:!hidden gt-md-lg:!hidden" translate>widgets.version-info.available</span>
           </a>
         </div>
         <div class="tb-version">{{ updateMessage?.latestVersion }}</div>
-        <div fxHide.gt-md-lg fxLayout="row" fxLayoutAlign="end end">
+        <div class="flex flex-row items-end justify-end gt-md-lg:!hidden">
           <a mat-flat-button color="primary" class="tb-upgrade" [href]="updateMessage?.upgradeInstructionsUrl" target="_blank">{{ 'widgets.version-info.upgrade' | translate }}</a>
         </div>
       </div>
-      <div fxHide.lt-md fxHide.md-lg fxLayout="column" fxLayoutAlign="center">
+      <div class="flex flex-col items-stretch justify-center md-lg:!hidden lt-md:!hidden">
         <a mat-flat-button color="primary" class="tb-upgrade" [href]="updateMessage?.upgradeInstructionsUrl" target="_blank">{{ 'widgets.version-info.upgrade' | translate }}</a>
       </div>
     </div>
   </div>
 </div>
 <ng-template #versionUpToDate>
-  <div class="tb-version-info-container up-to-date" fxFlex fxLayout="column" fxLayoutAlign="space-evenly center">
+  <div class="tb-version-info-container up-to-date flex flex-1 flex-col items-center justify-evenly">
     <div class="material-icons-round check-icon">check</div>
     <div class="up-to-date-text" translate>widgets.version-info.version-is-up-to-date</div>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.html
index 2b9e63cfeb..05b581e39c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.html
@@ -16,9 +16,9 @@
 
 -->
 <form #addEntityForm="ngForm" [formGroup]="selectEntityFormGroup" (ngSubmit)="save()">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2 translate>widgets.maps.select-entity</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button [matDialogClose]="null" type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
@@ -37,7 +37,7 @@
     </mat-form-field>
     <div class="tb-hint" translate>widgets.maps.select-entity-hint</div>
   </div>
-  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex flex-row items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/knob.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/knob.component.html
index 1276e7d5e6..976b2ebc76 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/knob.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/knob.component.html
@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<div #knobContainer class="tb-knob" fxLayout="column" [ngStyle]="{'pointerEvents': ctx.isEdit ? 'none' : 'all'}">
-  <div fxFlex fxLayout="column" fxLayoutAlign="center center">
+<div #knobContainer class="tb-knob flex flex-col" [style.pointer-events]="ctx.isEdit ? 'none' : 'all'">
+  <div class="flex flex-1 flex-col items-center justify-center">
     <div #knob class="knob">
-      <div #knobValueContainer class="value-container" fxLayout="row" fxLayoutAlign="center center">
+      <div #knobValueContainer class="value-container flex flex-row items-center justify-center">
         <span #knobValue class="knob-value">{{ value }}</span>
       </div>
       <div class="canvas-background"></div>
@@ -27,16 +27,15 @@
         <div #knobTopPointer class="top-pointer"></div>
       </div>
       <div class="top"></div>
-      <div #knobErrorContainer class="error-container" [ngStyle]="{'background': error?.length ? 'rgba(255,255,255,0.25)' : 'none'}"
-           fxLayout="row" fxLayoutAlign="center center">
+      <div #knobErrorContainer class="error-container flex flex-row items-center justify-center" [style.background]="error?.length ? 'rgba(255,255,255,0.25)' : 'none'">
         <span #knobError class="knob-error" [innerHTML]="error"></span>
       </div>
-      <div #knobTitleContainer class="title-container" fxLayout="row" fxLayoutAlign="center center">
+      <div #knobTitleContainer class="title-container flex flex-row items-center justify-center">
         <span #knobTitle class="knob-title">{{ title }}</span>
       </div>
-      <div #knobMinmaxContainer class="minmax-container" fxLayout="row" fxLayoutAlign="start center">
+      <div #knobMinmaxContainer class="minmax-container flex flex-row items-center justify-start">
         <span class="minmax-label">min</span>
-        <span fxFlex></span>
+        <span class="flex-1"></span>
         <span class="minmax-label">max</span>
       </div>
       <div #textMeasure id="text-measure"></div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/led-indicator.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/led-indicator.component.html
index ec5c8a6942..e69a291aed 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/led-indicator.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/led-indicator.component.html
@@ -15,17 +15,20 @@
     limitations under the License.
 
 -->
-<div class="tb-led-indicator" fxLayout="column">
-  <div fxFlex="20" #ledTitleContainer class="title-container" fxLayout="row" fxLayoutAlign="center center" [fxShow]="showTitle">
+<div class="tb-led-indicator flex flex-col">
+  <div #ledTitleContainer class="title-container flex max-w-20% flex-full flex-row items-center justify-center" [class.!hidden]="!showTitle">
     <span #ledTitle class="led-title">{{title}}</span>
   </div>
-  <div fxFlex="{{showTitle ? 80 : 100}}"
-       [ngStyle]="{paddingTop: showTitle ? '5px': '10px'}" #ledContainer id="led-container" fxLayout="column" fxLayoutAlign="center center">
+  <div class="flex flex-full flex-col items-center justify-center"
+       [class]="{
+          'max-w-80%': showTitle,
+          'max-w-100%': !showTitle
+       }"
+       [style.padding-top]="showTitle ? '5px': '10px'" #ledContainer id="led-container">
     <div #led class="led">
     </div>
   </div>
-  <div #ledErrorContainer class="error-container" [ngStyle]="{'background': error?.length ? 'rgba(255,255,255,0.25)' : 'none'}"
-       fxLayout="row" fxLayoutAlign="center center">
+  <div #ledErrorContainer class="error-container flex flex-row items-center justify-center" [style.background]="error?.length ? 'rgba(255,255,255,0.25)' : 'none'">
     <span #ledError class="led-error">{{ error }}</span>
   </div>
   <div #textMeasure id="text-measure"></div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.html
index 716513df1a..90496180d8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="persistentFormGroup" (ngSubmit)="save()" style="min-width: 480px; max-width: 600px;">
   <mat-toolbar color="primary">
     <h2>{{ 'widgets.persistent-table.add-title' | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="close()"
             type="button">
@@ -30,13 +30,13 @@
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
   <div mat-dialog-content class="add-dialog">
     <fieldset [disabled]="isLoading$ | async">
-      <div fxLayout="row" fxLayoutGap="6px">
-        <mat-slide-toggle fxFlex class="mat-block" formControlName="oneWayElseTwoWay">
+      <div class="flex flex-row gap-1.5">
+        <mat-slide-toggle class="mat-block flex-1" formControlName="oneWayElseTwoWay">
           {{ rpcMessageTypeText }}
         </mat-slide-toggle>
       </div>
-      <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="6px">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row flex-wrap gap-1.5 xs:flex-col">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.persistent-table.method</mat-label>
           <input matInput formControlName="method" required>
           <mat-error *ngIf="this.persistentFormGroup.get('method').hasError('required')">
@@ -46,7 +46,7 @@
             {{'widgets.persistent-table.white-space-error' | translate}}
           </mat-error>
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.persistent-table.retries</mat-label>
           <input matInput type="number" formControlName="retries">
         </mat-form-field>
@@ -72,15 +72,15 @@
     </fieldset>
   </div>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-  <div mat-dialog-actions fxLayout="row">
+  <div mat-dialog-actions class="flex flex-row">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="close()">
       {{ 'action.close' | translate }}
     </button>
-    <span fxFlex></span>
-    <div fxLayout="row" fxLayoutGap="8px">
+    <span class="flex-1"></span>
+    <div class="flex flex-row gap-2">
       <button mat-raised-button
               color="primary"
               type="submit"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-details-dialog.component.html
index ffe1560c76..6f32ec4cb0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-details-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="persistentFormGroup" style="min-width: 480px;">
   <mat-toolbar color="primary">
     <h2>{{ persistentFormGroup.get('rpcId').value }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="close()"
             type="button">
@@ -30,31 +30,32 @@
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
-      <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="6px">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row gap-1.5 xs:flex-col">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.persistent-table.created-time</mat-label>
           <input matInput formControlName="createdTime" readonly>
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.persistent-table.expiration-time</mat-label>
           <input matInput formControlName="expirationTime" readonly>
         </mat-form-field>
       </div>
-      <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="6px">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row flex-wrap gap-1.5 xs:flex-col">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.persistent-table.message-type</mat-label>
           <input matInput formControlName="messageType" readonly>
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.persistent-table.status</mat-label>
           <input matInput formControlName="status" readonly
-                 [ngStyle]="{ fontWeight: 'bold', color: rpcStatusColorsMap.get(data.persistentRequest.status) }">
+                 style="font-weight: bold;"
+                 [style.color]="rpcStatusColorsMap.get(data.persistentRequest.status)">
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.persistent-table.method</mat-label>
           <input matInput formControlName="method" readonly>
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block"
+        <mat-form-field class="mat-block flex-1"
                         *ngIf="persistentFormGroup.get('retries').value">
           <mat-label translate>widgets.persistent-table.retries</mat-label>
           <input matInput formControlName="retries" readonly>
@@ -96,7 +97,7 @@
       </mat-accordion>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayout="row">
+  <div mat-dialog-actions class="flex flex-row">
     <button mat-raised-button
             *ngIf="allowDelete"
             color="primary"
@@ -105,8 +106,8 @@
             [disabled]="(isLoading$ | async)">
       {{ 'widgets.persistent-table.delete' | translate }}
     </button>
-    <span fxFlex></span>
-    <div fxLayout="row" fxLayoutGap="8px">
+    <span class="flex-1"></span>
+    <div class="flex flex-row gap-2">
       <button mat-button color="primary"
               type="button"
               [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-filter-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-filter-panel.component.html
index 1a8f576b3c..c1e853c555 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-filter-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-filter-panel.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<form fxLayout="column" class="mat-content mat-padding" [formGroup]="persistentFilterFormGroup" (ngSubmit)="update()">
-  <mat-form-field fxFlex class="mat-block" floatLabel="always">
+<form class="mat-content mat-padding flex flex-col" [formGroup]="persistentFilterFormGroup" (ngSubmit)="update()">
+  <mat-form-field class="mat-block flex-1" floatLabel="always">
     <mat-label translate>widgets.persistent-table.rpc-status-list</mat-label>
     <mat-select formControlName="rpcStatus"
                 placeholder="{{ rpcSearchPlaceholder }}">
@@ -28,7 +28,7 @@
       </mat-option>
     </mat-select>
   </mat-form-field>
-  <div fxLayout="row" class="tb-panel-actions" fxLayoutAlign="end center">
+  <div class="tb-panel-actions flex flex-row items-center justify-end">
     <button type="button"
             mat-button
             (click)="cancel()">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.html
index a4e7588d96..18aca6ac20 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.html
@@ -16,8 +16,8 @@
 
 -->
 <div class="tb-table-widget tb-absolute-fill">
-  <div fxFlex fxLayout="column" class="tb-absolute-fill">
-    <div fxFlex class="table-container">
+  <div class="tb-absolute-fill flex flex-1 flex-col">
+    <div class="table-container flex-1">
       <table mat-table [dataSource]="persistentDatasource"
              matSort [matSortActive]="pageLink.sortOrder.property"
              [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
@@ -50,7 +50,8 @@
             {{ 'widgets.persistent-table.status' | translate }}
           </mat-header-cell>
           <mat-cell *matCellDef="let column"
-                    [ngStyle]="{fontWeight: 'bold', color: rpcStatusColor.get((column.status))}">
+                    style="font-weight: bold;"
+                    [style.color]="rpcStatusColor.get(column.status)">
             {{ rpcStatusTranslation.get(column.status) | translate }}
           </mat-cell>
         </ng-container>
@@ -74,7 +75,7 @@
           <mat-header-cell *matHeaderCellDef>
           </mat-header-cell>
           <mat-cell *matCellDef="let column">
-            <div fxHide fxShow.gt-md fxLayout="row" fxLayoutAlign="end">
+            <div class="flex flex-row items-stretch justify-end lt-lg:!hidden">
               <ng-container *ngFor="let actionDescriptor of actionCellButtonAction">
                 <button mat-icon-button [disabled]="isLoading$ | async"
                         matTooltip="{{ actionDescriptor.displayName }}"
@@ -84,7 +85,7 @@
                 </button>
               </ng-container>
             </div>
-            <div fxHide fxShow.lt-lg *ngIf="actionCellButtonAction.length">
+            <div class="gt-md:!hidden" *ngIf="actionCellButtonAction.length">
               <button mat-icon-button
                       (click)="$event.stopPropagation(); ctx.detectChanges();"
                       [matMenuTriggerFor]="cellActionsMenu">
@@ -105,14 +106,12 @@
         </ng-container>
         <mat-header-row *matHeaderRowDef="displayedColumns; sticky: enableStickyHeader"></mat-header-row>
         <mat-row *matRowDef="let column; columns: displayedColumns"
-                 [fxShow]="!persistentDatasource.dataLoading"></mat-row>
+                 [class.!hidden]="persistentDatasource.dataLoading"></mat-row>
       </table>
-      <span [fxShow]="(persistentDatasource.isEmpty() | async) && !persistentDatasource.dataLoading && hasData"
-            fxLayoutAlign="center center"
-            class="no-data-found">{{ noDataDisplayMessageText }}</span>
-      <span [fxShow]="persistentDatasource.dataLoading"
-            fxLayoutAlign="center center"
-            class="no-data-found">{{ 'common.loading' | translate }}</span>
+      <span [class.!hidden]="(persistentDatasource.isEmpty() | async) === false || persistentDatasource.dataLoading || !hasData"
+            class="no-data-found flex items-center justify-center">{{ noDataDisplayMessageText }}</span>
+      <span [class.!hidden]="!persistentDatasource.dataLoading"
+            class="no-data-found flex items-center justify-center">{{ 'common.loading' | translate }}</span>
   </div>
   <mat-divider *ngIf="displayPagination"></mat-divider>
   <mat-paginator *ngIf="displayPagination"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.ts
index 9890db321a..ba12957779 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.ts
@@ -443,6 +443,8 @@ export class PersistentTableComponent extends PageComponent implements OnInit, O
     });
     this.ctx.detectChanges();
   }
+
+  protected readonly rpcStatusColorsMap = rpcStatusColors;
 }
 
 class PersistentDatasource implements DataSource<PersistentRpcData> {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/round-switch.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/round-switch.component.html
index 4f618177a7..ef7fd496ac 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/round-switch.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/round-switch.component.html
@@ -15,11 +15,16 @@
     limitations under the License.
 
 -->
-<div class="tb-round-switch" fxLayout="column" [ngStyle]="{'pointerEvents': ctx.isEdit ? 'none' : 'all'}">
-  <div #switchTitleContainer fxFlex="20" class="title-container" fxLayout="row" fxLayoutAlign="center center" [fxShow]="showTitle">
+<div class="tb-round-switch flex flex-col" [style.pointer-events]="ctx.isEdit ? 'none' : 'all'">
+  <div #switchTitleContainer class="title-container flex max-w-20% flex-full flex-row items-center justify-center" [class.!hidden]="!showTitle">
     <span #switchTitle class="switch-title">{{title}}</span>
   </div>
-  <div #switchContainer fxFlex="{{showTitle ? 80 : 100}}" [ngStyle]="{paddingTop: showTitle ? '5px': '10px'}" id="switch-container" fxLayout="column" fxLayoutAlign="center center">
+  <div #switchContainer class="flex flex-full flex-col items-center justify-center"
+       [class]="{
+          'max-w-80%': showTitle,
+          'max-w-100%': !showTitle
+       }"
+       [style.padding-top]="showTitle ? '5px': '10px'" id="switch-container">
     <div #switch class="switch">
       <input #onoff type="checkbox" id="{{checkboxId}}" name="onoff" />
       <div class="back">
@@ -30,8 +35,7 @@
       </div>
     </div>
   </div>
-  <div #switchErrorContainer class="error-container" [ngStyle]="{'background': error?.length ? 'rgba(255,255,255,0.25)' : 'none'}"
-       fxLayout="row" fxLayoutAlign="center center">
+  <div #switchErrorContainer class="error-container flex flex-row items-center justify-center" [style.background]="error?.length ? 'rgba(255,255,255,0.25)' : 'none'">
     <span #switchError class="switch-error">{{ error }}</span>
   </div>
   <div #textMeasure id="text-measure"></div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.html
index f9de708700..0f994b2a1d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.html
@@ -15,30 +15,34 @@
     limitations under the License.
 
 -->
-<div class="tb-switch" fxLayout="column" [ngStyle]="{'pointerEvents': ctx.isEdit ? 'none' : 'all'}" *ngIf="switchType === 'switch'; else slideToggle">
-  <div #switchErrorContainer class="error-container" [ngStyle]="{'background': error?.length ? 'rgba(255,255,255,0.25)' : 'none'}"
-       fxLayout="row" fxLayoutAlign="center center">
+<div class="tb-switch flex flex-col" [style.pointer-events]="ctx.isEdit ? 'none' : 'all'" *ngIf="switchType === 'switch'; else slideToggle">
+  <div #switchErrorContainer class="error-container flex flex-row items-center justify-center" [style.background]="error?.length ? 'rgba(255,255,255,0.25)' : 'none'">
     <span #switchError class="switch-error">{{ error }}</span>
   </div>
-  <div #switchTitleContainer fxFlex="30" class="title-container" fxLayout="row" fxLayoutAlign="center center" [fxShow]="showTitle">
+  <div #switchTitleContainer class="title-container flex max-w-30% flex-full flex-row items-center justify-center" [class.!hidden]="!showTitle">
     <span #switchTitle class="switch-title">{{title}}</span>
   </div>
-  <div #switchContainer fxFlex="{{showTitle ? 70 : 100}}" id="switch-container" fxLayout="column" fxLayoutAlign="center center">
+  <div #switchContainer class="flex flex-full flex-col items-center justify-center"
+       [class]="{
+          'max-w-70%': showTitle,
+          'max-w-100%': !showTitle
+       }"
+       id="switch-container">
     <div #switch class="switch">
       <mat-slide-toggle #matSlideToggle [(ngModel)]="value" (change)="onValue()">
       </mat-slide-toggle>
     </div>
-    <div #onoffContainer class="onoff-container" fxLayout="row" fxLayoutAlign="center start" [fxShow]="showOnOffLabels">
-      <span #offLabel fxFlex class="off-label" [fxShow]="!value" style="text-align: center;">OFF</span>
-      <span fxFlex [fxShow]="value"></span>
-      <span #onLabel fxFlex class="on-label" [fxShow]="value" style="text-align: center;">ON</span>
-      <span fxFlex [fxShow]="!value"></span>
+    <div #onoffContainer class="onoff-container flex flex-row items-start justify-center" [class.!hidden]="!showOnOffLabels">
+      <span #offLabel class="off-label flex-1" [class.!hidden]="value" style="text-align: center;">OFF</span>
+      <span class="flex-1" [class.!hidden]="!value"></span>
+      <span #onLabel class="on-label flex-1" [class.!hidden]="!value" style="text-align: center;">ON</span>
+      <span class="flex-1" [class.!hidden]="value"></span>
     </div>
   </div>
   <div #textMeasure id="text-measure"></div>
 </div>
 <ng-template #slideToggle>
-  <div class="tb-absolute-fill" fxLayout="column" [ngStyle]="{'pointerEvents': ctx.isEdit ? 'none' : 'all'}" fxLayoutAlign="center center">
+  <div class="tb-absolute-fill flex flex-col items-center justify-center" [style.pointer-events]="ctx.isEdit ? 'none' : 'all'">
     <div>
       <mat-slide-toggle [disabled]="executingUpdateValue" [labelPosition]="labelPosition" [color]="sliderColor" [(ngModel)]="value" (change)="onValue()">{{title}}</mat-slide-toggle>
       <mat-progress-bar style="height: 2px;" [color]="sliderColor" mode="indeterminate" *ngIf="executingUpdateValue"></mat-progress-bar>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-key-settings.component.html
index 45c2b5f2ee..5b5dc4fa49 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-key-settings.component.html
@@ -20,7 +20,7 @@
     <div class="tb-form-panel-title" translate>widgets.table.column-settings</div>
     <div class="tb-form-row">
       <div class="fixed-title-width">{{ 'widgets.table.custom-title' | translate }}</div>
-      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
         <input matInput formControlName="customTitle" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
@@ -62,14 +62,13 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="alarmsTableKeySettingsForm.get('useCellStyleFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useCellStyleFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useCellStyleFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.table.use-cell-style-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -86,14 +85,13 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="alarmsTableKeySettingsForm.get('useCellContentFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useCellContentFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useCellContentFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.table.use-cell-content-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html
index 9ec4212aa1..ef51468feb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html
@@ -20,7 +20,7 @@
     <div class="tb-form-panel-title" translate>widgets.table.table-header</div>
     <div class="tb-form-row">
       <div class="fixed-title-width">{{ 'widgets.table.alarms-table-title' | translate }}</div>
-      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
         <input matInput formControlName="alarmsTitle" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
@@ -73,7 +73,7 @@
         {{ 'widgets.table.allow-alarms-clear' | translate }}
       </mat-slide-toggle>
     </div>
-    <mat-form-field fxFlex subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" subscriptSizing="dynamic">
       <mat-label translate>widgets.table.hidden-cell-button-display-mode</mat-label>
       <mat-select formControlName="reserveSpaceForHiddenAction">
         <mat-option [value]="'true'">
@@ -84,7 +84,7 @@
         </mat-option>
       </mat-select>
     </mat-form-field>
-    <mat-form-field fxFlex subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" subscriptSizing="dynamic">
       <mat-label translate>widgets.table.default-sort-order</mat-label>
       <input matInput formControlName="defaultSortOrder">
     </mat-form-field>
@@ -104,14 +104,13 @@
   <div class="tb-form-panel tb-slide-toggle">
     <div class="tb-form-panel-title" translate>widgets.table.rows</div>
     <mat-expansion-panel class="tb-settings" [expanded]="alarmsTableWidgetSettingsForm.get('useRowStyleFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useRowStyleFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useRowStyleFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.table.use-row-style-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/action-button-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/action-button-widget-settings.component.html
index b5c7c63650..5d268e4d2f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/action-button-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/action-button-widget-settings.component.html
@@ -20,7 +20,7 @@
     <div class="tb-form-panel-title" translate>widgets.action-button.behavior</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.activated-state-hint' | translate}}" translate>widgets.button-state.activated-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.button-state.activated-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.button-state.activated' | translate }}"
@@ -31,7 +31,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.disabled-state-hint' | translate}}" translate>widgets.button-state.disabled-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.button-state.disabled-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.button-state.disabled' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/command-button-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/command-button-widget-settings.component.html
index 086a29e9c1..4cc7839799 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/command-button-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/command-button-widget-settings.component.html
@@ -20,7 +20,7 @@
     <div class="tb-form-panel-title" translate>widgets.command-button.behavior</div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.command-button.on-click-hint' | translate}}" translate>widgets.command-button.on-click</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.command-button.on-click' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -29,7 +29,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.disabled-state-hint' | translate}}" translate>widgets.button-state.disabled-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.button-state.disabled-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.button-state.disabled' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/power-button-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/power-button-widget-settings.component.html
index 8f111ea5d8..45f4f32c43 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/power-button-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/power-button-widget-settings.component.html
@@ -20,7 +20,7 @@
     <div class="tb-form-panel-title" translate>widgets.power-button.behavior</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}" translate>widgets.rpc-state.initial-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.initial-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     trueLabel="{{ 'widgets.rpc-state.on' | translate }}"
@@ -33,7 +33,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.power-button.power-on-hint' | translate}}" translate>widgets.power-button.power-on</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.power-button.power-on' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -42,7 +42,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.power-button.power-off-hint' | translate}}" translate>widgets.power-button.power-off</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.power-button.power-off' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -51,7 +51,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
@@ -92,15 +92,15 @@
     <div class="tb-form-panel-title" translate>widgets.power-button.button</div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.power-button.power-on-colors' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-3">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.power-button.main</div>
           <tb-color-input asBoxInput
                           formControlName="mainColorOn">
           </tb-color-input>
         </div>
         <mat-divider vertical></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.power-button.background</div>
           <tb-color-input asBoxInput
                           formControlName="backgroundColorOn">
@@ -110,15 +110,15 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.power-button.power-off-colors' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-3">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.power-button.main</div>
           <tb-color-input asBoxInput
                           formControlName="mainColorOff">
           </tb-color-input>
         </div>
         <mat-divider vertical></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.power-button.background</div>
           <tb-color-input asBoxInput
                           formControlName="backgroundColorOff">
@@ -128,15 +128,15 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.power-button.disabled-colors' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-3">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.power-button.main</div>
           <tb-color-input asBoxInput
                           formControlName="mainColorDisabled">
           </tb-color-input>
         </div>
         <mat-divider vertical></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.power-button.background</div>
           <tb-color-input asBoxInput
                           formControlName="backgroundColorDisabled">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/toggle-button-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/toggle-button-widget-settings.component.html
index d96ea2d9c8..4a5ebee7da 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/toggle-button-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/toggle-button-widget-settings.component.html
@@ -20,7 +20,7 @@
     <div class="tb-form-panel-title" translate>widgets.toggle-button.behavior</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}" translate>widgets.rpc-state.initial-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.initial-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     trueLabel="{{ 'widgets.toggle-button.checked' | translate }}"
@@ -33,7 +33,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.toggle-button.check-hint' | translate}}" translate>widgets.toggle-button.check</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.toggle-button.check' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -42,7 +42,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.toggle-button.uncheck-hint' | translate}}" translate>widgets.toggle-button.uncheck</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.toggle-button.uncheck' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -51,7 +51,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
@@ -65,10 +65,9 @@
     <div class="tb-form-panel-title" translate>widget-config.appearance</div>
     <div class="tb-form-panel stroked tb-slide-toggle">
       <mat-expansion-panel class="tb-settings" [expanded]="!toggleButtonWidgetSettingsForm.get('autoScale').value" disabled>
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide" formControlName="autoScale" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="autoScale" (click)="$event.stopPropagation()">
               {{ 'widgets.toggle-button.auto-scale' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
@@ -100,7 +99,7 @@
     </div>
   </div>
   <div class="tb-form-panel">
-    <div fxLayout="row" fxLayoutAlign="space-between center">
+    <div class="flex flex-row items-center justify-between">
       <div class="tb-form-panel-title" translate>widgets.toggle-button.button-appearance</div>
       <tb-toggle-select [(ngModel)]="buttonAppearanceType" [ngModelOptions]="{standalone: true}">
         <tb-toggle-option value="checked">{{ 'widgets.toggle-button.checked' | translate }}</tb-toggle-option>
@@ -108,14 +107,14 @@
       </tb-toggle-select>
     </div>
     <tb-widget-button-appearance
-        [fxShow]="buttonAppearanceType === 'checked'"
+        [class.!hidden]="buttonAppearanceType !== 'checked'"
         withBorderRadius
         [withAutoScale]="false"
         [autoScale]="toggleButtonWidgetSettingsForm.get('autoScale').value"
         formControlName="checkedAppearance">
     </tb-widget-button-appearance>
     <tb-widget-button-appearance
-        [fxShow]="buttonAppearanceType === 'unchecked'"
+        [class.!hidden]="buttonAppearanceType !== 'unchecked'"
         withBorderRadius
         [withAutoScale]="false"
         [autoScale]="toggleButtonWidgetSettingsForm.get('autoScale').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.html
index 8c8c3e9793..7848fcc48c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.html
@@ -27,7 +27,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showSubtitle">
         {{ 'widgets.aggregated-value-card.subtitle' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="subtitle" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -45,8 +45,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showDate">
         {{ 'widgets.value-card.date' | translate }}
       </mat-slide-toggle>
-      <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-date-format-select fxFlex formControlName="dateFormat"></tb-date-format-select>
+      <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
+        <tb-date-format-select class="flex-1" formControlName="dateFormat"></tb-date-format-select>
         <tb-font-settings formControlName="dateFont"
                           [previewText]="datePreviewFn">
         </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/dashboard-state-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/dashboard-state-widget-settings.component.html
index 4374534bae..1389b4d9fb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/dashboard-state-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/dashboard-state-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="dashboardStateWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="dashboardStateWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.dashboard-state.dashboard-state-settings</legend>
     <mat-form-field class="mat-block">
@@ -39,7 +39,7 @@
     </mat-form-field>
     <mat-expansion-panel class="tb-settings">
       <mat-expansion-panel-header>
-        <mat-panel-description fxLayoutAlign="end" translate>
+        <mat-panel-description class="flex items-stretch justify-end" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -47,7 +47,7 @@
         <mat-slide-toggle class="mat-slide" formControlName="defaultAutofillLayout">
           {{ 'widgets.dashboard-state.autofill-state-layout' | translate }}
         </mat-slide-toggle>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.dashboard-state.default-margin</mat-label>
           <input matInput type="number" min="0" step="1" formControlName="defaultMargin">
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/edge-quick-overview-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/edge-quick-overview-widget-settings.component.html
index 84efa19554..19dd86b288 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/edge-quick-overview-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/edge-quick-overview-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="edgeQuickOverviewWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="edgeQuickOverviewWidgetSettingsForm">
   <mat-slide-toggle class="mat-slide" formControlName="enableDefaultTitle">
     {{ 'widgets.edge.display-default-title' | translate }}
   </mat-slide-toggle>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/html-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/html-card-widget-settings.component.html
index bc4d6bac86..7e8cfab732 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/html-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/html-card-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section [formGroup]="htmlCardWidgetSettingsForm" fxLayout="column">
+<section [formGroup]="htmlCardWidgetSettingsForm" class="flex flex-col">
   <tb-html formControlName="cardHtml" required
           label="{{ 'widgets.html-card.html' | translate }}">
   </tb-html>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-card-widget-settings.component.html
index f4ba5c6b04..333f9a0ec9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-card-widget-settings.component.html
@@ -25,7 +25,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" translate>widgets.label-card.label</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -42,11 +42,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.label-card.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="labelCardWidgetSettingsForm.get('iconColor').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-value-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-value-card-widget-settings.component.html
index 9bc1abdfa5..4ce3d3f705 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-value-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-value-card-widget-settings.component.html
@@ -27,7 +27,7 @@
       <mat-slide-toggle class="mat-slide" formControlName="showLabel">
         {{ 'widgets.label-card.label' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -42,11 +42,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.label-card.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="labelValueCardWidgetSettingsForm.get('iconColor').value?.color"
@@ -58,7 +58,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div translate>widgets.label-value-card.value</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="valueFont"
                           [previewText]="valuePreviewFn">
         </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html
index 0654e01c84..cb91304d4f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html
@@ -15,15 +15,15 @@
     limitations under the License.
 
 -->
-<mat-expansion-panel class="label-widget-label" fxFlex [formGroup]="labelWidgetLabelFormGroup" [(expanded)]="expanded">
+<mat-expansion-panel class="label-widget-label flex-1" [formGroup]="labelWidgetLabelFormGroup" [(expanded)]="expanded">
   <mat-expansion-panel-header>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+    <div class="flex flex-1 flex-row items-center justify-start">
       <mat-panel-title>
-        <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+        <div class="flex flex-1 flex-row items-center justify-start">
           {{ labelWidgetLabelFormGroup.get('pattern').value }}
         </div>
       </mat-panel-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
               type="button"
               (click)="removeLabel.emit()"
@@ -34,9 +34,9 @@
     </div>
   </mat-expansion-panel-header>
   <ng-template matExpansionPanelContent>
-    <div fxLayout="column" fxLayoutGap="0.5em">
+    <div class="flex flex-col gap-2">
       <mat-divider></mat-divider>
-      <section class="tb-widget-settings" fxLayout="column">
+      <section class="tb-widget-settings flex flex-col">
         <mat-form-field style="padding-bottom: 16px;">
           <mat-label translate>widgets.label-widget.label-pattern</mat-label>
           <input required matInput formControlName="pattern">
@@ -47,12 +47,12 @@
         </mat-form-field>
         <fieldset class="fields-group">
           <legend class="group-title" translate>widgets.label-widget.label-position</legend>
-          <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-            <mat-form-field fxFlex>
+          <section class="flex flex-row xs:flex-col gt-xs:gap-2">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.label-widget.x-pos</mat-label>
               <input matInput type="number" min="0" max="100" formControlName="x">
             </mat-form-field>
-            <mat-form-field fxFlex>
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.label-widget.y-pos</mat-label>
               <input matInput type="number" min="0" max="100" formControlName="y">
             </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.html
index 732cadab39..5efef3f877 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.html
@@ -15,19 +15,19 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="labelWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="labelWidgetSettingsForm">
   <tb-gallery-image-input required
                   label="{{ 'widgets.label-widget.background-image' | translate }}"
                   formControlName="backgroundImageUrl">
   </tb-gallery-image-input>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.label-widget.labels</legend>
-    <div fxLayout="column">
+    <div class="flex flex-col">
       <div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
            (cdkDropListDropped)="labelDrop($event)">
-        <div cdkDrag class="tb-draggable" *ngFor="let labelControl of labelsFormArray().controls; trackBy: trackByLabelControl;
+        <div cdkDrag class="tb-draggable flex flex-col" *ngFor="let labelControl of labelsFormArray().controls; trackBy: trackByLabelControl;
                  let $index = index; last as isLast;"
-             fxLayout="column" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+             [class.pb-2]="!isLast">
           <tb-label-widget-label [formControl]="labelControl"
                                  [expanded]="labelControl.new"
                                  (removeLabel)="removeLabel($index)">
@@ -35,8 +35,8 @@
         </div>
       </div>
       <div *ngIf="!labelsFormArray().controls.length">
-      <span translate fxLayoutAlign="center center"
-            class="tb-prompt">widgets.label-widget.no-labels</span>
+      <span translate
+            class="tb-prompt flex items-center justify-center">widgets.label-widget.no-labels</span>
       </div>
       <div style="padding-top: 16px;">
         <button mat-raised-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/markdown-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/markdown-widget-settings.component.html
index e33529a179..d35462a629 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/markdown-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/markdown-widget-settings.component.html
@@ -15,18 +15,18 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="markdownWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="markdownWidgetSettingsForm">
   <mat-slide-toggle class="mat-slide" formControlName="useMarkdownTextFunction">
     {{ 'widgets.markdown.use-markdown-text-function' | translate }}
   </mat-slide-toggle>
-  <tb-js-func [fxShow]="markdownWidgetSettingsForm.get('useMarkdownTextFunction').value"
+  <tb-js-func [class.!hidden]="!markdownWidgetSettingsForm.get('useMarkdownTextFunction').value"
               formControlName="markdownTextFunction"
               [globalVariables]="functionScopeVariables"
               [functionArgs]="['data', 'ctx']"
               functionTitle="{{ 'widgets.markdown.markdown-text-function' | translate }}"
               helpId="widget/lib/markdown/markdown_text_fn">
   </tb-js-func>
-  <tb-markdown-editor [fxShow]="!markdownWidgetSettingsForm.get('useMarkdownTextFunction').value"
+  <tb-markdown-editor [class.!hidden]="markdownWidgetSettingsForm.get('useMarkdownTextFunction').value"
                       formControlName="markdownTextPattern"
                       label="{{ 'widgets.markdown.markdown-text-pattern' | translate }}"
                       helpId="widget/editor/widget_js_markdown_pattern">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.html
index f9543b11cf..43e2747197 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.html
@@ -39,7 +39,7 @@
       <mat-slide-toggle class="mat-slide" formControlName="showValue">
         {{ 'widgets.progress-bar.value' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="valueFont"
                           [previewText]="valuePreviewFn">
         </tb-font-settings>
@@ -52,7 +52,7 @@
     </div>
     <div class="tb-form-row space-between  column-xs">
       <div>{{ 'widgets.progress-bar.range' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <div class="tb-small-label" translate>widgets.progress-bar.min</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="tickMin" type="number" placeholder="{{ 'widget-config.set' | translate }}">
@@ -67,7 +67,7 @@
       <mat-slide-toggle class="mat-slide" formControlName="showTicks">
         {{ 'widgets.progress-bar.range-ticks' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="ticksFont"
                           previewText="100">
         </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/qrcode-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/qrcode-widget-settings.component.html
index 407ad5fffe..65164d564b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/qrcode-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/qrcode-widget-settings.component.html
@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="qrCodeWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="qrCodeWidgetSettingsForm">
   <mat-slide-toggle class="mat-slide" formControlName="useQrCodeTextFunction">
     {{ 'widgets.qr-code.use-qr-code-text-function' | translate }}
   </mat-slide-toggle>
-  <mat-form-field [fxShow]="!qrCodeWidgetSettingsForm.get('useQrCodeTextFunction').value">
+  <mat-form-field [class.!hidden]="qrCodeWidgetSettingsForm.get('useQrCodeTextFunction').value">
     <mat-label translate>widgets.qr-code.qr-code-text-pattern</mat-label>
     <input required matInput formControlName="qrCodeTextPattern">
     <mat-hint>{{ 'widgets.qr-code.qr-code-text-pattern-hint' | translate }}</mat-hint>
@@ -28,7 +28,7 @@
     </mat-error>
   </mat-form-field>
   <tb-js-func required
-              [fxShow]="qrCodeWidgetSettingsForm.get('useQrCodeTextFunction').value"
+              [class.!hidden]="!qrCodeWidgetSettingsForm.get('useQrCodeTextFunction').value"
               formControlName="qrCodeTextFunction"
               [globalVariables]="functionScopeVariables"
               [functionArgs]="['data']"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-key-settings.component.html
index d4eb5b3abc..c77e8bd8d7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-key-settings.component.html
@@ -50,14 +50,13 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="timeseriesTableKeySettingsForm.get('useCellStyleFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useCellStyleFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useCellStyleFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.table.use-cell-style-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -74,14 +73,13 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="timeseriesTableKeySettingsForm.get('useCellContentFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useCellContentFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useCellContentFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.table.use-cell-content-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-latest-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-latest-key-settings.component.html
index aaa42a90ff..330bffbc86 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-latest-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-latest-key-settings.component.html
@@ -21,13 +21,13 @@
     <mat-slide-toggle class="mat-slide" formControlName="show">
       {{ 'widgets.table.show-latest-data-column' | translate }}
     </mat-slide-toggle>
-    <div [fxShow]="timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-form-row space-between">
+    <div [class.!hidden]="!timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-form-row space-between">
       <div translate>widgets.table.latest-data-column-order</div>
       <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
         <input matInput formControlName="order" type="number" step="1" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
-    <div [fxShow]="timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-form-row space-between">
+    <div [class.!hidden]="!timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-form-row space-between">
       <div>{{ 'widgets.table.default-column-visibility' | translate }}</div>
       <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="defaultColumnVisibility">
@@ -43,7 +43,7 @@
         </mat-select>
       </mat-form-field>
     </div>
-    <div [fxShow]="timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-form-row space-between">
+    <div [class.!hidden]="!timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-form-row space-between">
       <div>{{ 'widgets.table.column-selection-to-display' | translate }}</div>
       <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="columnSelectionToDisplay">
@@ -57,16 +57,15 @@
       </mat-form-field>
     </div>
   </div>
-  <div [fxShow]="timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-form-panel tb-slide-toggle">
+  <div [class.!hidden]="!timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="timeseriesTableLatestKeySettingsForm.get('useCellStyleFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useCellStyleFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useCellStyleFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.table.use-cell-style-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -81,16 +80,15 @@
       </ng-template>
     </mat-expansion-panel>
   </div>
-  <div [fxShow]="timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-form-panel tb-slide-toggle">
+  <div [class.!hidden]="!timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="timeseriesTableLatestKeySettingsForm.get('useCellContentFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useCellContentFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useCellContentFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.table.use-cell-content-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html
index c9affa9b5c..b75a2bf40e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html
@@ -35,7 +35,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTimestamp">
         {{ 'widgets.table.display-timestamp' | translate }}
       </mat-slide-toggle>
-      <tb-date-format-select fxFlex excludeLastUpdateAgo formControlName="dateFormat"></tb-date-format-select>
+      <tb-date-format-select class="flex-1" excludeLastUpdateAgo formControlName="dateFormat"></tb-date-format-select>
     </div>
 
     <mat-slide-toggle class="mat-slide"  formControlName="enableStickyAction">
@@ -44,7 +44,7 @@
     <mat-slide-toggle class="mat-slide"  formControlName="showCellActionsMenu">
       {{ 'widgets.table.show-cell-actions-menu-mobile' | translate }}
     </mat-slide-toggle>
-    <mat-form-field fxFlex subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" subscriptSizing="dynamic">
       <mat-label translate>widgets.table.hidden-cell-button-display-mode</mat-label>
       <mat-select formControlName="reserveSpaceForHiddenAction">
         <mat-option [value]="'true'">
@@ -80,14 +80,13 @@
       {{ 'widgets.table.hide-empty-lines' | translate }}
     </mat-slide-toggle>
     <mat-expansion-panel class="tb-settings" [expanded]="timeseriesTableWidgetSettingsForm.get('useRowStyleFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useRowStyleFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useRowStyleFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.table.use-row-style-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/unread-notification-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/unread-notification-widget-settings.component.html
index f59c85b3ca..e5e726ca5f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/unread-notification-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/unread-notification-widget-settings.component.html
@@ -48,7 +48,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div>{{ 'widgets.notification.counter-value' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="counterValueFont"
                           clearButton
                           [previewText]="countPreviewFn"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
index a60f22d939..518007a852 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
@@ -39,7 +39,7 @@
       <mat-slide-toggle class="mat-slide" formControlName="showLabel">
         {{ 'widgets.value-card.label' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="labelFont"
                           [previewText]="label">
         </tb-font-settings>
@@ -47,15 +47,15 @@
         </tb-color-settings>
       </div>
     </div>
-    <div [fxShow]="iconEnabled" class="tb-form-row">
+    <div [class.!hidden]="!iconEnabled" class="tb-form-row">
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.value-card.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="valueCardWidgetSettingsForm.get('iconColor').value?.color"
@@ -67,7 +67,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div translate>widgets.value-card.value</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="valueFont"
                           [previewText]="valuePreviewFn">
         </tb-font-settings>
@@ -75,12 +75,12 @@
         </tb-color-settings>
       </div>
     </div>
-    <div [fxShow]="dateEnabled" class="tb-form-row column-xs">
+    <div [class.!hidden]="!dateEnabled" class="tb-form-row column-xs">
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showDate">
         {{ 'widgets.value-card.date' | translate }}
       </mat-slide-toggle>
-      <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-date-format-select fxFlex formControlName="dateFormat"></tb-date-format-select>
+      <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
+        <tb-date-format-select class="flex-1" formControlName="dateFormat"></tb-date-format-select>
         <tb-font-settings formControlName="dateFont"
                           [previewText]="datePreviewFn">
         </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-chart-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-chart-card-widget-settings.component.html
index 661761fb3b..52d4f1ea8a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-chart-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-chart-card-widget-settings.component.html
@@ -39,7 +39,7 @@
       <mat-slide-toggle class="mat-slide" formControlName="showValue">
         {{ 'widgets.value-chart-card.value' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="valueFont"
                           [autoScale]="valueChartCardWidgetSettingsForm.get('autoScale').value"
                           [previewText]="valuePreviewFn">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html
index e7ca744685..bacacd2aab 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html
@@ -32,7 +32,7 @@
         <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showBarLabel">
           {{ 'widgets.bar-chart.label-on-bar' | translate }}
         </mat-slide-toggle>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <tb-font-settings formControlName="barLabelFont"
                             disabledLineHeight
                             forceSizeUnit="px"
@@ -48,7 +48,7 @@
         <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showBarValue">
           {{ 'widgets.bar-chart.value-on-bar' | translate }}
         </mat-slide-toggle>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <tb-font-settings formControlName="barValueFont"
                             disabledLineHeight
                             forceSizeUnit="px"
@@ -115,10 +115,9 @@
     </tb-time-series-chart-thresholds-panel>
     <div class="tb-form-panel tb-slide-toggle">
       <mat-expansion-panel class="tb-settings" [expanded]="barChartWidgetSettingsForm.get('showLegend').value" [disabled]="!barChartWidgetSettingsForm.get('showLegend').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLegend" (click)="$event.stopPropagation()">
               {{ 'widget-config.legend' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
@@ -136,7 +135,7 @@
           </div>
           <div class="tb-form-row space-between">
             <div>{{ 'legend.label' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="legendLabelFont"
                                 previewText="20 - 30">
               </tb-font-settings>
@@ -151,10 +150,9 @@
     </div>
     <div class="tb-form-panel tb-slide-toggle">
       <mat-expansion-panel class="tb-settings" [expanded]="barChartWidgetSettingsForm.get('showTooltip').value" [disabled]="!barChartWidgetSettingsForm.get('showTooltip').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
               {{ 'widget-config.tooltip' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
@@ -162,7 +160,7 @@
         <ng-template matExpansionPanelContent>
           <div class="tb-form-row space-between">
             <div>{{ 'tooltip.label' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="tooltipLabelFont"
                                 [initialPreviewStyle]="{ color: barChartWidgetSettingsForm.get('tooltipLabelColor').value }"
                                 previewText="Temperature">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/chart-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/chart-widget-settings.component.html
index 3922858711..88a8508887 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/chart-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/chart-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="chartWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="chartWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.chart.common-settings</legend>
     <mat-slide-toggle formControlName="showTooltip" class="slide-block">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-chart-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-chart-widget-settings.component.html
index f8c10fad3d..2f943e67dd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-chart-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-chart-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="doughnutChartWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="doughnutChartWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.chart.common-settings</legend>
     <mat-slide-toggle formControlName="showTooltip" class="slide-block">
@@ -24,12 +24,12 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.chart.border-settings</legend>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.chart.border-width</mat-label>
         <input matInput type="number" min="0" formControlName="borderWidth">
       </mat-form-field>
-      <tb-color-input fxFlex
+      <tb-color-input class="flex-1"
                       formControlName="borderColor"
                       icon="format_color_fill"
                       label="{{ 'widgets.chart.border-color' | translate }}" openOnInput colorClearButton>
@@ -39,20 +39,20 @@
   <fieldset class="fields-group fields-group-slider" formGroupName="legend">
     <legend class="group-title" translate>widgets.chart.legend-settings</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="doughnutChartWidgetSettingsForm.get('legend.display').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
           <mat-slide-toggle formControlName="display" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+                            class="flex items-stretch justify-center">
             {{ 'widgets.chart.display-legend' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <section fxLayout="column">
-          <tb-color-input fxFlex
+        <section class="flex flex-col">
+          <tb-color-input class="flex-1"
                           formControlName="labelsFontColor"
                           icon="format_color_fill"
                           label="{{ 'widgets.chart.labels-font-color' | translate }}" openOnInput colorClearButton>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-bar-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-bar-key-settings.component.html
index 34476180f4..44a0471001 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-bar-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-bar-key-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section [formGroup]="flotBarKeySettingsForm" fxLayout="column">
+<section [formGroup]="flotBarKeySettingsForm" class="flex flex-col">
   <tb-flot-key-settings formControlName="flotKeySettings"
                         [aliasController]="aliasController"
                         [chartType]="'bar'">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-bar-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-bar-widget-settings.component.html
index 0abca2f000..501e30a404 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-bar-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-bar-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section [formGroup]="flotBarWidgetSettingsForm" fxLayout="column">
+<section [formGroup]="flotBarWidgetSettingsForm" class="flex flex-col">
   <tb-flot-widget-settings formControlName="flotSettings"
                            [chartType]="'bar'">
   </tb-flot-widget-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html
index 4767f393a8..a92c276534 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html
@@ -32,14 +32,13 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="flotKeySettingsFormGroup.get('showLines').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showLines" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLines" (click)="$event.stopPropagation()">
             {{ 'widgets.chart.show-line' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -54,7 +53,7 @@
         <mat-slide-toggle class="mat-slide" formControlName="fillLines">
           {{ 'widgets.chart.fill-line' | translate }}
         </mat-slide-toggle>
-        <div [fxShow]="flotKeySettingsFormGroup.get('fillLines').value" class="tb-form-row space-between">
+        <div [class.!hidden]="!flotKeySettingsFormGroup.get('fillLines').value" class="tb-form-row space-between">
           <div>{{ 'widgets.chart.fill-line-opacity' | translate }}</div>
           <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
             <input matInput formControlName="fillLinesOpacity" type="number" min="0" max="1" step="0.1" placeholder="{{ 'widget-config.set' | translate }}">
@@ -65,14 +64,13 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="flotKeySettingsFormGroup.get('showPoints').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showPoints" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showPoints" (click)="$event.stopPropagation()">
             {{ 'widgets.chart.show-points' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -116,7 +114,7 @@
             </mat-select>
           </mat-form-field>
         </div>
-        <tb-js-func [fxShow]="flotKeySettingsFormGroup.get('showPointShape').value === 'custom'"
+        <tb-js-func [class.!hidden]="flotKeySettingsFormGroup.get('showPointShape').value !== 'custom'"
                     formControlName="pointShapeFormatter"
                     [globalVariables]="functionScopeVariables"
                     [functionArgs]="['ctx', 'x', 'y', 'radius', 'shadow']"
@@ -143,7 +141,7 @@
     </mat-slide-toggle>
     <div class="tb-form-row">
       <div class="fixed-title-width" translate>widgets.chart.axis-title</div>
-      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
         <input matInput formControlName="axisTitle" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
@@ -196,7 +194,7 @@
     </div>
   </div>
   <div class="tb-form-panel">
-    <div class="tb-form-panel-title" fxLayout="row" fxLayoutAlign="space-between center">
+    <div class="tb-form-panel-title flex flex-row items-center justify-between">
       <div translate>widgets.chart.thresholds</div>
       <button mat-stroked-button
               color="primary"
@@ -204,8 +202,8 @@
         <span translate>widgets.chart.add-threshold</span>
       </button>
     </div>
-    <div *ngIf="thresholdsFormArray().length" class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
-         (cdkDropListDropped)="thresholdDrop($event)" fxLayout="column" fxLayoutGap="12px">
+    <div *ngIf="thresholdsFormArray().length" class="tb-control-list tb-drop-list flex flex-col gap-3" cdkDropList cdkDropListOrientation="vertical"
+         (cdkDropListDropped)="thresholdDrop($event)">
       <div cdkDrag class="tb-draggable" *ngFor="let thresholdControl of thresholdsFormArray().controls; trackBy: trackByThreshold;
                  let $index = index;">
         <tb-flot-threshold [formControl]="thresholdControl"
@@ -219,10 +217,9 @@
     <div class="tb-form-panel-title" translate>widgets.chart.comparison-settings</div>
     <mat-expansion-panel class="tb-settings" [expanded]="flotKeySettingsFormGroup.get('comparisonSettings.showValuesForComparison').value"
                          [disabled]="!flotKeySettingsFormGroup.get('comparisonSettings.showValuesForComparison').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showValuesForComparison" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showValuesForComparison" (click)="$event.stopPropagation()">
             {{ 'widgets.chart.show-values-for-comparison' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -230,7 +227,7 @@
       <ng-template matExpansionPanelContent>
         <div class="tb-form-row">
           <div class="fixed-title-width" translate>widgets.chart.comparison-values-label</div>
-          <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <input matInput formControlName="comparisonValuesLabel" placeholder="{{ 'widget-config.set' | translate }}">
           </mat-form-field>
         </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.html
index ac25ef7a59..107d1d1b9c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.html
@@ -20,10 +20,9 @@
     <div class="tb-form-panel-title" translate>widgets.chart.threshold-settings</div>
     <mat-expansion-panel class="tb-settings" [expanded]="flotLatestKeySettingsForm.get('useAsThreshold').value"
                          [disabled]="!flotLatestKeySettingsForm.get('useAsThreshold').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useAsThreshold" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useAsThreshold" (click)="$event.stopPropagation()">
             {{ 'widgets.chart.use-as-threshold' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-line-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-line-key-settings.component.html
index 649c5a722c..6c11feed20 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-line-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-line-key-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section [formGroup]="flotLineKeySettingsForm" fxLayout="column">
+<section [formGroup]="flotLineKeySettingsForm" class="flex flex-col">
   <tb-flot-key-settings formControlName="flotKeySettings"
                         [aliasController]="aliasController"
                         [chartType]="'graph'">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-line-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-line-widget-settings.component.html
index 9e9317a247..cd6d6f8b12 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-line-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-line-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section [formGroup]="flotLineWidgetSettingsForm" fxLayout="column">
+<section [formGroup]="flotLineWidgetSettingsForm" class="flex flex-col">
   <tb-flot-widget-settings formControlName="flotSettings"
                            [chartType]="'graph'">
   </tb-flot-widget-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-key-settings.component.html
index 0ce2a8ce71..8c530f7971 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-key-settings.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="flotPieKeySettingsForm" fxLayout="column">
-  <fieldset class="fields-group" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="flotPieKeySettingsForm">
+  <fieldset class="fields-group flex flex-col">
     <legend class="group-title" translate>widgets.chart.common-settings</legend>
     <mat-checkbox formControlName="hideDataByDefault">
       {{ 'widgets.chart.data-is-hidden-by-default' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html
index 11dcbbeb84..8d2ee44d5d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html
@@ -15,25 +15,25 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="flotPieWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="flotPieWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.chart.common-pie-settings</legend>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.chart.radius</mat-label>
         <input matInput type="number" step="0.1" min="0" max="1" formControlName="radius">
         <mat-error *ngIf="flotPieWidgetSettingsForm.get('radius').hasError('min') || flotPieWidgetSettingsForm.get('radius').hasError('max')">
           {{ 'widgets.chart.common-pie-settings-range-error' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.chart.inner-radius</mat-label>
         <input matInput type="number" step="0.1" min="0" max="1" formControlName="innerRadius">
         <mat-error *ngIf="flotPieWidgetSettingsForm.get('innerRadius').hasError('min') || flotPieWidgetSettingsForm.get('innerRadius').hasError('max')">
           {{ 'widgets.chart.common-pie-settings-range-error' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.chart.tilt</mat-label>
         <input matInput type="number" step="0.1" min="0" max="1" formControlName="tilt">
         <mat-error *ngIf="flotPieWidgetSettingsForm.get('tilt').hasError('min') || flotPieWidgetSettingsForm.get('tilt').hasError('max')">
@@ -50,12 +50,12 @@
   </fieldset>
   <fieldset class="fields-group" formGroupName="stroke">
     <legend class="group-title" translate>widgets.chart.stroke-settings</legend>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.chart.width-pixels</mat-label>
         <input matInput type="number" min="0" formControlName="width">
       </mat-form-field>
-      <tb-color-input fxFlex
+      <tb-color-input class="flex-1"
         formControlName="color"
         icon="format_color_fill"
         label="{{ 'widgets.chart.color' | translate }}" openOnInput colorClearButton>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.html
index ef7ad17878..5ab501b830 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.html
@@ -18,7 +18,7 @@
 <div class="tb-form-row no-border no-padding column-lt-md" style="gap: 10px;" [formGroup]="thresholdFormGroup">
   <tb-value-source style="flex: 1" [aliasController]="aliasController" formControlName="valueSource"></tb-value-source>
   <div class="tb-form-row no-border no-padding" style="gap: 10px;">
-      <mat-form-field fxFlex.lt-md appearance="outline" class="number" subscriptSizing="dynamic">
+      <mat-form-field appearance="outline" class="number lt-md:flex-1" subscriptSizing="dynamic">
         <input matInput formControlName="lineWidth" type="number" min="0" placeholder="{{ 'widgets.chart.line-width' | translate }}">
       </mat-form-field>
       <tb-color-input asBoxInput
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html
index 001f606719..cea091fda6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html
@@ -63,7 +63,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div>{{ 'widgets.chart.default-font' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="fontSize" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
           <span matSuffix>px</span>
@@ -77,14 +77,13 @@
   <div *ngIf="chartType === 'graph' || chartType === 'bar'" class="tb-form-panel tb-slide-toggle">
     <div class="tb-form-panel-title" translate>widget-config.legend</div>
     <mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('showLegend').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLegend" (click)="$event.stopPropagation()">
             {{ 'widget-config.legend' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -100,7 +99,7 @@
       <div class="tb-form-panel-title" translate>widgets.chart.vertical-axis</div>
       <div class="tb-form-row">
         <div class="fixed-title-width" translate>widgets.chart.axis-title</div>
-        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
       </div>
@@ -119,14 +118,13 @@
       <div class="tb-form-panel stroked tb-slide-toggle">
         <div class="tb-form-panel-title" translate>widgets.chart.ticks</div>
         <mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('yaxis.showLabels').value">
-          <mat-expansion-panel-header fxLayout="row wrap">
+          <mat-expansion-panel-header class="flex flex-row flex-wrap">
             <mat-panel-title>
-              <mat-slide-toggle class="mat-slide" formControlName="showLabels" (click)="$event.stopPropagation()"
-                                fxLayoutAlign="center">
+              <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLabels" (click)="$event.stopPropagation()">
                 {{ 'widgets.chart.ticks' | translate }}
               </mat-slide-toggle>
             </mat-panel-title>
-            <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+            <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
               widget-config.advanced-settings
             </mat-panel-description>
           </mat-expansion-panel-header>
@@ -164,21 +162,20 @@
       <div class="tb-form-panel-title" translate>widgets.chart.horizontal-axis</div>
       <div class="tb-form-row">
         <div class="fixed-title-width" translate>widgets.chart.axis-title</div>
-        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
       </div>
       <div class="tb-form-panel stroked tb-slide-toggle">
         <div class="tb-form-panel-title" translate>widgets.chart.ticks</div>
         <mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('xaxis.showLabels').value">
-          <mat-expansion-panel-header fxLayout="row wrap">
+          <mat-expansion-panel-header class="flex flex-row flex-wrap">
             <mat-panel-title>
-              <mat-slide-toggle class="mat-slide" formControlName="showLabels" (click)="$event.stopPropagation()"
-                                fxLayoutAlign="center">
+              <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLabels" (click)="$event.stopPropagation()">
                 {{ 'widgets.chart.ticks' | translate }}
               </mat-slide-toggle>
             </mat-panel-title>
-            <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+            <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
               widget-config.advanced-settings
             </mat-panel-description>
           </mat-expansion-panel-header>
@@ -214,7 +211,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div>{{ 'widgets.chart.border' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="outlineWidth" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
           <span matSuffix>px</span>
@@ -234,14 +231,13 @@
   <div class="tb-form-panel tb-slide-toggle">
     <div class="tb-form-panel-title" translate>widgets.chart.tooltip</div>
     <mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('showTooltip').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
             {{ 'widgets.chart.tooltip' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -274,14 +270,13 @@
   <div *ngIf="chartType === 'graph' || chartType === 'bar'" class="tb-form-panel tb-slide-toggle">
     <div class="tb-form-panel-title" translate>widgets.chart.comparison-settings</div>
     <mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('comparisonEnabled').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="comparisonEnabled" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="comparisonEnabled" (click)="$event.stopPropagation()">
             {{ 'widgets.chart.enable-comparison' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -311,7 +306,7 @@
             </mat-select>
           </mat-form-field>
         </div>
-        <div [fxShow]="flotSettingsFormGroup.get('timeForComparison').value === 'customInterval'" class="tb-form-row space-between">
+        <div [class.!hidden]="flotSettingsFormGroup.get('timeForComparison').value !== 'customInterval'" class="tb-form-row space-between">
           <div translate>widgets.chart.custom-interval-value</div>
           <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
             <input matInput formControlName="comparisonCustomIntervalValue" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
@@ -321,7 +316,7 @@
           <div class="tb-form-panel-title" translate>widgets.chart.comparison-x-axis-settings</div>
           <div class="tb-form-row">
             <div class="fixed-title-width" translate>widgets.chart.axis-title</div>
-            <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+            <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
               <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
             </mat-form-field>
           </div>
@@ -350,26 +345,25 @@
   <div *ngIf="chartType === 'graph' || chartType === 'bar'" class="tb-form-panel tb-slide-toggle">
     <div class="tb-form-panel-title" translate>widgets.chart.custom-legend-settings</div>
     <mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('customLegendEnabled').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="customLegendEnabled" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="customLegendEnabled" (click)="$event.stopPropagation()">
             {{ 'widgets.chart.enable-custom-legend' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
         <div class="tb-form-panel stroked">
           <div class="tb-form-panel-title" translate>widgets.chart.label-keys-list</div>
-          <div fxLayout="column">
+          <div class="flex flex-col">
             <div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
                  (cdkDropListDropped)="labelDataKeyDrop($event)">
-              <div cdkDrag class="tb-draggable" *ngFor="let labelDataKeyControl of dataKeysListForLabelsFormArray().controls; trackBy: trackByLabelDataKey;
+              <div cdkDrag class="tb-draggable flex flex-col" *ngFor="let labelDataKeyControl of dataKeysListForLabelsFormArray().controls; trackBy: trackByLabelDataKey;
                  let $index = index; last as isLast;"
-                   fxLayout="column" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+                   [class.pb-2]="!isLast">
                 <tb-label-data-key [formControl]="labelDataKeyControl"
                                    [expanded]="labelDataKeyControl.new"
                                    (removeLabelDataKey)="removeLabelDataKey($index)">
@@ -377,8 +371,8 @@
               </div>
             </div>
             <div *ngIf="!dataKeysListForLabelsFormArray().controls.length">
-            <span translate fxLayoutAlign="center center"
-                  class="tb-prompt">widgets.chart.no-label-keys</span>
+            <span translate
+                  class="tb-prompt flex items-center justify-center">widgets.chart.no-label-keys</span>
             </div>
             <div style="padding-top: 16px;">
               <button mat-raised-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/label-data-key.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/label-data-key.component.html
index 2c93302a59..a2de509c44 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/label-data-key.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/label-data-key.component.html
@@ -15,15 +15,15 @@
     limitations under the License.
 
 -->
-<mat-expansion-panel class="label-data-key" fxFlex [formGroup]="labelDataKeyFormGroup" [(expanded)]="expanded">
+<mat-expansion-panel class="label-data-key flex=1" [formGroup]="labelDataKeyFormGroup" [(expanded)]="expanded">
   <mat-expansion-panel-header>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+    <div class="flex flex-1 flex-row items-center justify-start">
       <mat-panel-title>
-        <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+        <div class="flex flex-1 flex-row items-center justify-start">
           {{ labelDataKeyText() }}
         </div>
       </mat-panel-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
               type="button"
               (click)="removeLabelDataKey.emit()"
@@ -34,18 +34,18 @@
     </div>
   </mat-expansion-panel-header>
   <ng-template matExpansionPanelContent>
-    <div fxLayout="column" fxLayoutGap="0.5em">
+    <div class="flex flex-col gap-2">
       <mat-divider></mat-divider>
-      <section class="tb-widget-settings" fxLayout="column">
-        <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
-          <mat-form-field fxFlex class="mat-block">
+      <section class="tb-widget-settings flex flex-col">
+        <section class="flex flex-col gt-xs:flex-row gt-xs:gap-2">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.chart.key-name</mat-label>
             <input required matInput formControlName="name">
             <mat-error *ngIf="labelDataKeyFormGroup.get('name').hasError('required')">
               {{ 'widgets.chart.key-name-required' | translate }}
             </mat-error>
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.chart.key-type</mat-label>
             <mat-select formControlName="type">
               <mat-option [value]="'attribute'">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.html
index bf00900f47..42416e54b2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.html
@@ -19,10 +19,9 @@
   <ng-container *ngTemplateOutlet="latestChartConfigTemplate()"></ng-container>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="latestChartWidgetSettingsForm.get('showLegend').value" [disabled]="!latestChartWidgetSettingsForm.get('showLegend').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLegend" (click)="$event.stopPropagation()">
             {{ 'widget-config.legend' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -40,7 +39,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'legend.label' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="legendLabelFont"
                               previewText="Wind power">
             </tb-font-settings>
@@ -52,7 +51,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'legend.value' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="legendValueFont"
                               [previewText]="valuePreviewFn">
             </tb-font-settings>
@@ -67,10 +66,9 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="latestChartWidgetSettingsForm.get('showTooltip').value" [disabled]="!latestChartWidgetSettingsForm.get('showTooltip').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
             {{ 'widget-config.tooltip' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -78,7 +76,7 @@
       <ng-template matExpansionPanelContent>
         <div class="tb-form-row space-between column-xs">
           <div>{{ 'tooltip.value' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
               <mat-select formControlName="tooltipValueType">
                 <mat-option *ngFor="let type of latestChartTooltipValueTypes" [value]="type">
@@ -88,7 +86,7 @@
             </mat-form-field>
             <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
               <input matInput formControlName="tooltipValueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-              <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+              <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
             </mat-form-field>
             <tb-font-settings formControlName="tooltipValueFont"
                               [previewText]="tooltipValuePreviewFn">
@@ -143,8 +141,8 @@
         <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
           {{ 'widgets.pie-chart.label' | translate }}
         </mat-slide-toggle>
-        <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-          <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+        <div class="flex flex-1 flex-row items-center justify-start gap-2">
+          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="labelPosition">
               <mat-option *ngFor="let position of pieChartLabelPositions" [value]="position">
                 {{ pieChartLabelPositionTranslationMap.get(position) | translate }}
@@ -164,7 +162,7 @@
       </div>
       <div class="tb-form-row space-between">
         <div>{{ 'widgets.pie-chart.border' | translate }}</div>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
             <input matInput formControlName="borderWidth" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}">
             <div matSuffix>px</div>
@@ -177,7 +175,7 @@
       </div>
       <div class="tb-form-row space-between">
         <div>{{ 'widgets.pie-chart.radius' | translate }}</div>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
             <input matInput formControlName="radius" type="number" min="0" max="100" step="1" placeholder="{{ 'widget-config.set' | translate }}">
             <div matSuffix>%</div>
@@ -228,9 +226,9 @@
           {{ 'widgets.latest-chart.sort-series' | translate }}
         </mat-slide-toggle>
       </div>
-      <div [fxShow]="doughnutTotalEnabled" class="tb-form-row space-between">
+      <div [class.!hidden]="!doughnutTotalEnabled" class="tb-form-row space-between">
         <div>{{ 'widgets.doughnut.central-total-value' | translate }}</div>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <tb-font-settings formControlName="totalValueFont"
                             [previewText]="valuePreviewFn">
           </tb-font-settings>
@@ -261,7 +259,7 @@
         <div class="tb-form-panel-title" translate>widgets.bar-chart.bar-axis</div>
         <div class="tb-form-row space-between column-xs">
           <div translate>widgets.chart.chart-axis.scale</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <div class="tb-small-label" translate>widgets.chart.chart-axis.scale-min</div>
             <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
               <input matInput formControlName="axisMin"
@@ -309,7 +307,7 @@
         <div class="tb-form-panel-title" translate>widgets.polar-area-chart.polar-axis</div>
         <div class="tb-form-row space-between column-xs">
           <div translate>widgets.chart.chart-axis.scale</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <div class="tb-small-label" translate>widgets.chart.chart-axis.scale-min</div>
             <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
               <input matInput formControlName="axisMin"
@@ -374,8 +372,8 @@
           <mat-slide-toggle class="mat-slide" formControlName="showLine">
             {{ 'widgets.radar-chart.line' | translate }}
           </mat-slide-toggle>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-            <mat-form-field class="medium-width" fxFlex.xs appearance="outline" subscriptSizing="dynamic">
+          <div class="flex flex-row items-center justify-start gap-2">
+            <mat-form-field class="medium-width xs:flex-1" appearance="outline" subscriptSizing="dynamic">
               <mat-select formControlName="lineType">
                 <mat-option *ngFor="let type of chartLineTypes" [value]="type">
                   {{ chartLineTypeTranslations.get(type) | translate }}
@@ -392,8 +390,8 @@
           <mat-slide-toggle class="mat-slide" formControlName="showPoints">
             {{ 'widgets.radar-chart.points' | translate }}
           </mat-slide-toggle>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-            <mat-form-field class="medium-width" fxFlex.xs appearance="outline" subscriptSizing="dynamic">
+          <div class="flex flex-row items-center justify-start gap-2">
+            <mat-form-field class="medium-width xs:flex-1" appearance="outline" subscriptSizing="dynamic">
               <mat-select formControlName="pointShape">
                 <mat-option *ngFor="let shape of chartShapes" [value]="shape">
                   {{ chartShapeTranslations.get(shape) | translate }}
@@ -410,8 +408,8 @@
           <mat-slide-toggle class="mat-slide" formControlName="showLabel">
             {{ 'widgets.radar-chart.points-label' | translate }}
           </mat-slide-toggle>
-          <div fxLayout="row" fxFlex.lt-md fxLayoutAlign="start center" fxLayoutGap="8px">
-            <mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
+          <div class="flex flex-row items-center justify-start gap-2 lt-md:flex-1">
+            <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
               <mat-select formControlName="labelPosition">
                 <mat-option *ngFor="let position of chartLabelPositions" [value]="position">
                   {{ chartLabelPositionTranslations.get(position) | translate }}
@@ -451,7 +449,7 @@
           <mat-slide-toggle class="mat-slide" formControlName="axisShowTickLabels">
             {{ 'widgets.radar-chart.ticks-label' | translate }}
           </mat-slide-toggle>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="axisTickLabelFont"
                               clearButton
                               disabledLineHeight
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.html
index a7ced000bf..c435aa0444 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.html
@@ -118,8 +118,8 @@
               {{ 'widgets.time-series-chart.series.point.point-label' | translate }}
             </div>
           </mat-slide-toggle>
-          <div fxLayout="row" fxFlex.lt-md fxLayoutAlign="start center" fxLayoutGap="8px">
-            <mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
+          <div class="flex flex-row items-center justify-start gap-2 lt-md:flex-1">
+            <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
               <mat-select formControlName="pointLabelPosition">
                 <mat-option *ngFor="let position of chartLabelPositions" [value]="position">
                   {{ chartLabelPositionTranslations.get(position) | translate }}
@@ -191,10 +191,9 @@
     </tb-time-series-chart-thresholds-panel>
     <div class="tb-form-panel tb-slide-toggle">
       <mat-expansion-panel class="tb-settings" [expanded]="rangeChartWidgetSettingsForm.get('showLegend').value" [disabled]="!rangeChartWidgetSettingsForm.get('showLegend').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLegend" (click)="$event.stopPropagation()">
               {{ 'widget-config.legend' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
@@ -212,7 +211,7 @@
           </div>
           <div class="tb-form-row space-between">
             <div>{{ 'legend.label' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="legendLabelFont"
                                 previewText="20 - 30">
               </tb-font-settings>
@@ -227,10 +226,9 @@
     </div>
     <div class="tb-form-panel tb-slide-toggle">
       <mat-expansion-panel class="tb-settings" [expanded]="rangeChartWidgetSettingsForm.get('showTooltip').value" [disabled]="!rangeChartWidgetSettingsForm.get('showTooltip').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
               {{ 'widget-config.tooltip' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
@@ -238,7 +236,7 @@
         <ng-template matExpansionPanelContent>
           <div class="tb-form-row space-between">
             <div>{{ 'tooltip.label' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="tooltipLabelFont"
                                 [initialPreviewStyle]="{ color: rangeChartWidgetSettingsForm.get('tooltipLabelColor').value }"
                                 previewText="Temperature">
@@ -251,7 +249,7 @@
           </div>
           <div class="tb-form-row space-between">
             <div>{{ 'tooltip.value' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="tooltipValueFont"
                                 [initialPreviewStyle]="{ color: rangeChartWidgetSettingsForm.get('tooltipValueColor').value }"
                                 [previewText]="tooltipValuePreviewFn">
@@ -266,8 +264,8 @@
             <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="tooltipShowDate">
               {{ 'tooltip.date' | translate }}
             </mat-slide-toggle>
-            <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-              <tb-date-format-select fxFlex excludeLastUpdateAgo includeAuto
+            <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
+              <tb-date-format-select class="flex-1" excludeLastUpdateAgo includeAuto
                                      formControlName="tooltipDateFormat"></tb-date-format-select>
               <tb-font-settings formControlName="tooltipDateFont"
                                 [initialPreviewStyle]="{ color: rangeChartWidgetSettingsForm.get('tooltipDateColor').value }"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-key-settings.component.html
index 1299f0574a..0e7c618c5e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-key-settings.component.html
@@ -42,17 +42,17 @@
     </div>
   </div>
   <div class="tb-form-panel">
-    <div *ngIf="chartType === TimeSeriesChartType.default; else chartTypeTitle" fxLayout="row" fxLayoutAlign="space-between center">
+    <div *ngIf="chartType === TimeSeriesChartType.default; else chartTypeTitle" class="flex flex-row items-center justify-between">
       <div class="tb-form-panel-title" translate>widgets.time-series-chart.series.series-type</div>
       <tb-toggle-select formControlName="type">
         <tb-toggle-option *ngFor="let type of timeSeriesChartSeriesTypes" [value]="type">{{ timeSeriesChartSeriesTypeTranslations.get(type) | translate }}</tb-toggle-option>
       </tb-toggle-select>
     </div>
-    <tb-time-series-chart-line-settings [fxShow]="timeSeriesChartKeySettingsForm.get('type').value === TimeSeriesChartSeriesType.line"
+    <tb-time-series-chart-line-settings [class.!hidden]="timeSeriesChartKeySettingsForm.get('type').value !== TimeSeriesChartSeriesType.line"
                                         [chartType]="chartType"
                                         formControlName="lineSettings">
     </tb-time-series-chart-line-settings>
-    <tb-chart-bar-settings [fxShow]="timeSeriesChartKeySettingsForm.get('type').value === TimeSeriesChartSeriesType.bar"
+    <tb-chart-bar-settings [class.!hidden]="timeSeriesChartKeySettingsForm.get('type').value !== TimeSeriesChartSeriesType.bar"
                                      formControlName="barSettings">
     </tb-chart-bar-settings>
   </div>
@@ -70,10 +70,9 @@
     <div class="tb-form-panel-title" translate>widgets.time-series-chart.comparison.settings</div>
     <mat-expansion-panel class="tb-settings" [expanded]="timeSeriesChartKeySettingsForm.get('comparisonSettings.showValuesForComparison').value"
                          [disabled]="!timeSeriesChartKeySettingsForm.get('comparisonSettings.showValuesForComparison').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showValuesForComparison" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showValuesForComparison" (click)="$event.stopPropagation()">
             {{ 'widgets.time-series-chart.comparison.show-values-for-comparison' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -81,7 +80,7 @@
       <ng-template matExpansionPanelContent>
         <div class="tb-form-row">
           <div class="fixed-title-width" translate>widgets.time-series-chart.comparison.comparison-values-label</div>
-          <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <input matInput formControlName="comparisonValuesLabel" placeholder="{{ 'widgets.time-series-chart.comparison.comparison-values-label-auto' | translate }}">
           </mat-form-field>
         </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-line-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-line-settings.component.html
index e71113cdbf..f0c347f478 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-line-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-line-settings.component.html
@@ -77,8 +77,8 @@
         {{ 'widgets.time-series-chart.series.point.point-label' | translate }}
       </div>
     </mat-slide-toggle>
-    <div fxLayout="row" fxFlex.lt-md fxLayoutAlign="start center" fxLayoutGap="8px">
-      <mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
+    <div class="flex flex-row items-center justify-start gap-2 lt-md:flex-1">
+      <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="pointLabelPosition">
           <mat-option *ngFor="let position of chartLabelPositions" [value]="position">
             {{ chartLabelPositionTranslations.get(position) | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html
index 79a517a7d8..5b6d0a258b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html
@@ -21,7 +21,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="comparisonEnabled">
         {{ 'widgets.time-series-chart.comparison.comparison' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <mat-select formControlName="timeForComparison">
             <mat-option [value]="'previousInterval'">
@@ -44,7 +44,7 @@
             </mat-option>
           </mat-select>
         </mat-form-field>
-        <mat-form-field [fxShow]="timeSeriesChartWidgetSettingsForm.get('timeForComparison').value === 'customInterval'"
+        <mat-form-field [class.!hidden]="timeSeriesChartWidgetSettingsForm.get('timeForComparison').value !== 'customInterval'"
                         appearance="outline" class="number flex-lt-md" subscriptSizing="dynamic">
           <input matInput formControlName="comparisonCustomIntervalValue" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -105,10 +105,9 @@
     <div class="tb-form-panel tb-slide-toggle">
       <mat-expansion-panel class="tb-settings" [expanded]="timeSeriesChartWidgetSettingsForm.get('showLegend').value"
                            [disabled]="!timeSeriesChartWidgetSettingsForm.get('showLegend').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLegend" (click)="$event.stopPropagation()">
               {{ 'widget-config.legend' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
@@ -116,7 +115,7 @@
         <ng-template matExpansionPanelContent>
           <div class="tb-form-row space-between">
             <div>{{ 'legend.label' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="legendLabelFont"
                                 [initialPreviewStyle]="{color: timeSeriesChartWidgetSettingsForm.get('legendLabelColor').value}"
                                 previewText="Temperature">
@@ -129,7 +128,7 @@
           </div>
           <div class="tb-form-row space-between">
             <div>{{ 'legend.value' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="legendValueFont"
                                 [initialPreviewStyle]="{color: timeSeriesChartWidgetSettingsForm.get('legendValueColor').value}"
                                 previewText="22 °C">
@@ -142,7 +141,7 @@
           </div>
           <div class="tb-form-row space-between">
             <div>{{ 'legend.column-title' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="legendColumnTitleFont"
                                 [initialPreviewStyle]="{color: timeSeriesChartWidgetSettingsForm.get('legendColumnTitleColor').value}"
                                 previewText="{{ 'legend.Avg' | translate }}">
@@ -162,10 +161,9 @@
     <div class="tb-form-panel tb-slide-toggle">
       <mat-expansion-panel class="tb-settings" [expanded]="timeSeriesChartWidgetSettingsForm.get('showTooltip').value"
                            [disabled]="!timeSeriesChartWidgetSettingsForm.get('showTooltip').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
               {{ 'widget-config.tooltip' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
@@ -182,7 +180,7 @@
           </div>
           <div class="tb-form-row space-between">
             <div>{{ 'tooltip.label' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="tooltipLabelFont"
                                 [initialPreviewStyle]="{ color: timeSeriesChartWidgetSettingsForm.get('tooltipLabelColor').value }"
                                 previewText="Temperature">
@@ -195,7 +193,7 @@
           </div>
           <div class="tb-form-row space-between">
             <div>{{ 'tooltip.value' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="tooltipValueFont"
                                 [initialPreviewStyle]="{ color: timeSeriesChartWidgetSettingsForm.get('tooltipValueColor').value }"
                                 [previewText]="tooltipValuePreviewFn">
@@ -217,8 +215,8 @@
             <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="tooltipShowDate">
               {{ 'tooltip.date' | translate }}
             </mat-slide-toggle>
-            <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-              <tb-date-format-select fxFlex excludeLastUpdateAgo includeAuto
+            <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
+              <tb-date-format-select class="flex-1" excludeLastUpdateAgo includeAuto
                                      formControlName="tooltipDateFormat"></tb-date-format-select>
               <tb-font-settings formControlName="tooltipDateFont"
                                 [initialPreviewStyle]="{ color: timeSeriesChartWidgetSettingsForm.get('tooltipDateColor').value }"
diff --git a/ui-ngx/tailwind.config.js b/ui-ngx/tailwind.config.js
index 4330a41473..b5eb1d077f 100644
--- a/ui-ngx/tailwind.config.js
+++ b/ui-ngx/tailwind.config.js
@@ -68,6 +68,9 @@ module.exports = {
       'gt-xmd': {
         min: '1600px'
       },
+      'gt-md-lg': {
+        min: '1820px'
+      },
       'gt-lg': {
         min: '1920px'
       },
@@ -77,6 +80,7 @@ module.exports = {
     },
     extend: {
       flexBasis: {
+        '7.5': '1.875rem',
         '25': '6.25rem',
         '37.5': '9.375rem'
       },
@@ -91,6 +95,7 @@ module.exports = {
         '19': '4.75rem'
       },
       minWidth: {
+        '7.5': '1.875rem',
         '25': '6.25rem',
         '37.5': '9.375rem'
       },
@@ -136,6 +141,7 @@ module.exports = {
         '8/12': '66.666667%',
         '10/12': '83.333333%',
         '11/12': '91.666667%',
+        '7.5': '1.875rem',
         '25': '6.25rem',
         '37.5': '9.375rem'
       }

From 1bdf49574d1d1f7721a18c9c73251ffbfe1cefca Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Tue, 15 Oct 2024 18:43:28 +0300
Subject: [PATCH 19/34] Flex layout replacements. Switch to tailwind.css.

---
 ...with-labels-widget-settings.component.html |  6 +--
 .../common/advanced-range.component.html      |  8 ++--
 ...-date-format-settings-panel.component.html |  7 ++--
 .../background-settings-panel.component.html  |  8 ++--
 .../common/color-range-list.component.html    | 20 +++++-----
 .../common/color-range-panel.component.html   |  2 +-
 .../color-settings-panel.component.html       | 18 ++++-----
 .../count-widget-settings.component.html      | 16 ++++----
 .../common/css-size-input.component.html      |  2 +-
 .../common/data-key-input.component.html      |  4 +-
 .../date-format-settings-panel.component.html |  4 +-
 .../common/font-settings-panel.component.html | 18 ++++-----
 .../settings/common/gradient.component.html   | 38 +++++++++----------
 .../common/image-cards-select.component.html  |  6 +--
 .../common/value-source.component.html        |  8 ++--
 .../common/widget-font.component.html         | 20 +++++-----
 16 files changed, 91 insertions(+), 94 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html
index bacacd2aab..1322f29f53 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html
@@ -173,7 +173,7 @@
           </div>
           <div class="tb-form-row space-between">
             <div>{{ 'tooltip.value' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="tooltipValueFont"
                                 [initialPreviewStyle]="{ color: barChartWidgetSettingsForm.get('tooltipValueColor').value }"
                                 [previewText]="tooltipValuePreviewFn">
@@ -188,8 +188,8 @@
             <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="tooltipShowDate">
               {{ 'tooltip.date' | translate }}
             </mat-slide-toggle>
-            <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-              <tb-date-format-select fxFlex excludeLastUpdateAgo includeAuto
+            <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
+              <tb-date-format-select class="flex-1" excludeLastUpdateAgo includeAuto
                                      formControlName="tooltipDateFormat"></tb-date-format-select>
               <tb-font-settings formControlName="tooltipDateFont"
                                 [initialPreviewStyle]="{ color: barChartWidgetSettingsForm.get('tooltipDateColor').value }"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/advanced-range.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/advanced-range.component.html
index 4bd50a81c6..f76dc1a94a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/advanced-range.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/advanced-range.component.html
@@ -18,18 +18,18 @@
 <div class="tb-form-row no-padding no-border" style="gap: 0; width: 100%;" [formGroup]="advancedRangeLevelFormGroup">
   <div class="range-container">
     <div class="range-input range-input-fields">
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+      <div class="flex flex-1 flex-row items-center justify-start">
         <div class="range-text" translate>widgets.color.from</div>
-        <tb-value-source-data-key fxFlex
+        <tb-value-source-data-key class="flex-1"
                                   formControlName="from"
                                   [aliasController]="aliasController"
                                   [dataKeyCallbacks]="dataKeyCallbacks"
                                   [datasource]="datasource">
         </tb-value-source-data-key>
       </div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+      <div class="flex flex-1 flex-row items-center justify-start">
         <div class="range-text" translate>widgets.color.to</div>
-        <tb-value-source-data-key fxFlex
+        <tb-value-source-data-key class="flex-1"
                                   formControlName="to"
                                   [aliasController]="aliasController"
                                   [dataKeyCallbacks]="dataKeyCallbacks"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/auto-date-format-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/auto-date-format-settings-panel.component.html
index a88ea77488..54da20f8a5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/auto-date-format-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/auto-date-format-settings-panel.component.html
@@ -20,14 +20,13 @@
   <div class="tb-auto-date-format-settings-panel-content">
     <div class="tb-form-row" *ngFor="let unit of formatTimeUnits">
       <div class="fixed-title-width">{{ formatTimeUnitTranslations.get(unit) | translate }}</div>
-      <div fxFlex fxLayout="column" fxLayoutGap="8px"
-                  fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutGap.gt-xs="16px">
+      <div class="flex flex-1 flex-col gap-2 gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-4">
         <mat-form-field class="tb-date-format-input flex" appearance="outline" subscriptSizing="dynamic">
           <input required matInput [formControlName]="unit" placeholder="{{ 'widget-config.set' | translate }}">
           <div matIconSuffix tb-help-popup="date/date-format" [tb-help-popup-style]="{width: '800px'}"></div>
         </mat-form-field>
-        <mat-divider fxHide fxShow.gt-xs vertical></mat-divider>
-        <div class="preview-text" fxFlex>{{ previewText[unit] }}</div>
+        <mat-divider class="lt-sm:!hidden" vertical></mat-divider>
+        <div class="preview-text flex-1">{{ previewText[unit] }}</div>
       </div>
     </div>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.html
index 9038f2a22f..bce7eec5c2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.html
@@ -19,18 +19,18 @@
   <div class="tb-background-settings-title" translate>widgets.background.background-settings</div>
   <div class="tb-background-settings-panel-content">
     <div class="tb-form-panel tb-background-form-panel">
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
+      <div class="flex flex-row items-center justify-start gap-4">
         <div class="tb-form-panel-title" translate>widgets.background.background</div>
-        <tb-toggle-select formControlName="type" fxFlex selectMediaBreakpoint="xs">
+        <tb-toggle-select formControlName="type" class="flex-1" selectMediaBreakpoint="xs">
           <tb-toggle-option *ngFor="let type of backgroundTypes"
                             [value]="type">
             {{ backgroundTypeTranslationsMap.get(type) | translate }}
           </tb-toggle-option>
         </tb-toggle-select>
       </div>
-      <tb-gallery-image-input [fxShow]="backgroundSettingsFormGroup.get('type').value === backgroundType.image"
+      <tb-gallery-image-input [class.!hidden]="backgroundSettingsFormGroup.get('type').value !== backgroundType.image"
                               formControlName="imageUrl"></tb-gallery-image-input>
-      <div [fxShow]="backgroundSettingsFormGroup.get('type').value === backgroundType.color"
+      <div [class.!hidden]="backgroundSettingsFormGroup.get('type').value !== backgroundType.color"
            class="tb-form-row space-between tb-background-color-field">
         <div translate>widgets.color.color</div>
         <tb-color-input asBoxInput
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.html
index 3bd47d9921..2dccd63a27 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.html
@@ -16,9 +16,9 @@
 
 -->
 <ng-container  [formGroup]="colorRangeListFormGroup">
-  <div fxLayout="row" fxLayoutAlign="start center" *ngIf="advancedMode; else basicMode">
-    <div fxFlex class="tb-form-panel-title" translate>widgets.color.settings-type</div>
-    <tb-toggle-select formControlName="advancedMode" fxFlex>
+  <div class="flex flex-row items-center justify-start" *ngIf="advancedMode; else basicMode">
+    <div class="tb-form-panel-title flex-1" translate>widgets.color.settings-type</div>
+    <tb-toggle-select formControlName="advancedMode" class="flex-1">
       <tb-toggle-option [value]="false">
         {{ 'widgets.color.basic-mode' | translate }}
       </tb-toggle-option>
@@ -29,8 +29,8 @@
   </div>
 
   <ng-template #basicMode>
-    <div fxLayout="row" fxLayoutAlign="start center">
-      <div fxFlex *ngIf="panelTitle" class="tb-form-panel-title">{{ panelTitle }}</div>
+    <div class="flex flex-row items-center justify-start">
+      <div *ngIf="panelTitle" class="tb-form-panel-title flex-1">{{ panelTitle }}</div>
     </div>
   </ng-template>
 
@@ -41,16 +41,16 @@
         <div cdkDrag class="tb-draggable tb-advanced-range-drag"
              [formGroup]="rangeFormGroup"
              *ngFor="let rangeFormGroup of rangeListFormGroups; trackBy: trackByRange; let $index = index; last as isLast;"
-             [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
-          <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+             [class.pb-2]="!isLast">
+          <div class="flex flex-1 flex-row items-center justify-start">
             <div class="tb-form-row range-container">
               <div class="tb-value-range-text" translate>widgets.color.from</div>
-              <mat-form-field fxFlex appearance="outline" class="center number" subscriptSizing="dynamic">
+              <mat-form-field appearance="outline" class="center number flex-1" subscriptSizing="dynamic">
                 <input matInput type="number" formControlName="from" placeholder="{{ 'widget-config.set' | translate }}">
               </mat-form-field>
 
               <div class="tb-value-range-text tb-value-range-text-to" translate>widgets.color.to</div>
-              <mat-form-field fxFlex appearance="outline" class="center number" subscriptSizing="dynamic">
+              <mat-form-field appearance="outline" class="center number flex-1" subscriptSizing="dynamic">
                 <input matInput type="number" formControlName="to" placeholder="{{ 'widget-config.set' | translate }}">
               </mat-form-field>
 
@@ -84,7 +84,7 @@
            (cdkDropListDropped)="rangeDrop($event, 'rangeAdvanced')">
         <div cdkDrag class="tb-draggable tb-advanced-range-drag"
              *ngFor="let advancedRangeControl of advancedRangeControls; trackBy: trackByAdvancedRange;let $index = index; last as isLast;"
-             [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+             [class.pb-2]="!isLast">
           <tb-advanced-range [formControl]="advancedRangeControl"
                              [aliasController]="aliasController"
                              [dataKeyCallbacks]="dataKeyCallbacks"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-panel.component.html
index 347db57baa..41d847ab1b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-panel.component.html
@@ -39,7 +39,7 @@
           </div>
         </ng-template>
       </mat-menu>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <button mat-button
               color="primary"
               type="button"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.html
index f7df367657..5787d6af24 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.html
@@ -17,8 +17,8 @@
 -->
 <div class="tb-color-settings-panel" [formGroup]="colorSettingsFormGroup">
   <div class="tb-color-settings-title" translate>widgets.color.color-settings</div>
-  <div fxLayout="row">
-    <tb-toggle-select formControlName="type" fxFlex.xs fxFlex="70%">
+  <div class="flex flex-row">
+    <tb-toggle-select formControlName="type" class="max-w-70% flex-full xs:flex-1">
       <tb-toggle-option *ngFor="let type of colorTypes"
                         [value]="type">
         {{ colorTypeTranslationsMap.get(type) | translate }}
@@ -31,9 +31,9 @@
                     formControlName="color">
     </tb-color-input>
   </div>
-  <div class="tb-color-settings-panel-body" [fxShow]="colorSettingsFormGroup.get('type').value === colorType.constant">
+  <div class="tb-color-settings-panel-body" [class.!hidden]="colorSettingsFormGroup.get('type').value !== colorType.constant">
   </div>
-  <div class="tb-color-settings-panel-body" [fxShow]="colorSettingsFormGroup.get('type').value === colorType.gradient">
+  <div class="tb-color-settings-panel-body" [class.!hidden]="colorSettingsFormGroup.get('type').value !== colorType.gradient">
     <tb-gradient class="tb-gradient-panel"
                  formControlName="gradient"
                  [minValue]="minValue"
@@ -45,7 +45,7 @@
                  [popover]="popover">
     </tb-gradient>
   </div>
-  <div class="tb-color-settings-panel-body" [fxShow]="colorSettingsFormGroup.get('type').value === colorType.range">
+  <div class="tb-color-settings-panel-body" [class.!hidden]="colorSettingsFormGroup.get('type').value !== colorType.range">
     <tb-color-range-list class="tb-color-ranges-panel"
                          formControlName="rangeList"
                          panelTitle="{{ 'widgets.color.value-range' | translate }}"
@@ -56,7 +56,7 @@
                          [popover]="popover">
     </tb-color-range-list>
   </div>
-  <div class="tb-color-settings-panel-body" [fxShow]="colorSettingsFormGroup.get('type').value === colorType.function">
+  <div class="tb-color-settings-panel-body" [class.!hidden]="colorSettingsFormGroup.get('type').value !== colorType.function">
     <ng-container *ngTemplateOutlet="function"></ng-container>
   </div>
   <div class="tb-color-settings-panel-buttons">
@@ -66,8 +66,8 @@
             color="primary"
             type="button"
             [matMenuTriggerFor]="settingsSourcesMenu" [matMenuTriggerData]="{menuWidth: copySettingsButton._elementRef.nativeElement.clientWidth}">
-      <span fxHide.xs>{{ 'widgets.color.copy-color-settings-from' | translate }}</span>
-      <span fxHide.gt-xs>{{ 'widgets.color.copy-from' | translate }}</span>
+      <span class="xs:!hidden">{{ 'widgets.color.copy-color-settings-from' | translate }}</span>
+      <span class="gt-xs:!hidden">{{ 'widgets.color.copy-from' | translate }}</span>
     </button>
     <mat-menu #settingsSourcesMenu="matMenu">
       <ng-template matMenuContent let-menuWidth="menuWidth">
@@ -76,7 +76,7 @@
         </div>
       </ng-template>
     </mat-menu>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-button
             color="primary"
             type="button"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html
index 3a9145565c..e5ffbaf972 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html
@@ -37,7 +37,7 @@
     <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
       {{ 'widgets.count.label' | translate }}
     </mat-slide-toggle>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div class="flex flex-1 flex-row items-center justify-start gap-2">
       <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
         <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
@@ -52,11 +52,11 @@
     <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
       {{ 'widgets.count.icon' | translate }}
     </mat-slide-toggle>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div class="flex flex-1 flex-row items-center justify-start gap-2">
       <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
         <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
-      <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+      <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
       <tb-material-icon-select asBoxInput
                                iconClearButton
                                [color]="countWidgetConfigForm.get('iconColor').value?.color"
@@ -73,18 +73,18 @@
     <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIconBackground">
       {{ 'widgets.count.icon-background' | translate }}
     </mat-slide-toggle>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div class="flex flex-1 flex-row items-center justify-start gap-2">
       <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
         <input matInput type="number" min="0" formControlName="iconBackgroundSize" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
-      <tb-css-unit-select fxFlex formControlName="iconBackgroundSizeUnit"></tb-css-unit-select>
+      <tb-css-unit-select class="flex-1" formControlName="iconBackgroundSizeUnit"></tb-css-unit-select>
       <tb-color-settings formControlName="iconBackgroundColor" settingsKey="{{'widgets.count.icon-background' | translate }}">
       </tb-color-settings>
     </div>
   </div>
   <div class="tb-form-row space-between">
     <div translate>widgets.count.value</div>
-    <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div class="flex flex-row items-center justify-start gap-2">
       <tb-font-settings formControlName="valueFont"
                         previewText="10">
       </tb-font-settings>
@@ -96,11 +96,11 @@
     <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showChevron">
       {{ 'widgets.count.chevron' | translate }}
     </mat-slide-toggle>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div class="flex flex-1 flex-row items-center justify-start gap-2">
       <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
         <input matInput type="number" min="0" formControlName="chevronSize" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
-      <tb-css-unit-select fxFlex formControlName="chevronSizeUnit"></tb-css-unit-select>
+      <tb-css-unit-select class="flex-1" formControlName="chevronSizeUnit"></tb-css-unit-select>
       <tb-color-input asBoxInput
                       colorClearButton
                       formControlName="chevronColor">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/css-size-input.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/css-size-input.component.html
index 62c3332fec..b4afb11926 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/css-size-input.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/css-size-input.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div [formGroup]="cssSizeFormGroup" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+<div [formGroup]="cssSizeFormGroup" class="flex flex-row items-center justify-start gap-2">
   <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-inline-field tb-suffix-absolute number" [class.flex]="flex">
     <input matInput [required]="required"
            type="number" min="0" formControlName="size" placeholder="{{ 'widget-config.set' | translate }}">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/data-key-input.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/data-key-input.component.html
index d5cc9a183e..71dadb99fd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/data-key-input.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/data-key-input.component.html
@@ -21,7 +21,7 @@
     <mat-chip-row class="tb-datakey-chip" *ngIf="modelValue?.type"
                   [removable]="removable"
                   (removed)="removeKey()">
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="4px" class="tb-attribute-chip">
+      <div class="tb-attribute-chip flex flex-row items-center justify-start gap-1">
         <div class="tb-chip-labels">
           <div class="tb-chip-label tb-chip-text tb-chip-icon">
             <ng-container *ngIf="isEntityDatasource">
@@ -65,7 +65,7 @@
            [required]="required"
            [formControl]="keyFormControl"
            matAutocompleteOrigin
-           [fxHide]="!!modelValue?.type"
+           [class.!hidden]="!!modelValue?.type"
            [readonly]="!!modelValue?.type"
            #origin="matAutocompleteOrigin"
            [matAutocompleteConnectedTo]="origin"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.html
index 2c7801f149..55cf5482d2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.html
@@ -19,7 +19,7 @@
   <div class="tb-date-format-settings-title" translate>date.custom-date</div>
   <div class="tb-form-row no-border no-padding">
     <div class="fixed-title-width" translate>date.format</div>
-    <mat-form-field class="tb-date-format-input" required fxFlex appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field class="tb-date-format-input flex-1" required appearance="outline" subscriptSizing="dynamic">
       <input matInput [formControl]="dateFormatFormControl" placeholder="{{ 'widget-config.set' | translate }}">
       <div matIconSuffix tb-help-popup="date/date-format" [tb-help-popup-style]="{width: '800px'}"></div>
     </mat-form-field>
@@ -27,7 +27,7 @@
   <mat-divider></mat-divider>
   <div class="tb-form-row no-border no-padding date-format-preview">
     <div class="fixed-title-width" translate>date.preview</div>
-    <div class="preview-text" fxFlex>{{ previewText }}</div>
+    <div class="preview-text flex-1">{{ previewText }}</div>
   </div>
   <div class="tb-date-format-settings-panel-buttons">
     <button mat-button
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings-panel.component.html
index e897a9de8b..ab18cead4a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings-panel.component.html
@@ -19,17 +19,17 @@
   <div class="tb-font-settings-title" translate>widgets.widget-font.font-settings</div>
   <div class="tb-form-row no-border no-padding">
     <div class="fixed-title-width" translate>widgets.widget-font.size</div>
-    <div *ngIf="!autoScale" fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
-      <mat-form-field fxFlex appearance="outline" class="number" subscriptSizing="dynamic">
+    <div *ngIf="!autoScale" class="flex flex-1 flex-row items-center justify-start gap-3">
+      <mat-form-field appearance="outline" class="number flex-1" subscriptSizing="dynamic">
         <input matInput type="number" min="0" formControlName="size" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
-      <tb-css-unit-select fxFlex formControlName="sizeUnit"></tb-css-unit-select>
+      <tb-css-unit-select class="flex-1" formControlName="sizeUnit"></tb-css-unit-select>
     </div>
     <div *ngIf="autoScale" class="tb-font-settings-auto" translate>widgets.widget-font.auto</div>
   </div>
   <div class="tb-form-row no-border no-padding">
     <div class="fixed-title-width" translate>widgets.widget-font.font-family</div>
-    <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
       <input matInput #familyInput
              formControlName="family" placeholder="{{ 'widget-config.set' | translate }}"
              [matAutocomplete]="familyAutocomplete">
@@ -51,7 +51,7 @@
   </div>
   <div class="tb-form-row no-border no-padding">
     <div class="fixed-title-width" translate>widgets.widget-font.font-weight</div>
-    <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
       <mat-select formControlName="weight" placeholder="{{ 'widget-config.set' | translate }}">
         <mat-option [value]="null">
         </mat-option>
@@ -63,7 +63,7 @@
   </div>
   <div class="tb-form-row no-border no-padding">
     <div class="fixed-title-width" translate>widgets.widget-font.font-style</div>
-    <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
       <mat-select formControlName="style" placeholder="{{ 'widget-config.set' | translate }}">
         <mat-option [value]="null">
         </mat-option>
@@ -75,7 +75,7 @@
   </div>
   <div class="tb-form-row no-border no-padding" *ngIf="!disabledLineHeight">
     <div class="fixed-title-width" translate>widgets.widget-font.line-height</div>
-    <mat-form-field *ngIf="!autoScale" fxFlex appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field *ngIf="!autoScale" class="flex-1" appearance="outline" subscriptSizing="dynamic">
       <input matInput formControlName="lineHeight" placeholder="{{ 'widget-config.set' | translate }}">
     </mat-form-field>
     <div *ngIf="autoScale" class="tb-font-settings-auto" translate>widgets.widget-font.auto</div>
@@ -83,7 +83,7 @@
   <mat-divider></mat-divider>
   <div class="tb-form-row no-border no-padding font-preview">
     <div class="fixed-title-width" translate>widgets.widget-font.preview</div>
-    <div class="preview-text" fxFlex [style]="previewStyle" [innerHTML]="previewText | safe:'html'"></div>
+    <div class="preview-text flex-1" [style]="previewStyle" [innerHTML]="previewText | safe:'html'"></div>
   </div>
   <div class="tb-font-settings-panel-buttons">
     <button *ngIf="clearButton"
@@ -93,7 +93,7 @@
             [disabled]="clearDisabled()">
       {{ 'action.clear' | translate }}
     </button>
-    <span *ngIf="clearButton" fxFlex></span>
+    <span *ngIf="clearButton" class="flex-1"></span>
     <button mat-button
             color="primary"
             type="button"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.html
index 1b71225a47..fa71a5deff 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.html
@@ -17,9 +17,9 @@
 -->
 <ng-container [formGroup]="gradientFormGroup">
 
-  <div fxLayout="row" fxLayoutAlign="start center" *ngIf="advancedMode">
-    <div fxFlex class="tb-form-panel-title" fxHide.xs translate>widgets.color.gradient-type</div>
-    <tb-toggle-select formControlName="advancedMode" fxFlex>
+  <div class="flex flex-row items-center justify-start" *ngIf="advancedMode">
+    <div class="tb-form-panel-title flex-1 xs:!hidden" translate>widgets.color.gradient-type</div>
+    <tb-toggle-select formControlName="advancedMode" class="flex-1">
       <tb-toggle-option [value]="false">
         {{ 'widgets.color.basic-mode' | translate }}
       </tb-toggle-option>
@@ -41,7 +41,7 @@
           <div translate>widgets.color.gradient-start</div>
           <div class="start-gradient-container">
             <div class="tb-form-row no-border no-padding">
-              <div class="gradient-text" fxHide.xs translate>widgets.color.start-value</div>
+              <div class="gradient-text xs:!hidden" translate>widgets.color.start-value</div>
               <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
                 <input matInput type="number" formControlName="minValue" placeholder="{{ 'widget-config.set' | translate }}">
               </mat-form-field>
@@ -61,7 +61,7 @@
           <div cdkDrag class="tb-form-row no-padding no-border tb-draggable"
                [formGroup]="gradientFormGroup"
                *ngFor="let gradientFormGroup of gradientListFormGroups; trackBy: trackByGradient; let $index = index; last as isLast;"
-               [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+               [class.pb-2]="!isLast">
             <div class="gradient">
               <div class="gradient-container">
                 <div translate>widgets.color.gradient-color</div>
@@ -77,8 +77,7 @@
                       matTooltipPosition="above">
                 <mat-icon>delete</mat-icon>
               </button>
-              <button class="tb-box-button"
-                      fxHide.lt-lg
+              <button class="tb-box-button lt-lg:!hidden"
                       mat-icon-button
                       type="button"
                       cdkDragHandle
@@ -101,7 +100,7 @@
           <div translate>widgets.color.gradient-end</div>
           <div class="end-gradient-container">
             <div class="tb-form-row no-border no-padding">
-              <div class="gradient-text" fxHide.xs translate>widgets.color.end-value</div>
+              <div class="gradient-text xs:!hidden" translate>widgets.color.end-value</div>
               <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
                 <input matInput type="number" formControlName="maxValue" placeholder="{{ 'widget-config.set' | translate }}">
               </mat-form-field>
@@ -119,11 +118,11 @@
       <div class="gradient" formGroupName="gradientAdvanced">
         <div class="gradient-container gradient-container-start" formGroupName="start">
           <div class="tb-gradient-text">
-            <span fxHide.xs translate>widgets.color.gradient-start</span>
-            <span fxHide fxShow.xs translate>widgets.color.gradient-start-min</span>
+            <span class="xs:!hidden" translate>widgets.color.gradient-start</span>
+            <span class="gt-xs:!hidden" translate>widgets.color.gradient-start-min</span>
           </div>
           <div class="tb-form-row no-border no-padding start-gradient-container start-gradient-container-advanced">
-            <tb-value-source-data-key fxFlex
+            <tb-value-source-data-key class="flex-1"
                                       formControlName="source"
                                       [aliasController]="aliasController"
                                       [dataKeyCallbacks]="dataKeyCallbacks"
@@ -142,15 +141,15 @@
           <div cdkDrag class="tb-form-row no-padding no-border tb-draggable"
                [formGroup]="gradientFormGroup"
                *ngFor="let gradientFormGroup of advancedGradientListFormGroups; trackBy: trackByGradient; let $index = index; last as isLast;"
-               [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+               [class.pb-2]="!isLast">
             <div class="gradient">
               <div class="gradient-container">
                 <div class="tb-gradient-text">
-                  <span fxHide.xs translate>widgets.color.gradient-color</span>
-                  <span fxHide fxShow.xs translate>widgets.color.gradient-color-min</span>
+                  <span class="xs:!hidden" translate>widgets.color.gradient-color</span>
+                  <span class="gt-xs:!hidden" translate>widgets.color.gradient-color-min</span>
                 </div>
                 <div class="list-gradient-container list-gradient-container-advanced">
-                  <tb-value-source-data-key fxFlex
+                  <tb-value-source-data-key class="flex-1"
                                             formControlName="source"
                                             [aliasController]="aliasController"
                                             [dataKeyCallbacks]="dataKeyCallbacks"
@@ -169,8 +168,7 @@
                       matTooltipPosition="above">
                 <mat-icon>delete</mat-icon>
               </button>
-              <button class="tb-box-button"
-                      fxHide.lt-lg
+              <button class="tb-box-button lt-lg:!hidden"
                       mat-icon-button
                       type="button"
                       cdkDragHandle
@@ -191,11 +189,11 @@
       <div class="gradient" formGroupName="gradientAdvanced">
         <div class="gradient-container gradient-container-end" formGroupName="end">
           <div class="tb-gradient-text">
-            <span fxHide.xs translate>widgets.color.gradient-end</span>
-            <span fxHide fxShow.xs translate>widgets.color.gradient-end-min</span>
+            <span class="xs:!hidden" translate>widgets.color.gradient-end</span>
+            <span class="gt-xs:!hidden" translate>widgets.color.gradient-end-min</span>
           </div>
           <div class="tb-form-row no-border no-padding end-gradient-container end-gradient-container-advanced">
-            <tb-value-source-data-key fxFlex
+            <tb-value-source-data-key class="flex-1"
                                       formControlName="source"
                                       [aliasController]="aliasController"
                                       [dataKeyCallbacks]="dataKeyCallbacks"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/image-cards-select.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/image-cards-select.component.html
index 16d88debcf..81ab02442b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/image-cards-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/image-cards-select.component.html
@@ -17,10 +17,10 @@
 -->
 <div class="tb-image-cards-select tb-form-panel stroked no-padding">
   <mat-expansion-panel class="tb-settings" [expanded]="expanded" disabled>
-    <mat-expansion-panel-header fxLayout="row wrap">
-      <div fxFlex class="tb-form-row no-border"  [class.expanded]="expanded">
+    <mat-expansion-panel-header class="flex flex-row flex-wrap">
+      <div class="tb-form-row no-border flex-1"  [class.expanded]="expanded">
         <div class="fixed-title-width">{{ label }}</div>
-        <mat-form-field class="tb-image-cards-value-field" fxFlex appearance="outline" subscriptSizing="dynamic" (click)="toggleSelectPanel($event)">
+        <mat-form-field class="tb-image-cards-value-field flex-1" appearance="outline" subscriptSizing="dynamic" (click)="toggleSelectPanel($event)">
           <input readonly matInput [formControl]="valueFormControl" placeholder="{{ 'widget-config.set' | translate }}">
           <mat-icon matSuffix>{{ expanded ? 'expand_less' : 'expand_more' }}</mat-icon>
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.html
index 24c8564ffb..5486996a45 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.html
@@ -17,7 +17,7 @@
 -->
 
 <div class="tb-form-row no-border no-padding column-xs" style="gap: 10px;" [formGroup]="valueSourceFormGroup">
-  <mat-form-field fxFlex="33" fxFlex.xs appearance="outline" subscriptSizing="dynamic">
+  <mat-form-field class="max-w-33% flex-full xs:flex-1" appearance="outline" subscriptSizing="dynamic">
     <mat-select formControlName="valueSource">
       <mat-option [value]="'predefinedValue'">
         {{ 'widgets.value-source.predefined-value' | translate }}
@@ -27,13 +27,13 @@
       </mat-option>
     </mat-select>
   </mat-form-field>
-  <mat-form-field [fxShow]="valueSourceFormGroup.get('valueSource').value === 'predefinedValue'"
+  <mat-form-field [class.!hidden]="valueSourceFormGroup.get('valueSource').value !== 'predefinedValue'"
                   appearance="outline"
                   class="number flex"
                   subscriptSizing="dynamic">
     <input matInput formControlName="value" type="number" placeholder="{{ 'widgets.value-source.value' | translate }}">
   </mat-form-field>
-  <mat-form-field [fxShow]="valueSourceFormGroup.get('valueSource').value === 'entityAttribute'"
+  <mat-form-field [class.!hidden]="valueSourceFormGroup.get('valueSource').value !== 'entityAttribute'"
                   appearance="outline"
                   class="flex"
                   subscriptSizing="dynamic">
@@ -53,7 +53,7 @@
       </mat-option>
     </mat-autocomplete>
   </mat-form-field>
-  <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" [fxShow]="valueSourceFormGroup.get('valueSource').value === 'entityAttribute'">
+  <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" [class.!hidden]="valueSourceFormGroup.get('valueSource').value !== 'entityAttribute'">
     <input matInput type="text" placeholder="{{ entityAttributePlaceholder | translate }}"
            #keyInput
            formControlName="attribute"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html
index 38b71bf638..f192352d83 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html
@@ -15,19 +15,19 @@
     limitations under the License.
 
 -->
-<section [formGroup]="widgetFontFormGroup" fxLayout="column">
-  <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-    <mat-form-field fxFlex class="mat-block">
+<section [formGroup]="widgetFontFormGroup" class="flex flex-col">
+  <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.widget-font.font-family</mat-label>
       <input matInput formControlName="family">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>{{ sizeTitle }}</mat-label>
       <input matInput type="number" min="1" step="1" formControlName="size">
     </mat-form-field>
   </section>
-  <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-    <mat-form-field fxFlex class="mat-block">
+  <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.widget-font.font-style</mat-label>
       <mat-select formControlName="style">
         <mat-option [value]="'normal'">
@@ -41,7 +41,7 @@
         </mat-option>
       </mat-select>
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.widget-font.font-weight</mat-label>
       <mat-select formControlName="weight">
         <mat-option [value]="'normal'">
@@ -68,16 +68,16 @@
       </mat-select>
     </mat-form-field>
   </section>
-  <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
+  <section class="flex flex-row xs:flex-col gt-xs:gap-2">
     <tb-color-input
-      fxFlex
+      class="flex-1"
       formControlName="color"
       icon="format_color_fill"
       label="{{ 'widgets.widget-font.color' | translate }}" openOnInput colorClearButton>
     </tb-color-input>
     <tb-color-input
       *ngIf="hasShadowColor"
-      fxFlex
+      class="flex-1"
       formControlName="shadowColor"
       icon="format_color_fill"
       label="{{ 'widgets.widget-font.shadow-color' | translate }}" openOnInput colorClearButton>

From 78dd5bdcfe36b45866e5f6226c12e45ea122a8ed Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Wed, 16 Oct 2024 13:28:46 +0300
Subject: [PATCH 20/34] Flex layout replacements. Switch to tailwind.css.

---
 ...custom-action-pretty-editor.component.html |   9 +-
 ...ction-pretty-resources-tabs.component.html |   5 +-
 .../common/action/custom-sample-html.raw      | 138 +++++++++---------
 ...value-action-settings-panel.component.html |  17 +--
 .../mobile-action-editor.component.html       |   2 +-
 ...value-action-settings-panel.component.html |  17 +--
 .../action/widget-action.component.html       |  16 +-
 .../widget-button-appearance.component.html   |  12 +-
 ...t-button-custom-style-panel.component.html |   2 +-
 .../chart-animation-settings.component.html   |   5 +-
 .../chart/chart-bar-settings.component.html   |   4 +-
 .../chart/chart-fill-settings.component.html  |   2 +-
 ...-series-chart-axis-settings.component.html |  15 +-
 ...-series-chart-grid-settings.component.html |   7 +-
 ...time-series-chart-state-row.component.html |   2 +-
 ...e-series-chart-states-panel.component.html |   5 +-
 ...rt-threshold-settings-panel.component.html |   8 +-
 ...ries-chart-thresholds-panel.component.html |   5 +-
 ...e-series-chart-y-axes-panel.component.html |   6 +-
 ...regation-bar-width-settings.component.html |   8 +-
 ...tatus-widget-state-settings.component.html |  40 ++---
 ...cada-symbol-object-settings.component.html |   8 +-
 .../device-key-autocomplete.component.html    |   2 +-
 ...nob-control-widget-settings.component.html |  26 ++--
 ...d-indicator-widget-settings.component.html |  26 ++--
 ...stent-table-widget-settings.component.html |  22 +--
 ...ound-switch-widget-settings.component.html |   4 +-
 .../control/rpc-button-style.component.html   |   8 +-
 .../rpc-shell-widget-settings.component.html  |   4 +-
 ...pc-terminal-widget-settings.component.html |  12 +-
 .../send-rpc-widget-settings.component.html   |  18 +--
 ...ngle-switch-widget-settings.component.html |  42 +++---
 ...lide-toggle-widget-settings.component.html |  10 +-
 .../slider-widget-settings.component.html     |  36 ++---
 ...tch-control-widget-settings.component.html |   4 +-
 .../switch-rpc-settings.component.html        |  26 ++--
 ...e-attribute-widget-settings.component.html |   8 +-
 37 files changed, 287 insertions(+), 294 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-editor.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-editor.component.html
index bc8d53ae12..d3ed0298ab 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-editor.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-editor.component.html
@@ -16,9 +16,10 @@
 
 -->
 <div class="tb-custom-action-pretty" tb-fullscreen [fullscreen]="fullscreen">
-  <div fxLayout="row" fxLayoutAlign="end center" class="tb-action-expand-button" [ngClass]="{'tb-fullscreen-editor': fullscreen}">
+  <div class="tb-action-expand-button flex flex-row items-center justify-end" [class.tb-fullscreen-editor]="fullscreen">
     <button *ngIf="!fullscreen"
-            mat-icon-button fxHide.lt-md
+            class="lt-md:!hidden"
+            mat-icon-button
             matTooltip="{{ 'widget.toggle-fullscreen' | translate }}"
             matTooltipPosition="above"
             (click)="fullscreen = true">
@@ -33,14 +34,14 @@
       <span translate>widget.toggle-fullscreen</span>
     </button>
   </div>
-  <div class="tb-custom-action-editor" [ngClass]="{'tb-fullscreen-editor': fullscreen}">
+  <div class="tb-custom-action-editor" [class.tb-fullscreen-editor]="fullscreen">
     <div *ngIf="!fullscreen; else fullscreenEditor">
       <tb-custom-action-pretty-resources-tabs [hasCustomFunction]="true"
                                               [action]="action" (actionUpdated)="onActionUpdated($event ? true : false)">
       </tb-custom-action-pretty-resources-tabs>
     </div>
     <ng-template #fullscreenEditor>
-      <div class="tb-fullscreen-panel tb-layout-fill" fxLayout="row">
+      <div class="tb-fullscreen-panel tb-layout-fill flex flex-row">
         <div #leftPanel class="tb-split tb-content">
           <tb-custom-action-pretty-resources-tabs [hasCustomFunction]="false"
                                                   [action]="action" (actionUpdated)="onActionUpdated($event ? true : false)">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-resources-tabs.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-resources-tabs.component.html
index f9610ecbee..eb2e0b5808 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-resources-tabs.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-resources-tabs.component.html
@@ -19,10 +19,9 @@
   <mat-tab label="{{ 'widget.resources' | translate }}" style="width: 100%; height: 100%;">
     <div class="tb-custom-action-editor-container" style="background-color: #fff;">
       <div class="mat-padding">
-        <div fxFlex fxLayout="row"
-             fxLayoutAlign="start center"
+        <div class="flex flex-1 flex-row items-center justify-start"
              *ngFor="let resource of action.customResources; let i = index" style="padding-top: 10px;">
-          <tb-resource-autocomplete fxFlex class="mat-block"
+          <tb-resource-autocomplete class="mat-block flex-1"
                                     subscriptSizing="dynamic"
                                     hideRequiredMarker required
                                     [allowAutocomplete]="resource.isModule"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-sample-html.raw b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-sample-html.raw
index 95e11ccef6..734773eb87 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-sample-html.raw
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-sample-html.raw
@@ -6,9 +6,9 @@
 <!-- -->
 <!--<form #editEntityForm="ngForm" [formGroup]="editEntityFormGroup"-->
 <!--      (ngSubmit)="save()"  class="edit-entity-form">-->
-<!--    <mat-toolbar fxLayout="row" color="primary">-->
+<!--    <mat-toolbar class="flex flex-row" color="primary">-->
 <!--        <h2>Edit {{entityType.toLowerCase()}} {{entityName}}</h2>-->
-<!--        <span fxFlex></span>-->
+<!--        <span class="flex-1"></span>-->
 <!--        <button mat-icon-button (click)="cancel()" type="button">-->
 <!--            <mat-icon class="material-icons">close</mat-icon>-->
 <!--        </button>-->
@@ -16,57 +16,57 @@
 <!--    <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">-->
 <!--    </mat-progress-bar>-->
 <!--    <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>-->
-<!--    <div mat-dialog-content fxLayout="column">-->
-<!--        <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
-<!--            <mat-form-field fxFlex class="mat-block">-->
+<!--    <div mat-dialog-content class="flex flex-col">-->
+<!--        <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
+<!--            <mat-form-field class="mat-block flex-1">-->
 <!--                <mat-label>Entity Name</mat-label>-->
 <!--                <input matInput formControlName="entityName" required readonly="">-->
 <!--            </mat-form-field>-->
-<!--            <mat-form-field fxFlex class="mat-block">-->
+<!--            <mat-form-field class="mat-block flex-1">-->
 <!--                <mat-label>Entity Label</mat-label>-->
 <!--                <input matInput formControlName="entityLabel">-->
 <!--            </mat-form-field>-->
 <!--        </div>-->
-<!--        <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
-<!--            <mat-form-field fxFlex class="mat-block">-->
+<!--        <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
+<!--            <mat-form-field class="mat-block flex-1">-->
 <!--                <mat-label>Entity Type</mat-label>-->
 <!--                <input matInput formControlName="entityType" readonly>-->
 <!--            </mat-form-field>-->
-<!--            <mat-form-field fxFlex class="mat-block">-->
+<!--            <mat-form-field class="mat-block flex-1">-->
 <!--                <mat-label>Type</mat-label>-->
 <!--                <input matInput formControlName="type" readonly>-->
 <!--            </mat-form-field>-->
 <!--        </div>-->
-<!--        <div formGroupName="attributes" fxLayout="column">-->
-<!--            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
-<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--        <div formGroupName="attributes" class="flex flex-col">-->
+<!--            <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
+<!--                <mat-form-field class="mat-block flex-1">-->
 <!--                    <mat-label>Latitude</mat-label>-->
 <!--                    <input type="number" step="any" matInput formControlName="latitude">-->
 <!--                </mat-form-field>-->
-<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                <mat-form-field class="mat-block flex-1">-->
 <!--                    <mat-label>Longitude</mat-label>-->
 <!--                    <input type="number" step="any" matInput formControlName="longitude">-->
 <!--                </mat-form-field>-->
 <!--            </div>-->
-<!--            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
-<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--            <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
+<!--                <mat-form-field class="mat-block flex-1">-->
 <!--                    <mat-label>Address</mat-label>-->
 <!--                    <input matInput formControlName="address">-->
 <!--                </mat-form-field>-->
-<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                <mat-form-field class="mat-block flex-1">-->
 <!--                    <mat-label>Owner</mat-label>-->
 <!--                    <input matInput formControlName="owner">-->
 <!--                </mat-form-field>-->
 <!--            </div>-->
-<!--            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
-<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--            <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
+<!--                <mat-form-field class="mat-block flex-1">-->
 <!--                    <mat-label>Integer Value</mat-label>-->
 <!--                    <input type="number" step="1" matInput formControlName="number">-->
 <!--                    <mat-error *ngIf="editEntityFormGroup.get('attributes.number').hasError('pattern')">-->
 <!--                        Invalid integer value.-->
 <!--                    </mat-error>-->
 <!--                </mat-form-field>-->
-<!--                <div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex>-->
+<!--                <div class="boolean-value-input flex flex-1 flex-col items-start justify-center">-->
 <!--                    <label class="checkbox-label">Boolean Value</label>-->
 <!--                    <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">-->
 <!--                        {{ (editEntityFormGroup.get('attributes.booleanValue').value ? "value.true" : "value.false") | translate }}-->
@@ -76,12 +76,12 @@
 <!--        </div>-->
 <!--        <div class="relations-list old-relations">-->
 <!--            <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>-->
-<!--            <div class="body" [fxShow]="oldRelations().length">-->
-<!--                <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="oldRelations" -->
+<!--            <div class="body" [class.!hidden]="!oldRelations().length">-->
+<!--                <div class="row flex flex-row items-center justify-start" formArrayName="oldRelations" -->
 <!--                     *ngFor="let relation of oldRelations().controls; let i = index;">-->
-<!--                    <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">-->
-<!--                        <div fxFlex fxLayout="column">-->
-<!--                            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--                    <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">-->
+<!--                        <div class="flex flex-1 flex-col">-->
+<!--                            <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
 <!--                                <mat-form-field class="mat-block" style="min-width: 100px;">-->
 <!--                                    <mat-label>Direction</mat-label>-->
 <!--                                    <mat-select formControlName="direction" name="direction">-->
@@ -94,20 +94,20 @@
 <!--                                    </mat-error>-->
 <!--                                </mat-form-field>-->
 <!--                                <tb-relation-type-autocomplete-->
-<!--                                        fxFlex class="mat-block"-->
+<!--                                        class="mat-block flex-1"-->
 <!--                                        formControlName="relationType"-->
 <!--                                        required="true">-->
 <!--                                </tb-relation-type-autocomplete>-->
 <!--                            </div>-->
-<!--                            <div fxLayout="row" fxLayout.xs="column">-->
+<!--                            <div class="flex flex-row xs:flex-col">-->
 <!--                                <tb-entity-select-->
-<!--                                        fxFlex class="mat-block"-->
+<!--                                        class="mat-block flex-1"-->
 <!--                                        required="true"-->
 <!--                                        formControlName="relatedEntity">-->
 <!--                                </tb-entity-select>-->
 <!--                            </div>-->
 <!--                        </div>-->
-<!--                        <div fxLayout="column" fxLayoutAlign="center center">-->
+<!--                        <div class="flex flex-col items-center justify-center">-->
 <!--                            <button mat-icon-button color="primary"-->
 <!--                                    aria-label="Remove"-->
 <!--                                    type="button"-->
@@ -123,11 +123,11 @@
 <!--        </div>-->
 <!--        <div class="relations-list">-->
 <!--            <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">New Relations</div>-->
-<!--            <div class="body" [fxShow]="relations().length">-->
-<!--                <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">-->
-<!--                    <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">-->
-<!--                        <div fxFlex fxLayout="column">-->
-<!--                            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--            <div class="body" [class.!hidden]="!relations().length">-->
+<!--                <div class="row flex flex-row items-center justify-start" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">-->
+<!--                    <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">-->
+<!--                        <div class="flex flex-1 flex-col">-->
+<!--                            <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
 <!--                                <mat-form-field class="mat-block" style="min-width: 100px;">-->
 <!--                                    <mat-label>Direction</mat-label>-->
 <!--                                    <mat-select formControlName="direction" name="direction">-->
@@ -140,20 +140,20 @@
 <!--                                    </mat-error>-->
 <!--                                </mat-form-field>-->
 <!--                                <tb-relation-type-autocomplete-->
-<!--                                        fxFlex class="mat-block"-->
+<!--                                        class="mat-block flex-1"-->
 <!--                                        formControlName="relationType"-->
 <!--                                        [required]="true">-->
 <!--                                </tb-relation-type-autocomplete>-->
 <!--                            </div>-->
-<!--                            <div fxLayout="row" fxLayout.xs="column">-->
+<!--                            <div class="flex flex-row xs:flex-col">-->
 <!--                                <tb-entity-select-->
-<!--                                        fxFlex class="mat-block"-->
+<!--                                        class="mat-block flex-1"-->
 <!--                                        [required]="true"-->
 <!--                                        formControlName="relatedEntity">-->
 <!--                                </tb-entity-select>-->
 <!--                            </div>-->
 <!--                        </div>-->
-<!--                        <div fxLayout="column" fxLayoutAlign="center center">-->
+<!--                        <div class="flex flex-col items-center justify-center">-->
 <!--                            <button mat-icon-button color="primary"-->
 <!--                                    aria-label="Remove"-->
 <!--                                    type="button"-->
@@ -177,7 +177,7 @@
 <!--            </div>-->
 <!--        </div>-->
 <!--    </div>-->
-<!--    <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">-->
+<!--    <div mat-dialog-actions class="flex flex-row items-center justify-end">-->
 <!--        <button mat-button color="primary"-->
 <!--                type="button"-->
 <!--                [disabled]="(isLoading$ | async)"-->
@@ -198,9 +198,9 @@
 <!---->
 <!--<form #addEntityForm="ngForm" [formGroup]="addEntityFormGroup"-->
 <!--      (ngSubmit)="save()" class="add-entity-form">-->
-<!--    <mat-toolbar fxLayout="row" color="primary">-->
+<!--    <mat-toolbar class="flex flex-row" color="primary">-->
 <!--        <h2>Add entity</h2>-->
-<!--        <span fxFlex></span>-->
+<!--        <span class="flex-1"></span>-->
 <!--        <button mat-icon-button (click)="cancel()" type="button">-->
 <!--            <mat-icon class="material-icons">close</mat-icon>-->
 <!--        </button>-->
@@ -208,21 +208,21 @@
 <!--    <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">-->
 <!--    </mat-progress-bar>-->
 <!--    <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>-->
-<!--    <div mat-dialog-content fxLayout="column">-->
-<!--        <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
-<!--            <mat-form-field fxFlex class="mat-block">-->
+<!--    <div mat-dialog-content class="flex flex-col">-->
+<!--        <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
+<!--            <mat-form-field class="mat-block flex-1">-->
 <!--                <mat-label>Entity Name</mat-label>-->
 <!--                <input matInput formControlName="entityName" required>-->
 <!--                <mat-error *ngIf="addEntityFormGroup.get('entityName').hasError('required')">-->
 <!--                    Entity name is required.-->
 <!--                </mat-error>-->
 <!--            </mat-form-field>-->
-<!--            <mat-form-field fxFlex class="mat-block">-->
+<!--            <mat-form-field class="mat-block flex-1">-->
 <!--                <mat-label>Entity Label</mat-label>-->
 <!--                <input matInput formControlName="entityLabel" >-->
 <!--            </mat-form-field>-->
 <!--        </div>-->
-<!--        <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--        <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
 <!--            <tb-entity-type-select-->
 <!--                    class="mat-block"-->
 <!--                    formControlName="entityType"-->
@@ -230,50 +230,50 @@
 <!--                    [allowedEntityTypes]="allowedEntityTypes"-->
 <!--            ></tb-entity-type-select>-->
 <!--            <tb-entity-subtype-autocomplete-->
-<!--                    fxFlex *ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'"-->
-<!--                    class="mat-block"-->
+<!--                    *ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'"-->
+<!--                    class="mat-block flex-1"-->
 <!--                    formControlName="type"-->
 <!--                    [required]="true"-->
 <!--                    [entityType]="'ASSET'"-->
 <!--            ></tb-entity-subtype-autocomplete>-->
 <!--            <tb-entity-subtype-autocomplete-->
-<!--                    fxFlex *ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'"-->
-<!--                    class="mat-block"-->
+<!--                    *ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'"-->
+<!--                    class="mat-block flex-1"-->
 <!--                    formControlName="type"-->
 <!--                    [required]="true"-->
 <!--                    [entityType]="'DEVICE'"-->
 <!--            ></tb-entity-subtype-autocomplete>-->
 <!--        </div>-->
-<!--        <div formGroupName="attributes" fxLayout="column">-->
-<!--            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
-<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--        <div formGroupName="attributes" class="flex flex-col">-->
+<!--            <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
+<!--                <mat-form-field class="mat-block flex-1">-->
 <!--                    <mat-label>Latitude</mat-label>-->
 <!--                    <input type="number" step="any" matInput formControlName="latitude">-->
 <!--                </mat-form-field>-->
-<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                <mat-form-field class="mat-block flex-1">-->
 <!--                    <mat-label>Longitude</mat-label>-->
 <!--                    <input type="number" step="any" matInput formControlName="longitude">-->
 <!--                </mat-form-field>-->
 <!--            </div>-->
-<!--            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
-<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--            <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
+<!--                <mat-form-field class="mat-block flex-1">-->
 <!--                    <mat-label>Address</mat-label>-->
 <!--                    <input matInput formControlName="address">-->
 <!--                </mat-form-field>-->
-<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                <mat-form-field class="mat-block flex-1">-->
 <!--                    <mat-label>Owner</mat-label>-->
 <!--                    <input matInput formControlName="owner">-->
 <!--                </mat-form-field>-->
 <!--            </div>-->
-<!--            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
-<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--            <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
+<!--                <mat-form-field class="mat-block flex-1">-->
 <!--                    <mat-label>Integer Value</mat-label>-->
 <!--                    <input type="number" step="1" matInput formControlName="number">-->
 <!--                    <mat-error *ngIf="addEntityFormGroup.get('attributes.number').hasError('pattern')">-->
 <!--                        Invalid integer value.-->
 <!--                    </mat-error>-->
 <!--                </mat-form-field>-->
-<!--                <div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex>-->
+<!--                <div class="boolean-value-input flex flex-1 flex-col items-center justify-start">-->
 <!--                    <label class="checkbox-label">Boolean Value</label>-->
 <!--                    <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">-->
 <!--                        {{ (addEntityFormGroup.get('attributes.booleanValue').value ? "value.true" : "value.false") | translate }}-->
@@ -283,11 +283,11 @@
 <!--        </div>-->
 <!--        <div class="relations-list">-->
 <!--            <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>-->
-<!--            <div class="body" [fxShow]="relations().length">-->
-<!--                <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">-->
-<!--                    <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">-->
-<!--                        <div fxFlex fxLayout="column">-->
-<!--                            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--            <div class="body" [class.!hidden]="!relations().length">-->
+<!--                <div class="row flex flex-row items-center justify-start" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">-->
+<!--                    <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">-->
+<!--                        <div class="flex flex-1 flex-col">-->
+<!--                            <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
 <!--                                <mat-form-field class="mat-block" style="min-width: 100px;">-->
 <!--                                    <mat-label>Direction</mat-label>-->
 <!--                                    <mat-select formControlName="direction" name="direction">-->
@@ -300,20 +300,20 @@
 <!--                                    </mat-error>-->
 <!--                                </mat-form-field>-->
 <!--                                <tb-relation-type-autocomplete-->
-<!--                                        fxFlex class="mat-block"-->
+<!--                                        class="mat-block flex-1"-->
 <!--                                        formControlName="relationType"-->
 <!--                                        [required]="true">-->
 <!--                                </tb-relation-type-autocomplete>-->
 <!--                            </div>-->
-<!--                            <div fxLayout="row" fxLayout.xs="column">-->
+<!--                            <div class="flex flex-row xs:flex-col">-->
 <!--                                <tb-entity-select-->
-<!--                                        fxFlex class="mat-block"-->
+<!--                                        class="mat-block flex-1"-->
 <!--                                        [required]="true"-->
 <!--                                        formControlName="relatedEntity">-->
 <!--                                </tb-entity-select>-->
 <!--                            </div>-->
 <!--                        </div>-->
-<!--                        <div fxLayout="column" fxLayoutAlign="center center">-->
+<!--                        <div class="flex flex-col items-center justify-center">-->
 <!--                            <button mat-icon-button color="primary"-->
 <!--                                    aria-label="Remove"-->
 <!--                                    type="button"-->
@@ -337,7 +337,7 @@
 <!--            </div>-->
 <!--        </div>-->
 <!--    </div>-->
-<!--    <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">-->
+<!--    <div mat-dialog-actions class="flex flex-row items-center justify-end">-->
 <!--        <button mat-button color="primary"-->
 <!--                type="button"-->
 <!--                [disabled]="(isLoading$ | async)"-->
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings-panel.component.html
index 9826385d38..4e5e6709a6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings-panel.component.html
@@ -73,7 +73,7 @@
           <div class="tb-form-row">
             <div class="fixed-title-width" >{{ 'widgets.value-action.attribute-key' | translate }}*</div>
             <tb-device-key-autocomplete
-              fxFlex
+              class="flex-1"
               formControlName="key"
               required
               requiredText="widgets.value-action.attribute-key-required"
@@ -91,7 +91,7 @@
           <div class="tb-form-row">
             <div class="fixed-title-width" >{{ 'widgets.value-action.time-series-key' | translate }}*</div>
             <tb-device-key-autocomplete
-              fxFlex
+              class="flex-1"
               formControlName="key"
               required
               requiredText="widgets.value-action.time-series-key-required"
@@ -108,7 +108,7 @@
           class="tb-form-panel stroked" formGroupName="dataToValue">
       <div class="tb-form-row no-padding no-border column-xs">
         <div class="fixed-title-width" translate>widgets.value-action.action-result-converter</div>
-        <tb-toggle-select fxFlex formControlName="type">
+        <tb-toggle-select class="flex-1" formControlName="type">
           <tb-toggle-option [value]="dataToValueType.NONE">{{ 'widgets.value-action.converter-none' | translate }}</tb-toggle-option>
           <tb-toggle-option [value]="dataToValueType.FUNCTION">{{ 'widgets.value-action.converter-function' | translate }}</tb-toggle-option>
         </tb-toggle-select>
@@ -124,7 +124,7 @@
       <div *ngIf="valueType === ValueType.BOOLEAN" class="tb-form-row align-start no-gap column-xs">
         <div class="fixed-title-width fixed-title-height">{{ 'widgets.value-action.state-when-result-is' | translate:{state: stateLabel} }}</div>
         <tb-value-input
-          fxFlex
+          class="flex-1"
           [valueType]="(getValueSettingsFormGroup.get('action').value === getValueAction.GET_DASHBOARD_STATE &&
                         getValueSettingsFormGroup.get('dataToValue').get('type').value === dataToValueType.NONE) ? ValueType.STRING : null"
           layout="column"
@@ -135,10 +135,10 @@
     <div *ngIf="getValueSettingsFormGroup.get('action').value === getValueAction.EXECUTE_RPC"
          class="tb-form-panel no-border tb-slide-toggle" formGroupName="executeRpc">
       <mat-expansion-panel class="tb-settings no-padding">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" translate>
+          <mat-panel-description class="flex items-center justify-end" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
@@ -163,10 +163,9 @@
             <mat-expansion-panel class="tb-settings"
                                  [expanded]="getValueSettingsFormGroup.get('executeRpc').get('requestPersistent').value"
                                  [disabled]="!getValueSettingsFormGroup.get('executeRpc').get('requestPersistent').value">
-              <mat-expansion-panel-header fxLayout="row wrap">
+              <mat-expansion-panel-header class="flex flex-row flex-wrap">
                 <mat-panel-title>
-                  <mat-slide-toggle class="mat-slide" formControlName="requestPersistent" (click)="$event.stopPropagation()"
-                                    fxLayoutAlign="center">
+                  <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="requestPersistent" (click)="$event.stopPropagation()">
                     {{ 'widgets.value-action.request-persistent' | translate }}
                   </mat-slide-toggle>
                 </mat-panel-title>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.component.html
index 458e619185..a3d343e720 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.component.html
@@ -18,7 +18,7 @@
 <div class="tb-form-panel no-padding no-border" [formGroup]="mobileActionFormGroup">
   <div class="tb-form-row">
     <div class="fixed-title-width">{{ 'widget-action.mobile.action-type' | translate }}*</div>
-    <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
       <mat-select required formControlName="type" placeholder="{{ 'widget-action.mobile.select-action-type' | translate }}">
         <mat-option *ngFor="let actionType of mobileActionTypes" [value]="actionType">
           {{ mobileActionTypeTranslations.get(mobileActionType[actionType]) | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings-panel.component.html
index 954f284631..65b6354814 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings-panel.component.html
@@ -61,7 +61,7 @@
           <div class="tb-form-row">
             <div class="fixed-title-width" >{{ 'widgets.value-action.attribute-key' | translate }}*</div>
             <tb-device-key-autocomplete
-              fxFlex
+              class="flex-1"
               formControlName="key"
               required
               requiredText="widgets.value-action.attribute-key-required"
@@ -79,7 +79,7 @@
           <div class="tb-form-row">
             <div class="fixed-title-width" >{{ 'widgets.value-action.time-series-key' | translate }}*</div>
             <tb-device-key-autocomplete
-              fxFlex
+              class="flex-1"
               formControlName="key"
               required
               requiredText="widgets.value-action.time-series-key-required"
@@ -96,7 +96,7 @@
       <div class="tb-form-row no-padding no-border column-xs">
         <div class="fixed-title-width">{{ (setValueSettingsFormGroup.get('action').value === setValueAction.EXECUTE_RPC ?
           'widgets.value-action.parameters' : 'widgets.value-action.value') | translate }}</div>
-        <tb-toggle-select fxFlex formControlName="type">
+        <tb-toggle-select class="flex-1" formControlName="type">
           <tb-toggle-option *ngIf="valueType !== ValueType.BOOLEAN" [value]="valueToDataType.VALUE">{{ 'widgets.value-action.converter-value' | translate }}</tb-toggle-option>
           <tb-toggle-option *ngIf="valueType === ValueType.BOOLEAN" [value]="valueToDataType.CONSTANT">{{ 'widgets.value-action.converter-constant' | translate }}</tb-toggle-option>
           <tb-toggle-option [value]="valueToDataType.FUNCTION">{{ 'widgets.value-action.converter-function' | translate }}</tb-toggle-option>
@@ -105,7 +105,7 @@
         </tb-toggle-select>
       </div>
       <tb-value-input *ngIf="setValueSettingsFormGroup.get('valueToData').get('type').value === valueToDataType.CONSTANT"
-                      fxFlex
+                      class="flex-1"
                       [layout]="{
                               layout: 'row',
                               breakpoints: {xs: 'column'}
@@ -124,10 +124,10 @@
     <div *ngIf="setValueSettingsFormGroup.get('action').value === setValueAction.EXECUTE_RPC"
          class="tb-form-panel no-border tb-slide-toggle" formGroupName="executeRpc">
       <mat-expansion-panel class="tb-settings no-padding">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" translate>
+          <mat-panel-description class="flex items-center justify-end" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
@@ -152,10 +152,9 @@
             <mat-expansion-panel class="tb-settings"
                                  [expanded]="setValueSettingsFormGroup.get('executeRpc').get('requestPersistent').value"
                                  [disabled]="!setValueSettingsFormGroup.get('executeRpc').get('requestPersistent').value">
-              <mat-expansion-panel-header fxLayout="row wrap">
+              <mat-expansion-panel-header class="flex flex-row flex-wrap">
                 <mat-panel-title>
-                  <mat-slide-toggle class="mat-slide" formControlName="requestPersistent" (click)="$event.stopPropagation()"
-                                    fxLayoutAlign="center">
+                  <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="requestPersistent" (click)="$event.stopPropagation()">
                     {{ 'widgets.value-action.request-persistent' | translate }}
                   </mat-slide-toggle>
                 </mat-panel-title>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action.component.html
index be9b067d17..1b3213b251 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action.component.html
@@ -18,7 +18,7 @@
 <div class="tb-form-panel no-padding no-border" [formGroup]="widgetActionFormGroup">
   <div class="tb-form-row">
     <div translate>widget-config.action</div>
-    <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
       <mat-select required formControlName="type" placeholder="{{ 'widget-config.set' | translate }}">
         <mat-option *ngFor="let actionType of widgetActionTypes" [value]="actionType">
           {{ widgetActionTypeTranslations.get(widgetActionType[actionType]) | translate }}
@@ -30,7 +30,7 @@
     <ng-template [ngSwitchCase]="widgetActionType.openDashboard">
       <div class="tb-form-row">
         <div class="fixed-title-width">{{ 'widget-action.target-dashboard' | translate }}*</div>
-        <tb-dashboard-autocomplete fxFlex
+        <tb-dashboard-autocomplete class="flex-1"
             formControlName="targetDashboardId"
             required
             requiredText="widget-action.target-dashboard-required"
@@ -49,7 +49,7 @@
           <span>{{ 'widget-action.target-dashboard-state' | translate }}</span>
           <span *ngIf="widgetActionFormGroup.get('type').value === widgetActionType.openDashboardState">*</span>
         </div>
-        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic"
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic"
                         [class.tb-suffix-absolute]="!actionTypeFormGroup.get('targetDashboardStateId').value">
           <input matInput type="text" placeholder="{{ 'widget-action.target-dashboard-state' | translate }}"
                  #dashboardStateInput
@@ -85,7 +85,7 @@
     <ng-template [ngSwitchCase]="widgetActionType.openURL">
       <div class="tb-form-row">
         <div class="tb-required">{{ 'widget-action.URL' | translate }}</div>
-        <mat-form-field fxFlex style="margin-left: 9px" appearance="outline" subscriptSizing="dynamic">
+        <mat-form-field class="flex-1" style="margin-left: 9px" appearance="outline" subscriptSizing="dynamic">
           <input matInput placeholder="{{ 'widget-config.set' | translate }}" formControlName="url">
           <mat-icon matSuffix
                     matTooltipPosition="above"
@@ -127,7 +127,7 @@
       </div>
       <div class="tb-form-row" *ngIf="actionTypeFormGroup.get('setEntityId').value">
         <div class="fixed-title-width">{{ 'alias.state-entity-parameter-name' | translate }}</div>
-        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <input matInput
                  placeholder="{{ 'alias.default-entity-parameter-name' | translate }}"
                  formControlName="stateEntityParamName">
@@ -138,7 +138,7 @@
                                  widgetActionFormGroup.get('type').value : ''">
       <div class="tb-form-row">
         <div class="fixed-title-width">{{ 'widget-action.state-display-type' | translate }}</div>
-        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <mat-select formControlName="stateDisplayType">
             <mat-option *ngFor="let displayType of allStateDisplayTypes" [value]="displayType">
               {{ stateDisplayTypeName(displayType) }}
@@ -150,7 +150,7 @@
         <ng-template [ngSwitchCase]="'separateDialog'">
           <div class="tb-form-row">
             <div class="fixed-title-width">{{ 'widget-action.dialog-title' | translate }}</div>
-            <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+            <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
               <input matInput placeholder="{{ 'widget-config.set' | translate }}" formControlName="dialogTitle">
             </mat-form-field>
           </div>
@@ -191,7 +191,7 @@
         <ng-template [ngSwitchCase]="'popover'">
           <div class="tb-form-row">
             <div class="fixed-title-width">{{ 'widget-action.popover-preferred-placement' | translate }}</div>
-            <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+            <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
               <mat-select formControlName="popoverPreferredPlacement">
                 <mat-option *ngFor="let placement of allPopoverPlacements" [value]="placement">
                   {{ popoverPlacementName(placement) }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.html
index b6775d0d80..634bc11605 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.html
@@ -45,11 +45,11 @@
     <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
       {{ 'widgets.button.icon' | translate }}
     </mat-slide-toggle>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div class="flex flex-1 flex-row items-center justify-start gap-2">
       <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
         <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
-      <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+      <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
       <tb-material-icon-select asBoxInput
                                iconClearButton
                                formControlName="icon">
@@ -62,15 +62,15 @@
   </div>
   <div class="tb-form-row space-between column-xs">
     <div>{{ 'widgets.button.color-palette' | translate }}</div>
-    <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div class="flex flex-row items-center justify-start gap-3">
+      <div class="flex flex-row items-center justify-start gap-2">
         <div translate>widgets.button.main</div>
         <tb-color-input asBoxInput
                         formControlName="mainColor">
         </tb-color-input>
       </div>
       <mat-divider vertical></mat-divider>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <div translate>widgets.button.background</div>
         <tb-color-input asBoxInput
                         formControlName="backgroundColor">
@@ -80,7 +80,7 @@
   </div>
   <div class="tb-form-panel stroked" formGroupName="customStyle">
     <mat-expansion-panel class="tb-settings">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
           <div class="tb-form-panel-title" translate>widgets.button.custom-styles</div>
         </mat-panel-title>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style-panel.component.html
index 86b5acde6e..e480dfe7c5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style-panel.component.html
@@ -77,7 +77,7 @@
         </div>
       </ng-template>
     </mat-menu>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-button
             color="primary"
             type="button"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-animation-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-animation-settings.component.html
index b0a091a5bc..cf96b7236b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-animation-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-animation-settings.component.html
@@ -19,10 +19,9 @@
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [(expanded)]="settingsExpanded"
                          [disabled]="!animationSettingsFormGroup.get('animation').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="animation" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="animation" (click)="$event.stopPropagation()">
             {{ 'widgets.chart.animation.animation' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-bar-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-bar-settings.component.html
index 7d3992008a..b863ffdac1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-bar-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-bar-settings.component.html
@@ -46,8 +46,8 @@
         {{ 'widgets.chart.bar.label' | translate }}
       </div>
     </mat-slide-toggle>
-    <div fxLayout="row" fxFlex.lt-md fxLayoutAlign="start center" fxLayoutGap="8px">
-      <mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
+    <div class="flex lt-md:flex-1 flex-row items-center justify-start gap-2">
+      <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="labelPosition">
           <mat-option *ngFor="let position of chartLabelPositions" [value]="position">
             {{ chartLabelPositionTranslations.get(position) | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-fill-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-fill-settings.component.html
index e56fc1ec00..bcd93ef9a0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-fill-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-fill-settings.component.html
@@ -35,7 +35,7 @@
     <ng-container *ngIf="fillSettingsFormGroup.get('type').value === ChartFillType.gradient" formGroupName="gradient">
       <div class="tb-form-row space-between column-xs">
         <div translate>widgets.chart.gradient-stops</div>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div class="tb-small-label" translate>widgets.chart.gradient-start</div>
           <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
             <input matInput formControlName="start" min="0" max="100" step="1"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings.component.html
index 49e0b9eab2..f7453b6b7e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings.component.html
@@ -19,10 +19,9 @@
   <div class="tb-form-panel stroked tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="alwaysExpanded || settingsExpanded"
                          [disabled]="alwaysExpanded || !axisSettingsFormGroup.get('show').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="show" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="show" (click)="$event.stopPropagation()">
             {{ 'widgets.time-series-chart.axis.show' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -30,7 +29,7 @@
       <ng-template matExpansionPanelContent>
         <div class="tb-form-row column-xs">
           <div class="fixed-title-width" translate>widgets.time-series-chart.axis.label</div>
-          <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-1 flex-row items-center justify-start gap-2">
             <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
               <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
             </mat-form-field>
@@ -69,7 +68,7 @@
           </mat-form-field>
         </div>
         <div *ngIf="axisType === 'yAxis' && advanced" class="tb-form-row">
-          <tb-js-func fxFlex
+          <tb-js-func class="flex-1"
                       formControlName="ticksGenerator"
                       [globalVariables]="functionScopeVariables"
                       [functionArgs]="['extent']"
@@ -82,7 +81,7 @@
             <mat-slide-toggle class="mat-slide" formControlName="showTickLabels">
               <div translate>widgets.time-series-chart.axis.tick-labels</div>
             </mat-slide-toggle>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-auto-date-format-settings *ngIf="axisType === 'xAxis'"
                                             formControlName="ticksFormat"
                                             [defaultValues]="defaultXAxisTicksFormat">
@@ -100,7 +99,7 @@
             </div>
           </div>
           <div *ngIf="axisType === 'yAxis' && advanced" class="tb-form-row no-border">
-            <tb-js-func fxFlex
+            <tb-js-func class="flex-1"
               formControlName="ticksFormatter"
               [globalVariables]="functionScopeVariables"
               [functionArgs]="['value']"
@@ -162,7 +161,7 @@
     <div *ngIf="axisType === 'yAxis'" class="tb-form-panel no-border no-padding-top">
       <div class="tb-form-row space-between column-xs">
         <div translate>widgets.chart.chart-axis.scale</div>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div class="tb-small-label" translate>widgets.chart.chart-axis.scale-min</div>
           <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
             <input matInput formControlName="min"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-grid-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-grid-settings.component.html
index 1b439e5bea..c7d63e2214 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-grid-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-grid-settings.component.html
@@ -19,10 +19,9 @@
   <div class="tb-form-panel stroked tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [(expanded)]="settingsExpanded"
                          [disabled]="!gridSettingsFormGroup.get('show').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="show" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="show" (click)="$event.stopPropagation()">
             {{ 'widgets.time-series-chart.grid.grid' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -37,7 +36,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'widgets.time-series-chart.grid.border' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
               <input matInput formControlName="borderWidth" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
               <span matSuffix>px</span>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-state-row.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-state-row.component.html
index a2e11c3a8e..11e93d734f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-state-row.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-state-row.component.html
@@ -33,7 +33,7 @@
     <tb-value-input
         *ngIf="stateFormGroup.get('sourceType').value === TimeSeriesChartStateSourceType.constant"
         formControlName="sourceValue"
-        fxFlex
+        class="flex-1"
         [layout]="{
                     layout: 'column',
                     breakpoints: {'gt-sm': 'row'}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-states-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-states-panel.component.html
index 5db76d1493..6c3e4c481c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-states-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-states-panel.component.html
@@ -27,7 +27,7 @@
     </div>
     <div *ngIf="statesFormArray().controls.length; else noStates" class="tb-form-table-body">
       <div *ngFor="let stateControl of statesFormArray().controls; trackBy: trackByState; let $index = index; let $last = last">
-        <tb-time-series-chart-state-row fxFlex
+        <tb-time-series-chart-state-row class="flex-1"
                                         [formControl]="stateControl"
                                         (stateRemoved)="removeState($index)">
         </tb-time-series-chart-state-row>
@@ -42,6 +42,5 @@
   </div>
 </div>
 <ng-template #noStates>
-  <span fxLayoutAlign="center center"
-        class="tb-prompt">{{ 'widgets.time-series-chart.state.no-states' | translate }}</span>
+  <span class="tb-prompt flex items-center justify-center">{{ 'widgets.time-series-chart.state.no-states' | translate }}</span>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.html
index 8d8e4a007f..0b95869c2d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.html
@@ -44,8 +44,8 @@
       <mat-slide-toggle class="mat-slide" formControlName="showLabel">
         {{ 'widgets.time-series-chart.threshold.label' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxFlex.lt-md fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
+      <div class="flex lt-md:flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
           <mat-select formControlName="labelPosition">
             <mat-option *ngFor="let position of timeSeriesThresholdLabelPositions" [value]="position">
               {{ timeSeriesThresholdLabelPositionTranslations.get(position) | translate }}
@@ -101,7 +101,7 @@
       <div class="tb-form-row column-xs">
         <div translate>widgets.time-series-chart.threshold.start-symbol</div>
         <div class="tb-flex row flex-end">
-          <mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
+          <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="startSymbol">
               <mat-option *ngFor="let shape of chartShapes" [value]="shape">
                 {{ chartShapeTranslations.get(shape) | translate }}
@@ -118,7 +118,7 @@
       <div class="tb-form-row column-xs">
         <div translate>widgets.time-series-chart.threshold.end-symbol</div>
         <div class="tb-flex row flex-end">
-          <mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
+          <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="endSymbol">
               <mat-option *ngFor="let shape of chartShapes" [value]="shape">
                 {{ chartShapeTranslations.get(shape) | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-thresholds-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-thresholds-panel.component.html
index ba0325da93..eca14627de 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-thresholds-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-thresholds-panel.component.html
@@ -29,7 +29,7 @@
     </div>
     <div *ngIf="thresholdsFormArray().controls.length; else noThresholds" class="tb-form-table-body">
       <div *ngFor="let thresholdControl of thresholdsFormArray().controls; trackBy: trackByThreshold; let $index = index; let $last = last">
-        <tb-time-series-chart-threshold-row fxFlex
+        <tb-time-series-chart-threshold-row class="flex-1"
                                     [formControl]="thresholdControl"
                                     [hideYAxis]="hideYAxis"
                                     [yAxisIds]="yAxisIds"
@@ -46,6 +46,5 @@
   </div>
 </div>
 <ng-template #noThresholds>
-  <span fxLayoutAlign="center center"
-        class="tb-prompt">{{ 'widgets.time-series-chart.threshold.no-thresholds' | translate }}</span>
+  <span class="tb-prompt flex items-center justify-center">{{ 'widgets.time-series-chart.threshold.no-thresholds' | translate }}</span>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axes-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axes-panel.component.html
index d018b638d0..a12e1b3a7f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axes-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axes-panel.component.html
@@ -36,17 +36,17 @@
       <div cdkDrag [cdkDragDisabled]="!dragEnabled"
            class="tb-draggable-form-table-row"
            *ngFor="let axisControl of axesFormArray().controls; trackBy: trackByAxis; let $index = index;">
-        <tb-time-series-chart-y-axis-row fxFlex
+        <tb-time-series-chart-y-axis-row class="flex-1"
                                             [formControl]="axisControl"
                                             [advanced]="advanced"
                                             (axisRemoved)="removeAxis($index)">
         </tb-time-series-chart-y-axis-row>
         <div class="tb-form-table-row-cell-buttons">
-          <button fxHide.lt-lg
+          <button class="lt-lg:!hidden"
+                  [class.tb-hidden]="!dragEnabled"
                   mat-icon-button
                   type="button"
                   cdkDragHandle
-                  [ngClass]="{'tb-hidden': !dragEnabled}"
                   matTooltip="{{ 'action.drag' | translate }}"
                   matTooltipPosition="above">
             <mat-icon>drag_indicator</mat-icon>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-no-aggregation-bar-width-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-no-aggregation-bar-width-settings.component.html
index 28c79a1310..3e4eae3125 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-no-aggregation-bar-width-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-no-aggregation-bar-width-settings.component.html
@@ -16,8 +16,8 @@
 
 -->
 <div class="tb-form-panel" [class.stroked]="stroked" [formGroup]="barWidthSettingsFormGroup">
-  <div fxLayout="row" fxLayoutAlign="space-between center">
-    <div fxFlex translate>widgets.time-series-chart.no-aggregation-bar-width-strategy</div>
+  <div class="flex flex-row items-center justify-between">
+    <div class="flex-1" translate>widgets.time-series-chart.no-aggregation-bar-width-strategy</div>
     <tb-toggle-select formControlName="strategy" selectMediaBreakpoint="xs">
       <tb-toggle-option *ngFor="let strategy of timeSeriesChartNoAggregationBarWidthStrategies" [value]="strategy">
         {{ timeSeriesChartNoAggregationBarWidthStrategyTranslations.get(strategy) | translate }}
@@ -46,8 +46,8 @@
 <ng-template #barWidth let-label="label" let-formGroup="formGroup">
   <div class="tb-form-row space-between column-lt-md" [formGroup]="formGroup">
     <div translate>{{ label }}</div>
-    <div fxLayout="row" fxFlex.lt-md fxLayoutAlign="start center" fxLayoutGap="8px">
-      <mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
+    <div class="flex lt-md:flex-1 flex-row items-center justify-start gap-2">
+      <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="relative">
           <mat-select-trigger>
             {{ (formGroup.get('relative').value ?
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.html
index 5e761c52cc..c3dbe49abf 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.html
@@ -20,7 +20,7 @@
     <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
       {{ 'widgets.status-widget.label' | translate }}
     </mat-slide-toggle>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div class="flex flex-1 flex-row items-center justify-start gap-2">
       <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
         <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
@@ -33,7 +33,7 @@
     <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showStatus">
       {{ 'widgets.status-widget.status' | translate }}
     </mat-slide-toggle>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div class="flex flex-1 flex-row items-center justify-start gap-2">
       <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
         <input matInput formControlName="status" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
@@ -46,11 +46,11 @@
     <div class="fixed-title-width">
       {{ 'widgets.status-widget.icon' | translate }}
     </div>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div class="flex flex-1 flex-row items-center justify-start gap-2">
       <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
         <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
-      <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+      <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
       <tb-material-icon-select asBoxInput
                                formControlName="icon">
       </tb-material-icon-select>
@@ -58,24 +58,24 @@
   </div>
   <div class="tb-form-row space-between" [class]="{'column-xs': layout === StatusWidgetLayout.icon, 'column-lt-md': layout !== StatusWidgetLayout.icon}">
     <div>{{ 'widgets.status-widget.color-palette' | translate }}</div>
-    <div fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutAlign.lt-sm="space-between center"
-         [fxLayoutAlign.lt-md]="layout !== StatusWidgetLayout.icon ? 'space-between center': 'start center'"
-         style="gap: 12px;">
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div class="flex flex-row flex-wrap items-center justify-start gap-3 lt-sm:justify-between"
+         [class.lt-md:justify-start]="layout === StatusWidgetLayout.icon"
+         [class.lt-md:justify-between]="layout !== StatusWidgetLayout.icon">
+      <div class="flex flex-row items-center justify-start gap-2">
         <div tb-hint-tooltip-icon="{{'widgets.status-widget.primary-color-hint' | translate}}" translate>widgets.status-widget.primary</div>
         <tb-color-input asBoxInput
                         formControlName="primaryColor">
         </tb-color-input>
       </div>
-      <mat-divider *ngIf="layout !== StatusWidgetLayout.icon" vertical fxHide.lt-md></mat-divider>
-      <div *ngIf="layout !== StatusWidgetLayout.icon" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <mat-divider *ngIf="layout !== StatusWidgetLayout.icon" vertical class="lt-md:!hidden"></mat-divider>
+      <div *ngIf="layout !== StatusWidgetLayout.icon" class="flex flex-row items-center justify-start gap-2">
         <div tb-hint-tooltip-icon="{{'widgets.status-widget.secondary-color-hint' | translate}}" translate>widgets.status-widget.secondary</div>
         <tb-color-input asBoxInput
                         formControlName="secondaryColor">
         </tb-color-input>
       </div>
-      <mat-divider vertical fxHide.lt-sm [fxHide.lt-md]="layout !== StatusWidgetLayout.icon"></mat-divider>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <mat-divider vertical class="lt-sm:!hidden" [class.lt-md:!hidden]="layout !== StatusWidgetLayout.icon"></mat-divider>
+      <div class="flex flex-row items-center justify-start gap-2">
         <div translate>widgets.status-widget.background</div>
         <tb-background-settings formControlName="background">
         </tb-background-settings>
@@ -84,24 +84,24 @@
   </div>
   <div class="tb-form-row space-between" [class]="{'column-xs': layout === StatusWidgetLayout.icon, 'column-lt-md': layout !== StatusWidgetLayout.icon}">
     <div>{{ 'widgets.status-widget.disabled-color-palette' | translate }}</div>
-    <div fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutAlign.lt-sm="space-between center"
-         [fxLayoutAlign.lt-md]="layout !== StatusWidgetLayout.icon ? 'space-between center': 'start center'"
-         style="gap: 12px;">
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div class="flex flex-row flex-wrap items-center justify-start gap-3 lt-sm:justify-between"
+         [class.lt-md:justify-start]="layout === StatusWidgetLayout.icon"
+         [class.lt-md:justify-between]="layout !== StatusWidgetLayout.icon">
+      <div class="flex flex-row items-center justify-start gap-2">
         <div tb-hint-tooltip-icon="{{'widgets.status-widget.primary-color-hint' | translate}}" translate>widgets.status-widget.primary</div>
         <tb-color-input asBoxInput
                         formControlName="primaryColorDisabled">
         </tb-color-input>
       </div>
-      <mat-divider *ngIf="layout !== StatusWidgetLayout.icon" vertical fxHide.lt-md></mat-divider>
-      <div *ngIf="layout !== StatusWidgetLayout.icon" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <mat-divider *ngIf="layout !== StatusWidgetLayout.icon" vertical class="lt-md:!hidden"></mat-divider>
+      <div *ngIf="layout !== StatusWidgetLayout.icon" class="flex flex-row items-center justify-start gap-2">
         <div tb-hint-tooltip-icon="{{'widgets.status-widget.secondary-color-hint' | translate}}" translate>widgets.status-widget.secondary</div>
         <tb-color-input asBoxInput
                         formControlName="secondaryColorDisabled">
         </tb-color-input>
       </div>
-      <mat-divider vertical fxHide.lt-sm [fxHide.lt-md]="layout !== StatusWidgetLayout.icon"></mat-divider>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <mat-divider vertical class="lt-sm:!hidden" [class.lt-md:!hidden]="layout !== StatusWidgetLayout.icon"></mat-divider>
+      <div class="flex flex-row items-center justify-start gap-2">
         <div translate>widgets.status-widget.background</div>
         <tb-background-settings formControlName="backgroundDisabled">
         </tb-background-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.html
index eb056bd056..c8a0c5cb2a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.html
@@ -21,7 +21,7 @@
     <ng-container *ngFor="let behaviorGroup of behaviorGroups">
       <div *ngIf="behaviorGroup.title" class="tb-form-panel stroked">
         <mat-expansion-panel class="tb-settings" expanded>
-          <mat-expansion-panel-header fxLayout="row wrap">
+          <mat-expansion-panel-header class="flex flex-row flex-wrap">
             <mat-panel-title>
               <div class="tb-form-panel-title">{{ behaviorGroup.title | customTranslate }}</div>
             </mat-panel-title>
@@ -36,7 +36,7 @@
       </ng-container>
     </ng-container>
   </div>
-  <div [fxShow]="propertyRows?.length || appearanceProperties.children.length" class="tb-form-panel" formGroupName="properties">
+  <div [class.!hidden]="!propertyRows?.length && !appearanceProperties.children.length" class="tb-form-panel" formGroupName="properties">
     <div class="tb-form-panel-title" translate>widget-config.appearance</div>
     <div #appearanceProperties><ng-content select=".tb-scada-symbol-appearance-properties"></ng-content></div>
     <div *ngFor="let propertyRow of propertyRows" class="tb-form-row space-between flex-wrap overflow-auto" [class]="propertyRow.rowClass">
@@ -49,7 +49,7 @@
           <div *ngIf="property.subLabel" class="tb-small-label">{{ property.subLabel | customTranslate }}</div>
           <mat-form-field  *ngIf="property.type === ScadaSymbolPropertyType.text" [class]="property.fieldClass" appearance="outline" subscriptSizing="dynamic">
             <input matInput formControlName="{{ property.id }}" [required]="property.required" placeholder="{{ 'widget-config.set' | translate }}">
-            <div fxHide.lt-md matSuffix *ngIf="property.fieldSuffix">{{ property.fieldSuffix | customTranslate }}</div>
+            <div class="lt-md:!hidden" matSuffix *ngIf="property.fieldSuffix">{{ property.fieldSuffix | customTranslate }}</div>
           </mat-form-field>
           <tb-color-input *ngIf="property.type === ScadaSymbolPropertyType.color"
                           [required]="property.required"
@@ -67,7 +67,7 @@
             <input matInput formControlName="{{ property.id }}" [required]="property.required"
                    [min]="property.min" [max]="property.max" [step]="property.step"
                    type="number" placeholder="{{ 'widget-config.set' | translate }}">
-            <div fxHide.lt-md matSuffix *ngIf="property.fieldSuffix">{{ property.fieldSuffix | customTranslate }}</div>
+            <div class="lt-md:!hidden" matSuffix *ngIf="property.fieldSuffix">{{ property.fieldSuffix | customTranslate }}</div>
           </mat-form-field>
           <tb-font-settings *ngIf="property.type === ScadaSymbolPropertyType.font"
                             [class]="property.fieldClass"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/device-key-autocomplete.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/device-key-autocomplete.component.html
index 977a493c5f..668613012e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/device-key-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/device-key-autocomplete.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field fxFlex [appearance]="inlineField ? 'outline': 'fill'"
+<mat-form-field class="flex-1" [appearance]="inlineField ? 'outline': 'fill'"
                 [subscriptSizing]="inlineField ? 'dynamic' : 'fixed'"
                 [class]="{'tb-inline-field': inlineField, 'flex': inlineField,
                           'tb-suffix-absolute': (inlineField && !deviceKeyFormGroup.get('key').value)}"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/knob-control-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/knob-control-widget-settings.component.html
index 43e70f8810..c8178c1c68 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/knob-control-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/knob-control-widget-settings.component.html
@@ -15,61 +15,61 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="knobControlWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="knobControlWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.knob-title</mat-label>
       <input matInput formControlName="title">
     </mat-form-field>
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.value-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.initial-value</mat-label>
       <input matInput type="number" formControlName="initialValue">
     </mat-form-field>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.rpc.min-value</mat-label>
         <input required matInput type="number" formControlName="minValue">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.rpc.max-value</mat-label>
         <input required matInput type="number" formControlName="maxValue">
       </mat-form-field>
     </section>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.get-value-method</mat-label>
       <input required matInput formControlName="getValueMethod">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.set-value-method</mat-label>
       <input required matInput formControlName="setValueMethod">
     </mat-form-field>
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.rpc-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.request-timeout</mat-label>
       <input required matInput type="number" min="0" formControlName="requestTimeout">
     </mat-form-field>
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.rpc.persistent-rpc-settings</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="knobControlWidgetSettingsForm.get('requestPersistent').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
             <mat-slide-toggle formControlName="requestPersistent" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+                              class="flex items-stretch justify-center">
               {{ 'widgets.rpc.request-persistent' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.rpc.persistent-polling-interval</mat-label>
             <input matInput type="number" min="1000" formControlName="persistentPollingInterval">
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/led-indicator-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/led-indicator-widget-settings.component.html
index fa66dd6be1..1810813d89 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/led-indicator-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/led-indicator-widget-settings.component.html
@@ -15,14 +15,14 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="ledIndicatorWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="ledIndicatorWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.led-title</mat-label>
       <input matInput formControlName="title">
     </mat-form-field>
-    <tb-color-input fxFlex
+    <tb-color-input class="flex-1"
                     formControlName="ledColor"
                     icon="format_color_fill"
                     label="{{ 'widgets.rpc.led-color' | translate }}" openOnInput colorClearButton>
@@ -38,7 +38,7 @@
       <mat-slide-toggle formControlName="performCheckStatus" class="slide-block">
         {{ 'widgets.rpc.perform-rpc-status-check' | translate }}
       </mat-slide-toggle>
-      <mat-form-field [fxShow]="!ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" fxFlex class="mat-block">
+      <mat-form-field [class.!hidden]="ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" class="mat-block flex-1">
         <mat-label translate>widgets.rpc.retrieve-led-status-value-method</mat-label>
         <mat-select formControlName="retrieveValueMethod">
           <mat-option [value]="'attribute'">
@@ -49,8 +49,8 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <tb-device-key-autocomplete fxFlex
-                                  [fxShow]="!ledIndicatorWidgetSettingsForm.get('performCheckStatus').value"
+      <tb-device-key-autocomplete class="flex-1"
+                                  [class.!hidden]="ledIndicatorWidgetSettingsForm.get('performCheckStatus').value"
                                   [aliasController]="aliasController"
                                   [targetDevice]="targetDevice"
                                   [keyType]="ledIndicatorWidgetSettingsForm.get('retrieveValueMethod').value === 'attribute' ? dataKeyType.attribute : dataKeyType.timeseries"
@@ -59,7 +59,7 @@
                                   required
                                   formControlName="valueAttribute">
       </tb-device-key-autocomplete>
-      <mat-form-field [fxShow]="ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" fxFlex class="mat-block">
+      <mat-form-field [class.!hidden]="!ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" class="flex-1 mat-block">
         <mat-label translate>widgets.rpc.check-status-method</mat-label>
         <input required matInput formControlName="checkStatusMethod">
       </mat-form-field>
@@ -71,28 +71,28 @@
       </tb-js-func>
     </fieldset>
   </fieldset>
-  <fieldset [fxShow]="ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" class="fields-group">
+  <fieldset [class.!hidden]="!ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" class="fields-group">
     <legend class="group-title" translate>widgets.rpc.rpc-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.request-timeout</mat-label>
       <input matInput type="number" min="0" formControlName="requestTimeout">
     </mat-form-field>
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.rpc.persistent-rpc-settings</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="ledIndicatorWidgetSettingsForm.get('requestPersistent').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
             <mat-slide-toggle formControlName="requestPersistent" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+                              class="flex items-stretch justify-center">
               {{ 'widgets.rpc.request-persistent' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.rpc.persistent-polling-interval</mat-label>
             <input matInput type="number" min="1000" formControlName="persistentPollingInterval">
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html
index 6bb7428b7f..229cb21adc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html
@@ -15,16 +15,16 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="persistentTableWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="persistentTableWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.persistent-table.general-settings</legend>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
-      <section fxLayout="column" fxFlex>
+    <section class="flex flex-col gt-xs:flex-row gt-xs:gap-2">
+      <section class="flex flex-1 flex-col">
         <mat-checkbox formControlName="enableFilter">
           {{ 'widgets.persistent-table.enable-filter' | translate }}
         </mat-checkbox>
       </section>
-      <section fxLayout="column" fxFlex>
+      <section class="flex flex-1 flex-col">
         <mat-checkbox formControlName="enableStickyHeader">
           {{ 'widgets.persistent-table.enable-sticky-header' | translate }}
         </mat-checkbox>
@@ -33,8 +33,8 @@
         </mat-checkbox>
       </section>
     </section>
-    <section fxLayout="column" fxLayoutGap.gt-xs="8px">
-      <mat-slide-toggle fxFlex formControlName="displayDetails">
+    <section class="flex flex-col gt-xs:gap-2">
+      <mat-slide-toggle class="flex-1" formControlName="displayDetails">
         {{ 'widgets.persistent-table.display-request-details' | translate }}
       </mat-slide-toggle>
       <mat-slide-toggle formControlName="allowSendRequest">
@@ -43,16 +43,16 @@
       <mat-slide-toggle formControlName="allowDelete">
         {{ 'widgets.persistent-table.allow-delete-request' | translate }}
       </mat-slide-toggle>
-      <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center">
-        <mat-slide-toggle fxFlex formControlName="displayPagination">
+      <section class="flex flex-col gap-2 gt-xs:flex-row gt-xs:items-center gt-xs:justify-start">
+        <mat-slide-toggle class="flex-1" formControlName="displayPagination">
           {{ 'widgets.table.display-pagination' | translate }}
         </mat-slide-toggle>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.table.default-page-size</mat-label>
           <input matInput type="number" min="1" step="1" formControlName="defaultPageSize">
         </mat-form-field>
       </section>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.table.default-sort-order</mat-label>
         <input matInput formControlName="defaultSortOrder">
       </mat-form-field>
@@ -60,7 +60,7 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.persistent-table.columns-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.persistent-table.display-columns</mat-label>
       <mat-chip-grid #columnsChipList class="tb-drop-list"
                      required
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/round-switch-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/round-switch-widget-settings.component.html
index bf5d120732..461020f887 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/round-switch-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/round-switch-widget-settings.component.html
@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="roundSwitchWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="roundSwitchWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.switch-title</mat-label>
       <input matInput formControlName="title">
     </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-button-style.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-button-style.component.html
index c424886e8f..ed55cd5344 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-button-style.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-button-style.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="rpcButtonStyleFormGroup" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="rpcButtonStyleFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.button-style</legend>
     <mat-slide-toggle formControlName="isRaised" class="slide-block">
@@ -24,13 +24,13 @@
     <mat-slide-toggle formControlName="isPrimary" class="slide-block">
       {{ 'widgets.rpc.button-primary' | translate }}
     </mat-slide-toggle>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-      <tb-color-input fxFlex
+    <section class="flex flex-row xs:flex-col gt-xs:gap-2">
+      <tb-color-input class="flex-1"
                       formControlName="textColor"
                       icon="format_color_fill"
                       label="{{ 'widgets.rpc.button-text-color' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
-      <tb-color-input fxFlex
+      <tb-color-input class="flex-1"
                       formControlName="bgColor"
                       icon="format_color_fill"
                       label="{{ 'widgets.rpc.button-background-color' | translate }}" openOnInput colorClearButton>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-shell-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-shell-widget-settings.component.html
index 4c7fc9b3d7..352f7fc02c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-shell-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-shell-widget-settings.component.html
@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="rpcShellWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="rpcShellWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.rpc-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.request-timeout</mat-label>
       <input required matInput type="number" min="0" formControlName="requestTimeout">
     </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-terminal-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-terminal-widget-settings.component.html
index df613761d2..a2391ad2d2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-terminal-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-terminal-widget-settings.component.html
@@ -15,29 +15,29 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="rpcTerminalWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="rpcTerminalWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.rpc-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.request-timeout</mat-label>
       <input required matInput type="number" min="0" formControlName="requestTimeout">
     </mat-form-field>
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.rpc.persistent-rpc-settings</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="rpcTerminalWidgetSettingsForm.get('requestPersistent').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
             <mat-slide-toggle formControlName="requestPersistent" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+                              class="flex items-stretch justify-center">
               {{ 'widgets.rpc.request-persistent' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.rpc.persistent-polling-interval</mat-label>
             <input matInput type="number" min="1000" formControlName="persistentPollingInterval">
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.html
index 294ff3ae38..f1e77d991e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.html
@@ -15,14 +15,14 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="sendRpcWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="sendRpcWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.widget-title</mat-label>
       <input matInput formControlName="title">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.button-label</mat-label>
       <input matInput formControlName="buttonText">
     </mat-form-field>
@@ -32,7 +32,7 @@
     <mat-checkbox formControlName="oneWayElseTwoWay">
       {{ 'widgets.rpc.is-one-way-command' | translate }}
     </mat-checkbox>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.rpc-method</mat-label>
       <input matInput formControlName="methodName">
     </mat-form-field>
@@ -42,7 +42,7 @@
       validateOnChange
       formControlName="methodParams">
     </tb-json-content>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.request-timeout</mat-label>
       <input matInput type="number" min="0" formControlName="requestTimeout">
     </mat-form-field>
@@ -52,19 +52,19 @@
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.rpc.persistent-rpc-settings</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="sendRpcWidgetSettingsForm.get('requestPersistent').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
             <mat-slide-toggle formControlName="requestPersistent" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+                              class="flex items-stretch justify-center">
               {{ 'widgets.rpc.request-persistent' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.rpc.persistent-polling-interval</mat-label>
             <input matInput type="number" min="1000" formControlName="persistentPollingInterval">
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
index d5df22f3a6..3f87cd6734 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
@@ -20,7 +20,7 @@
     <div class="tb-form-panel-title" translate>widgets.single-switch.behavior</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}" translate>widgets.rpc-state.initial-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.initial-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     trueLabel="{{ 'widgets.rpc-state.on' | translate }}"
@@ -33,7 +33,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.turn-on-hint' | translate}}" translate>widgets.rpc-state.turn-on</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.turn-on' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -42,7 +42,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.turn-off-hint' | translate}}" translate>widgets.rpc-state.turn-off</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.turn-off' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -51,7 +51,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
@@ -85,7 +85,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
         {{ 'widgets.single-switch.label' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -102,11 +102,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.single-switch.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="singleSwitchWidgetSettingsForm.get('iconColor').value?.color"
@@ -134,22 +134,22 @@
     <div class="tb-form-panel-title" translate>widgets.single-switch.switch</div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.single-switch.switch-color' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutAlign.lt-sm="space-between center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-3 lt-sm:justify-between">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.single-switch.on</div>
           <tb-color-input asBoxInput
                           formControlName="switchColorOn">
           </tb-color-input>
         </div>
-        <mat-divider vertical fxHide.lt-sm></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-divider vertical class="lt-sm:!hidden"></mat-divider>
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.single-switch.off</div>
           <tb-color-input asBoxInput
                           formControlName="switchColorOff">
           </tb-color-input>
         </div>
-        <mat-divider vertical fxHide.lt-sm></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-divider vertical class="lt-sm:!hidden"></mat-divider>
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.single-switch.disabled</div>
           <tb-color-input asBoxInput
                           formControlName="switchColorDisabled">
@@ -159,22 +159,22 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.single-switch.tumbler-color' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutAlign.lt-sm="space-between center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-3 lt-sm:justify-between">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.single-switch.on</div>
           <tb-color-input asBoxInput
                           formControlName="tumblerColorOn">
           </tb-color-input>
         </div>
-        <mat-divider vertical fxHide.lt-sm></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-divider vertical class="lt-sm:!hidden"></mat-divider>
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.single-switch.off</div>
           <tb-color-input asBoxInput
                           formControlName="tumblerColorOff">
           </tb-color-input>
         </div>
-        <mat-divider vertical fxHide.lt-sm></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-divider vertical class="lt-sm:!hidden"></mat-divider>
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.single-switch.disabled</div>
           <tb-color-input asBoxInput
                           formControlName="tumblerColorDisabled">
@@ -186,7 +186,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showOnLabel">
         {{ 'widgets.single-switch.on-label' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="onLabel" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -203,7 +203,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showOffLabel">
         {{ 'widgets.single-switch.off-label' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="offLabel" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.html
index 1bf741eba7..abaaf4c7a4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.html
@@ -15,15 +15,15 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="slideToggleWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="slideToggleWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.slide-toggle-label</mat-label>
       <input matInput formControlName="title">
     </mat-form-field>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.rpc.label-position</mat-label>
         <mat-select formControlName="labelPosition">
           <mat-option [value]="'before'">
@@ -34,7 +34,7 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.rpc.slider-color</mat-label>
         <mat-select formControlName="sliderColor">
           <mat-option [value]="'primary'">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html
index 1c7d3c8402..a8dd71168e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html
@@ -20,7 +20,7 @@
     <div class="tb-form-panel-title" translate>widgets.slider.behavior</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.slider.initial-value-hint' | translate}}" translate>widgets.slider.initial-value</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.slider.initial-value' | translate }}"
                                     [valueType]="valueType.DOUBLE"
                                     [aliasController]="aliasController"
@@ -30,7 +30,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.slider.on-value-change-hint' | translate}}" translate>widgets.slider.on-value-change</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.slider.on-value-change' | translate }}"
                                     [valueType]="valueType.DOUBLE"
                                     [aliasController]="aliasController"
@@ -40,7 +40,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
@@ -88,11 +88,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValue">
         {{ 'widgets.slider.value' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <tb-unit-input class="flex" formControlName="valueUnits"></tb-unit-input>
         <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="valueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-          <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+          <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
         </mat-form-field>
         <tb-font-settings formControlName="valueFont"
                           [previewText]="valuePreviewFn">
@@ -105,7 +105,7 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.slider.range' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <div class="tb-small-label" translate>widgets.slider.min</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="tickMin" type="number" placeholder="{{ 'widget-config.set' | translate }}">
@@ -120,7 +120,7 @@
       <mat-slide-toggle class="mat-slide" formControlName="showTicks">
         {{ 'widgets.slider.range-ticks' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="ticksFont"
                           previewText="100">
         </tb-font-settings>
@@ -134,7 +134,7 @@
       <mat-slide-toggle class="mat-slide" formControlName="showTickMarks">
         {{ 'widgets.slider.tick-marks' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="tickMarksCount" type="number" min="2"
                  step="1" placeholder="{{ 'widget-config.set' | translate }}">
@@ -146,15 +146,15 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.slider.colors' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-3">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.slider.main</div>
           <tb-color-input asBoxInput
                           formControlName="mainColor">
           </tb-color-input>
         </div>
         <mat-divider vertical></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.slider.background</div>
           <tb-color-input asBoxInput
                           formControlName="backgroundColor">
@@ -164,15 +164,15 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.rpc-state.disabled-state' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-3">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.slider.main</div>
           <tb-color-input asBoxInput
                           formControlName="mainColorDisabled">
           </tb-color-input>
         </div>
         <mat-divider vertical></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.slider.background</div>
           <tb-color-input asBoxInput
                           formControlName="backgroundColorDisabled">
@@ -185,11 +185,11 @@
       <div class="fixed-title-width">
         {{ 'widgets.slider.left-icon' | translate }}
       </div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="leftIconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="leftIconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="leftIconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  [color]="sliderWidgetSettingsForm.get('leftIconColor').value"
                                  formControlName="leftIcon">
@@ -204,11 +204,11 @@
       <div class="fixed-title-width">
         {{ 'widgets.slider.right-icon' | translate }}
       </div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="rightIconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="rightIconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="rightIconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  [color]="sliderWidgetSettingsForm.get('rightIconColor').value"
                                  formControlName="rightIcon">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-control-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-control-widget-settings.component.html
index f50ec5c903..70bbe2a3d7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-control-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-control-widget-settings.component.html
@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="switchControlWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="switchControlWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.switch-title</mat-label>
       <input matInput formControlName="title">
     </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-rpc-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-rpc-settings.component.html
index 12a722c77a..23a4a62d93 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-rpc-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-rpc-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="switchRpcSettingsFormGroup" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="switchRpcSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.value-settings</legend>
     <mat-checkbox formControlName="initialValue">
@@ -23,7 +23,7 @@
     </mat-checkbox>
     <fieldset class="fields-group">
       <legend class="group-title" translate>widgets.rpc.retrieve-value-settings</legend>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.rpc.retrieve-value-method</mat-label>
         <mat-select formControlName="retrieveValueMethod">
           <mat-option [value]="'none'">
@@ -40,20 +40,20 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <tb-device-key-autocomplete fxFlex
-        [fxShow]="switchRpcSettingsFormGroup.get('retrieveValueMethod').value === 'attribute' ||
-                  switchRpcSettingsFormGroup.get('retrieveValueMethod').value === 'timeseries'"
+      <tb-device-key-autocomplete class="flex-1"
+        [class.!hidden]="switchRpcSettingsFormGroup.get('retrieveValueMethod').value !== 'attribute' &&
+                         switchRpcSettingsFormGroup.get('retrieveValueMethod').value !== 'timeseries'"
         [aliasController]="aliasController"
         [targetDevice]="targetDevice"
         [keyType]="switchRpcSettingsFormGroup.get('retrieveValueMethod').value === 'attribute' ? dataKeyType.attribute : dataKeyType.timeseries"
         required
         formControlName="valueKey">
       </tb-device-key-autocomplete>
-      <mat-form-field [fxShow]="switchRpcSettingsFormGroup.get('retrieveValueMethod').value === 'rpc'" fxFlex class="mat-block">
+      <mat-form-field [class.!hidden]="switchRpcSettingsFormGroup.get('retrieveValueMethod').value !== 'rpc'" class="mat-block flex-1">
         <mat-label translate>widgets.rpc.get-value-method</mat-label>
         <input required matInput formControlName="getValueMethod">
       </mat-form-field>
-      <tb-js-func [fxHide]="switchRpcSettingsFormGroup.get('retrieveValueMethod').value === 'none'"
+      <tb-js-func [class.!hidden]="switchRpcSettingsFormGroup.get('retrieveValueMethod').value === 'none'"
         formControlName="parseValueFunction"
         [globalVariables]="functionScopeVariables"
         [functionArgs]="['data']"
@@ -63,7 +63,7 @@
     </fieldset>
     <fieldset class="fields-group">
       <legend class="group-title" translate>widgets.rpc.update-value-settings</legend>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.rpc.set-value-method</mat-label>
         <input required matInput formControlName="setValueMethod">
       </mat-form-field>
@@ -78,26 +78,26 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.rpc-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.request-timeout</mat-label>
       <input matInput type="number" min="0" formControlName="requestTimeout">
     </mat-form-field>
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.rpc.persistent-rpc-settings</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="switchRpcSettingsFormGroup.get('requestPersistent').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
             <mat-slide-toggle formControlName="requestPersistent" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+                              class="flex items-stretch justify-center">
               {{ 'widgets.rpc.request-persistent' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.rpc.persistent-polling-interval</mat-label>
             <input matInput type="number" min="1000" formControlName="persistentPollingInterval">
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/update-device-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/update-device-attribute-widget-settings.component.html
index 4ff423c352..401bccc469 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/update-device-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/update-device-attribute-widget-settings.component.html
@@ -15,18 +15,18 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="updateDeviceAttributeWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="updateDeviceAttributeWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.widget-title</mat-label>
       <input matInput formControlName="title">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.button-label</mat-label>
       <input matInput formControlName="buttonText">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.device-attribute-scope</mat-label>
       <mat-select formControlName="entityAttributeType">
         <mat-option [value]="'SERVER_SCOPE'">

From 316a2ea0e18b221cde86f01cb7e716007a2c6e0d Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Wed, 16 Oct 2024 13:46:03 +0300
Subject: [PATCH 21/34] Flex layout replacements. Switch to tailwind.css.

---
 ...e-navigator-widget-settings.component.html | 28 ++++++-------
 ...s-hierarchy-widget-settings.component.html |  2 +-
 ...entities-table-key-settings.component.html | 16 ++++----
 ...ities-table-widget-settings.component.html | 17 ++++----
 ...ngle-device-widget-settings.component.html |  4 +-
 ...eway-config-widget-settings.component.html | 12 +++---
 ...eway-events-widget-settings.component.html |  6 +--
 .../gateway-logs-settings.component.html      |  2 +-
 ...gue-compass-widget-settings.component.html | 23 +++++------
 ...logue-gauge-widget-settings.component.html | 32 +++++++--------
 ...gital-gauge-widget-settings.component.html | 41 +++++++++----------
 .../settings/gauge/tick-value.component.html  |  4 +-
 12 files changed, 89 insertions(+), 98 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/date/date-range-navigator-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/date/date-range-navigator-widget-settings.component.html
index 3f9e23c81a..f373fffba0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/date/date-range-navigator-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/date/date-range-navigator-widget-settings.component.html
@@ -15,23 +15,23 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="dateRangeNavigatorWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="dateRangeNavigatorWidgetSettingsForm">
   <fieldset class="fields-group fields-group-slider">
     <legend class="group-title" translate>widgets.date-range-navigator.date-range-picker-settings</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="!dateRangeNavigatorWidgetSettingsForm.get('hidePicker').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
           <mat-slide-toggle formControlName="hidePicker" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+                            class="flex items-stretch justify-center">
             {{ 'widgets.date-range-navigator.hide-date-range-picker' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <section fxLayout="column" fxFlex>
+        <section class="flex flex-1 flex-col">
           <mat-checkbox formControlName="onePanel">
             {{ 'widgets.date-range-navigator.picker-one-panel' | translate }}
           </mat-checkbox>
@@ -41,7 +41,7 @@
           <mat-checkbox formControlName="showTemplate">
             {{ 'widgets.date-range-navigator.picker-show-template' | translate }}
           </mat-checkbox>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.date-range-navigator.first-day-of-week</mat-label>
             <input matInput type="number" min="1" max="7" step="1" formControlName="firstDayOfWeek">
           </mat-form-field>
@@ -52,19 +52,19 @@
   <fieldset class="fields-group fields-group-slider">
     <legend class="group-title" translate>widgets.date-range-navigator.interval-settings</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="!dateRangeNavigatorWidgetSettingsForm.get('hideInterval').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
           <mat-slide-toggle formControlName="hideInterval" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+                            class="flex items-stretch justify-center">
             {{ 'widgets.date-range-navigator.hide-interval' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.date-range-navigator.initial-interval</mat-label>
           <mat-select formControlName="initialInterval">
             <mat-option [value]="'hour'">
@@ -96,19 +96,19 @@
   <fieldset class="fields-group fields-group-slider">
     <legend class="group-title" translate>widgets.date-range-navigator.step-settings</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="!dateRangeNavigatorWidgetSettingsForm.get('hideStepSize').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
           <mat-slide-toggle formControlName="hideStepSize" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+                            class="flex items-stretch justify-center">
             {{ 'widgets.date-range-navigator.hide-step-size' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.date-range-navigator.initial-step-size</mat-label>
           <mat-select formControlName="stepSize">
             <mat-option [value]="'hour'">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-hierarchy-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-hierarchy-widget-settings.component.html
index ebd05b1bc3..ce54e09f1d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-hierarchy-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-hierarchy-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="entitiesHierarchyWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="entitiesHierarchyWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.entities-hierarchy.hierarchy-data-settings</legend>
     <tb-js-func formControlName="nodeRelationQueryFunction"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-key-settings.component.html
index 3f5fb7c698..369b675977 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-key-settings.component.html
@@ -20,7 +20,7 @@
     <div class="tb-form-panel-title" translate>widgets.table.column-settings</div>
     <div class="tb-form-row">
       <div class="fixed-title-width">{{ 'widgets.table.custom-title' | translate }}</div>
-      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
         <input matInput formControlName="customTitle" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
@@ -62,14 +62,13 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="entitiesTableKeySettingsForm.get('useCellStyleFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useCellStyleFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useCellStyleFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.table.use-cell-style-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -86,14 +85,13 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="entitiesTableKeySettingsForm.get('useCellContentFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useCellContentFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useCellContentFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.table.use-cell-content-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.html
index 64fa8d8b8f..c5f69691cc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.html
@@ -20,7 +20,7 @@
     <div class="tb-form-panel-title" translate>widgets.table.table-header</div>
     <div class="tb-form-row">
       <div class="fixed-title-width">{{ 'widgets.table.entities-table-title' | translate }}</div>
-      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
         <input matInput formControlName="entitiesTitle" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
@@ -45,7 +45,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="displayEntityName">
         {{ 'widgets.table.display-entity-name' | translate }}
       </mat-slide-toggle>
-      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
         <input matInput formControlName="entityNameColumnTitle" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
@@ -53,7 +53,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="displayEntityLabel">
         {{ 'widgets.table.display-entity-label' | translate }}
       </mat-slide-toggle>
-      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
         <input matInput formControlName="entityLabelColumnTitle" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
@@ -70,7 +70,7 @@
         {{ 'widgets.table.show-cell-actions-menu-mobile' | translate }}
       </mat-slide-toggle>
     </div>
-    <mat-form-field fxFlex subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" subscriptSizing="dynamic">
       <mat-label translate>widgets.table.hidden-cell-button-display-mode</mat-label>
       <mat-select formControlName="reserveSpaceForHiddenAction">
         <mat-option [value]="'true'">
@@ -81,7 +81,7 @@
         </mat-option>
       </mat-select>
     </mat-form-field>
-    <mat-form-field fxFlex subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" subscriptSizing="dynamic">
       <mat-label translate>widgets.table.default-sort-order</mat-label>
       <input matInput formControlName="defaultSortOrder">
     </mat-form-field>
@@ -101,14 +101,13 @@
   <div class="tb-form-panel tb-slide-toggle">
     <div class="tb-form-panel-title" translate>widgets.table.rows</div>
     <mat-expansion-panel class="tb-settings" [expanded]="entitiesTableWidgetSettingsForm.get('useRowStyleFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useRowStyleFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useRowStyleFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.table.use-row-style-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-single-device-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-single-device-widget-settings.component.html
index eb538bfc30..a4ce3ea8f1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-single-device-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-single-device-widget-settings.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="gatewayConfigSingleDeviceWidgetSettingsForm" fxLayout="column">
-  <mat-form-field fxFlex class="mat-block">
+<section class="tb-widget-settings flex flex-col" [formGroup]="gatewayConfigSingleDeviceWidgetSettingsForm">
+  <mat-form-field class="mat-block flex-1">
     <mat-label translate>widgets.gateway.gateway-title</mat-label>
     <input matInput formControlName="gatewayTitle">
   </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-widget-settings.component.html
index 7a52be1a5a..76883cb037 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-widget-settings.component.html
@@ -15,29 +15,29 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="gatewayConfigWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="gatewayConfigWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.gateway.general-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.gateway.widget-title</mat-label>
       <input matInput formControlName="widgetTitle">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.gateway.default-archive-file-name</mat-label>
       <input matInput formControlName="archiveFileName">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.gateway.device-type-for-new-gateway</mat-label>
       <input matInput formControlName="gatewayType">
     </mat-form-field>
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.gateway.messages-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.gateway.save-config-success-message</mat-label>
       <input matInput formControlName="successfulSave">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.gateway.device-name-exists-message</mat-label>
       <input matInput formControlName="gatewayNameExists">
     </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-events-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-events-widget-settings.component.html
index 7b2056ed5c..9a11918e00 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-events-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-events-widget-settings.component.html
@@ -15,12 +15,12 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="gatewayEventsWidgetSettingsForm" fxLayout="column">
-  <mat-form-field fxFlex class="mat-block">
+<section class="tb-widget-settings flex flex-col" [formGroup]="gatewayEventsWidgetSettingsForm">
+  <mat-form-field class="mat-block flex-1">
     <mat-label translate>widgets.gateway.events-title</mat-label>
     <input matInput formControlName="eventsTitle">
   </mat-form-field>
-  <mat-form-field fxFlex class="mat-block" floatLabel="always">
+  <mat-form-field class="mat-block flex-1" floatLabel="always">
     <mat-label translate>widgets.gateway.events-filter</mat-label>
     <mat-chip-grid #chipList formControlName="eventsReg">
       <mat-chip-row
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-logs-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-logs-settings.component.html
index 4fc4ff9fd6..ed80d1e479 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-logs-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-logs-settings.component.html
@@ -20,7 +20,7 @@
     <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="isConnectorLog">
       {{ "widgets.gateway.show-connector" | translate }}
     </mat-slide-toggle>
-    <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
       <input matInput formControlName="connectorLogState" placeholder="{{ 'widgets.gateway.connector-state-param-key' | translate }}">
     </mat-form-field>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html
index b5c16ccd15..8ebcceb459 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html
@@ -20,10 +20,10 @@
     <div class="tb-form-panel-title" translate>widgets.gauge.ticks-settings</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" translate>widgets.gauge.labels</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <tb-string-items-list
           style="display: flex"
-          fxFlex
+          class="flex-1"
           appearance="outline"
           subscriptSizing="dynamic"
           editable
@@ -33,7 +33,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div translate>widgets.gauge.label-style</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="majorTickFont"
                           disabledLineHeight>
         </tb-font-settings>
@@ -53,7 +53,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div translate>widgets.gauge.minor-ticks</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="minorTicks">
         </mat-form-field>
@@ -84,7 +84,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showBorder">
         {{ 'widgets.gauge.show-plate-border' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-form-field class="number" appearance="outline" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="borderOuterWidth" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -100,7 +100,7 @@
     <div class="tb-form-panel-title" translate>widgets.gauge.needle-settings</div>
     <div class="tb-form-row space-between column-xs">
       <div translate>widgets.gauge.needle-circle</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-form-field class="number" appearance="outline" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="needleCircleSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -121,21 +121,20 @@
 
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="analogueCompassWidgetSettingsForm.get('animation').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="animation" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="animation" (click)="$event.stopPropagation()">
             {{ 'widgets.gauge.enable-animation' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
         <div class="tb-form-row">
           <div class="fixed-title-width" translate>widgets.gauge.animation-target</div>
-          <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="animationTarget">
               <mat-option [value]="'needle'">
                 {{ 'widgets.gauge.animation-target-needle' | translate }}
@@ -148,7 +147,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div translate>widgets.gauge.animation-duration-rule</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
               <input matInput type="number" min="0" formControlName="animationDuration" placeholder="{{ 'widget-config.set' | translate }}">
             </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html
index 61612be854..64859bfaac 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html
@@ -29,7 +29,7 @@
     <div class="tb-form-panel-title" translate>widgets.gauge.ticks-settings</div>
     <div class="tb-form-row space-between column-xs">
       <div translate>widgets.gauge.ticks</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <div class="tb-small-label" translate>widgets.gauge.min-value-short</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="minValue" type="number" step="1" placeholder="{{ 'widget-config.set' | translate }}">
@@ -50,7 +50,7 @@
 
     <div class="tb-form-row space-between column-xs">
       <div translate>widgets.gauge.major-ticks-count</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="majorTicksCount" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -63,7 +63,7 @@
 
     <div class="tb-form-row space-between column-xs">
       <div translate>widgets.gauge.minor-ticks-count</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="minorTicks" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -81,7 +81,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showUnitTitle">
         {{ 'widgets.gauge.units-title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="unitTitle" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -98,7 +98,7 @@
 
     <div class="tb-form-row space-between">
       <div translate>widget-config.units-short</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="unitsFont"
                           disabledLineHeight>
         </tb-font-settings>
@@ -112,14 +112,13 @@
 
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="analogueGaugeWidgetSettingsForm.get('valueBox').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="valueBox" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="valueBox" (click)="$event.stopPropagation()">
             {{ 'widgets.gauge.value-box' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -134,7 +133,7 @@
           <div class="tb-form-panel-title" translate>widgets.gauge.value-text</div>
           <div class="tb-form-row space-between">
             <div translate>widgets.gauge.value-text</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="valueFont"
                                 disabledLineHeight>
               </tb-font-settings>
@@ -245,7 +244,7 @@
     <div class="tb-form-panel-title" translate>widgets.gauge.scale-settings</div>
     <div class="tb-form-row space-between">
       <div translate>widgets.gauge.scale</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="highlightsWidth">
         </mat-form-field>
@@ -257,21 +256,20 @@
 
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="analogueGaugeWidgetSettingsForm.get('animation').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="animation" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="animation" (click)="$event.stopPropagation()">
             {{ 'widgets.gauge.enable-animation' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
         <div class="tb-form-row space-between">
           <div translate>widgets.gauge.animation-duration-rule</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
               <input matInput type="number" min="0" formControlName="animationDuration" placeholder="{{ 'widget-config.set' | translate }}">
             </mat-form-field>
@@ -350,7 +348,7 @@
     <div class="tb-form-panel-title" translate>widgets.gauge.linear-gauge-settings</div>
     <div class="tb-form-row space-between">
       <div translate>widgets.gauge.bar-stroke</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="barStrokeWidth" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html
index 173d2102d6..b5735cc017 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html
@@ -43,7 +43,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showMinMax">
         {{ 'widgets.gauge.min-and-max-label' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="minMaxFont"
                           disabledLineHeight
                           [previewText]="previewFn">
@@ -57,7 +57,7 @@
 
     <div class="tb-form-row space-between column-xs">
       <div class="fixed-title-width">{{ 'widgets.gauge.min-and-max-value' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <div class="tb-small-label" translate>widgets.gauge.min-value-short</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="minValue" type="number" step="1" placeholder="{{ 'widget-config.set' | translate }}">
@@ -81,7 +81,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValue">
         {{ 'widgets.gauge.value' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="valueFont"
                           disabledLineHeight
                           [previewText]="valuePreviewFn">
@@ -97,7 +97,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widgets.gauge.label' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -126,12 +126,12 @@
         <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTimestamp">
           {{ 'widgets.gauge.show-timestamp' | translate }}
         </mat-slide-toggle>
-        <tb-date-format-select fxFlex excludeLastUpdateAgo formControlName="timestampFormat"></tb-date-format-select>
+        <tb-date-format-select class="flex-1" excludeLastUpdateAgo formControlName="timestampFormat"></tb-date-format-select>
       </div>
 
       <div class="tb-form-row space-between column-xs">
         <div class="fixed-title-width">{{ 'widgets.gauge.font' | translate }}</div>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <tb-font-settings formControlName="labelFont"
                             disabledLineHeight
                             [previewText]="valuePreviewFn">
@@ -200,21 +200,20 @@
 
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="digitalGaugeWidgetSettingsForm.get('showTicks').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showTicks" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTicks" (click)="$event.stopPropagation()">
             {{ 'widgets.gauge.ticks' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
         <div class="tb-form-row space-between column-xs">
           <div class="fixed-title-width">{{ 'widgets.gauge.tick-width-and-color' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
               <input matInput type="number" min="0" formControlName="tickWidth" placeholder="{{ 'widget-config.set' | translate }}">
             </mat-form-field>
@@ -228,17 +227,16 @@
           <div class="tb-form-panel-title" translate>widgets.gauge.tick-values</div>
           <div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
                (cdkDropListDropped)="tickValueDrop($event)">
-            <div cdkDrag class="tb-draggable" *ngFor="let tickValueControl of tickValuesFormArray().controls; trackBy: trackByTickValue;
-              let $index = index; last as isLast;" fxLayout="row" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
-                <tb-tick-value fxFlex
+            <div cdkDrag class="tb-draggable flex flex-row" *ngFor="let tickValueControl of tickValuesFormArray().controls; trackBy: trackByTickValue;
+              let $index = index; last as isLast;" [class.pb-2]="!isLast">
+                <tb-tick-value class="flex-1"
                                [formControl]="tickValueControl"
                                [aliasController]="aliasController"
                                [dataKeyCallbacks]="dataKeyCallbacks"
                                [datasource]="datasource"
                                (removeTickValue)="removeTickValue($index)">
                 </tb-tick-value>
-                <button class="tb-box-button"
-                        fxHide.lt-lg
+                <button class="tb-box-button lt-lg:!hidden"
                         mat-icon-button
                         type="button"
                         cdkDragHandle
@@ -249,7 +247,7 @@
             </div>
           </div>
           <div *ngIf="!tickValuesFormArray().controls.length">
-            <span translate fxLayoutAlign="center center" class="tb-prompt">widgets.gauge.no-tick-values</span>
+            <span translate class="tb-prompt flex items-center justify-center">widgets.gauge.no-tick-values</span>
           </div>
           <div style="padding-top: 16px;">
             <button mat-stroked-button color="primary"
@@ -266,21 +264,20 @@
 
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="digitalGaugeWidgetSettingsForm.get('animation').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="animation" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="animation" (click)="$event.stopPropagation()">
             {{ 'widgets.gauge.enable-animation' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
         <div class="tb-form-row space-between">
           <div translate>widgets.gauge.animation-duration-rule</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
               <input matInput type="number" min="0" formControlName="animationDuration" placeholder="{{ 'widget-config.set' | translate }}">
             </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/tick-value.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/tick-value.component.html
index 7155ad8d5e..a36f744bcd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/tick-value.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/tick-value.component.html
@@ -16,8 +16,8 @@
 
 -->
 
-<div fxLayout="row" [formGroup]="tickValueFormGroup">
-  <tb-value-source-data-key fxFlex
+<div class="flex flex-row" [formGroup]="tickValueFormGroup">
+  <tb-value-source-data-key class="flex-1"
                             formControlName="tickValue"
                             [aliasController]="aliasController"
                             [dataKeyCallbacks]="dataKeyCallbacks"

From c5c732446e1e3cad5e5c7d888c63bec287898f36 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Wed, 16 Oct 2024 15:24:20 +0300
Subject: [PATCH 22/34] Flex layout replacements. Switch to tailwind.css.

---
 ...pio-control-widget-settings.component.html |  16 +--
 .../settings/gpio/gpio-item.component.html    |  26 ++---
 .../gpio-panel-widget-settings.component.html |  10 +-
 .../doc-links-widget-settings.component.html  |   4 +-
 ...quick-links-widget-settings.component.html |   4 +-
 ...ttery-level-widget-settings.component.html |   2 +-
 ...-level-card-widget-settings.component.html |  15 ++-
 ...al-strength-widget-settings.component.html |  15 ++-
 .../status-widget-settings.component.html     |   6 +-
 .../datakey-select-option.component.html      |  18 +--
 ...ce-claiming-widget-settings.component.html |  28 ++---
 ...amera-input-widget-settings.component.html |  14 +--
 ...-attribute-general-settings.component.html |  14 +--
 ...n-attribute-widget-settings.component.html |   8 +-
 ...e-attribute-widget-settings.component.html |   2 +-
 ...e-attribute-widget-settings.component.html |   8 +-
 ...e-attribute-widget-settings.component.html |   4 +-
 ...r-attribute-widget-settings.component.html |   8 +-
 ...n-attribute-widget-settings.component.html |  14 +--
 ...n-attribute-widget-settings.component.html |  24 ++--
 ...ple-attributes-key-settings.component.html | 108 +++++++++---------
 ...-attributes-widget-settings.component.html |  34 +++---
 ...g-attribute-widget-settings.component.html |   8 +-
 ...gation-card-widget-settings.component.html |   8 +-
 ...ation-cards-widget-settings.component.html |   6 +-
 ...d-direction-widget-settings.component.html |  10 +-
 .../trip-animation.component.html             |  12 +-
 27 files changed, 213 insertions(+), 213 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-control-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-control-widget-settings.component.html
index 559854c50c..377fcd6ddd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-control-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-control-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="gpioControlWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="gpioControlWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.gpio.panel-settings</legend>
     <tb-color-input
@@ -26,11 +26,11 @@
     </tb-color-input>
     <fieldset class="fields-group">
       <legend class="group-title" translate>widgets.gpio.gpio-switches</legend>
-      <div fxLayout="column">
+      <div class="flex flex-col">
         <div class="tb-control-list">
           <div *ngFor="let gpioItemControl of gpioListFormArray().controls; trackBy: trackByGpioItem;
                  let $index = index; last as isLast;"
-               fxLayout="column" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+               class="flex flex-col" [class.pb-2]="!isLast">
             <tb-gpio-item [formControl]="gpioItemControl"
                           [expanded]="gpioItemControl.new"
                           (removeGpioItem)="removeGpioItem($index)">
@@ -38,8 +38,8 @@
           </div>
         </div>
         <div *ngIf="!gpioListFormArray().controls.length">
-            <span translate fxLayoutAlign="center center"
-                  class="tb-prompt">widgets.gpio.no-gpio-switches</span>
+            <span translate
+                  class="tb-prompt flex items-center justify-center">widgets.gpio.no-gpio-switches</span>
         </div>
         <div style="padding-top: 16px;">
           <button mat-raised-button color="primary"
@@ -53,13 +53,13 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.rpc-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.request-timeout</mat-label>
       <input required matInput type="number" min="0" formControlName="requestTimeout">
     </mat-form-field>
     <fieldset class="fields-group" formGroupName="gpioStatusRequest">
       <legend class="group-title" translate>widgets.gpio.gpio-status-request</legend>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.gpio.method-name</mat-label>
         <input required matInput formControlName="method">
       </mat-form-field>
@@ -73,7 +73,7 @@
     </fieldset>
     <fieldset class="fields-group" formGroupName="gpioStatusChangeRequest">
       <legend class="group-title" translate>widgets.gpio.gpio-status-change-request</legend>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.gpio.method-name</mat-label>
         <input required matInput formControlName="method">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-item.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-item.component.html
index 53dcb0ad9a..e3ef6af85a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-item.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-item.component.html
@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<mat-expansion-panel class="gpio-item" fxFlex [formGroup]="gpioItemFormGroup" [(expanded)]="expanded">
+<mat-expansion-panel class="gpio-item flex-1" [formGroup]="gpioItemFormGroup" [(expanded)]="expanded">
   <mat-expansion-panel-header>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+    <div class="flex flex-1 flex-row items-center justify-start">
       <mat-panel-title>
-        <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+        <div class="flex flex-1 flex-row items-center justify-start">
           <div>
             <span>{{ gpioItemFormGroup.value.label || 'Undefined' }} (</span><small>pin:</small>
             <span>{{ numberText(gpioItemFormGroup.value.pin, 0) }}) - [</span><small>row:</small>
@@ -27,11 +27,11 @@
             <span>{{ numberText(gpioItemFormGroup.value.col, -1) }}]</span>
           </div>
           <div *ngIf="hasColor" class="tb-color-preview" style="margin-left: 6px;">
-            <div class="tb-color-result" [ngStyle]="{background: gpioItemFormGroup.get('color').value}"></div>
+            <div class="tb-color-result" [style.background]="gpioItemFormGroup.get('color').value"></div>
           </div>
         </div>
       </mat-panel-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
               type="button"
               (click)="removeGpioItem.emit()"
@@ -42,25 +42,25 @@
     </div>
   </mat-expansion-panel-header>
   <ng-template matExpansionPanelContent>
-    <div fxLayout="column" fxLayoutGap="0.5em">
+    <div class="flex flex-col gap-2">
       <mat-divider></mat-divider>
-      <section class="tb-widget-settings" fxLayout="column">
-        <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-          <mat-form-field fxFlex class="mat-block">
+      <section class="tb-widget-settings flex flex-col">
+        <section class="flex flex-row xs:flex-col gt-xs:gap-2 gt-xs:items-center gt-xs:justify-start">
+          <mat-form-field class="mat-block flex=1">
             <mat-label translate>widgets.gpio.pin</mat-label>
             <input required matInput type="number" min="1" step="1" formControlName="pin">
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.gpio.label</mat-label>
             <input required matInput formControlName="label">
           </mat-form-field>
         </section>
-        <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-          <mat-form-field fxFlex class="mat-block">
+        <section class="flex flex-row xs:flex-col gt-xs:gap-2 gt-xs:items-center gt-xs:justify-start">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.gpio.row</mat-label>
             <input required matInput type="number" min="0" step="1" formControlName="row">
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.gpio.column</mat-label>
             <input required matInput type="number" min="0" max="1" step="1" formControlName="col">
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-panel-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-panel-widget-settings.component.html
index 7a0c15467a..fe1d8ce226 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-panel-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-panel-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="gpioPanelWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="gpioPanelWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.gpio.panel-settings</legend>
     <tb-color-input
@@ -26,11 +26,11 @@
     </tb-color-input>
     <fieldset class="fields-group">
       <legend class="group-title" translate>widgets.gpio.gpio-leds</legend>
-      <div fxLayout="column">
+      <div class="flex flex-col">
         <div class="tb-control-list">
           <div *ngFor="let gpioItemControl of gpioListFormArray().controls; trackBy: trackByGpioItem;
                  let $index = index; last as isLast;"
-               fxLayout="column" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+               class="flex flex-col" [class.pb-2]="!isLast">
             <tb-gpio-item [formControl]="gpioItemControl"
                           [hasColor]="true"
                           [expanded]="gpioItemControl.new"
@@ -39,8 +39,8 @@
           </div>
         </div>
         <div *ngIf="!gpioListFormArray().controls.length">
-            <span translate fxLayoutAlign="center center"
-                  class="tb-prompt">widgets.gpio.no-gpio-leds</span>
+            <span translate
+                  class="tb-prompt flex items-center justify-center">widgets.gpio.no-gpio-leds</span>
         </div>
         <div style="padding-top: 16px;">
           <button mat-raised-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/doc-links-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/doc-links-widget-settings.component.html
index d001b2c23a..6b4ab4ae75 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/doc-links-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/doc-links-widget-settings.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="docLinksWidgetSettingsForm" fxLayout="column">
-  <mat-form-field fxFlex class="mat-block">
+<section class="tb-widget-settings flex flex-col" [formGroup]="docLinksWidgetSettingsForm">
+  <mat-form-field class="mat-block flex-1">
     <mat-label translate>widgets.documentation.columns</mat-label>
     <input required matInput type="number" step="1" min="1" max="20" formControlName="columns">
   </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/quick-links-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/quick-links-widget-settings.component.html
index 91a3bb3bfa..896983690c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/quick-links-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/quick-links-widget-settings.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="quickLinksWidgetSettingsForm" fxLayout="column">
-  <mat-form-field fxFlex class="mat-block">
+<section class="tb-widget-settings flex flex-col" [formGroup]="quickLinksWidgetSettingsForm">
+  <mat-form-field class="mat-block flex-1">
     <mat-label translate>widgets.quick-links.columns</mat-label>
     <input required matInput type="number" step="1" min="1" max="20" formControlName="columns">
   </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html
index 572c50c392..79e7db6f6b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html
@@ -40,7 +40,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValue">
         {{ 'widgets.battery-level.value' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-chip-listbox formControlName="autoScaleValueSize">
           <mat-chip-option [value]="true">{{ 'widgets.battery-level.auto-scale' | translate }}</mat-chip-option>
         </mat-chip-listbox>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
index 81e2b2b1da..a1aae64747 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
@@ -18,7 +18,7 @@
 <ng-container *ngIf="levelCardWidgetSettingsForm"  [formGroup]="levelCardWidgetSettingsForm">
   <div class="tb-form-panel no-padding no-border">
     <div class="tb-form-panel">
-      <div fxFlex fxLayout="column" class="tb-form-row space-between">
+      <div class="tb-form-row space-between flex flex-1 flex-col">
         <div class="tb-flex row space-between align-center no-gap fill-width">
           <div class="fixed-title-width" translate>widgets.liquid-level-card.shape</div>
           <tb-toggle-select formControlName="tankSelectionType">
@@ -28,7 +28,7 @@
           </tb-toggle-select>
         </div>
         <tb-image-cards-select #shapesImageCardsSelect
-                               [fxShow]="levelCardWidgetSettingsForm.get('tankSelectionType').value === DataSourceType.static"
+                               [class.!hidden]="levelCardWidgetSettingsForm.get('tankSelectionType').value !== DataSourceType.static"
                                rowHeight="1:1"
                                [cols]="{columns: 5,
                                     breakpoints: {
@@ -143,7 +143,7 @@
           </ng-template>
         </div>
       </div>
-      <div class="tb-form-row space-between column-xs" [fxShow]="volumeInput">
+      <div class="tb-form-row space-between column-xs" [class.!hidden]="!volumeInput">
         <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume-units</div>
         <div class="tb-flex row flex-start align-center">
           <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
@@ -225,10 +225,9 @@
       <mat-expansion-panel class="tb-settings"
                            [expanded]="levelCardWidgetSettingsForm.get('showTooltip').value"
                            [disabled]="!levelCardWidgetSettingsForm.get('showTooltip').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
               {{ 'widget-config.tooltip' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
@@ -245,7 +244,7 @@
               <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
                 <input matInput formControlName="tooltipLevelDecimals" type="number" min="0"
                        max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-                <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+                <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
               </mat-form-field>
               <tb-font-settings formControlName="tooltipLevelFont"
                                 [previewText]="tooltipValuePreviewFn">
@@ -259,7 +258,7 @@
               {{ 'widgets.value-card.date' | translate }}
             </mat-slide-toggle>
             <div class="tb-flex row flex-start align-center">
-              <tb-date-format-select fxFlex formControlName="tooltipDateFormat"></tb-date-format-select>
+              <tb-date-format-select class="flex-1" formControlName="tooltipDateFormat"></tb-date-format-select>
               <tb-font-settings formControlName="tooltipDateFont"
                                 [previewText]="datePreviewFn">
               </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/signal-strength-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/signal-strength-widget-settings.component.html
index 7124ee0f02..2cc8624bea 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/signal-strength-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/signal-strength-widget-settings.component.html
@@ -34,8 +34,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showDate">
         {{ 'widgets.signal-strength.date' | translate }}
       </mat-slide-toggle>
-      <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-date-format-select fxFlex formControlName="dateFormat"></tb-date-format-select>
+      <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
+        <tb-date-format-select class="flex-1" formControlName="dateFormat"></tb-date-format-select>
         <tb-font-settings formControlName="dateFont"
                           [previewText]="datePreviewFn">
         </tb-font-settings>
@@ -79,10 +79,9 @@
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="signalStrengthWidgetSettingsForm.get('showTooltip').value"
                          [disabled]="!signalStrengthWidgetSettingsForm.get('showTooltip').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
             {{ 'widget-config.tooltip' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -92,7 +91,7 @@
           <mat-slide-toggle class="mat-slide" formControlName="showTooltipValue">
             {{ 'tooltip.value' | translate }}
           </mat-slide-toggle>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="tooltipValueFont"
                               [previewText]="tooltipValuePreviewFn">
             </tb-font-settings>
@@ -106,8 +105,8 @@
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipDate">
             {{ 'tooltip.date' | translate }}
           </mat-slide-toggle>
-          <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-            <tb-date-format-select fxFlex formControlName="tooltipDateFormat"></tb-date-format-select>
+          <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
+            <tb-date-format-select class="flex-1" formControlName="tooltipDateFormat"></tb-date-format-select>
             <tb-font-settings formControlName="tooltipDateFont"
                               [previewText]="tooltipDatePreviewFn">
             </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html
index 892311733c..7102c01200 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html
@@ -20,7 +20,7 @@
     <div class="tb-form-panel-title" translate>widgets.status-widget.behavior</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}" translate>widgets.rpc-state.initial-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.initial-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     trueLabel="{{ 'widgets.rpc-state.on' | translate }}"
@@ -33,7 +33,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
@@ -60,7 +60,7 @@
     </tb-image-cards-select>
   </div>
   <div class="tb-form-panel">
-    <div fxLayout="row" fxLayoutAlign="space-between center">
+    <div class="flex flex-row items-center justify-between">
       <div class="tb-form-panel-title" translate>widget-config.card-style</div>
       <tb-toggle-select [(ngModel)]="cardStyleMode"
                         [ngModelOptions]="{ standalone: true }">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/datakey-select-option.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/datakey-select-option.component.html
index a92f7744e0..a5995b7a65 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/datakey-select-option.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/datakey-select-option.component.html
@@ -15,18 +15,18 @@
     limitations under the License.
 
 -->
-<mat-expansion-panel class="datakey-select-option" fxFlex [formGroup]="selectOptionFormGroup" [(expanded)]="expanded">
+<mat-expansion-panel class="datakey-select-option flex-1" [formGroup]="selectOptionFormGroup" [(expanded)]="expanded">
   <mat-expansion-panel-header>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+    <div class="flex flex-1 flex-row items-center justify-start">
       <mat-panel-title>
-        <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+        <div class="flex flex-1 flex-row items-center justify-start">
           <div>
             <span>{{ selectOptionFormGroup.value.value || 'Undefined' }} </span>
             <span *ngIf="selectOptionFormGroup.value.label">(<small>{{ selectOptionFormGroup.value.label }}</small>)</span>
           </div>
         </div>
       </mat-panel-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
               type="button"
               (click)="removeSelectOption.emit()"
@@ -37,15 +37,15 @@
     </div>
   </mat-expansion-panel-header>
   <ng-template matExpansionPanelContent>
-    <div fxLayout="column" fxLayoutGap="0.5em">
+    <div class="flex flex-col gap-2">
       <mat-divider></mat-divider>
-      <section class="tb-widget-settings" fxLayout="column">
-        <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-          <mat-form-field fxFlex class="mat-block">
+      <section class="tb-widget-settings flex flex-col">
+        <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.input-widgets.option-value</mat-label>
             <input required matInput formControlName="value">
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.input-widgets.option-label</mat-label>
             <input matInput formControlName="label">
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/device-claiming-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/device-claiming-widget-settings.component.html
index f233851bd3..b6aa490c98 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/device-claiming-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/device-claiming-widget-settings.component.html
@@ -15,14 +15,14 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="deviceClaimingWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="deviceClaimingWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.widget-title</mat-label>
       <input matInput formControlName="widgetTitle">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.claim-button-label</mat-label>
       <input matInput formControlName="labelClaimButon">
     </mat-form-field>
@@ -33,24 +33,24 @@
   <fieldset class="fields-group fields-group-slider">
     <legend class="group-title" translate>widgets.input-widgets.labels-settings</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="deviceClaimingWidgetSettingsForm.get('showLabel').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
           <mat-slide-toggle formControlName="showLabel" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+                            class="flex items-stretch justify-center">
             {{ 'widgets.input-widgets.show-labels' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <section fxLayout="column">
-          <mat-form-field fxFlex class="mat-block">
+        <section class="flex flex-col">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.input-widgets.device-name-label</mat-label>
             <input matInput formControlName="deviceLabel">
           </mat-form-field>
-          <mat-form-field [fxShow]="deviceClaimingWidgetSettingsForm.get('deviceSecret').value" fxFlex class="mat-block">
+          <mat-form-field [class.!hidden]="!deviceClaimingWidgetSettingsForm.get('deviceSecret').value" class="mat-block flex-1">
             <mat-label translate>widgets.input-widgets.secret-key-label</mat-label>
             <input matInput formControlName="secretKeyLabel">
           </mat-form-field>
@@ -60,23 +60,23 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.messages-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.claim-device-success-message</mat-label>
       <input matInput formControlName="successfulClaimDevice">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.claim-device-not-found-message</mat-label>
       <input matInput formControlName="deviceNotFound">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.claim-device-failed-message</mat-label>
       <input matInput formControlName="failedClaimDevice">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.claim-device-name-required-message</mat-label>
       <input matInput formControlName="requiredErrorDevice">
     </mat-form-field>
-    <mat-form-field [fxShow]="deviceClaimingWidgetSettingsForm.get('deviceSecret').value" fxFlex class="mat-block">
+    <mat-form-field [class.!hidden]="!deviceClaimingWidgetSettingsForm.get('deviceSecret').value" class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.claim-device-secret-key-required-message</mat-label>
       <input matInput formControlName="requiredErrorSecretKey">
     </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/photo-camera-input-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/photo-camera-input-widget-settings.component.html
index 12d3eb6b42..7941ed9169 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/photo-camera-input-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/photo-camera-input-widget-settings.component.html
@@ -18,15 +18,15 @@
 <section class="tb-widget-settings" [formGroup]="photoCameraInputWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.widget-title</mat-label>
       <input matInput formControlName="widgetTitle">
     </mat-form-field>
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.image-settings</legend>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.image-format</mat-label>
         <mat-select formControlName="imageFormat">
           <mat-option [value]="'image/jpeg'">
@@ -40,17 +40,17 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.image-quality</mat-label>
         <input matInput type="number" min="0" max="1" formControlName="imageQuality">
       </mat-form-field>
     </section>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.max-image-width</mat-label>
         <input matInput type="number" min="1" formControlName="maxWidth">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.max-image-height</mat-label>
         <input matInput type="number" min="1" formControlName="maxHeight">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-attribute-general-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-attribute-general-settings.component.html
index 3a112819c7..4ab4f5beb0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-attribute-general-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-attribute-general-settings.component.html
@@ -18,24 +18,24 @@
 <section class="tb-widget-settings" [formGroup]="updateAttributeGeneralSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.widget-title</mat-label>
       <input matInput formControlName="widgetTitle">
     </mat-form-field>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-slide-toggle fxFlex fxFlex.gt-xs="25" formControlName="showLabel">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-slide-toggle class="flex-1 gt-xs:max-w-25% gt-xs:flex-full" formControlName="showLabel">
         {{ 'widgets.input-widgets.show-label' | translate }}
       </mat-slide-toggle>
-      <mat-form-field *ngIf="hasLabelValue" fxFlex class="mat-block">
+      <mat-form-field *ngIf="hasLabelValue" class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.label</mat-label>
         <input matInput formControlName="labelValue">
       </mat-form-field>
     </section>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-slide-toggle fxFlex fxFlex.gt-xs="25" formControlName="isRequired">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-slide-toggle class="flex-1 gt-xs:max-w-25% gt-xs:flex-full" formControlName="isRequired">
         {{ 'widgets.input-widgets.required' | translate }}
       </mat-slide-toggle>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.required-error-message</mat-label>
         <input matInput formControlName="requiredErrorMessage">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-boolean-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-boolean-attribute-widget-settings.component.html
index 445607c7ac..bd5d44612e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-boolean-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-boolean-attribute-widget-settings.component.html
@@ -18,7 +18,7 @@
 <section class="tb-widget-settings" [formGroup]="updateBooleanAttributeWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.widget-title</mat-label>
       <input matInput formControlName="widgetTitle">
     </mat-form-field>
@@ -28,12 +28,12 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.checkbox-settings</legend>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.true-label</mat-label>
         <input matInput formControlName="trueValue">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.false-label</mat-label>
         <input matInput formControlName="falseValue">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-date-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-date-attribute-widget-settings.component.html
index d6ed59294f..cf1c83e00c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-date-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-date-attribute-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="updateDateAttributeWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="updateDateAttributeWidgetSettingsForm">
   <tb-update-attribute-general-settings
     [hasLabelValue]="false"
     formControlName="updateAttributeGeneralSettings">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-double-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-double-attribute-widget-settings.component.html
index 208d64d9f4..4401f0f67b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-double-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-double-attribute-widget-settings.component.html
@@ -15,18 +15,18 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="updateDoubleAttributeWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="updateDoubleAttributeWidgetSettingsForm">
   <tb-update-attribute-general-settings
     formControlName="updateAttributeGeneralSettings">
   </tb-update-attribute-general-settings>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.double-field-settings</legend>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.min-value</mat-label>
         <input matInput type="number" step="any" formControlName="minValue">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.max-value</mat-label>
         <input matInput type="number" step="any" formControlName="maxValue">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-image-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-image-attribute-widget-settings.component.html
index dd42a1e9b4..c100e4358c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-image-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-image-attribute-widget-settings.component.html
@@ -18,7 +18,7 @@
 <section class="tb-widget-settings" [formGroup]="updateImageAttributeWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.widget-title</mat-label>
       <input matInput formControlName="widgetTitle">
     </mat-form-field>
@@ -28,7 +28,7 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.image-input-settings</legend>
-    <section fxLayout="column">
+    <section class="flex flex-col">
       <mat-slide-toggle formControlName="displayPreview" class="slide-block">
         {{ 'widgets.input-widgets.display-preview' | translate }}
       </mat-slide-toggle>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-integer-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-integer-attribute-widget-settings.component.html
index 531aeaa520..5ae015dcb5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-integer-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-integer-attribute-widget-settings.component.html
@@ -15,18 +15,18 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="updateIntegerAttributeWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="updateIntegerAttributeWidgetSettingsForm">
   <tb-update-attribute-general-settings
     formControlName="updateAttributeGeneralSettings">
   </tb-update-attribute-general-settings>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.integer-field-settings</legend>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.min-value</mat-label>
         <input matInput type="number" step="1" formControlName="minValue">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.max-value</mat-label>
         <input matInput type="number" step="1" formControlName="maxValue">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-json-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-json-attribute-widget-settings.component.html
index ad0ff01440..58033b1d4e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-json-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-json-attribute-widget-settings.component.html
@@ -18,15 +18,15 @@
 <section class="tb-widget-settings" [formGroup]="updateJsonAttributeWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.widget-title</mat-label>
       <input matInput formControlName="widgetTitle">
     </mat-form-field>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-slide-toggle fxFlex fxFlex.gt-xs="25" formControlName="showLabel">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-slide-toggle class="flex-1 gt-xs:max-w-25% gt-xs:flex-full" formControlName="showLabel">
         {{ 'widgets.input-widgets.show-label' | translate }}
       </mat-slide-toggle>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.label</mat-label>
         <input matInput formControlName="labelValue">
       </mat-form-field>
@@ -37,8 +37,8 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.attribute-settings</legend>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.widget-mode</mat-label>
         <mat-select formControlName="widgetMode">
           <mat-option [value]="'ATTRIBUTE'">
@@ -49,7 +49,7 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field [fxShow]="updateJsonAttributeWidgetSettingsForm.get('widgetMode').value === 'ATTRIBUTE'" fxFlex class="mat-block">
+      <mat-form-field [class.!hidden]="updateJsonAttributeWidgetSettingsForm.get('widgetMode').value !== 'ATTRIBUTE'" class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.attribute-scope</mat-label>
         <mat-select formControlName="attributeScope">
           <mat-option [value]="'SERVER_SCOPE'">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-location-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-location-attribute-widget-settings.component.html
index 93367001b2..c4bdfeadff 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-location-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-location-attribute-widget-settings.component.html
@@ -18,19 +18,19 @@
 <section class="tb-widget-settings" [formGroup]="updateLocationAttributeWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.widget-title</mat-label>
       <input matInput formControlName="widgetTitle">
     </mat-form-field>
     <mat-slide-toggle formControlName="showResultMessage" class="slide-block">
       {{ 'widgets.input-widgets.show-result-message' | translate }}
     </mat-slide-toggle>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.latitude-key-name</mat-label>
         <input matInput formControlName="latKeyName">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.longitude-key-name</mat-label>
         <input matInput formControlName="lngKeyName">
       </mat-form-field>
@@ -47,17 +47,17 @@
     <mat-slide-toggle formControlName="showLabel" class="slide-block">
       {{ 'widgets.input-widgets.show-label' | translate }}
     </mat-slide-toggle>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.latitude-label</mat-label>
         <input matInput formControlName="latLabel">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.longitude-label</mat-label>
         <input matInput formControlName="lngLabel">
       </mat-form-field>
     </section>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.input-fields-alignment</mat-label>
       <mat-select formControlName="inputFieldsAlignment">
         <mat-option [value]="'column'">
@@ -68,15 +68,15 @@
         </mat-option>
       </mat-select>
     </mat-form-field>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-slide-toggle class="slide-block" fxFlex formControlName="isLatRequired">
+    <section class="flex flex-col gap-2 gt-xs:flex-row gt-xs:items-center gt-xs:justify-start">
+      <mat-slide-toggle class="slide-block flex-1" formControlName="isLatRequired">
         {{ 'widgets.input-widgets.latitude-field-required' | translate }}
       </mat-slide-toggle>
-      <mat-slide-toggle class="slide-block" fxFlex formControlName="isLngRequired">
+      <mat-slide-toggle class="slide-block flex-1" formControlName="isLngRequired">
         {{ 'widgets.input-widgets.longitude-field-required' | translate }}
       </mat-slide-toggle>
     </section>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.required-error-message</mat-label>
       <input matInput formControlName="requiredErrorMessage">
     </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
index 0e12c926f8..b3ef2f9358 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
@@ -19,10 +19,10 @@
   <mat-slide-toggle formControlName="dataKeyHidden" class="slide-block">
     {{ 'widgets.input-widgets.hide-input-field' | translate }}
   </mat-slide-toggle>
-  <fieldset [fxShow]="!updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value" class="fields-group">
+  <fieldset [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value" class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex="50" class="mat-block">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block max-w-50% flex-full">
         <mat-label translate>widgets.input-widgets.datakey-type</mat-label>
         <mat-select formControlName="dataKeyType">
           <mat-option [value]="'server'">
@@ -36,7 +36,7 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field fxFlex="50" class="mat-block">
+      <mat-form-field class="mat-block max-w-50% flex-full">
         <mat-label translate>widgets.input-widgets.datakey-value-type</mat-label>
         <mat-select formControlName="dataKeyValueType">
           <mat-option [value]="'string'">
@@ -78,8 +78,8 @@
     <mat-checkbox formControlName="required" style="margin-bottom: 8px;">
       {{ 'widgets.input-widgets.value-is-required' | translate }}
     </mat-checkbox>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex="50" class="mat-block">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block max-w-50% flex-full">
         <mat-label translate>widgets.input-widgets.ability-to-edit-attribute</mat-label>
         <mat-select formControlName="isEditable">
           <mat-option [value]="'editable'">
@@ -93,14 +93,14 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field [fxShow]="updateMultipleAttributesKeySettingsForm.get('isEditable').value === 'editable'" fxFlex="50" class="mat-block">
+      <mat-form-field [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('isEditable').value !== 'editable'" class="mat-block max-w-50% flex-full">
         <mat-label translate>widgets.input-widgets.disable-on-datakey-name</mat-label>
         <input matInput formControlName="disabledOnDataKey">
       </mat-form-field>
     </section>
     <section *ngIf="!['booleanSwitch', 'booleanCheckbox'].includes(updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value)"
-             fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex="50" class="mat-block">
+             class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block max-w-50% flex-full">
         <mat-label translate>widgets.input-widgets.field-appearance</mat-label>
         <mat-select formControlName="appearance">
           <mat-option [value]="'fill'">
@@ -111,7 +111,7 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field fxFlex="50" class="mat-block">
+      <mat-form-field class="mat-block max-w-50% flex-full">
         <mat-label translate>widgets.input-widgets.subscript-sizing</mat-label>
         <mat-select formControlName="subscriptSizing">
           <mat-option [value]="'fixed'">
@@ -124,10 +124,10 @@
       </mat-form-field>
     </section>
   </fieldset>
-  <fieldset [fxShow]="!updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value &&
-                       updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'booleanSwitch'" class="fields-group">
+  <fieldset [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value ||
+                             updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'booleanSwitch'" class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.slide-toggle-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.slide-toggle-label-position</mat-label>
       <mat-select formControlName="slideToggleLabelPosition">
         <mat-option [value]="'after'">
@@ -139,15 +139,15 @@
       </mat-select>
     </mat-form-field>
   </fieldset>
-  <fieldset [fxShow]="!updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value &&
-                       updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'select'" class="fields-group">
+  <fieldset [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value ||
+                             updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'select'" class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.select-options</legend>
-    <div fxLayout="column">
+    <div class="flex flex-col">
       <div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
            (cdkDropListDropped)="selectOptionDrop($event)">
         <div cdkDrag class="tb-draggable" *ngFor="let selectOptionControl of selectOptionsFormArray().controls; trackBy: trackBySelectOption;
                  let $index = index; last as isLast;"
-             fxLayout="column" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+             class="flex flex-col" [class.pb-2]="!isLast">
           <tb-datakey-select-option [formControl]="selectOptionControl"
                                     [expanded]="selectOptionControl.new"
                                     (removeSelectOption)="removeSelectOption($index)">
@@ -155,8 +155,8 @@
         </div>
       </div>
       <div *ngIf="!selectOptionsFormArray().controls.length">
-            <span translate fxLayoutAlign="center center"
-                  class="tb-prompt">widgets.input-widgets.no-select-options</span>
+            <span translate
+                  class="tb-prompt flex items-center justify-center">widgets.input-widgets.no-select-options</span>
       </div>
       <div style="padding-top: 16px;">
         <button mat-raised-button color="primary"
@@ -167,102 +167,102 @@
       </div>
     </div>
   </fieldset>
-  <fieldset [fxShow]="!updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value &&
-                       (updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'integer' ||
-                        updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'double')" class="fields-group">
+  <fieldset [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value ||
+                             (updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'integer' &&
+                             updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'double')" class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.numeric-field-settings</legend>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.step-interval</mat-label>
         <input matInput type="number" min="0" formControlName="step">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.min-value</mat-label>
         <input matInput type="number" formControlName="minValue">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.max-value</mat-label>
         <input matInput type="number" formControlName="maxValue">
       </mat-form-field>
     </section>
   </fieldset>
-  <fieldset [fxShow]="displayErrorMessagesSection()" class="fields-group">
+  <fieldset [class.!hidden]="!displayErrorMessagesSection()" class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.error-messages</legend>
-    <mat-form-field [fxShow]="updateMultipleAttributesKeySettingsForm.get('required').value" fxFlex class="mat-block">
+    <mat-form-field [class.!hidden]="!updateMultipleAttributesKeySettingsForm.get('required').value" class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.required-error-message</mat-label>
       <input matInput formControlName="requiredErrorMessage">
     </mat-form-field>
-    <section [fxShow]="updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'integer' ||
-                       updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'double'"
-             fxLayout="row" fxLayoutGap="8px">
-      <mat-form-field fxFlex class="mat-block">
+    <section [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'integer' &&
+                              updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'double'"
+             class="flex flex-row gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.min-value-error-message</mat-label>
         <input matInput formControlName="minValueErrorMessage">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.max-value-error-message</mat-label>
         <input matInput formControlName="maxValueErrorMessage">
       </mat-form-field>
     </section>
-    <mat-form-field [fxShow]="updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'dateTime' ||
-                              updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'date' ||
-                              updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'time'" fxFlex class="mat-block">
+    <mat-form-field [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'dateTime' &&
+                                     updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'date' &&
+                                     updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'time'" class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.invalid-date-error-message</mat-label>
       <input matInput formControlName="invalidDateErrorMessage">
     </mat-form-field>
-    <mat-form-field [fxShow]="updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'JSON'" fxFlex class="mat-block">
+    <mat-form-field [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'JSON'" class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.invalid-JSON-error-message</mat-label>
       <input matInput formControlName="invalidJsonErrorMessage">
     </mat-form-field>
   </fieldset>
-  <fieldset [fxShow]="!updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value &&
-                      updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'JSON'" class="fields-group">
+  <fieldset [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value ||
+                             updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'JSON'"class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.dialog-editor-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.title</mat-label>
       <input matInput formControlName="dialogTitle">
     </mat-form-field>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.save-button-label</mat-label>
         <input matInput formControlName="saveButtonLabel">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.cancel-button-label</mat-label>
         <input matInput formControlName="cancelButtonLabel">
       </mat-form-field>
     </section>
   </fieldset>
-  <fieldset [fxShow]="!updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value &&
-                      !['date', 'dateTime', 'time'].includes(updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value)"
+  <fieldset [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value ||
+                             ['date', 'dateTime', 'time'].includes(updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value)"
             class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.icon-settings</legend>
     <mat-slide-toggle formControlName="useCustomIcon" class="slide-block">
       {{ 'widgets.input-widgets.use-custom-icon' | translate }}
     </mat-slide-toggle>
-    <tb-material-icon-select [fxShow]="!updateMultipleAttributesKeySettingsForm.get('useCustomIcon').value"
+    <tb-material-icon-select [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('useCustomIcon').value"
                              label="{{ 'widgets.input-widgets.input-cell-icon' | translate }}"
                              iconClearButton
                              formControlName="icon">
     </tb-material-icon-select>
-    <tb-gallery-image-input [fxShow]="updateMultipleAttributesKeySettingsForm.get('useCustomIcon').value"
+    <tb-gallery-image-input [class.!hidden]="!updateMultipleAttributesKeySettingsForm.get('useCustomIcon').value"
                     label="{{ 'widgets.input-widgets.input-cell-icon' | translate }}"
                     formControlName="customIcon">
     </tb-gallery-image-input>
   </fieldset>
-  <fieldset [fxShow]="!updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value" class="fields-group">
+  <fieldset [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value" class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.value-conversion-settings</legend>
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.input-widgets.get-value-settings</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="updateMultipleAttributesKeySettingsForm.get('useGetValueFunction').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
             <mat-slide-toggle formControlName="useGetValueFunction" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+                              class="flex items-stretch justify-center">
               {{ 'widgets.input-widgets.use-get-value-function' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
@@ -278,14 +278,14 @@
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.input-widgets.set-value-settings</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="updateMultipleAttributesKeySettingsForm.get('useSetValueFunction').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
             <mat-slide-toggle formControlName="useSetValueFunction" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+                              class="flex items-stretch justify-center">
               {{ 'widgets.input-widgets.use-set-value-function' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html
index c9a6987c47..30ab7a6273 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html
@@ -18,7 +18,7 @@
 <section class="tb-widget-settings" [formGroup]="updateMultipleAttributesWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.widget-title</mat-label>
       <input matInput formControlName="widgetTitle">
     </mat-form-field>
@@ -29,28 +29,28 @@
   <fieldset class="fields-group fields-group-slider">
     <legend class="group-title" translate>widgets.input-widgets.action-buttons</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="updateMultipleAttributesWidgetSettingsForm.get('showActionButtons').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
           <mat-slide-toggle formControlName="showActionButtons" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+                            class="flex items-stretch justify-center">
             {{ 'widgets.input-widgets.show-action-buttons' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <section fxLayout="column">
+        <section class="flex flex-col">
           <mat-checkbox formControlName="updateAllValues" style="margin-bottom: 8px;">
             {{ 'widgets.input-widgets.update-all-values' | translate }}
           </mat-checkbox>
-          <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-            <mat-form-field fxFlex class="mat-block">
+          <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+            <mat-form-field class="mat-block flex-1">
               <mat-label translate>widgets.input-widgets.save-button-label</mat-label>
               <input matInput formControlName="saveButtonLabel">
             </mat-form-field>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="mat-block flex-1">
               <mat-label translate>widgets.input-widgets.reset-button-label</mat-label>
               <input matInput formControlName="resetButtonLabel">
             </mat-form-field>
@@ -61,11 +61,11 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.group-settings</legend>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-slide-toggle fxFlex="30" formControlName="showGroupTitle" class="slide-block">
+    <section class="flex flex-col gap-2 gt-xs:flex-row gt-xs:items-center gt-xs:justify-start">
+      <mat-slide-toggle formControlName="showGroupTitle" class="slide-block max-w-30% flex-full">
         {{ 'widgets.input-widgets.show-group-title' | translate }}
       </mat-slide-toggle>
-      <mat-form-field fxFlex="70" class="mat-block">
+      <mat-form-field class="mat-block max-w-70% flex-full">
         <mat-label translate>widgets.input-widgets.group-title</mat-label>
         <input matInput formControlName="groupTitle">
       </mat-form-field>
@@ -73,8 +73,8 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.layout</legend>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex="50" class="mat-block">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block max-w-50% flex-full">
         <mat-label translate>widgets.input-widgets.fields-alignment</mat-label>
         <mat-select formControlName="fieldsAlignment">
           <mat-option [value]="'row'">
@@ -85,17 +85,17 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field fxFlex="50" [fxShow]="updateMultipleAttributesWidgetSettingsForm.get('fieldsAlignment').value === 'row'" class="mat-block">
+      <mat-form-field [class.!hidden]="updateMultipleAttributesWidgetSettingsForm.get('fieldsAlignment').value !== 'row'" class="mat-block max-w-50% flex-full">
         <mat-label translate>widgets.input-widgets.fields-in-row</mat-label>
         <input matInput type="number" min="1" step="1" formControlName="fieldsInRow">
       </mat-form-field>
     </section>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex="50" class="mat-block">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block max-w-50% flex-full">
         <mat-label translate>widgets.input-widgets.row-gap</mat-label>
         <input matInput type="number" min="0" step="1" formControlName="rowGap">
       </mat-form-field>
-      <mat-form-field fxFlex="50" [fxShow]="updateMultipleAttributesWidgetSettingsForm.get('fieldsAlignment').value === 'row'" class="mat-block">
+      <mat-form-field [class.!hidden]="updateMultipleAttributesWidgetSettingsForm.get('fieldsAlignment').value !== 'row'" class="mat-block max-w-50% flex-full">
         <mat-label translate>widgets.input-widgets.column-gap</mat-label>
         <input matInput type="number" min="0" step="1" formControlName="columnGap">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-string-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-string-attribute-widget-settings.component.html
index 0adaf95e82..9d14b90ec9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-string-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-string-attribute-widget-settings.component.html
@@ -15,18 +15,18 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="updateStringAttributeWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="updateStringAttributeWidgetSettingsForm">
   <tb-update-attribute-general-settings
     formControlName="updateAttributeGeneralSettings">
   </tb-update-attribute-general-settings>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.text-field-settings</legend>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.min-length</mat-label>
         <input matInput type="number" step="1" min="0" formControlName="minLength">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.max-length</mat-label>
         <input matInput type="number" step="1" min="1" formControlName="maxLength">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-card-widget-settings.component.html
index c9f813843d..c29b89d1a0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-card-widget-settings.component.html
@@ -15,17 +15,17 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="navigationCardWidgetSettingsForm" fxLayout="column">
-  <mat-form-field fxFlex class="mat-block">
+<section class="tb-widget-settings flex flex-col" [formGroup]="navigationCardWidgetSettingsForm">
+  <mat-form-field class="mat-block flex-1">
     <mat-label translate>widgets.navigation.title</mat-label>
     <input required matInput formControlName="name">
   </mat-form-field>
-  <tb-material-icon-select fxFlex
+  <tb-material-icon-select class="flex-1"
                            iconClearButton
                            required
                            formControlName="icon">
   </tb-material-icon-select>
-  <mat-form-field fxFlex class="mat-block">
+  <mat-form-field class="mat-block flex-1">
     <mat-label translate>widgets.navigation.navigation-path</mat-label>
     <input required matInput formControlName="path">
   </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-cards-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-cards-widget-settings.component.html
index 8769614bdf..9dc90bdfda 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-cards-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-cards-widget-settings.component.html
@@ -15,16 +15,16 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="navigationCardsWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="navigationCardsWidgetSettingsForm">
   <section style="margin-bottom: 16px;">
     <div class="mat-caption" style="margin: -8px 0 8px;" translate>widgets.navigation.filter-type</div>
-    <mat-radio-group formControlName="filterType" fxLayoutGap="16px">
+    <mat-radio-group formControlName="filterType" class="gap-4">
       <mat-radio-button [value]="'all'">{{ 'widgets.navigation.filter-type-all' | translate }}</mat-radio-button>
       <mat-radio-button [value]="'include'">{{ 'widgets.navigation.filter-type-include' | translate }}</mat-radio-button>
       <mat-radio-button [value]="'exclude'">{{ 'widgets.navigation.filter-type-exclude' | translate }}</mat-radio-button>
     </mat-radio-group>
   </section>
-  <mat-form-field [fxShow]="navigationCardsWidgetSettingsForm.get('filterType').value !== 'all'" fxFlex class="mat-block" floatLabel="always">
+  <mat-form-field [class.!hidden]="navigationCardsWidgetSettingsForm.get('filterType').value === 'all'" class="mat-block flex-1" floatLabel="always">
     <mat-label translate>widgets.navigation.items</mat-label>
     <mat-chip-grid #filterItemsChipList>
       <mat-chip-row *ngFor="let filterItem of navigationCardsWidgetSettingsForm.get('filter').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html
index 5271825ccf..c3528e8a2c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html
@@ -32,7 +32,7 @@
     </tb-image-cards-select>
     <div class="tb-form-row space-between">
       <div>{{ (hasCenterValue ? 'widgets.wind-speed-direction.center-value' : 'widgets.wind-speed-direction.wind-direction') | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="centerValueFont"
                           [autoScale]="true"
                           [initialPreviewStyle]="{ color: windSpeedDirectionWidgetSettingsForm.get('centerValueColor').value?.color }"
@@ -63,8 +63,8 @@
     </div>
     <div class="tb-form-row space-between">
       <div>{{ 'widgets.wind-speed-direction.major-ticks' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-font-settings [fxShow]="majorTicksFontEnabled"
+      <div class="flex flex-row items-center justify-start gap-2">
+        <tb-font-settings [class.!hidden]="!majorTicksFontEnabled"
                           formControlName="majorTicksFont"
                           [initialPreviewStyle]="{ color: windSpeedDirectionWidgetSettingsForm.get('majorTicksColor').value }"
                           [autoScale]="true"
@@ -77,8 +77,8 @@
     </div>
     <div class="tb-form-row space-between">
       <div>{{ 'widgets.wind-speed-direction.minor-ticks' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-font-settings [fxShow]="minorTicksFontEnabled"
+      <div class="flex flex-row items-center justify-start gap-2">
+        <tb-font-settings [class.!hidden]="!minorTicksFontEnabled"
                           formControlName="minorTicksFont"
                           [initialPreviewStyle]="{ color: windSpeedDirectionWidgetSettingsForm.get('minorTicksColor').value }"
                           [autoScale]="true"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/trip-animation/trip-animation.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/trip-animation/trip-animation.component.html
index e0ad8ad69f..aea48ffcca 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/trip-animation/trip-animation.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/trip-animation/trip-animation.component.html
@@ -17,17 +17,19 @@
 -->
 <div class="trip-animation-widget">
     <div class="trip-animation-label-container" *ngIf="settings.showLabel" [innerHTML]="label"></div>
-    <div class="trip-animation-container" fxLayout="column">
+    <div class="trip-animation-container flex flex-col">
         <div class="map" #map></div>
-        <div class="trip-animation-info-panel" fxLayout="row">
+        <div class="trip-animation-info-panel flex flex-row">
             <button class="tooltip-button" mat-mini-fab color="primary" aria-label="tooltip"
                 *ngIf="settings.showTooltip" (click)="visibleTooltip = !visibleTooltip">
                 <mat-icon>info_outline</mat-icon>
             </button>
         </div>
-        <div class="trip-animation-tooltip md-whiteframe-z4" fxLayout="column"
-             [ngClass]="{'trip-animation-tooltip-hidden':!visibleTooltip}"
-             [ngStyle]="{'background-color': settings.tooltipColor, 'opacity': settings.tooltipOpacity, 'color': settings.tooltipFontColor}">
+        <div class="trip-animation-tooltip md-whiteframe-z4 flex flex-col"
+             [class.trip-animation-tooltip-hidden]="!visibleTooltip"
+             [style.background-color]="settings.tooltipColor"
+             [style.opacity]="settings.tooltipOpacity"
+             [style.color]="settings.tooltipFontColor">
           <div *ngFor="let mainTooltip of mainTooltips"
                [innerHTML]="mainTooltip"
                style="padding: 10px 0">

From fc18c1f2e50f9b61a326a7b82d918a037478dfa6 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Wed, 16 Oct 2024 16:01:51 +0300
Subject: [PATCH 23/34] Flex layout replacements. Switch to tailwind.css.

---
 .../device-wizard-dialog.component.html       |  4 +-
 ...entities-to-customer-dialog.component.html |  4 +-
 ...add-entities-to-edge-dialog.component.html |  6 +-
 .../assign-to-customer-dialog.component.html  |  4 +-
 .../admin/general-settings.component.html     | 10 +--
 .../pages/admin/home-settings.component.html  | 12 +--
 .../pages/admin/mail-server.component.html    | 75 +++++++++----------
 .../clients/client-dialog.component.html      |  4 +-
 .../oauth2/clients/client.component.html      |  4 +-
 .../pages/admin/queue/queue.component.html    | 14 ++--
 .../resource/resources-library.component.html | 22 +++---
 .../admin/security-settings.component.html    | 52 ++++++-------
 .../admin/send-test-sms-dialog.component.html |  4 +-
 .../pages/admin/sms-provider.component.html   | 10 +--
 .../two-factor-auth-settings.component.html   | 34 ++++-----
 15 files changed, 128 insertions(+), 131 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html b/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html
index 6806fb4a37..d0178b8c64 100644
--- a/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2 translate>device.add-device-text</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <div [tb-help]="'devices'"></div>
   <button mat-icon-button
           (click)="cancel()"
@@ -103,7 +103,7 @@
     <button mat-stroked-button *ngIf="selectedIndex > 0"
             [disabled]="(isLoading$ | async)"
             (click)="previousStep()">{{ 'action.back' | translate }}</button>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-stroked-button
             color="primary"
             *ngIf="showNext"
diff --git a/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html b/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html
index 96d8d62bc3..ec959a956f 100644
--- a/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="addEntitiesToCustomerFormGroup" (ngSubmit)="assign()">
   <mat-toolbar color="primary">
     <h2>{{ assignToCustomerTitle | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -39,7 +39,7 @@
       </tb-entity-list>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/dialogs/add-entities-to-edge-dialog.component.html b/ui-ngx/src/app/modules/home/dialogs/add-entities-to-edge-dialog.component.html
index fb8bb008e8..fc0d394b80 100644
--- a/ui-ngx/src/app/modules/home/dialogs/add-entities-to-edge-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/dialogs/add-entities-to-edge-dialog.component.html
@@ -16,9 +16,9 @@
 
 -->
 <form [formGroup]="addEntitiesToEdgeFormGroup" (ngSubmit)="assign()">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>{{ assignToEdgeTitle | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -39,7 +39,7 @@
       </tb-entity-list>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             style="margin-right: 20px;"
             type="button"
diff --git a/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html b/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html
index c740994ea5..fa46d6d950 100644
--- a/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="assignToCustomerFormGroup" (ngSubmit)="assign()">
   <mat-toolbar color="primary">
     <h2>{{ assignToCustomerTitle | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -38,7 +38,7 @@
       </tb-entity-autocomplete>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex flex-row items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html
index 870058bda3..027c605d48 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html
@@ -18,7 +18,7 @@
 <mat-card appearance="outlined" class="settings-card">
   <mat-card-header>
     <mat-card-title>
-      <div fxLayout="row">
+      <div class="flex flex-row">
         <span class="mat-headline-5" translate>admin.general-settings</span>
       </div>
     </mat-card-title>
@@ -44,7 +44,7 @@
           </div>
         </div>
       </fieldset>
-      <div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px" class="layout-wrap">
+      <div class="flex flex-row flex-wrap items-center justify-end gap-2">
         <button mat-button color="primary"
                 [disabled]="generalSettings.pristine"
                 (click)="discardGeneralSettings()"
@@ -96,11 +96,11 @@
               {{ 'admin.device-connectivity.' + protocol | translate }}
             </mat-slide-toggle>
             <div class="tb-form-row column-xs no-border no-padding tb-standard-fields">
-              <mat-form-field fxFlex>
+              <mat-form-field class="flex-1">
                 <mat-label translate>admin.device-connectivity.host</mat-label>
                 <input matInput formControlName="host"/>
               </mat-form-field>
-              <mat-form-field fxFlex>
+              <mat-form-field class="flex-1">
                 <mat-label translate>admin.device-connectivity.port</mat-label>
                 <input matInput type="number" min="0" max="65535" formControlName="port"/>
                 <mat-error *ngIf="deviceConnectivitySettingsForm.get(protocol + '.port').hasError('pattern')">
@@ -114,7 +114,7 @@
             </div>
           </div>
         </ng-template>
-        <div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px" class="layout-wrap">
+        <div class="flex flex-row flex-wrap items-center justify-end gap-2">
           <button mat-button color="primary"
                   [disabled]="deviceConnectivitySettingsForm.pristine"
                   (click)="discardDeviceConnectivitySettings()"
diff --git a/ui-ngx/src/app/modules/home/pages/admin/home-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/home-settings.component.html
index d928712547..9df874863b 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/home-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/home-settings.component.html
@@ -24,25 +24,25 @@
     </mat-card-header>
     <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
     </mat-progress-bar>
-    <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+    <div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
     <mat-card-content style="padding-top: 16px;">
       <form [formGroup]="homeSettings" (ngSubmit)="save()">
         <fieldset [disabled]="isLoading$ | async">
-          <section class="tb-default-dashboard" fxFlex fxLayout="column">
-            <section fxFlex fxLayout="column" fxLayout.gt-sm="row">
+          <section class="tb-default-dashboard flex flex-1 flex-col">
+            <section class="flex flex-1 flex-col gt-sm:flex-row">
               <tb-dashboard-autocomplete
-                fxFlex
+                class="flex-1"
                 label="{{ 'dashboard.home-dashboard' | translate }}"
                 formControlName="dashboardId"
                 [dashboardsScope]="'tenant'"
                 [selectFirstDashboard]="false"
               ></tb-dashboard-autocomplete>
-              <mat-checkbox fxFlex formControlName="hideDashboardToolbar">
+              <mat-checkbox class="flex-1" formControlName="hideDashboardToolbar">
                 {{ 'dashboard.home-dashboard-hide-toolbar' | translate }}
               </mat-checkbox>
             </section>
           </section>
-          <div fxLayout="row" fxLayoutAlign="end center" style="width: 100%;" class="layout-wrap">
+          <div class="flex w-full flex-row flex-wrap items-center justify-end">
             <button mat-button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || homeSettings.invalid || !homeSettings.dirty"
                     type="submit">{{'action.save' | translate}}
             </button>
diff --git a/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html b/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html
index c613234714..14a6358efb 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html
@@ -21,7 +21,7 @@
       <mat-card-title>
         <span class="mat-headline-5" translate>admin.outgoing-mail-settings</span>
       </mat-card-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <div tb-help="outgoingMailSettings"></div>
     </mat-card-header>
     <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@@ -49,7 +49,7 @@
 
           <mat-expansion-panel class="configuration-panel mat-elevation-z0" [expanded]="mailSettings.get('providerId').value === mailServerOauth2Provider.CUSTOM">
             <mat-expansion-panel-header>
-              <mat-panel-title fxLayoutAlign="start center" translate>
+              <mat-panel-title class="flex items-center justify-start" translate>
                 admin.connection-settings
               </mat-panel-title>
             </mat-expansion-panel-header>
@@ -62,15 +62,15 @@
                   </mat-option>
                 </mat-select>
               </mat-form-field>
-              <div fxLayout.gt-sm="row" fxLayoutGap.gt-sm="10px">
-                <mat-form-field class="mat-block" fxFlex="100" fxFlex.gt-sm="60">
+              <div class="gt-sm:flex gt-sm:flex-row gt-sm:gap-2.5">
+                <mat-form-field class="mat-block flex-full gt-sm:max-w-60%">
                   <mat-label translate>admin.smtp-host</mat-label>
                   <input matInput formControlName="smtpHost" placeholder="localhost" required/>
                   <mat-error *ngIf="mailSettings.get('smtpHost').hasError('required')">
                     {{ 'admin.smtp-host-required' | translate }}
                   </mat-error>
                 </mat-form-field>
-                <mat-form-field class="mat-block" fxFlex="100" fxFlex.gt-sm="40">
+                <mat-form-field class="mat-block flex-full gt-sm:max-w-40%">
                   <mat-label translate>admin.smtp-port</mat-label>
                   <input matInput #smtpPortInput formControlName="smtpPort" placeholder="25" maxlength="5" required/>
                   <mat-hint align="end">{{smtpPortInput.value?.length || 0}}/5</mat-hint>
@@ -93,10 +93,10 @@
                   {{ 'admin.timeout-invalid' | translate }}
                 </mat-error>
               </mat-form-field>
-              <mat-slide-toggle fxFlex formControlName="enableTls" style="display: block; padding-bottom: 22px;">
+              <mat-slide-toggle class="flex-1" formControlName="enableTls" style="display: block; padding-bottom: 22px;">
                 {{ 'admin.enable-tls' | translate }}
               </mat-slide-toggle>
-              <mat-form-field fxFlex class="mat-block" *ngIf="mailSettings.get('enableTls').value">
+              <mat-form-field class="mat-block flex-1" *ngIf="mailSettings.get('enableTls').value">
                 <mat-label translate>admin.tls-version</mat-label>
                 <mat-select formControlName="tlsVersion">
                   <mat-option *ngFor="let tlsVersion of tlsVersions" [value]="tlsVersion">
@@ -108,15 +108,15 @@
                 {{ 'admin.enable-proxy' | translate }}
               </mat-slide-toggle>
               <div *ngIf="mailSettings.get('enableProxy').value">
-                <div fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">
-                  <mat-form-field class="mat-block" fxFlex="100" fxFlex.gt-sm="60">
+                <div class="gt-sm:flex gt-sm:flex-row gt-sm:gap-2">
+                  <mat-form-field class="mat-block flex-full gt-sm:max-w-60%">
                     <mat-label translate>admin.proxy-host</mat-label>
                     <input matInput required formControlName="proxyHost">
                     <mat-error *ngIf="mailSettings.get('proxyHost').hasError('required')">
                       {{ 'admin.proxy-host-required' | translate }}
                     </mat-error>
                   </mat-form-field>
-                  <mat-form-field class="mat-block" fxFlex="100" fxFlex.gt-sm="40">
+                  <mat-form-field class="mat-block flex-full gt-sm:max-w-40%">
                     <mat-label translate>admin.proxy-port</mat-label>
                     <input matInput required formControlName="proxyPort" type="number" step="1" min="1" max="65535">
                     <mat-error *ngIf="mailSettings.get('proxyPort').hasError('required')">
@@ -129,12 +129,12 @@
                     </mat-error>
                   </mat-form-field>
                 </div>
-                <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-                  <mat-form-field fxFlex class="mat-block">
+                <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+                  <mat-form-field class="mat-block flex-1">
                     <mat-label translate>admin.proxy-user</mat-label>
                     <input matInput formControlName="proxyUser">
                   </mat-form-field>
-                  <mat-form-field fxFlex class="mat-block">
+                  <mat-form-field class="mat-block flex-1">
                     <mat-label translate>admin.proxy-password</mat-label>
                     <input matInput type="password" formControlName="proxyPassword" autocomplete="new-proxy-password">
                     <tb-toggle-password matSuffix></tb-toggle-password>
@@ -144,19 +144,19 @@
             </ng-template>
           </mat-expansion-panel>
 
-          <fieldset class="fields-group" fxLayout="column">
+          <fieldset class="fields-group flex flex-col">
             <legend class="group-title" translate>admin.oauth2.authentication</legend>
             <mat-form-field class="mat-block">
               <mat-label translate>common.username</mat-label>
               <input matInput formControlName="username" placeholder="{{ 'common.enter-username' | translate }}"
                      autocomplete="new-username"/>
             </mat-form-field>
-            <div fxLayoutAlign="space-between center" style="height: 50px; padding-bottom: 20px" [fxHide]="mailSettings.get('providerId').value === 'SENDGRID'">
+            <div class="flex items-center justify-between" style="height: 50px; padding-bottom: 20px" [class.!hidden]="mailSettings.get('providerId').value === 'SENDGRID'">
               <mat-button-toggle-group class="tb-notification-unread-toggle-group"
                                        style="width: 250px;"
                                        formControlName="enableOauth2">
-                <mat-button-toggle fxFlex [value]=false>{{ 'admin.oauth2.basic' | translate }}</mat-button-toggle>
-                <mat-button-toggle fxFlex [value]=true>{{ 'admin.oauth2.oauth2' | translate }}</mat-button-toggle>
+                <mat-button-toggle class="flex-1" [value]=false>{{ 'admin.oauth2.basic' | translate }}</mat-button-toggle>
+                <mat-button-toggle class="flex-1" [value]=true>{{ 'admin.oauth2.oauth2' | translate }}</mat-button-toggle>
               </mat-button-toggle-group>
               <div class="details-buttons" *ngIf="helpLink && mailSettings.get('enableOauth2').value">
                 <div [tb-help]="helpLink"></div>
@@ -174,8 +174,8 @@
               </mat-form-field>
             </section>
             <section *ngIf="mailSettings.get('enableOauth2').value">
-              <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-                <mat-form-field fxFlex class="mat-block">
+              <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+                <mat-form-field class="mat-block flex-1">
                   <mat-label translate>admin.oauth2.client-id</mat-label>
                   <input matInput formControlName="clientId" required>
                   <mat-error *ngIf="mailSettings.get('clientId').hasError('required')">
@@ -186,7 +186,7 @@
                   </mat-error>
                 </mat-form-field>
 
-                <mat-form-field fxFlex class="mat-block">
+                <mat-form-field class="mat-block flex-1">
                   <mat-label translate>admin.oauth2.client-secret</mat-label>
                   <input matInput formControlName="clientSecret" required>
                   <mat-error *ngIf="mailSettings.get('clientSecret').hasError('required')">
@@ -198,7 +198,7 @@
                 </mat-form-field>
               </div>
 
-              <mat-form-field fxFlex class="mat-block" *ngIf="mailSettings.get('providerId').value === mailServerOauth2Provider.OFFICE_365">
+              <mat-form-field class="mat-block flex-1" *ngIf="mailSettings.get('providerId').value === mailServerOauth2Provider.OFFICE_365">
                 <mat-label translate>admin.oauth2.microsoft-tenant-id</mat-label>
                 <input matInput formControlName="providerTenantId" required>
                 <mat-error *ngIf="mailSettings.get('providerTenantId').hasError('required')">
@@ -207,13 +207,13 @@
               </mat-form-field>
               <mat-expansion-panel class="mat-elevation-z0" [expanded]="mailSettings.get('providerId').value === mailServerOauth2Provider.CUSTOM">
                 <mat-expansion-panel-header>
-                  <mat-panel-description fxLayoutAlign="end" translate>
+                  <mat-panel-description class="flex items-stretch justify-end" translate>
                     tenant-profile.advanced-settings
                   </mat-panel-description>
                 </mat-expansion-panel-header>
                 <ng-template matExpansionPanelContent>
-                  <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-                    <mat-form-field fxFlex class="mat-block">
+                  <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+                    <mat-form-field class="mat-block flex-1">
                       <mat-label translate>admin.oauth2.authorization-uri</mat-label>
                       <input matInput formControlName="authUri" required>
                       <button mat-icon-button matSuffix
@@ -229,7 +229,7 @@
                       </mat-error>
                     </mat-form-field>
 
-                    <mat-form-field fxFlex class="mat-block">
+                    <mat-form-field class="mat-block flex-1">
                       <mat-label translate>admin.oauth2.token-uri</mat-label>
                       <input matInput formControlName="tokenUri" required>
                       <button mat-icon-button matSuffix
@@ -245,7 +245,7 @@
                       </mat-error>
                     </mat-form-field>
                   </div>
-                  <mat-form-field fxFlex class="mat-block">
+                  <mat-form-field class="mat-block flex-1">
                     <mat-label translate>admin.oauth2.scope</mat-label>
                     <mat-chip-grid #scopeList>
                       <mat-chip-row *ngFor="let scope of mailSettings.get('scope').value; let k = index; trackBy: trackByParams"
@@ -265,12 +265,12 @@
                 </ng-template>
               </mat-expansion-panel>
 
-              <fieldset class="fields-group" fxLayout="column">
+              <fieldset class="fields-group flex flex-col">
                 <legend class="group-title" translate>admin.oauth2.redirect-uri</legend>
-                <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px">
-                  <div fxLayout="column" fxFlex.sm="60" fxFlex.gt-sm="50" [formGroup]="domainForm">
-                    <div fxLayout="row" fxLayout.xs="column" fxLayout.md="column" fxLayoutGap="8px" fxLayoutGap.md="0px">
-                      <mat-form-field fxFlex="30" fxFlex.md fxFlex.xs class="mat-block">
+                <div class="flex flex-1 flex-row gap-2 xs:flex-col">
+                  <div class="flex flex-col sm:max-w-60% sm:flex-full gt-sm:max-w-50% gt-sm:flex-full" [formGroup]="domainForm">
+                    <div class="flex flex-row gap-2 xs:flex-col md:flex-col md:gap-0">
+                      <mat-form-field class="mat-block max-w-30% flex-full xs:max-w-full xs:flex-1 md:max-w-full md:flex-1">
                         <mat-label translate>admin.oauth2.protocol</mat-label>
                         <mat-select formControlName="scheme">
                           <mat-option *ngFor="let protocol of protocols" [value]="protocol">
@@ -278,7 +278,7 @@
                           </mat-option>
                         </mat-select>
                       </mat-form-field>
-                      <mat-form-field fxFlex class="mat-block">
+                      <mat-form-field class="mat-block flex-1">
                         <mat-label translate>admin.domain-name</mat-label>
                         <input matInput formControlName="name" required>
                         <mat-error *ngIf="domainForm.get('name').hasError('pattern')">
@@ -294,8 +294,8 @@
                     </mat-error>
                   </div>
 
-                  <div fxFlex fxLayout="column">
-                    <mat-form-field fxFlex class="mat-block">
+                  <div class="flex flex-1 flex-col">
+                    <mat-form-field class="mat-block flex-1">
                       <mat-label translate>admin.oauth2.redirect-uri-template</mat-label>
                       <input matInput formControlName="redirectUri" readonly>
                       <tb-copy-button
@@ -311,10 +311,7 @@
                 </div>
               </fieldset>
             </section>
-            <section fxLayout="row"
-                     fxLayout.xs="column"
-                     fxLayoutAlign.gt-xs="space-between center"
-                     style="padding-bottom: 12px"
+            <section class="flex flex-row pb-3 xs:flex-col gt-xs:items-center gt-xs:justify-between"
                      *ngIf="mailSettings.get('enableOauth2').value">
               <div>
                 <span class="token-status" translate>admin.oauth2.access-token-status</span>
@@ -329,7 +326,7 @@
               </button>
             </section>
           </fieldset>
-          <div fxLayout="row" fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end" fxLayoutGap="16px">
+          <div class="flex flex-row items-center justify-end gap-4 xs:flex-col xs:items-stretch">
             <button mat-raised-button type="button"
                     [disabled]="(isLoading$ | async) || mailSettings.get('enableOauth2').value ? mailSettings.invalid || domainForm.invalid || (mailSettings.dirty || domainForm.dirty) : mailSettings.invalid"
                     (click)="sendTestMail()">
diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client-dialog.component.html b/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client-dialog.component.html
index dcce273be2..6fa0f29556 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client-dialog.component.html
@@ -18,7 +18,7 @@
 <form (ngSubmit)="save()" style="width: 850px;max-height: 100vh">
   <mat-toolbar color="primary">
     <h2>{{ 'admin.oauth2.add-client' | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <div [tb-help]="helpLinkId()"></div>
     <button mat-icon-button
             (click)="cancel()"
@@ -32,7 +32,7 @@
   <div mat-dialog-content style="padding: 0">
     <tb-client createNewDialog #clientComponent></tb-client>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.html b/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.html
index 060c4177e8..a5404d0933 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.html
@@ -72,7 +72,7 @@
   </div>
   <mat-expansion-panel class="configuration-panel mat-elevation-z0" [expanded]="advancedExpanded">
     <mat-expansion-panel-header>
-      <mat-panel-title fxLayoutAlign="start center" translate>
+      <mat-panel-title class="flex items-center justify-start" translate>
         admin.oauth2.advanced-settings
       </mat-panel-title>
     </mat-expansion-panel-header>
@@ -235,7 +235,7 @@
                   </mat-select>
                 </mat-form-field>
                 <mat-form-field class="flex"
-                                [fxShow]="entityForm.get('mapperConfig.basic.tenantNameStrategy').value === 'CUSTOM'">
+                                [class.!hidden]="entityForm.get('mapperConfig.basic.tenantNameStrategy').value !== 'CUSTOM'">
                   <mat-label translate>admin.oauth2.tenant-name-pattern</mat-label>
                   <input matInput formControlName="tenantNamePattern"
                          [required]="entityForm.get('mapperConfig.basic.tenantNameStrategy').value === 'CUSTOM'">
diff --git a/ui-ngx/src/app/modules/home/pages/admin/queue/queue.component.html b/ui-ngx/src/app/modules/home/pages/admin/queue/queue.component.html
index ff5a07dbb6..f25cd1c857 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/queue/queue.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/queue/queue.component.html
@@ -15,31 +15,31 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
-  <button mat-raised-button color="primary" fxFlex.xs
+  <button mat-raised-button color="primary" class="xs:flex-1"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{ 'queue.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onQueueIdCopied($event)"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>queue.copyId</span>
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column" [formGroup]="entityForm">
+<div class="mat-padding flex flex-col" [formGroup]="entityForm">
   <tb-queue-form
     [newQueue]="isAdd"
     [systemQueue]="true"
diff --git a/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library.component.html b/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library.component.html
index 441a311021..0389d32aab 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library.component.html
@@ -15,37 +15,37 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
-  <button mat-raised-button color="primary" fxFlex.xs
+  <button mat-raised-button color="primary" class="xs:flex-1"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'downloadResource')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{ 'resource.download' | translate }}
   </button>
-  <button mat-raised-button color="primary" fxFlex.xs
+  <button mat-raised-button color="primary" class="xs:flex-1"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{ 'resource.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onResourceIdCopied()"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>resource.copyId</span>
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block">
@@ -80,8 +80,8 @@
         [existingFileName]="entityForm.get('fileName')?.value"
         (fileNameChanged)="entityForm?.get('fileName').patchValue($event)">
       </tb-file-input>
-      <div *ngIf="!isAdd && !(isEdit && entityForm.get('resourceType').value === resourceType.JS_MODULE)" fxLayout="row" fxLayoutGap.gt-md="8px" fxLayoutGap.sm="8px" fxLayout.xs="column" fxLayout.md="column">
-        <mat-form-field fxFlex>
+      <div *ngIf="!isAdd && !(isEdit && entityForm.get('resourceType').value === resourceType.JS_MODULE)" class="flex flex-row xs:flex-col sm:gap-2 md:flex-col gt-md:gap-2">
+        <mat-form-field class="flex-1">
           <mat-label translate>resource.file-name</mat-label>
           <input matInput formControlName="fileName" type="text">
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/pages/admin/security-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/security-settings.component.html
index 0b9df7c5ae..bdb422f856 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/security-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/security-settings.component.html
@@ -20,7 +20,7 @@
     <mat-card-title>
       <span class="mat-headline-5" translate>admin.security-settings</span>
     </mat-card-title>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <div tb-help="securitySettings"></div>
   </mat-card-header>
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@@ -89,8 +89,8 @@
         <fieldset class="fields-group">
           <legend class="group-title" translate>admin.password-policy</legend>
           <section formGroupName="passwordPolicy">
-            <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-              <mat-form-field fxFlex class="mat-block">
+            <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>admin.minimum-password-length</mat-label>
                 <input matInput type="number"
                        formControlName="minimumLength"
@@ -108,7 +108,7 @@
                   {{ 'admin.minimum-password-length-range' | translate }}
                 </mat-error>
               </mat-form-field>
-              <mat-form-field fxFlex class="mat-block" subscriptSizing="dynamic">
+              <mat-form-field class="mat-block flex-1" subscriptSizing="dynamic">
                 <mat-label translate>admin.maximum-password-length</mat-label>
                 <input matInput type="number" formControlName="maximumLength" step="1" min="6"/>
                 <mat-hint></mat-hint>
@@ -120,8 +120,8 @@
                 </mat-error>
               </mat-form-field>
             </div>
-            <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-              <mat-form-field fxFlex class="mat-block">
+            <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>admin.minimum-uppercase-letters</mat-label>
                 <input matInput type="number"
                        formControlName="minimumUppercaseLetters"
@@ -132,7 +132,7 @@
                   {{ 'admin.minimum-uppercase-letters-range' | translate }}
                 </mat-error>
               </mat-form-field>
-              <mat-form-field fxFlex class="mat-block">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>admin.minimum-lowercase-letters</mat-label>
                 <input matInput type="number"
                        formControlName="minimumLowercaseLetters"
@@ -144,8 +144,8 @@
                 </mat-error>
               </mat-form-field>
             </div>
-            <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-              <mat-form-field fxFlex class="mat-block">
+            <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>admin.minimum-digits</mat-label>
                 <input matInput type="number"
                        formControlName="minimumDigits"
@@ -155,7 +155,7 @@
                   {{ 'admin.minimum-digits-range' | translate }}
                 </mat-error>
               </mat-form-field>
-              <mat-form-field fxFlex class="mat-block">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>admin.minimum-special-characters</mat-label>
                 <input matInput type="number"
                        formControlName="minimumSpecialCharacters"
@@ -167,8 +167,8 @@
                 </mat-error>
               </mat-form-field>
             </div>
-            <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-              <mat-form-field fxFlex class="mat-block">
+            <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>admin.password-expiration-period-days</mat-label>
                 <input matInput type="number"
                        formControlName="passwordExpirationPeriodDays"
@@ -179,7 +179,7 @@
                   {{ 'admin.password-expiration-period-days-range' | translate }}
                 </mat-error>
               </mat-form-field>
-              <mat-form-field fxFlex class="mat-block">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>admin.password-reuse-frequency-days</mat-label>
                 <input matInput type="number"
                        formControlName="passwordReuseFrequencyDays"
@@ -191,11 +191,11 @@
                 </mat-error>
               </mat-form-field>
             </div>
-            <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-              <mat-checkbox fxFlex formControlName="allowWhitespaces" style="margin-bottom: 16px">
+            <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+              <mat-checkbox class="flex-1" formControlName="allowWhitespaces" style="margin-bottom: 16px">
                 <mat-label translate>admin.allow-whitespace</mat-label>
               </mat-checkbox>
-              <mat-checkbox fxFlex formControlName="forceUserToResetPasswordIfNotValid" style="margin-bottom: 16px">
+              <mat-checkbox class="flex-1" formControlName="forceUserToResetPasswordIfNotValid" style="margin-bottom: 16px">
                 <mat-label tb-hint-tooltip-icon="{{'admin.force-reset-password-if-no-valid-hint' | translate}}">
                   {{'admin.force-reset-password-if-no-valid' | translate}}
                 </mat-label>
@@ -203,7 +203,7 @@
             </div>
           </section>
         </fieldset>
-        <div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px" class="layout-wrap" style="margin-top: 16px">
+        <div class="flex flex-row flex-wrap items-center justify-end gap-2" style="margin-top: 16px">
           <button mat-button color="primary"
                   [disabled]="securitySettingsFormGroup.pristine"
                   (click)="discardSetting()"
@@ -222,21 +222,21 @@
     <mat-card-title>
       <span class="mat-headline-5" translate>admin.jwt.security-settings</span>
     </mat-card-title>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <div tb-help="jwtSecuritySettings"></div>
   </mat-card-header>
   <mat-card-content style="padding-top: 16px;">
     <form [formGroup]="jwtSecuritySettingsFormGroup" (ngSubmit)="saveJwtSettings()" autocomplete="off">
-      <fieldset [disabled]="isLoading$ | async" fxLayout="column" fxLayoutGap="8px">
-        <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px">
-          <mat-form-field fxFlex class="mat-block">
+      <fieldset [disabled]="isLoading$ | async" class="flex flex-col gap-2">
+        <div class="flex flex-row gap-2 xs:flex-col">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>admin.jwt.issuer-name</mat-label>
             <input matInput required formControlName="tokenIssuer"/>
             <mat-error *ngIf="jwtSecuritySettingsFormGroup.get('tokenIssuer').hasError('required')">
               {{ 'admin.jwt.issuer-name-required' | translate }}
             </mat-error>
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>admin.jwt.signings-key</mat-label>
             <input matInput (focus)="markAsTouched()" required formControlName="tokenSigningKey"/>
             <button type="button"
@@ -259,8 +259,8 @@
             </mat-error>
           </mat-form-field>
         </div>
-        <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px">
-          <mat-form-field fxFlex class="mat-block">
+        <div class="flex flex-row gap-2 xs:flex-col">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>admin.jwt.expiration-time</mat-label>
             <input matInput type="number" required
                    formControlName="tokenExpirationTime"
@@ -276,7 +276,7 @@
               {{ 'admin.jwt.expiration-time-min' | translate }}
             </mat-error>
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>admin.jwt.refresh-expiration-time</mat-label>
             <input matInput type="number" required
                    formControlName="refreshTokenExpTime"
@@ -296,7 +296,7 @@
             </mat-error>
           </mat-form-field>
         </div>
-        <div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px" class="layout-wrap">
+        <div class="flex flex-row flex-wrap items-center justify-end gap-2">
           <button mat-button color="primary"
                   [disabled]="jwtSecuritySettingsFormGroup.pristine"
                   (click)="discardJwtSetting()"
diff --git a/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html b/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html
index 891f84d08d..26b3ad6a67 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="sendTestSmsFormGroup" style="min-width: 500px; position: relative;">
   <mat-toolbar color="primary">
     <h2 translate>admin.send-test-sms</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="close()"
             type="button">
@@ -47,7 +47,7 @@
       </mat-form-field>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html b/ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html
index ba8e24c302..b69bc5a377 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html
@@ -20,7 +20,7 @@
     <mat-card-title>
       <span class="mat-headline-5" translate>admin.sms-provider-settings</span>
     </mat-card-title>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <div tb-help="smsProviderSettings"></div>
   </mat-card-header>
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@@ -32,7 +32,7 @@
         required
         formControlName="configuration">
       </tb-sms-provider-configuration>
-      <div fxLayout="row" fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end" fxLayoutGap="16px">
+      <div class="flex flex-row items-center justify-end gap-4 xs:flex-col xs:items-stretch">
         <button mat-raised-button type="button"
                 [disabled]="(isLoading$ | async) || smsProvider.invalid" (click)="sendTestSms()">
           {{'admin.send-test-sms' | translate}}
@@ -50,7 +50,7 @@
       <mat-card-title>
         <span class="mat-headline-5" translate>admin.slack-settings</span>
       </mat-card-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <div tb-help="slackSettings"></div>
     </mat-card-header>
     <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@@ -66,7 +66,7 @@
       <mat-card-title>
         <span class="mat-headline-5" translate>admin.mobile-settings</span>
       </mat-card-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <!--    <div tb-help="mobileSettings"></div>-->
     </mat-card-header>
     <mat-card-content formGroupName="MOBILE_APP" *ngIf="isSysAdmin()">
@@ -79,7 +79,7 @@
                      (fileNameChanged)="notificationSettingsForm?.get('deliveryMethodsConfigs.MOBILE_APP.firebaseServiceAccountCredentialsFileName').patchValue($event)">
       </tb-file-input>
     </mat-card-content>
-    <mat-card-actions fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end">
+    <mat-card-actions  class="flex items-center justify-end xs:flex-col xs:items-stretch">
       <button mat-button mat-raised-button color="primary"
               [disabled]="(isLoading$ | async) || notificationSettingsForm.invalid || !notificationSettingsForm.dirty"
               type="submit">{{'action.save' | translate}}
diff --git a/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html
index d2e6419479..d62ad94428 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html
@@ -21,7 +21,7 @@
       <mat-card-title>
         <span class="mat-headline-5" translate>admin.2fa.2fa</span>
       </mat-card-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <div tb-help="twoFactorAuthentication"></div>
     </mat-card-header>
     <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@@ -36,7 +36,7 @@
               <ng-container *ngFor="let provider of providersForm.controls; let i = index; let $last = last; trackBy: trackByElement">
                 <mat-expansion-panel class="provider" [formGroupName]="i">
                   <mat-expansion-panel-header>
-                    <mat-panel-title fxLayoutAlign="start center">
+                    <mat-panel-title class="flex items-center justify-start">
                       <mat-slide-toggle
                         (mousedown)="toggleExtensionPanel($event, i, provider.get('enable').value)"
                         formControlName="enable">
@@ -48,7 +48,7 @@
                   <ng-template matExpansionPanelContent>
                     <ng-container [ngSwitch]="provider.get('providerType').value">
                       <ng-container *ngSwitchCase="twoFactorAuthProviderType.TOTP">
-                        <mat-form-field fxFlex class="mat-block">
+                        <mat-form-field class="mat-block flex-1">
                           <mat-label translate>admin.2fa.issuer-name</mat-label>
                           <input matInput formControlName="issuerName" required>
                           <mat-error *ngIf="provider.get('issuerName').hasError('required') ||
@@ -58,8 +58,8 @@
                         </mat-form-field>
                       </ng-container>
                       <div *ngSwitchCase="twoFactorAuthProviderType.SMS"
-                           fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-                        <mat-form-field fxFlex class="mat-block">
+                           class="flex flex-row xs:flex-col gt-xs:gap-2">
+                        <mat-form-field class="mat-block flex-1">
                           <mat-label translate>admin.2fa.verification-message-template</mat-label>
                           <input matInput formControlName="smsVerificationMessageTemplate" required>
                           <mat-error *ngIf="provider.get('smsVerificationMessageTemplate').hasError('required')">
@@ -70,7 +70,7 @@
                           </mat-error>
                         </mat-form-field>
 
-                        <mat-form-field fxFlex class="mat-block">
+                        <mat-form-field class="mat-block flex-1">
                           <mat-label translate>admin.2fa.verification-code-lifetime</mat-label>
                           <input matInput formControlName="verificationCodeLifetime" type="number" step="1" min="1" required>
                           <mat-error *ngIf="provider.get('verificationCodeLifetime').hasError('required')">
@@ -83,7 +83,7 @@
                         </mat-form-field>
                       </div>
                       <div *ngSwitchCase="twoFactorAuthProviderType.EMAIL">
-                        <mat-form-field fxFlex class="mat-block">
+                        <mat-form-field class="mat-block flex-1">
                           <mat-label translate>admin.2fa.verification-code-lifetime</mat-label>
                           <input matInput formControlName="verificationCodeLifetime" type="number" step="1" min="1" required>
                           <mat-error *ngIf="provider.get('verificationCodeLifetime').hasError('required')">
@@ -96,7 +96,7 @@
                         </mat-form-field>
                       </div>
                       <div *ngSwitchCase="twoFactorAuthProviderType.BACKUP_CODE">
-                        <mat-form-field fxFlex class="mat-block">
+                        <mat-form-field class="mat-block flex-1">
                           <mat-label translate>admin.2fa.number-of-codes</mat-label>
                           <input matInput formControlName="codesQuantity" type="number" step="1" min="1" required>
                           <mat-error *ngIf="provider.get('codesQuantity').hasError('required')">
@@ -116,8 +116,8 @@
             </fieldset>
             <fieldset class="fields-group">
               <legend class="group-title" translate>admin.2fa.verification-limitations</legend>
-              <div class="input-row" fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-                <mat-form-field fxFlex class="mat-block">
+              <div class="input-row flex flex-row xs:flex-col gt-xs:gap-2">
+                <mat-form-field class="mat-block flex-1">
                   <mat-label translate>admin.2fa.total-allowed-time-for-verification</mat-label>
                   <input matInput required formControlName="totalAllowedTimeForVerification" type="number" step="1" min="60">
                   <mat-error *ngIf="twoFaFormGroup.get('totalAllowedTimeForVerification').hasError('required')">
@@ -128,7 +128,7 @@
                     {{ 'admin.2fa.total-allowed-time-for-verification-pattern' | translate }}
                   </mat-error>
                 </mat-form-field>
-                <mat-form-field fxFlex class="mat-block">
+                <mat-form-field class="mat-block flex-1">
                   <mat-label translate>admin.2fa.retry-verification-code-period</mat-label>
                   <input matInput required formControlName="minVerificationCodeSendPeriod" type="number" step="1" min="5">
                   <mat-error *ngIf="twoFaFormGroup.get('minVerificationCodeSendPeriod').hasError('required')">
@@ -139,7 +139,7 @@
                     {{ 'admin.2fa.retry-verification-code-period-pattern' | translate }}
                   </mat-error>
                 </mat-form-field>
-                <mat-form-field fxFlex class="mat-block">
+                <mat-form-field class="mat-block flex-1">
                   <mat-label translate>admin.2fa.max-verification-failures-before-user-lockout</mat-label>
                   <input matInput formControlName="maxVerificationFailuresBeforeUserLockout" type="number" step="1" min="0" max="65535">
                   <mat-error *ngIf="twoFaFormGroup.get('maxVerificationFailuresBeforeUserLockout').hasError('pattern')
@@ -152,7 +152,7 @@
 
               <mat-expansion-panel class="provider">
                 <mat-expansion-panel-header>
-                  <mat-panel-title fxLayoutAlign="start center">
+                  <mat-panel-title class="flex items-center justify-start">
                     <mat-slide-toggle (mousedown)="toggleExtensionPanel($event, providersForm.length, twoFaFormGroup.get('verificationCodeCheckRateLimitEnable').value)"
                                       formControlName="verificationCodeCheckRateLimitEnable">
                     </mat-slide-toggle>
@@ -160,8 +160,8 @@
                   </mat-panel-title>
                 </mat-expansion-panel-header>
                 <ng-template matExpansionPanelContent>
-                  <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-                    <mat-form-field fxFlex class="mat-block">
+                  <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+                    <mat-form-field class="mat-block flex-1">
                       <mat-label translate>admin.2fa.number-of-checking-attempts</mat-label>
                       <input matInput formControlName="verificationCodeCheckRateLimitNumber" required type="number" step="1" min="1">
                       <mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('required')">
@@ -172,7 +172,7 @@
                         {{ 'admin.2fa.number-of-checking-attempts-pattern' | translate }}
                       </mat-error>
                     </mat-form-field>
-                    <mat-form-field fxFlex class="mat-block">
+                    <mat-form-field class="mat-block flex-1">
                       <mat-label translate>admin.2fa.within-time</mat-label>
                       <input matInput formControlName="verificationCodeCheckRateLimitTime" required type="number" step="1" min="1">
                       <mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitTime').hasError('required')">
@@ -188,7 +188,7 @@
               </mat-expansion-panel>
             </fieldset>
           </div>
-          <div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-end gap-2">
             <button mat-button mat-raised-button color="primary"
                     [disabled]="(isLoading$ | async) || twoFaFormGroup.invalid || !twoFaFormGroup.dirty"
                     type="submit">

From e394cb5a43571ebf2ce0cfa9bd258b63d6e9d7f2 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Wed, 16 Oct 2024 18:34:14 +0300
Subject: [PATCH 24/34] Flex layout replacements. Switch to tailwind.css.

---
 .../home/pages/asset/asset.component.html     | 26 ++++-----
 .../pages/customer/customer.component.html    | 34 +++++------
 .../dashboard/dashboard-form.component.html   | 38 ++++++------
 ...ake-dashboard-public-dialog.component.html | 12 ++--
 ...-dashboard-customers-dialog.component.html |  8 +--
 ...ice-transport-configuration.component.html | 32 +++++-----
 ...e-check-connectivity-dialog.component.html | 30 +++++-----
 .../device-credentials-dialog.component.html  |  4 +-
 .../home/pages/device/device.component.html   | 36 ++++++------
 .../edge-instructions-dialog.component.html   |  6 +-
 .../home/pages/edge/edge.component.html       | 58 +++++++++----------
 .../entity-view/entity-view.component.html    | 30 +++++-----
 .../inbox/inbox-table-header.component.html   |  6 +-
 ...cipient-notification-dialog.component.html | 10 ++--
 .../recipient-table-header.component.html     |  4 +-
 .../rule/escalation-form.component.html       | 14 ++---
 .../rule/escalations.component.html           | 13 ++---
 .../rule-notification-dialog.component.html   | 57 +++++++++---------
 .../rule/rule-table-header.component.html     |  4 +-
 .../sent/sent-error-dialog.component.html     |  2 +-
 .../sent-notification-dialog.component.html   | 26 ++++-----
 .../notification-setting-form.component.html  | 12 ++--
 .../notification-settings.component.html      | 17 +++---
 ...action-button-configuration.component.html | 21 ++++---
 ...tion-template-configuration.component.html | 16 ++---
 ...emplate-notification-dialog.component.html |  8 +--
 .../template-table-header.component.html      |  4 +-
 .../ota-update/ota-update.component.html      | 54 ++++++++---------
 .../home/pages/profile/profile.component.html | 15 +++--
 .../add-rule-node-dialog.component.html       |  4 +-
 .../add-rule-node-link-dialog.component.html  |  4 +-
 ...ate-nested-rulechain-dialog.component.html |  6 +-
 .../rule-node-details.component.html          |  2 +-
 .../rulechain/rule-node-link.component.html   |  2 +-
 .../rulechain/rulechain-page.component.html   | 39 ++++++-------
 .../pages/rulechain/rulechain.component.html  | 24 ++++----
 .../pages/rulechain/rulenode.component.html   | 10 ++--
 37 files changed, 341 insertions(+), 347 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/asset/asset.component.html b/ui-ngx/src/app/modules/home/pages/asset/asset.component.html
index b8bfd20362..6dd373c714 100644
--- a/ui-ngx/src/app/modules/home/pages/asset/asset.component.html
+++ b/ui-ngx/src/app/modules/home/pages/asset/asset.component.html
@@ -15,63 +15,63 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePublic')"
-          [fxShow]="!isEdit && assetScope === 'tenant' && !isAssignedToCustomer(entity) && !entity?.customerIsPublic">
+          [class.!hidden]="isEdit || assetScope !== 'tenant' || isAssignedToCustomer(entity) || entity?.customerIsPublic">
     {{'asset.make-public' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'assignToCustomer')"
-          [fxShow]="!isEdit && assetScope === 'tenant' && !isAssignedToCustomer(entity)">
+          [class.!hidden]="isEdit || assetScope !== 'tenant' || isAssignedToCustomer(entity)">
     {{'asset.assign-to-customer' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromCustomer')"
-          [fxShow]="!isEdit && (assetScope === 'customer' || assetScope === 'tenant') && isAssignedToCustomer(entity)">
+          [class.!hidden]="isEdit || (assetScope !== 'customer' && assetScope !== 'tenant') || !isAssignedToCustomer(entity)">
     {{ (entity?.customerIsPublic ? 'asset.make-private' : 'asset.unassign-from-customer') | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromEdge')"
-          [fxShow]="!isEdit && assetScope === 'edge'">
+          [class.!hidden]="isEdit || assetScope !== 'edge'">
     {{ 'edge.unassign-from-edge' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'asset.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onAssetIdCopied($event)"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>asset.copyId</span>
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <mat-form-field class="mat-block"
-                  [fxShow]="!isEdit && isAssignedToCustomer(entity)
-                              && !entity?.customerIsPublic && assetScope === 'tenant'">
+                  [class.!hidden]="isEdit || !isAssignedToCustomer(entity)
+                              || entity?.customerIsPublic || assetScope !== 'tenant'">
     <mat-label translate>asset.assignedToCustomer</mat-label>
     <input matInput disabled [ngModel]="entity?.customerTitle">
   </mat-form-field>
   <div class="tb-small" style="padding-bottom: 10px; padding-left: 2px;"
-       [fxShow]="!isEdit && entity?.customerIsPublic && (assetScope === 'customer' || assetScope === 'tenant')">
+       [class.!hidden]="isEdit || !entity?.customerIsPublic || (assetScope !== 'customer' && assetScope !== 'tenant')">
     {{ 'asset.asset-public' | translate }}
   </div>
   <form [formGroup]="entityForm">
diff --git a/ui-ngx/src/app/modules/home/pages/customer/customer.component.html b/ui-ngx/src/app/modules/home/pages/customer/customer.component.html
index ec10e208d1..5c4fe2393f 100644
--- a/ui-ngx/src/app/modules/home/pages/customer/customer.component.html
+++ b/ui-ngx/src/app/modules/home/pages/customer/customer.component.html
@@ -15,64 +15,64 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageUsers')"
-          [fxShow]="!isEdit && !isPublic">
+          [class.!hidden]="isEdit || isPublic">
     {{'customer.manage-users' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageAssets')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'customer.manage-assets' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageDevices')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'customer.manage-devices' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageDashboards')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'customer.manage-dashboards' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageEdges')"
-          [fxShow]="!isEdit"
+          [class.!hidden]="isEdit">
           *ngIf="edgesSupportEnabled()">
     {{'customer.manage-edges' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit && !isPublic">
+          [class.!hidden]="hideDelete() || isEdit || isPublic">
     {{'customer.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onCustomerIdCopied($event)"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>customer.copyId</span>
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <form [formGroup]="entityForm">
-    <fieldset [fxShow]="!isPublic" [disabled]="(isLoading$ | async) || !isEdit">
+    <fieldset [class.!hidden]="isPublic" [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block">
         <mat-label translate>customer.title</mat-label>
         <input matInput formControlName="title" required/>
@@ -83,22 +83,22 @@
           {{ 'customer.title-max-length' | translate }}
         </mat-error>
       </mat-form-field>
-      <div formGroupName="additionalInfo" fxLayout="column">
+      <div formGroupName="additionalInfo" class="flex flex-col">
         <mat-form-field class="mat-block">
           <mat-label translate>customer.description</mat-label>
           <textarea matInput formControlName="description" rows="2"></textarea>
         </mat-form-field>
-        <section class="tb-default-dashboard" fxFlex fxLayout="column" *ngIf="entity?.id">
-          <section fxFlex fxLayout="column" fxLayout.gt-sm="row">
+        <section class="tb-default-dashboard flex flex-1 flex-col" *ngIf="entity?.id">
+          <section class="flex flex-1 flex-col gt-sm:flex-row">
             <tb-dashboard-autocomplete
-              fxFlex
+              class="flex-1"
               label="{{ 'dashboard.home-dashboard' | translate }}"
               formControlName="homeDashboardId"
               [dashboardsScope]="'customer'"
               [customerId]="entity?.id.id"
               [selectFirstDashboard]="false"
             ></tb-dashboard-autocomplete>
-            <mat-checkbox fxFlex formControlName="homeDashboardHideToolbar">
+            <mat-checkbox class="flex-1" formControlName="homeDashboardHideToolbar">
               {{ 'dashboard.home-dashboard-hide-toolbar' | translate }}
             </mat-checkbox>
           </section>
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
index 7c3ab5d61d..61ebedf310 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
@@ -15,75 +15,75 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'dashboard.open-dashboard' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'export')"
-          [fxShow]="!isEdit && dashboardScope === 'tenant'">
+          [class.!hidden]="isEdit || dashboardScope !== 'tenant'">
     {{'dashboard.export' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePublic')"
-          [fxShow]="!isEdit && dashboardScope === 'tenant' && !isPublic(entity)">
+          [class.!hidden]="isEdit || dashboardScope !== 'tenant' || isPublic(entity)">
     {{'dashboard.make-public' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePrivate')"
-          [fxShow]="!isEdit && (dashboardScope === 'tenant' && isPublic(entity)
+          [class.!hidden]="isEdit || !(dashboardScope === 'tenant' && isPublic(entity)
                                 || dashboardScope === 'customer' && isCurrentPublicCustomer(entity))">
     {{'dashboard.make-private' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageAssignedCustomers')"
-          [fxShow]="!isEdit && dashboardScope === 'tenant'">
+          [class.!hidden]="isEdit || dashboardScope !== 'tenant'">
     {{'dashboard.manage-assigned-customers' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromCustomer')"
-          [fxShow]="!isEdit && dashboardScope === 'customer' && !isCurrentPublicCustomer(entity)">
+          [class.!hidden]="isEdit || dashboardScope !== 'customer' || isCurrentPublicCustomer(entity)">
     {{ 'dashboard.unassign-from-customer' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromEdge')"
-          [fxShow]="!isEdit && dashboardScope === 'edge'">
+          [class.!hidden]="isEdit || dashboardScope !== 'edge'">
     {{ 'edge.unassign-from-edge' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'dashboard.delete' | translate }}
   </button>
-  <div fxLayout="row">
+  <div class="flex flex-row">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onDashboardIdCopied($event)"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>dashboard.copyId</span>
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <mat-form-field class="mat-block"
-                  [fxShow]="!isEdit && assignedCustomersText?.length
-                              && dashboardScope === 'tenant'">
+                  [class.!hidden]="isEdit || !assignedCustomersText?.length
+                              || dashboardScope !== 'tenant'">
     <mat-label translate>dashboard.assignedToCustomers</mat-label>
     <input matInput disabled [ngModel]="assignedCustomersText">
   </mat-form-field>
-  <div fxLayout="column" [fxShow]="!isEdit && (dashboardScope === 'tenant' && isPublic(entity)
+  <div class="flex flex-col" [class.!hidden]="isEdit || !(dashboardScope === 'tenant' && isPublic(entity)
                                 || dashboardScope === 'customer' && isCurrentPublicCustomer(entity))">
     <tb-social-share-panel style="padding-bottom: 1.25em;"
                            shareTitle="{{ 'dashboard.socialshare-title' | translate:{dashboardTitle: entity?.title} }}"
@@ -91,8 +91,8 @@
                            shareLink="{{ publicLink }}"
                            shareHashTags="thingsboard, iot">
     </tb-social-share-panel>
-    <div fxLayout="row">
-      <mat-form-field class="mat-block" fxFlex>
+    <div class="flex flex-row">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>dashboard.public-link</mat-label>
         <input matInput disabled [ngModel]="publicLink">
       </mat-form-field>
@@ -118,7 +118,7 @@
           {{ 'dashboard.title-max-length' | translate }}
         </mat-error>
       </mat-form-field>
-      <div formGroupName="configuration" fxLayout="column">
+      <div formGroupName="configuration" class="flex flex-col">
         <mat-form-field class="mat-block">
           <mat-label translate>dashboard.description</mat-label>
           <textarea matInput formControlName="description" rows="2"></textarea>
@@ -139,7 +139,7 @@
           <mat-label translate>dashboard.mobile-order</mat-label>
           <input matInput formControlName="mobileOrder" type="number" step="1">
         </mat-form-field>
-        <tb-gallery-image-input fxFlex
+        <tb-gallery-image-input class="flex-1"
                                 label="{{'dashboard.image' | translate}}"
                                 formControlName="image">
         </tb-gallery-image-input>
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/make-dashboard-public-dialog.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/make-dashboard-public-dialog.component.html
index 49e98cdc1d..0842210366 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/make-dashboard-public-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/make-dashboard-public-dialog.component.html
@@ -16,9 +16,9 @@
 
 -->
 <div style="min-width: 400px; position: relative;">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>{{ 'dashboard.public-dashboard-title' | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="close()"
             type="button">
@@ -32,8 +32,8 @@
     <span
        innerHTML="{{ translate.get('dashboard.public-dashboard-text', {dashboardTitle: dashboard.title, publicLink: publicLink}) | async }}">
     </span>
-    <div fxLayout="row" fxLayoutAlign="start center">
-      <pre class="tb-highlight" fxFlex><code>{{ publicLink }}</code></pre>
+    <div class="flex flex-row items-center justify-start">
+      <pre class="tb-highlight flex-1"><code>{{ publicLink }}</code></pre>
       <button mat-icon-button
               ngxClipboard
               (cbOnSuccess)="onPublicLinkCopied($event)"
@@ -51,8 +51,8 @@
                            shareHashTags="thingsboard, iot">
     </tb-social-share-panel>
   </div>
-  <div mat-dialog-actions fxLayout="row">
-    <span fxFlex></span>
+  <div mat-dialog-actions class="flex flex-row">
+    <span class="flex-1"></span>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/manage-dashboard-customers-dialog.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/manage-dashboard-customers-dialog.component.html
index 67bdb41d7e..756f9a405f 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/manage-dashboard-customers-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/manage-dashboard-customers-dialog.component.html
@@ -17,9 +17,9 @@
 -->
 <form style="width: 600px;"
       [formGroup]="dashboardCustomersFormGroup" (ngSubmit)="submit()">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>{{ titleText | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -39,8 +39,8 @@
       </tb-entity-list>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayout="row">
-    <span fxFlex></span>
+  <div mat-dialog-actions class="flex flex-row">
+    <span class="flex-1"></span>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/pages/device/data/snmp-device-transport-configuration.component.html b/ui-ngx/src/app/modules/home/pages/device/data/snmp-device-transport-configuration.component.html
index b670b392c6..6db2285969 100644
--- a/ui-ngx/src/app/modules/home/pages/device/data/snmp-device-transport-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/pages/device/data/snmp-device-transport-configuration.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<form [formGroup]="snmpDeviceTransportConfigurationFormGroup" style="padding-bottom: 16px;"  fxLayoutGap="8px" fxLayout="column">
-  <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column">
-    <mat-form-field fxFlex>
+<form [formGroup]="snmpDeviceTransportConfigurationFormGroup" class="flex flex-col gap-2 pb-4">
+  <div class="flex flex-row gap-2 xs:flex-col">
+    <mat-form-field class="flex-1">
       <mat-label translate>device-profile.snmp.host</mat-label>
       <input matInput formControlName="host" required>
       <mat-error *ngIf="snmpDeviceTransportConfigurationFormGroup.get('host').hasError('required') ||
@@ -25,7 +25,7 @@
         {{ 'device-profile.snmp.host-required' | translate }}
       </mat-error>
     </mat-form-field>
-    <mat-form-field fxFlex>
+    <mat-form-field class="flex-1">
       <mat-label translate>device-profile.snmp.port</mat-label>
       <input matInput formControlName="port" type="number" min="0" required>
       <mat-error *ngIf="snmpDeviceTransportConfigurationFormGroup.get('port').hasError('required')">
@@ -59,8 +59,8 @@
     </mat-form-field>
   </section>
   <section *ngIf="isV3protocolVersion()">
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column">
-      <mat-form-field fxFlex>
+    <div class="flex flex-row gap-2 xs:flex-col">
+      <mat-form-field class="flex-1">
         <mat-label translate>device-profile.snmp.user-name</mat-label>
         <input matInput formControlName="username" required>
         <mat-error *ngIf="snmpDeviceTransportConfigurationFormGroup.get('username').hasError('required') ||
@@ -68,7 +68,7 @@
           {{ 'device-profile.snmp.user-name-required' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex>
+      <mat-form-field class="flex-1">
         <mat-label translate>device-profile.snmp.security-name</mat-label>
         <input matInput formControlName="securityName" required>
         <mat-error *ngIf="snmpDeviceTransportConfigurationFormGroup.get('securityName').hasError('required') ||
@@ -77,8 +77,8 @@
         </mat-error>
       </mat-form-field>
     </div>
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column">
-      <mat-form-field fxFlex floatLabel="always" hideRequiredMarker>
+    <div class="flex flex-row gap-2 xs:flex-col">
+      <mat-form-field class="flex-1" floatLabel="always" hideRequiredMarker>
         <mat-label translate>device-profile.snmp.authentication-protocol</mat-label>
         <mat-select formControlName="authenticationProtocol" required>
           <mat-option *ngFor="let snmpAuthenticationProtocol of snmpAuthenticationProtocols" [value]="snmpAuthenticationProtocol">
@@ -89,7 +89,7 @@
           {{ 'device-profile.snmp.authentication-protocol-required' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex>
+      <mat-form-field class="flex-1">
         <mat-label translate>device-profile.snmp.authentication-passphrase</mat-label>
         <input matInput formControlName="authenticationPassphrase" required>
         <mat-error *ngIf="snmpDeviceTransportConfigurationFormGroup.get('authenticationPassphrase').hasError('required') ||
@@ -98,8 +98,8 @@
         </mat-error>
       </mat-form-field>
     </div>
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column">
-      <mat-form-field fxFlex floatLabel="always" hideRequiredMarker>
+    <div class="flex flex-row gap-2 xs:flex-col">
+      <mat-form-field class="flex-1" floatLabel="always" hideRequiredMarker>
         <mat-label translate>device-profile.snmp.privacy-protocol</mat-label>
         <mat-select formControlName="privacyProtocol" required>
           <mat-option *ngFor="let snmpPrivacyProtocol of snmpPrivacyProtocols" [value]="snmpPrivacyProtocol">
@@ -110,7 +110,7 @@
           {{ 'device-profile.snmp.privacy-protocol-required' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex>
+      <mat-form-field class="flex-1">
         <mat-label translate>device-profile.snmp.privacy-passphrase</mat-label>
         <input matInput formControlName="privacyPassphrase" required>
         <mat-error *ngIf="snmpDeviceTransportConfigurationFormGroup.get('privacyPassphrase').hasError('required') ||
@@ -119,12 +119,12 @@
         </mat-error>
       </mat-form-field>
     </div>
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column">
-      <mat-form-field fxFlex>
+    <div class="flex flex-row gap-2 xs:flex-col">
+      <mat-form-field class="flex-1">
         <mat-label translate>device-profile.snmp.context-name</mat-label>
         <input matInput formControlName="contextName">
       </mat-form-field>
-      <mat-form-field fxFlex>
+      <mat-form-field class="flex-1">
         <mat-label translate>device-profile.snmp.engine-id</mat-label>
         <input matInput formControlName="engineId">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.html b/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.html
index b74e18f3ed..2cc3c17227 100644
--- a/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2 translate>{{ dialogTitle }}</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
 <!--  <div [tb-help]="'check-connectivity'"></div>-->
   <button mat-icon-button
           (click)="close()"
@@ -32,7 +32,7 @@
                       name="TransportProtocol"
                       useSelectOnMdLg="false"
                       appearance="fill"
-                      [fxHide]="allowTransportType.size < 2">
+                      [class.!hidden]="allowTransportType.size < 2">
       <tb-toggle-option
         *ngIf="allowTransportType.has(BasicTransportType.HTTP)"
         [value]="BasicTransportType.HTTP">
@@ -59,7 +59,7 @@
         {{ deviceTransportTypeTranslationMap.get(DeviceTransportType.LWM2M) | translate }}
       </tb-toggle-option>
     </tb-toggle-header>
-    <div class="tb-form-panel no-padding no-border" [fxHide]="!allowTransportType.size">
+    <div class="tb-form-panel no-padding no-border" [class.!hidden]="!allowTransportType.size">
       <ng-container [ngSwitch]="transportProtocol.value">
         <ng-template [ngSwitchCase]="BasicTransportType.HTTP">
           <div class="tb-no-data-text" translate>device.connectivity.use-following-instructions</div>
@@ -288,24 +288,24 @@
       </ng-container>
     </div>
     <div class="tb-form-panel stroked">
-      <div fxFlex fxLayout="row">
+      <div class="flex flex-1 flex-row">
         <div class="tb-form-panel-title" translate>device.state</div>
-        <div class="status" [ngClass]="{'inactive': !status, 'hide': status === undefined}">
+        <div class="status" [class.inactive]="!status" [class.hide]="status === undefined">
           {{ (status ? 'device.active' : 'device.inactive') | translate }}
         </div>
       </div>
       <div class="tb-form-panel-hint tb-font-14" translate>attribute.latest-telemetry</div>
       <div class="tb-form-table">
         <div class="tb-form-table-header">
-          <div class="tb-form-table-header-cell" fxFlex translate>device.time</div>
-          <div class="tb-form-table-header-cell" fxFlex translate>attribute.key</div>
-          <div class="tb-form-table-header-cell" fxFlex translate>attribute.value</div>
+          <div class="tb-form-table-header-cell flex-1" translate>device.time</div>
+          <div class="tb-form-table-header-cell flex-1" translate>attribute.key</div>
+          <div class="tb-form-table-header-cell flex-1" translate>attribute.value</div>
         </div>
         <div *ngIf="latestTelemetry.length; else noData" class="tb-form-table-body">
           <div class="tb-form-table-row" *ngFor="let telemetry of latestTelemetry">
-            <div class="tb-form-table-row-cell" fxFlex>{{ telemetry.lastUpdateTs | date: 'yyyy-MM-dd HH:mm:ss' }}</div>
-            <div class="tb-form-table-row-cell" fxFlex>{{ telemetry.key }}</div>
-            <div class="tb-form-table-row-cell" fxFlex>{{ telemetry.value }}</div>
+            <div class="tb-form-table-row-cell flex-1">{{ telemetry.lastUpdateTs | date: 'yyyy-MM-dd HH:mm:ss' }}</div>
+            <div class="tb-form-table-row-cell flex-1">{{ telemetry.key }}</div>
+            <div class="tb-form-table-row-cell flex-1">{{ telemetry.value }}</div>
           </div>
         </div>
       </div>
@@ -313,8 +313,8 @@
   </section>
 </div>
 <div mat-dialog-actions class="tb-dialog-actions">
-  <mat-slide-toggle fxShow="{{ showDontShowAgain }}" [(ngModel)]="notShowAgain">{{ 'action.dont-show-again' | translate}}</mat-slide-toggle>
-  <span fxFlex></span>
+  <mat-slide-toggle [class.!hidden]="!showDontShowAgain" [(ngModel)]="notShowAgain">{{ 'action.dont-show-again' | translate}}</mat-slide-toggle>
+  <span class="flex-1"></span>
   <button mat-button
           [disabled]="(isLoading$ | async)"
           (click)="close()">{{ 'action.close' | translate }}</button>
@@ -336,10 +336,10 @@
 
 <ng-template #executeCommand let-cmd="cmd">
   <div class="tb-form-panel stroked">
-    <div fxLayout="row" fxLayoutAlign="space-between center" [fxHide]="!(cmd.noSec || cmd.sec !== 'Check documentation')">
+    <div class="flex flex-row items-center justify-between" [class.!hidden]="!(cmd.noSec || cmd.sec !== 'Check documentation')">
       <div class="tb-form-panel-title" translate>device.connectivity.execute-following-command</div>
       <tb-toggle-header #protocolType value="{{ cmd.noSec ? 'noSec' : 'sec'}}" name="protocolType" useSelectOnMdLg="false"
-                        [fxShow]="cmd.noSec && cmd.sec">
+                        [class.!hidden]="!cmd.noSec || !cmd.sec">
         <tb-toggle-option value="noSec">{{ cmd.noSecLabel }}</tb-toggle-option>
         <tb-toggle-option value="sec">{{ cmd.secLabel }}</tb-toggle-option>
       </tb-toggle-header>
diff --git a/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html b/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html
index 27d68b5b9e..3b202adfb2 100644
--- a/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2>{{ 'device.device-credentials' | translate }}</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           (click)="cancel()"
           type="button">
@@ -36,7 +36,7 @@
     </form>
   </section>
   <ng-template #loadCredentials>
-    <div fxLayout="column" fxLayoutAlign="center center">
+    <div class="flex flex-col items-center justify-center">
       <mat-spinner color="accent" diameter="65" strokeWidth="4" style="margin-bottom: 18px"></mat-spinner>
       <span class="mat-subtitle-1" style="margin-bottom: 0">
         {{ 'device.loading-device-credentials' | translate }}
diff --git a/ui-ngx/src/app/modules/home/pages/device/device.component.html b/ui-ngx/src/app/modules/home/pages/device/device.component.html
index a210cbbb41..6d43d180e6 100644
--- a/ui-ngx/src/app/modules/home/pages/device/device.component.html
+++ b/ui-ngx/src/app/modules/home/pages/device/device.component.html
@@ -15,82 +15,82 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePublic')"
-          [fxShow]="!isEdit && deviceScope === 'tenant' && !isAssignedToCustomer(entity) && !entity?.customerIsPublic">
+          [class.!hidden]="isEdit || deviceScope !== 'tenant' || isAssignedToCustomer(entity) || entity?.customerIsPublic">
     {{'device.make-public' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'assignToCustomer')"
-          [fxShow]="!isEdit && deviceScope === 'tenant' && !isAssignedToCustomer(entity)">
+          [class.!hidden]="isEdit || deviceScope !== 'tenant' || isAssignedToCustomer(entity)">
     {{'device.assign-to-customer' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromCustomer')"
-          [fxShow]="!isEdit && (deviceScope === 'customer' || deviceScope === 'tenant') && isAssignedToCustomer(entity)">
+          [class.!hidden]="isEdit || (deviceScope !== 'customer' && deviceScope !== 'tenant') || !isAssignedToCustomer(entity)">
     {{ (entity?.customerIsPublic ? 'device.make-private' : 'device.unassign-from-customer') | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageCredentials')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{ ((deviceScope === 'customer_user' || deviceScope === 'edge_customer_user') ? 'device.view-credentials' : 'device.manage-credentials') | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'checkConnectivity')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{ 'device.connectivity.check-connectivity' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromEdge')"
-          [fxShow]="!isEdit && deviceScope === 'edge'">
+          [class.!hidden]="isEdit || deviceScope !== 'edge'">
     {{ 'edge.unassign-from-edge' | translate }}
   </button>
-  <button mat-raised-button color="primary" fxFlex.xs
+  <button mat-raised-button color="primary" class="xs:flex-1"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'device.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onDeviceIdCopied($event)"
             [cbContent]="entity?.id?.id"
             [disabled]="(isLoading$ | async)"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>device.copyId</span>
     </button>
     <tb-copy-device-credentials
-      [fxShow]="!isEdit"
+      [class.!hidden]="isEdit"
       [disabled]="(isLoading$ | async)"
       [credentials$]="deviceCredentials$"
       [deviceId]="entity?.id">
     </tb-copy-device-credentials>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <mat-form-field class="mat-block"
-                  [fxShow]="!isEdit && isAssignedToCustomer(entity)
-                              && !entity?.customerIsPublic && deviceScope === 'tenant'">
+                  [class.!hidden]="isEdit || !isAssignedToCustomer(entity)
+                              || entity?.customerIsPublic || deviceScope !== 'tenant'">
     <mat-label translate>device.assignedToCustomer</mat-label>
     <input matInput disabled [ngModel]="entity?.customerTitle">
   </mat-form-field>
   <div class="tb-small" style="padding-bottom: 10px; padding-left: 2px;"
-       [fxShow]="!isEdit && entity?.customerIsPublic && (deviceScope === 'customer' || deviceScope === 'tenant')">
+       [class.!hidden]="isEdit || !entity?.customerIsPublic || (deviceScope !== 'customer' && deviceScope !== 'tenant')">
     {{ 'device.device-public' | translate }}
   </div>
   <form [formGroup]="entityForm">
@@ -138,7 +138,7 @@
         formControlName="deviceData"
         required>
       </tb-device-data>
-      <div formGroupName="additionalInfo" fxLayout="column">
+      <div formGroupName="additionalInfo" class="flex flex-col">
         <div class="toggle-group">
           <mat-slide-toggle formControlName="gateway" style="min-width: 165px">
             {{ 'device.is-gateway' | translate }}
diff --git a/ui-ngx/src/app/modules/home/pages/edge/edge-instructions-dialog.component.html b/ui-ngx/src/app/modules/home/pages/edge/edge-instructions-dialog.component.html
index 1156bb7969..cfb236fd5f 100644
--- a/ui-ngx/src/app/modules/home/pages/edge/edge-instructions-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/edge/edge-instructions-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2 translate>{{ dialogTitle }}</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           (click)="close()"
           type="button">
@@ -72,8 +72,8 @@
   </section>
 </div>
 <div mat-dialog-actions class="tb-dialog-actions">
-  <mat-slide-toggle fxShow="{{ showDontShowAgain }}" [(ngModel)]="notShowAgain">{{ 'action.dont-show-again' | translate}}</mat-slide-toggle>
-  <span fxFlex></span>
+  <mat-slide-toggle [class.!hidden]="!showDontShowAgain" [(ngModel)]="notShowAgain">{{ 'action.dont-show-again' | translate}}</mat-slide-toggle>
+  <span class="flex-1"></span>
   <button mat-button
           [disabled]="(isLoading$ | async)"
           (click)="close()">{{ 'action.close' | translate }}</button>
diff --git a/ui-ngx/src/app/modules/home/pages/edge/edge.component.html b/ui-ngx/src/app/modules/home/pages/edge/edge.component.html
index 9ac7049ce2..ccc75421ba 100644
--- a/ui-ngx/src/app/modules/home/pages/edge/edge.component.html
+++ b/ui-ngx/src/app/modules/home/pages/edge/edge.component.html
@@ -15,74 +15,74 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePublic')"
-          [fxShow]="!isEdit && edgeScope === 'tenant' && !isAssignedToCustomer(entity) && !entity?.customerIsPublic">
+          [class.!hidden]="isEdit || edgeScope !== 'tenant' || isAssignedToCustomer(entity) || entity?.customerIsPublic">
     {{'edge.make-public' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'assignToCustomer')"
-          [fxShow]="!isEdit && edgeScope === 'tenant' && !isAssignedToCustomer(entity)">
+          [class.!hidden]="isEdit || edgeScope !== 'tenant' || isAssignedToCustomer(entity)">
     {{'edge.assign-to-customer' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromCustomer')"
-          [fxShow]="!isEdit && (edgeScope === 'customer' || edgeScope === 'tenant') && isAssignedToCustomer(entity)">
+          [class.!hidden]="isEdit || (edgeScope !== 'customer' && edgeScope !== 'tenant') || !isAssignedToCustomer(entity)">
     {{ (entity?.customerIsPublic ? 'edge.make-private' : 'edge.unassign-from-customer') | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'openEdgeAssets')"
-          [fxShow]="!isEdit && edgeScope !== 'customer'">
+          [class.!hidden]="isEdit || edgeScope === 'customer'">
     {{'edge.manage-assets' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'openEdgeDevices')"
-          [fxShow]="!isEdit && edgeScope !== 'customer'">
+          [class.!hidden]="isEdit || edgeScope === 'customer'">
     {{'edge.manage-devices' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'openEdgeEntityViews')"
-          [fxShow]="!isEdit && edgeScope !== 'customer'">
+          [class.!hidden]="isEdit || edgeScope === 'customer'">
     {{'edge.manage-entity-views' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'openEdgeDashboards')"
-          [fxShow]="!isEdit && edgeScope !== 'customer'">
+          [class.!hidden]="isEdit || edgeScope === 'customer'">
     {{'edge.manage-dashboards' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'openEdgeRuleChains')"
-          [fxShow]="!isEdit && edgeScope === 'tenant'">
+          [class.!hidden]="isEdit || edgeScope !== 'tenant'">
     {{'edge.manage-rulechains' | translate }}
   </button>
-  <button mat-raised-button color="primary" fxFlex.xs
+  <button mat-raised-button color="primary" class="xs:flex-1"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'edge.delete' | translate }}
   </button>
-  <div fxLayout="row wrap" fxLayout.xs="column">
+  <div class="flex flex-row flex-wrap xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onEdgeIdCopied($event)"
             [cbContent]="entity?.id?.id"
             [disabled]="(isLoading$ | async)"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>edge.copy-id</span>
     </button>
@@ -91,7 +91,7 @@
             (cbOnSuccess)="onEdgeInfoCopied('key')"
             [cbContent]="entity?.routingKey"
             [disabled]="(isLoading$ | async)"
-            [fxShow]="!isEdit && edgeScope !== 'customer_user'">
+            [class.!hidden]="isEdit || edgeScope === 'customer_user'">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>edge.copy-edge-key</span>
     </button>
@@ -100,7 +100,7 @@
             (cbOnSuccess)="onEdgeInfoCopied('secret')"
             [cbContent]="entity?.secret"
             [disabled]="(isLoading$ | async)"
-            [fxShow]="!isEdit && edgeScope !== 'customer_user'">
+            [class.!hidden]="isEdit || edgeScope === 'customer_user'">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>edge.copy-edge-secret</span>
     </button>
@@ -108,18 +108,18 @@
             ngxClipboard
             [disabled]="(isLoading$ | async)"
             (click)="onEntityAction($event, 'syncEdge')"
-            [fxShow]="!isEdit && edgeScope !== 'customer_user'">
+            [class.!hidden]="isEdit || edgeScope === 'customer_user'">
       <mat-icon svgIcon="mdi:sync"></mat-icon>
       <span translate>edge.sync</span>
     </button>
   </div>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <div [ngSwitch]="upgradeAvailable">
       <ng-container *ngSwitchCase="false">
         <button mat-raised-button color="primary"
                 [disabled]="(isLoading$ | async)"
                 (click)="onEntityAction($event, 'openInstallInstructions')"
-                [fxShow]="!isEdit && edgeScope !== 'customer_user'">
+                [class.!hidden]="isEdit || edgeScope === 'customer_user'">
           <mat-icon>info_outline</mat-icon>
           <span>{{ 'edge.install-connect-instructions' | translate }}</span>
         </button>
@@ -128,7 +128,7 @@
         <button mat-raised-button color="primary"
                 [disabled]="(isLoading$ | async)"
                 (click)="onEntityAction($event, 'openUpgradeInstructions')"
-                [fxShow]="!isEdit && edgeScope !== 'customer_user'">
+                [class.!hidden]="isEdit || edgeScope === 'customer_user'">
           <mat-icon>info_outline</mat-icon>
           <span>{{ 'edge.upgrade-instructions' | translate }}</span>
         </button>
@@ -136,15 +136,15 @@
     </div>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <mat-form-field class="mat-block"
-                  [fxShow]="!isEdit && isAssignedToCustomer(entity)
-                              && !entity?.customerIsPublic && edgeScope === 'tenant'">
+                  [class.!hidden]="isEdit || !isAssignedToCustomer(entity)
+                              || entity?.customerIsPublic || edgeScope !== 'tenant'">
     <mat-label translate>edge.assignedToCustomer</mat-label>
     <input matInput disabled [ngModel]="entity?.customerTitle">
   </mat-form-field>
   <div class="tb-small" style="padding-bottom: 10px; padding-left: 2px;"
-       [fxShow]="!isEdit && entity?.customerIsPublic && edgeScope === 'tenant'">
+       [class.!hidden]="isEdit || !entity?.customerIsPublic || edgeScope !== 'tenant'">
     {{ 'edge.edge-public' | translate }}
   </div>
   <form [formGroup]="entityForm">
@@ -165,8 +165,8 @@
         [entityType]="entityType.EDGE">
       </tb-entity-subtype-autocomplete>
     </fieldset>
-    <div fxLayout="row" [fxShow]="edgeScope !== 'customer_user'">
-        <mat-form-field class="mat-block" fxFlex>
+    <div class="flex flex-row" [class.!hidden]="edgeScope === 'customer_user'">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>edge.edge-key</mat-label>
           <input matInput formControlName="routingKey">
         </mat-form-field>
@@ -176,8 +176,8 @@
         <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       </button>
     </div>
-    <div fxLayout="row" [fxShow]="edgeScope !== 'customer_user'">
-        <mat-form-field class="mat-block" fxFlex>
+    <div class="flex flex-row" [class.!hidden]="edgeScope === 'customer_user'">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>edge.edge-secret</mat-label>
           <input matInput formControlName="secret">
         </mat-form-field>
@@ -195,7 +195,7 @@
           {{ 'edge.label-max-length' | translate }}
         </mat-error>
       </mat-form-field>
-      <div formGroupName="additionalInfo" fxLayout="column">
+      <div formGroupName="additionalInfo" class="flex flex-col">
         <mat-form-field class="mat-block">
           <mat-label translate>edge.description</mat-label>
           <textarea matInput formControlName="description" rows="2"></textarea>
diff --git a/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html b/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html
index 62b19151bb..c0ee9b61b7 100644
--- a/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html
+++ b/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html
@@ -15,63 +15,63 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePublic')"
-          [fxShow]="!isEdit && entityViewScope === 'tenant' && !isAssignedToCustomer(entity) && !entity?.customerIsPublic">
+          [class.!hidden]="isEdit || entityViewScope !== 'tenant' || isAssignedToCustomer(entity) || entity?.customerIsPublic">
     {{'entity-view.make-public' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'assignToCustomer')"
-          [fxShow]="!isEdit && entityViewScope === 'tenant' && !isAssignedToCustomer(entity)">
+          [class.!hidden]="isEdit || entityViewScope !== 'tenant' || isAssignedToCustomer(entity)">
     {{'entity-view.assign-to-customer' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromCustomer')"
-          [fxShow]="!isEdit && (entityViewScope === 'customer' || entityViewScope === 'tenant') && isAssignedToCustomer(entity)">
+          [class.!hidden]="isEdit || (entityViewScope !== 'customer' && entityViewScope !== 'tenant') || !isAssignedToCustomer(entity)">
     {{ (entity?.customerIsPublic ? 'entity-view.make-private' : 'entity-view.unassign-from-customer') | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromEdge')"
-          [fxShow]="!isEdit && entityViewScope === 'edge'">
+          [class.!hidden]="isEdit || entityViewScope !== 'edge'">
     {{ 'edge.unassign-from-edge' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'entity-view.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onEntityViewIdCopied($event)"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>entity-view.copyId</span>
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <mat-form-field class="mat-block"
-                  [fxShow]="!isEdit && isAssignedToCustomer(entity)
-                              && !entity?.customerIsPublic && entityViewScope === 'tenant'">
+                  [class.!hidden]="isEdit || !isAssignedToCustomer(entity)
+                              || entity?.customerIsPublic || entityViewScope !== 'tenant'">
     <mat-label translate>entity-view.assignedToCustomer</mat-label>
     <input matInput disabled [ngModel]="entity?.customerTitle">
   </mat-form-field>
   <div class="tb-small" style="padding-bottom: 10px; padding-left: 2px;"
-       [fxShow]="!isEdit && entity?.customerIsPublic && (entityViewScope === 'customer' || entityViewScope === 'tenant')">
+       [class.!hidden]="isEdit || !entity?.customerIsPublic || (entityViewScope !== 'customer' && entityViewScope !== 'tenant')">
     {{ 'entity-view.entity-view-public' | translate }}
   </div>
   <form [formGroup]="entityForm">
@@ -92,9 +92,9 @@
         [entityType]="entityType.ENTITY_VIEW"
       >
       </tb-entity-subtype-autocomplete>
-      <section fxLayout="column">
+      <section class="flex flex-col">
         <label translate class="tb-title no-padding">entity-view.target-entity</label>
-        <tb-entity-select fxFlex
+        <tb-entity-select class="flex-1"
                           [required]="true"
                           [allowedEntityTypes]="allowedEntityTypes"
                           formControlName="entityId">
diff --git a/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.html b/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.html
index f9ed7e24db..7338a32fc2 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.html
@@ -15,13 +15,13 @@
     limitations under the License.
 
 -->
-<div fxFlex="100" fxLayout="row" fxLayoutAlign="start center">
+<div class="flex flex-full flex-row items-center justify-start">
   <mat-button-toggle-group class="tb-notification-unread-toggle-group"
                            style="width: 180px;"
                            [ngModel]="entitiesTableConfig.componentsData.unreadOnly"
                            (ngModelChange)="changeUnreadOnly($event)">
-    <mat-button-toggle fxFlex [value]=true>{{ 'notification.unread' | translate }}</mat-button-toggle>
-    <mat-button-toggle fxFlex [value]=false>{{ 'notification.all' | translate }}</mat-button-toggle>
+    <mat-button-toggle class="flex-1" [value]=true>{{ 'notification.unread' | translate }}</mat-button-toggle>
+    <mat-button-toggle class="flex-1" [value]=false>{{ 'notification.all' | translate }}</mat-button-toggle>
   </mat-button-toggle-group>
 
 </div>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-notification-dialog.component.html
index 3fd10c8729..e3959fa6e0 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-notification-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="targetNotificationForm" class="tb-dialog-container">
   <mat-toolbar color="primary">
     <h2>{{ (isAdd ? 'notification.add-notification-recipients-group' : 'notification.edit-notification-recipients-group') | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <div tb-help="recipientNotifications"></div>
     <button mat-icon-button
             (click)="cancel()"
@@ -28,7 +28,7 @@
   </mat-toolbar>
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  <div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
   <div mat-dialog-content>
     <mat-form-field class="mat-block">
       <mat-label translate>notification.name</mat-label>
@@ -41,7 +41,7 @@
       <label class="tb-title">{{ 'notification.type' | translate }}</label>
       <mat-radio-group formControlName="type">
         <mat-radio-button *ngFor="let notificationTargetType of notificationTargetTypes" [value]="notificationTargetType">
-          <div fxLayout="column">
+          <div class="flex flex-col">
             <div>{{ notificationTargetTypeTranslationMap.get(notificationTargetType) | translate }}</div>
           </div>
         </mat-radio-button>
@@ -60,7 +60,7 @@
         <ng-container [ngSwitch]="targetNotificationForm.get('configuration.usersFilter.type').value">
           <ng-container *ngSwitchCase="notificationTargetConfigType.TENANT_ADMINISTRATORS">
             <section *ngIf="isSysAdmin()">
-              <div fxFlex fxLayoutAlign="center center">
+              <div class="flex flex-1 items-center justify-center">
                 <tb-toggle-select class="tb-notification-tenant-group" appearance="fill"
                                   formControlName="filterByTenants">
                   <tb-toggle-option [value]="true">{{ 'tenant.tenant' | translate }}</tb-toggle-option>
@@ -157,7 +157,7 @@
     </section>
   </div>
   <mat-divider></mat-divider>
-  <div mat-dialog-actions fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="end">
+  <div mat-dialog-actions class="flex flex-row items-stretch justify-end gap-2">
     <button mat-button
             [disabled]="(isLoading$ | async)"
             (click)="cancel()">{{ 'action.cancel' | translate }}</button>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-table-header.component.html b/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-table-header.component.html
index 7771b32a58..e6a4d1efaf 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-table-header.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-table-header.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<div fxFlex="100" fxLayout="row" fxLayoutAlign="end center">
+<div class="flex flex-full flex-row items-center justify-end">
   <button mat-stroked-button color="primary" (click)="createTarget($event)">
-    <div fxLayout="row" fxLayoutAlign="start center">
+    <div class="flex flex-row items-center justify-start">
       <mat-icon>add</mat-icon>{{ 'notification.add-recipients' | translate }}
     </div>
   </button>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/rule/escalation-form.component.html b/ui-ngx/src/app/modules/home/pages/notification/rule/escalation-form.component.html
index 6b5eab6c09..bcb87f9ac0 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/rule/escalation-form.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/rule/escalation-form.component.html
@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<form [formGroup]="escalationFormGroup" fxLayout="column">
-  <div class="escalation" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" fxLayoutAlign.xs="start">
-    <div fxFlex *ngIf="systemEscalation; else selectTime" translate>notification.first-recipient</div>
+<form [formGroup]="escalationFormGroup" class="flex flex-col">
+  <div class="escalation flex flex-row items-center justify-center xs:flex-col xs:items-stretch xs:justify-start">
+    <div class="flex-1" *ngIf="systemEscalation; else selectTime" translate>notification.first-recipient</div>
     <ng-template #selectTime>
-      <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center">
+      <div class="flex flex-1 flex-row items-center justify-center xs:flex-col">
         <span translate>notification.after</span>
         <tb-timeinterval
           subscriptSizing="dynamic"
@@ -27,19 +27,19 @@
           min="60000"
           max="604800000"
           disabledAdvanced></tb-timeinterval>
-        <span fxFlex class="escalation-notify" translate>notification.notify</span>
+        <span class="escalation-notify flex-1" translate>notification.notify</span>
       </div>
     </ng-template>
     <tb-entity-list
       required
-      fxFlex="60"
+      class="max-w-60% flex-full"
       formControlName="targets"
       subscriptSizing="dynamic"
       entityType="{{ entityType.NOTIFICATION_TARGET }}"
       subType="{{ notificationType.ALARM }}"
       [placeholderText]="escalationFormGroup.get('targets').value ? '' : ('notification.add-recipient' | translate)">
       <button #createTargetButton
-              mat-button [fxHide]="disabled" matSuffix
+              mat-button [class.!hidden]="disabled" matSuffix
               (click)="createTarget($event, createTargetButton)">
         <span style="white-space: nowrap">{{ 'notification.create-new' | translate }}</span>
       </button>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/rule/escalations.component.html b/ui-ngx/src/app/modules/home/pages/notification/rule/escalations.component.html
index 619586cd56..5777909536 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/rule/escalations.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/rule/escalations.component.html
@@ -15,13 +15,12 @@
     limitations under the License.
 
 -->
-<div fxLayout="column">
-  <div class="tb-tenant-profile-queues"
-       fxLayout="row" style="align-items: center"
+<div class="flex flex-col">
+  <div class="tb-tenant-profile-queues flex flex-row items-center"
        *ngFor="let escalationControl of escalationsFormArray.controls;
        let $index = index; last as isLast;"
-       [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
-    <tb-escalation-form fxFlex
+       [class.pb-2]="!isLast">
+    <tb-escalation-form class="flex-1"
                         [formControl]="escalationControl"
                         [systemEscalation]="$index === 0">
     </tb-escalation-form>
@@ -35,8 +34,8 @@
     </button>
   </div>
   <div *ngIf="!escalationsFormArray.controls.length">
-      <span translate fxLayoutAlign="center center"
-            class="tb-prompt">notification.no-rule</span>
+      <span translate
+            class="tb-prompt flex items-center justify-center">notification.no-rule</span>
   </div>
   <div *ngIf="!disabled" style="padding: 16px 0;">
     <button mat-raised-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html
index f5a2ddba17..23d76e90a3 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2>{{ dialogTitle | translate }}</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <div tb-help="ruleNotifications"></div>
   <button mat-icon-button
           (click)="cancel()"
@@ -27,8 +27,8 @@
 </mat-toolbar>
 <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
 </mat-progress-bar>
-<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-<div mat-dialog-content ngStyle.xs="padding: 0;">
+<div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
+<div mat-dialog-content class="xs:p-0">
   <mat-horizontal-stepper [linear]="true" labelPosition="end" #addNotificationRule [orientation]="(stepperOrientation | async)"
                           (selectionChange)="changeStep($event)">
     <ng-template matStepperIcon="edit">
@@ -94,7 +94,7 @@
           <section formGroupName="triggerConfig">
             <section formGroupName="clearRule">
               <div class="mat-body-2" translate>notification.stop-escalation-alarm-status-become</div>
-              <mat-form-field fxFlex class="mat-block" floatLabel="always" style="margin-right: 48px">
+              <mat-form-field class="mat-block flex-1" floatLabel="always" style="margin-right: 48px">
                 <mat-label translate>alarm.alarm-status-list</mat-label>
                 <mat-select formControlName="alarmStatuses" multiple
                             placeholder="{{ !alarmTemplateForm.get('triggerConfig.clearRule.alarmStatuses').value?.length ? ('alarm.any-status' | translate) : '' }}">
@@ -123,7 +123,7 @@
               formControlName="alarmTypes">
             </tb-string-items-list>
 
-            <mat-form-field fxFlex class="mat-block" floatLabel="always">
+            <mat-form-field class="mat-block flex-1" floatLabel="always">
               <mat-label translate>alarm.alarm-severity-list</mat-label>
               <mat-select formControlName="alarmSeverities" multiple
                           placeholder="{{ !alarmTemplateForm.get('triggerConfig.alarmSeverities').value?.length ? ('alarm.any-severity' | translate) : '' }}">
@@ -133,7 +133,7 @@
               </mat-select>
             </mat-form-field>
           </fieldset>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>notification.notify-on</mat-label>
             <mat-select formControlName="notifyOn" multiple>
               <mat-option *ngFor="let alarmAction of alarmActions" [value]="alarmAction">
@@ -161,12 +161,12 @@
       <ng-template matStepLabel>{{ 'notification.device-activity-trigger-settings' | translate }}</ng-template>
       <form [formGroup]="deviceInactivityTemplateForm">
         <section formGroupName="triggerConfig">
-          <div fxFlex fxLayoutAlign="center center">
+          <div class="flex flex-1 items-center justify-center">
             <mat-button-toggle-group class="tb-notification-unread-toggle-group"
                                      style="width: 250px;"
                                      formControlName="filterByDevice">
-              <mat-button-toggle fxFlex [value]=true>{{ 'device.device' | translate }}</mat-button-toggle>
-              <mat-button-toggle fxFlex [value]=false>{{ 'device-profile.device-profile' | translate }}</mat-button-toggle>
+              <mat-button-toggle class="flex-1" [value]=true>{{ 'device.device' | translate }}</mat-button-toggle>
+              <mat-button-toggle class="flex-1" [value]=false>{{ 'device-profile.device-profile' | translate }}</mat-button-toggle>
             </mat-button-toggle-group>
           </div>
           <ng-container *ngIf="deviceInactivityTemplateForm.get('triggerConfig.filterByDevice').value; else deviceProfile">
@@ -189,7 +189,7 @@
               [entityType]="entityType.DEVICE_PROFILE">
             </tb-entity-list>
           </ng-template>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>notification.notify-on</mat-label>
             <mat-select formControlName="notifyOn" multiple>
               <mat-option *ngFor="let deviceEvent of deviceEvents" [value]="deviceEvent">
@@ -223,8 +223,8 @@
                                [allowedEntityTypes]="allowEntityTypeForEntityAction"
                                formControlName="entityTypes">
           </tb-entity-type-list>
-          <section fxLayout="column" fxLayoutGap="8px">
-            <span fxFlex translate>notification.status</span>
+          <section class="flex flex-col gap-2">
+            <span class="flex-1" translate>notification.status</span>
             <mat-slide-toggle formControlName="created">{{ 'notification.created' | translate }}</mat-slide-toggle>
             <mat-slide-toggle formControlName="updated">{{ 'notification.updated' | translate }}</mat-slide-toggle>
             <mat-slide-toggle formControlName="deleted">{{ 'notification.deleted' | translate }}</mat-slide-toggle>
@@ -256,7 +256,7 @@
               formControlName="alarmTypes">
             </tb-string-items-list>
 
-            <mat-form-field fxFlex class="mat-block" floatLabel="always">
+            <mat-form-field class="mat-block flex-1" floatLabel="always">
               <mat-label translate>alarm.alarm-severity-list</mat-label>
               <mat-select formControlName="alarmSeverities" multiple
                           placeholder="{{ !alarmCommentTemplateForm.get('triggerConfig.alarmSeverities').value?.length ? ('alarm.any-severity' | translate) : '' }}">
@@ -265,7 +265,7 @@
                 </mat-option>
               </mat-select>
             </mat-form-field>
-            <mat-form-field fxFlex class="mat-block" floatLabel="always">
+            <mat-form-field class="mat-block flex-1" floatLabel="always">
               <mat-label translate>alarm.alarm-status-list</mat-label>
               <mat-select formControlName="alarmStatuses" multiple
                           placeholder="{{ !alarmCommentTemplateForm.get('triggerConfig.alarmStatuses').value?.length ? ('alarm.any-status' | translate) : '' }}">
@@ -275,7 +275,7 @@
               </mat-select>
             </mat-form-field>
           </fieldset>
-          <section fxLayout="column">
+          <section class="flex flex-col">
             <mat-slide-toggle formControlName="onlyUserComments" style="margin-bottom: 12px;">
               {{ 'notification.notify-only-user-comments' | translate }}
             </mat-slide-toggle>
@@ -309,7 +309,7 @@
               formControlName="alarmTypes">
             </tb-string-items-list>
 
-            <mat-form-field fxFlex class="mat-block" floatLabel="always">
+            <mat-form-field class="mat-block flex-1" floatLabel="always">
               <mat-label translate>alarm.alarm-severity-list</mat-label>
               <mat-select formControlName="alarmSeverities" multiple
                           placeholder="{{ !alarmAssignmentTemplateForm.get('triggerConfig.alarmSeverities').value?.length ? ('alarm.any-severity' | translate) : '' }}">
@@ -318,7 +318,7 @@
                 </mat-option>
               </mat-select>
             </mat-form-field>
-            <mat-form-field fxFlex class="mat-block" floatLabel="always">
+            <mat-form-field class="mat-block flex-1" floatLabel="always">
               <mat-label translate>alarm.alarm-status-list</mat-label>
               <mat-select formControlName="alarmStatuses" multiple
                           placeholder="{{ !alarmAssignmentTemplateForm.get('triggerConfig.alarmStatuses').value?.length ? ('alarm.any-status' | translate) : '' }}">
@@ -328,7 +328,7 @@
               </mat-select>
             </mat-form-field>
           </fieldset>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>notification.notify-on</mat-label>
             <mat-select formControlName="notifyOn" multiple>
               <mat-option *ngFor="let alarmAssignmentAction of alarmAssignmentActions" [value]="alarmAssignmentAction">
@@ -365,7 +365,7 @@
               hint="{{ 'notification.rule-chain-list-rule-hint' | translate }}"
               [entityType]="entityType.RULE_CHAIN">
             </tb-entity-list>
-            <mat-form-field fxFlex class="mat-block" floatLabel="always">
+            <mat-form-field class="mat-block flex-1" floatLabel="always">
               <mat-label translate>rulechain.rulechain-events</mat-label>
               <mat-select formControlName="ruleChainEvents" multiple
                           placeholder="{{ !ruleEngineEventsTemplateForm.get('triggerConfig.ruleChainEvents').value?.length ? ('event.all-events' | translate) : '' }}">
@@ -384,7 +384,7 @@
               {{ 'notification.track-rule-node-events' | translate }}
             </mat-slide-toggle>
             <section *ngIf="ruleEngineEventsTemplateForm.get('triggerConfig.trackRuleNodeEvents').value">
-              <mat-form-field fxFlex class="mat-block" floatLabel="always">
+              <mat-form-field class="mat-block flex-1" floatLabel="always">
                 <mat-label translate>rulenode.rule-node-events</mat-label>
                 <mat-select formControlName="ruleNodeEvents" multiple
                             placeholder="{{ !ruleEngineEventsTemplateForm.get('triggerConfig.ruleNodeEvents').value?.length ? ('event.all-events' | translate) : '' }}">
@@ -425,7 +425,7 @@
               hint="{{ 'notification.edge-list-rule-hint' | translate }}"
               [entityType]="entityType.EDGE">
             </tb-entity-list>
-            <mat-form-field fxFlex class="mat-block" floatLabel="always">
+            <mat-form-field class="mat-block flex-1" floatLabel="always">
               <mat-label translate>notification.notify-on</mat-label>
               <mat-select formControlName="notifyOn" multiple
                           placeholder="{{ !edgeConnectionTemplateForm.get('triggerConfig.notifyOn').value?.length ? ('event.all-events' | translate) : '' }}">
@@ -482,11 +482,10 @@
                                ignoreAuthorityFilter
                                [allowedEntityTypes]="allowEntityTypeForEntitiesLimit">
           </tb-entity-type-list>
-          <div class="limit-slider-container" fxLayout="row" fxLayoutAlign="start center"
-               fxLayout.xs="column"  fxLayoutAlign.xs="stretch">
+          <div class="limit-slider-container flex flex-row items-center justify-start xs:flex-col xs:items-stretch">
             <label translate>notification.threshold</label>
-            <div fxLayout="row" fxLayoutAlign="start center" fxFlex>
-              <mat-slider fxFlex min="0" max="1" step="0.01" discrete [displayWith]="formatLabel">
+            <div class="flex flex-1 flex-row items-center justify-start">
+              <mat-slider class="flex-1" min="0" max="1" step="0.01" discrete [displayWith]="formatLabel">
                 <input matSliderThumb formControlName="threshold">
               </mat-slider>
               <mat-form-field class="limit-slider-value">
@@ -514,7 +513,7 @@
       <ng-template matStepLabel>{{ 'notification.api-usage-trigger-settings' | translate }}</ng-template>
       <form [formGroup]="apiUsageLimitTemplateForm">
         <section formGroupName="triggerConfig">
-          <mat-form-field fxFlex class="mat-block" subscriptSizing="dynamic">
+          <mat-form-field class="mat-block flex-1" subscriptSizing="dynamic">
             <mat-label translate>api-usage.api-features</mat-label>
             <mat-select formControlName="apiFeatures" multiple>
               <mat-option *ngFor="let apiFeature of apiFeatures" [value]="apiFeature">
@@ -523,7 +522,7 @@
             </mat-select>
             <mat-hint>{{ 'notification.api-feature-hint' | translate }}</mat-hint>
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>notification.notify-on</mat-label>
             <mat-select formControlName="notifyOn" multiple>
               <mat-option *ngFor="let apiUsageStateValue of apiUsageStateValues" [value]="apiUsageStateValue">
@@ -597,10 +596,10 @@
   </mat-horizontal-stepper>
 </div>
 <mat-divider></mat-divider>
-<div mat-dialog-actions fxLayout="row">
+<div mat-dialog-actions class="flex flex-row">
   <button mat-stroked-button *ngIf="selectedIndex > 0"
           (click)="backStep()">{{ 'action.back' | translate }}</button>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-raised-button
           color="primary"
           (click)="nextStep()">{{ nextStepLabel() | translate }}</button>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-header.component.html b/ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-header.component.html
index a4bbf1cf4a..046f32a657 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-header.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-header.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<div fxFlex="100" fxLayout="row" fxLayoutAlign="end center">
+<div class="flex flex-full flex-row items-center justify-end">
   <button mat-stroked-button color="primary" (click)="createTarget($event)">
-    <div fxLayout="row" fxLayoutAlign="start center">
+    <div class="flex flex-row items-center justify-start">
       <mat-icon>add</mat-icon>{{ 'notification.add-rule' | translate }}
     </div>
   </button>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-error-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-error-dialog.component.html
index 75042166d3..cc10aa6f84 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-error-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-error-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2 translate>notification.failed-send</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           (click)="cancel()"
           type="button">
diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
index e9e34c24bc..eb2500803a 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2>{{ dialogTitle | translate }}</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <div tb-help="sentNotification"></div>
   <button mat-icon-button
           (click)="cancel()"
@@ -38,7 +38,7 @@
     <mat-step [stepControl]="notificationRequestForm">
       <ng-template matStepLabel>{{ 'notification.setup' | translate }}</ng-template>
       <form [formGroup]="notificationRequestForm">
-        <div fxLayoutAlign="center">
+        <div class="flex items-stretch justify-center">
           <tb-toggle-select formControlName="useTemplate" appearance="fill">
             <tb-toggle-option  [value]="false">{{ 'notification.start-from-scratch' | translate }}</tb-toggle-option>
             <tb-toggle-option  [value]="true">{{ 'notification.use-template' | translate }}</tb-toggle-option>
@@ -58,7 +58,7 @@
             <section formGroupName="configuration">
               <div class="delivery-title">
                 <div>
-                  <label [ngClass]="{'tb-error': notificationRequestForm.get('template.configuration.deliveryMethodsTemplates').hasError('atLeastOne')}"
+                  <label [class.tb-error]="notificationRequestForm.get('template.configuration.deliveryMethodsTemplates').hasError('atLeastOne')"
                          class="tb-title tb-required">{{ "notification.delivery-methods" | translate }}</label>
                   <div class="tb-form-hint" translate>notification.at-least-one-should-be-selected</div>
                 </div>
@@ -123,7 +123,7 @@
           <mat-slide-toggle formControlName="enabled" class="toggle">
             {{ 'notification.scheduler-later' | translate }}
           </mat-slide-toggle>
-          <div *ngIf="notificationRequestForm.get('additionalConfig.enabled').value" fxLayout="column">
+          <div *ngIf="notificationRequestForm.get('additionalConfig.enabled').value" class="flex flex-col">
             <tb-timezone-select userTimezoneByDefault
                                 required
                                 formControlName="timezone">
@@ -132,7 +132,7 @@
               <mat-label translate>notification.time</mat-label>
               <mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle>
               <mat-datetimepicker #startTimePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
-              <input required matInput fxFlex formControlName="time" [min]="minDate()" [max]="maxDate()" [matDatetimepicker]="startTimePicker">
+              <input required matInput class="flex-1" formControlName="time" [min]="minDate()" [max]="maxDate()" [matDatetimepicker]="startTimePicker">
             </mat-form-field>
           </div>
         </section>
@@ -161,7 +161,7 @@
       </div>
       <div *ngIf="preview" class="tb-form-panel no-padding no-border">
         <section class="preview-group tb-form-panel stroked no-gap">
-          <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-icon class="tb-mat-18">supervisor_account</tb-icon>
             <div class="tb-form-panel-title">{{ 'notification.recipients-count' | translate : {count: preview.totalRecipientsCount} }}</div>
           </div>
@@ -178,7 +178,7 @@
           </mat-chip-listbox>
         </section>
         <section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.WEB?.enabled">
-          <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-icon class="tb-mat-18">mdi:bell-badge</tb-icon>
             <div class="tb-form-panel-title" translate>notification.delivery-method.web-preview</div>
           </div>
@@ -187,7 +187,7 @@
           </div>
         </section>
         <section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.MOBILE_APP?.enabled">
-          <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-icon class="tb-mat-18">mdi:cellphone-text</tb-icon>
             <div class="tb-form-panel-title" translate>notification.delivery-method.mobile-app-preview</div>
           </div>
@@ -197,7 +197,7 @@
           </div>
         </section>
         <section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.SMS?.enabled">
-          <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-icon class="tb-mat-18">mdi:message-processing</tb-icon>
             <div class="tb-form-panel-title" translate>notification.delivery-method.sms-preview</div>
           </div>
@@ -206,7 +206,7 @@
           </div>
         </section>
         <section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.EMAIL?.enabled">
-          <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-icon class="tb-mat-18">mdi:email</tb-icon>
             <div class="tb-form-panel-title" translate>notification.delivery-method.email-preview</div>
           </div>
@@ -217,7 +217,7 @@
           </div>
         </section>
         <section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.SLACK?.enabled">
-          <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-icon class="tb-mat-18">mdi:slack</tb-icon>
             <div class="tb-form-panel-title" translate>notification.delivery-method.slack-preview</div>
           </div>
@@ -226,7 +226,7 @@
           </div>
         </section>
         <section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.MICROSOFT_TEAMS?.enabled">
-          <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-icon class="tb-mat-18">mdi:microsoft-teams</tb-icon>
             <div class="tb-form-panel-title" translate>notification.delivery-method.microsoft-teams-preview</div>
           </div>
@@ -243,7 +243,7 @@
 <div mat-dialog-actions class="tb-dialog-actions">
   <button mat-stroked-button *ngIf="selectedIndex > 0"
           (click)="backStep()">{{ 'action.back' | translate }}</button>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-raised-button
           color="primary"
           (click)="nextStep()">{{ nextStepLabel() | translate }}</button>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/settings/notification-setting-form.component.html b/ui-ngx/src/app/modules/home/pages/notification/settings/notification-setting-form.component.html
index 470f2dde20..303db35231 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/settings/notification-setting-form.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/settings/notification-setting-form.component.html
@@ -15,22 +15,22 @@
     limitations under the License.
 
 -->
-<form [formGroup]="notificationSettingsFormGroup" fxLayout="column">
-  <div fxLayout="row" style="height: 48px;">
-    <div fxFlex="50" fxLayoutAlign="start center">
+<form [formGroup]="notificationSettingsFormGroup" class="flex flex-col">
+  <div class="flex flex-row" style="height: 48px;">
+    <div class="flex max-w-50% flex-full items-center justify-start">
       <mat-checkbox color="primary"
                     (click)="$event.stopPropagation()"
                     (change)="changeInstanceTypeCheckBox($event.checked)"
                     [checked]="getChecked()"
                     [indeterminate]="getIndeterminate()">
         <span class="notification-type"
-              [ngClass]="{'notification-type-disabled': !notificationSettingsFormGroup.get('enabled').value}">
+              [class.notification-type-disabled]="!notificationSettingsFormGroup.get('enabled').value">
           {{notificationTemplateTypeTranslateMap.get(notificationSettingsFormGroup.get('name').value)?.name | translate}}
         </span>
       </mat-checkbox>
     </div>
-    <div fxFlex fxLayout="row" *ngFor="let deliveryMethod of deliveryMethods">
-      <div fxFlex fxLayoutAlign="start center">
+    <div class="flex flex-1 flex-row" *ngFor="let deliveryMethod of deliveryMethods">
+      <div class="flex flex-1 items-center justify-start">
         <mat-checkbox color="primary"
                       [checked]="getChecked(deliveryMethod)"
                       (click)="toggleDeliviryMethod(deliveryMethod)"
diff --git a/ui-ngx/src/app/modules/home/pages/notification/settings/notification-settings.component.html b/ui-ngx/src/app/modules/home/pages/notification/settings/notification-settings.component.html
index 90482be72f..ca75275beb 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/settings/notification-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/settings/notification-settings.component.html
@@ -18,12 +18,11 @@
 <div>
   <mat-card appearance="outlined" class="settings-card tb-absolute-fill">
     <mat-card-header>
-      <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.xs="8px"
-           fxLayoutAlign="space-between start" fxLayoutAlign.xs="start start">
-        <div fxFlex fxLayout="column">
+      <div class="flex flex-1 flex-row items-start justify-between xs:flex-col xs:justify-start xs:gap-2">
+        <div class="flex flex-1 flex-col">
           <span class="mat-headline-5" translate>notification.settings.notification-settings</span>
         </div>
-        <div fxLayout="column">
+        <div class="flex flex-col">
           <button mat-button color="primary"
                   [disabled]="(isLoading$ | async)"
                   (click)="resetSettings()">{{ 'notification.settings.reset-all' | translate }}</button>
@@ -37,8 +36,8 @@
       <form [formGroup]="notificationSettings" class="notification-form">
         <section class="notification-section">
           <div  class="notification-section-block">
-            <div fxLayout="row" fxLayoutAlign="start center" style="height: 44px;">
-              <div fxFlex="50">
+            <div class="flex flex-row items-center justify-start" style="height: 44px;">
+              <div class="max-w-50% flex-full">
                 <mat-checkbox color="warn"
                               (click)="$event.stopPropagation()"
                               [indeterminate]="getIndeterminate()"
@@ -47,8 +46,8 @@
                   <mat-label translate>notification.settings.type</mat-label>
                 </mat-checkbox>
               </div>
-              <div fxFlex *ngFor="let deliveryMethods of notificationDeliveryMethods">
-                <div fxFlex fxLayoutAlign="start center">
+              <div class="flex-1" *ngFor="let deliveryMethods of notificationDeliveryMethods">
+                <div class="flex flex-1 items-center justify-start">
                   <mat-checkbox color="warn"
                                 [checked]="getChecked(deliveryMethods)"
                                 (change)="changeInstanceTypeCheckBox($event.checked, deliveryMethods)"
@@ -70,7 +69,7 @@
         </section>
       </form>
     </mat-card-content>
-    <div fxLayout="row" fxLayoutAlign="end start" style="padding: 16px;">
+    <div class="flex flex-row items-start justify-end" style="padding: 16px;">
       <button mat-button mat-raised-button color="primary"
               type="button"
               (click)="save()"
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-action-button-configuration.component.html b/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-action-button-configuration.component.html
index 6ce736ead1..a45e6e6aa7 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-action-button-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-action-button-configuration.component.html
@@ -18,19 +18,18 @@
 <div class="tb-form-panel tb-slide-toggle stroked" [formGroup]="actionButtonConfigForm">
   <mat-expansion-panel class="tb-settings"
                        [expanded]="actionButtonConfigForm.get('enabled').value">
-    <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
-      <mat-panel-title fxFlex="60">
+    <mat-expansion-panel-header class="fill-width flex flex-row flex-wrap">
+      <mat-panel-title class="max-w-60% flex-full">
         <div tb-hint-tooltip-icon="{{ sliderHint }}" class="tb-form-row no-border no-padding">
-          <mat-slide-toggle class="mat-slide" formControlName="enabled" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="enabled" (click)="$event.stopPropagation()">
             {{ actionTitle }}
           </mat-slide-toggle>
         </div>
       </mat-panel-title>
     </mat-expansion-panel-header>
     <ng-template matExpansionPanelContent class="tb-extension-panel">
-      <div fxLayout="row" fxLayoutGap.gt-xs="8px" fxLayout.xs="column">
-        <mat-form-field class="mat-block" fxFlex *ngIf="!hideButtonText">
+      <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+        <mat-form-field class="mat-block flex-1" *ngIf="!hideButtonText">
           <mat-label translate>notification.button-text</mat-label>
           <input matInput formControlName="text" required>
           <mat-error
@@ -45,8 +44,8 @@
           </mat-error>
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutGap.gt-xs="8px" fxLayout.xs="column">
-        <mat-form-field fxFlex="30" fxFlex.xs="100">
+      <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+        <mat-form-field class="max-w-30% flex-full xs:max-w-full">
           <mat-label translate>notification.action-type</mat-label>
           <mat-select formControlName="linkType">
             <mat-option *ngFor="let actionButtonLinkType of actionButtonLinkTypes"
@@ -55,7 +54,7 @@
             </mat-option>
           </mat-select>
         </mat-form-field>
-        <mat-form-field fxFlex
+        <mat-form-field class="flex-1"
                         *ngIf="actionButtonConfigForm.get('linkType').value === actionButtonLinkType.LINK; else dashboardSelector">
           <mat-label translate>notification.link</mat-label>
           <input matInput formControlName="link" required>
@@ -66,11 +65,11 @@
         </mat-form-field>
         <ng-template #dashboardSelector>
           <tb-dashboard-autocomplete
-            fxFlex="35" fxFlex.xs="100"
+            class="max-w-35% flex-full xs:max-w-full"
             required
             formControlName="dashboardId">
           </tb-dashboard-autocomplete>
-          <tb-dashboard-state-autocomplete fxFlex="35" fxFlex.xs="100"
+          <tb-dashboard-state-autocomplete class="max-w-35% flex-full xs:max-w-full"
                                            [dashboardId]="actionButtonConfigForm.get('dashboardId').value"
                                            formControlName="dashboardState">
           </tb-dashboard-state-autocomplete>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.html b/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.html
index 88d31996ca..ed8d0b7885 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.html
@@ -31,7 +31,7 @@
            [formGroupName]="NotificationDeliveryMethod.WEB"
            *ngIf="templateConfigurationForm.get('WEB.enabled').value">
     <mat-expansion-panel class="tb-settings" expanded="{{ expandedForm(NotificationDeliveryMethod.WEB) }}">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
+      <mat-expansion-panel-header class="fill-width flex flex-row flex-wrap">
         <mat-panel-title class="template-tittle">
           <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.WEB).icon }}</tb-icon>
           {{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.WEB).name | translate }}
@@ -62,7 +62,7 @@
             <mat-slide-toggle formControlName="enabled" class="mat-slide">
               {{ 'icon.icon' | translate }}
             </mat-slide-toggle>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-material-icon-select asBoxInput
                                        [color]="templateConfigurationForm.get('WEB.additionalConfig.icon.color').value"
                                        formControlName="icon">
@@ -84,7 +84,7 @@
            [formGroupName]="NotificationDeliveryMethod.MOBILE_APP"
            *ngIf="templateConfigurationForm.get('MOBILE_APP.enabled').value">
     <mat-expansion-panel class="tb-settings" expanded="{{ expandedForm(NotificationDeliveryMethod.MOBILE_APP) }}">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
+      <mat-expansion-panel-header class="fill-width flex flex-row flex-wrap">
         <mat-panel-title class="template-tittle">
           <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.MOBILE_APP).icon }}</tb-icon>
           {{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.MOBILE_APP).name | translate }}
@@ -125,7 +125,7 @@
             <mat-slide-toggle formControlName="enabled" class="mat-slide">
               {{ 'icon.icon' | translate }}
             </mat-slide-toggle>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-material-icon-select asBoxInput
                                        [color]="templateConfigurationForm.get('MOBILE_APP.additionalConfig.icon.color').value"
                                        formControlName="icon">
@@ -149,7 +149,7 @@
            [formGroupName]="NotificationDeliveryMethod.SMS"
            *ngIf="templateConfigurationForm.get('SMS.enabled').value">
     <mat-expansion-panel class="tb-settings" expanded="{{ expandedForm(NotificationDeliveryMethod.SMS) }}">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
+      <mat-expansion-panel-header class="fill-width flex flex-row flex-wrap">
         <mat-panel-title class="template-tittle">
           <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.SMS).icon }}</tb-icon>
           {{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.SMS).name | translate }}
@@ -181,7 +181,7 @@
            [formGroupName]="NotificationDeliveryMethod.EMAIL"
            *ngIf="templateConfigurationForm.get('EMAIL.enabled').value">
     <mat-expansion-panel class="tb-settings" expanded="{{ expandedForm(NotificationDeliveryMethod.EMAIL) }}">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
+      <mat-expansion-panel-header class="fill-width flex flex-row flex-wrap">
         <mat-panel-title class="template-tittle">
           <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.EMAIL).icon }}</tb-icon>
           {{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.EMAIL).name | translate }}
@@ -211,7 +211,7 @@
            [formGroupName]="NotificationDeliveryMethod.SLACK"
            *ngIf="templateConfigurationForm.get('SLACK.enabled').value">
     <mat-expansion-panel class="tb-settings" expanded="{{ expandedForm(NotificationDeliveryMethod.SLACK) }}">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
+      <mat-expansion-panel-header class="fill-width flex flex-row flex-wrap">
         <mat-panel-title class="template-tittle">
           <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.SLACK).icon }}</tb-icon>
           {{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.SLACK).name | translate }}
@@ -237,7 +237,7 @@
            [formGroupName]="NotificationDeliveryMethod.MICROSOFT_TEAMS"
            *ngIf="templateConfigurationForm.get('MICROSOFT_TEAMS.enabled').value">
     <mat-expansion-panel class="tb-settings" expanded="{{ expandedForm(NotificationDeliveryMethod.MICROSOFT_TEAMS) }}">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
+      <mat-expansion-panel-header class="fill-width flex flex-row flex-wrap">
         <mat-panel-title class="template-tittle">
           <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.MICROSOFT_TEAMS).icon }}</tb-icon>
           {{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.MICROSOFT_TEAMS).name | translate }}
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
index 2d3e642dd2..82bc730eb8 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2>{{ dialogTitle | translate }}</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <div tb-help="templateNotifications"></div>
   <button mat-icon-button
           (click)="cancel()"
@@ -45,7 +45,7 @@
             {{ 'notification.name-required' | translate }}
           </mat-error>
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block" *ngIf="!hideSelectType">
+        <mat-form-field class="mat-block flex-1" *ngIf="!hideSelectType">
           <mat-label translate>notification.type</mat-label>
           <mat-select formControlName="notificationType">
             <mat-option *ngFor="let notificationType of notificationTypes" [value]="notificationType">
@@ -54,7 +54,7 @@
           </mat-select>
         </mat-form-field>
         <section formGroupName="configuration">
-          <label [ngClass]="{'tb-error': templateNotificationForm.get('configuration.deliveryMethodsTemplates').hasError('atLeastOne')}"
+          <label [class.tb-error]="templateNotificationForm.get('configuration.deliveryMethodsTemplates').hasError('atLeastOne')"
             class="tb-title tb-required">{{ "notification.delivery-methods" | translate }}</label>
           <div class="tb-hint" translate>notification.at-least-one-should-be-selected</div>
           <section formGroupName="deliveryMethodsTemplates" class="delivery-methods-container">
@@ -88,7 +88,7 @@
 <div mat-dialog-actions class="tb-dialog-actions">
   <button mat-stroked-button *ngIf="selectedIndex > 0"
           (click)="backStep()">{{ 'action.back' | translate }}</button>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-raised-button
           color="primary"
           (click)="nextStep()">{{ nextStepLabel() | translate }}</button>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/template-table-header.component.html b/ui-ngx/src/app/modules/home/pages/notification/template/template-table-header.component.html
index 6538f11ae3..bc809ba8b1 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/template-table-header.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/template-table-header.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<div fxFlex="100" fxLayout="row" fxLayoutAlign="end center">
+<div class="flex flex-full flex-row items-center justify-end">
   <button mat-stroked-button color="primary" (click)="createTemplate($event)">
-    <div fxLayout="row" fxLayoutAlign="start center">
+    <div class="flex flex-row items-center justify-start">
       <mat-icon>add</mat-icon>{{ 'notification.add-template' | translate }}
     </div>
   </button>
diff --git a/ui-ngx/src/app/modules/home/pages/ota-update/ota-update.component.html b/ui-ngx/src/app/modules/home/pages/ota-update/ota-update.component.html
index c1430be527..34f1396af5 100644
--- a/ui-ngx/src/app/modules/home/pages/ota-update/ota-update.component.html
+++ b/ui-ngx/src/app/modules/home/pages/ota-update/ota-update.component.html
@@ -15,31 +15,31 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
-  <button mat-raised-button color="primary" fxFlex.xs
+<div class="tb-details-buttons xs:flex xs:flex-col">
+  <button mat-raised-button color="primary" class="xs:flex-1"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
-  <button mat-raised-button color="primary" fxFlex.xs
+  <button mat-raised-button color="primary" class="xs:flex-1"
           [disabled]="(isLoading$ | async) || !(entity?.hasData && !entity?.url)"
           (click)="onEntityAction($event, 'uploadPackage')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{ 'ota-update.download' | translate }}
   </button>
-  <button mat-raised-button color="primary" fxFlex.xs
+  <button mat-raised-button color="primary" class="xs:flex-1"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{ 'ota-update.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onPackageIdCopied()"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>ota-update.copyId</span>
     </button>
@@ -47,7 +47,7 @@
             ngxClipboard
             (cbOnSuccess)="onPackageChecksumCopied()"
             [cbContent]="entity?.checksum"
-            [fxShow]="!isEdit && entity?.checksum">
+            [class.!hidden]="isEdit || !entity?.checksum">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>ota-update.copy-checksum</span>
     </button>
@@ -55,17 +55,17 @@
             ngxClipboard
             (cbOnSuccess)="onPackageDirectUrlCopied()"
             [cbContent]="entity?.url"
-            [fxShow]="!isEdit && entity?.url">
+            [class.!hidden]="isEdit || !entity?.url">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>ota-update.copy-direct-url</span>
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column" fxLayoutGap="8px">
+<div class="mat-padding flex flex-col gap-2">
   <form [formGroup]="entityForm">
-    <fieldset [disabled]="(isLoading$ | async) || !isEdit" fxLayout="column">
-      <div fxLayout="row" fxLayoutGap.gt-xs="8px" fxLayout.xs="column">
-        <mat-form-field class="mat-block" fxFlex="45">
+    <fieldset [disabled]="(isLoading$ | async) || !isEdit" class="flex flex-col">
+      <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+        <mat-form-field class="mat-block max-w-45% flex-full">
           <mat-label translate>ota-update.title</mat-label>
           <input matInput formControlName="title" type="text" required [readonly]="!isAdd">
           <mat-error *ngIf="entityForm.get('title').hasError('required')">
@@ -75,7 +75,7 @@
             {{ 'ota-update.title-max-length' | translate }}
           </mat-error>
         </mat-form-field>
-        <mat-form-field class="mat-block" fxFlex>
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>ota-update.version</mat-label>
           <input matInput formControlName="version" type="text" required [readonly]="!isAdd">
           <mat-error *ngIf="entityForm.get('version').hasError('required')">
@@ -86,7 +86,7 @@
           </mat-error>
         </mat-form-field>
       </div>
-      <mat-form-field class="mat-block" fxFlex style="margin-bottom: 8px">
+      <mat-form-field class="mat-block flex-1" style="margin-bottom: 8px">
         <mat-label translate>ota-update.version-tag</mat-label>
         <input matInput formControlName="tag" type="text" [readonly]="!isAdd">
         <mat-hint *ngIf="isAdd" translate>ota-update.version-tag-hint</mat-hint>
@@ -94,7 +94,8 @@
       <tb-device-profile-autocomplete
         formControlName="deviceProfileId"
         required
-        [ngStyle]="{'padding-bottom': isAdd ? '16px': 0}"
+        [class.pb-4]="isAdd"
+        [class.pb-0]="!isAdd"
         [hint]="'ota-update.chose-compatible-device-profile'"
         [editProfileEnabled]="false"
         [addNewProfile]="false"
@@ -110,7 +111,7 @@
       </mat-form-field>
       <section *ngIf="isAdd">
         <div class="mat-caption" style="margin: -8px 0 8px;" translate>ota-update.warning-after-save-no-edit</div>
-        <mat-radio-group formControlName="isURL" fxLayoutGap="16px">
+        <mat-radio-group formControlName="isURL" class="gap-4">
           <mat-radio-button [value]="false">{{ "ota-update.upload-binary-file" | translate }}</mat-radio-button>
           <mat-radio-button [value]="true">{{ "ota-update.use-external-url" | translate }}</mat-radio-button>
         </mat-radio-group>
@@ -128,10 +129,9 @@
             {{ 'ota-update.auto-generate-checksum' | translate }}
           </mat-checkbox>
         </section>
-        <div fxLayout="row" fxLayoutGap.gt-xs="8px" fxLayoutGap.sm="8px"
-             fxLayout.xs="column" fxLayout.md="column"
+        <div class="flex flex-row xs:flex-col sm:gap-2 md:flex-col gt-xs:gap-2"
              *ngIf="!(isAdd && this.entityForm.get('generateChecksum').value)">
-          <mat-form-field class="mat-block" fxFlex="33">
+          <mat-form-field class="mat-block max-w-33% flex-full">
             <mat-label translate>ota-update.checksum-algorithm</mat-label>
             <mat-select formControlName="checksumAlgorithm">
               <mat-option *ngFor="let checksumAlgorithm of checksumAlgorithms" [value]="checksumAlgorithm">
@@ -139,23 +139,23 @@
               </mat-option>
             </mat-select>
           </mat-form-field>
-          <mat-form-field class="mat-block" fxFlex>
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>ota-update.checksum</mat-label>
             <input matInput formControlName="checksum" type="text">
             <mat-hint *ngIf="isAdd" translate>ota-update.checksum-hint</mat-hint>
           </mat-form-field>
         </div>
         <section *ngIf="!isAdd">
-          <div fxLayout="row" fxLayoutGap.gt-md="8px" fxLayoutGap.sm="8px" fxLayout.xs="column" fxLayout.md="column">
-            <mat-form-field class="mat-block" fxFlex="33">
+          <div class="flex flex-row xs:flex-col sm:gap-2 md:flex-col gt-md:gap-2">
+            <mat-form-field class="mat-block max-w-33% flex-full">
               <mat-label translate>ota-update.file-name</mat-label>
               <input matInput formControlName="fileName" type="text">
             </mat-form-field>
-            <mat-form-field class="mat-block" fxFlex>
+            <mat-form-field class="mat-block flex-1">
               <mat-label translate>ota-update.file-size-bytes</mat-label>
               <input matInput formControlName="dataSize" type="text">
             </mat-form-field>
-            <mat-form-field class="mat-block" fxFlex>
+            <mat-form-field class="mat-block flex-1">
               <mat-label translate>ota-update.content-type</mat-label>
               <input matInput formControlName="contentType" type="text">
             </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/pages/profile/profile.component.html b/ui-ngx/src/app/modules/home/pages/profile/profile.component.html
index 2de393dc95..d59847cf37 100644
--- a/ui-ngx/src/app/modules/home/pages/profile/profile.component.html
+++ b/ui-ngx/src/app/modules/home/pages/profile/profile.component.html
@@ -18,13 +18,12 @@
 <div>
   <mat-card appearance="outlined" class="profile-card">
     <mat-card-header>
-      <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.xs="8px"
-           fxLayoutAlign="space-between start" fxLayoutAlign.xs="start start">
-        <div fxFlex fxLayout="column">
+      <div class="flex flex-1 flex-row items-start justify-between xs:flex-col xs:justify-start xs:gap-2">
+        <div class="flex flex-1 flex-col">
           <span class="mat-headline-5" translate>profile.profile</span>
           <span class="profile-email" style='opacity: 0.7;'>{{ profile ? profile.get('email').value : '' }}</span>
         </div>
-        <div fxLayout="column">
+        <div class="flex flex-col">
           <span class="mat-mdc-subheader" translate>profile.last-login-time</span>
           <span class="profile-last-login-ts" style='opacity: 0.7;'>{{ user?.additionalInfo?.lastLoginTs | date:'yyyy-MM-dd HH:mm:ss'  }}</span>
         </div>
@@ -67,9 +66,9 @@
               </mat-option>
             </mat-select>
           </mat-form-field>
-          <section class="tb-home-dashboard" fxFlex fxLayout="column" fxLayout.gt-sm="row" *ngIf="!isSysAdmin()">
+          <section class="tb-home-dashboard flex flex-1 flex-col gt-sm:flex-row" *ngIf="!isSysAdmin()">
             <tb-dashboard-autocomplete
-              fxFlex
+              class="flex-1"
               label="{{ 'dashboard.home-dashboard' | translate }}"
               formControlName="homeDashboardId"
               [dashboardsScope]="user?.authority === authorities.TENANT_ADMIN ? 'tenant' : 'customer'"
@@ -77,11 +76,11 @@
               [customerId]="user?.customerId?.id"
               [selectFirstDashboard]="false"
             ></tb-dashboard-autocomplete>
-            <mat-checkbox fxFlex formControlName="homeDashboardHideToolbar">
+            <mat-checkbox class="flex-1" formControlName="homeDashboardHideToolbar">
               {{ 'dashboard.home-dashboard-hide-toolbar' | translate }}
             </mat-checkbox>
           </section>
-          <div fxLayout="row" fxLayoutAlign="end start">
+          <div class="flex flex-row items-start justify-end">
             <button mat-button mat-raised-button color="primary"
                     type="submit"
                     [disabled]="(isLoading$ | async) || profile.invalid || !profile.dirty">
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html
index b1b25590ea..37e3ddd609 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html
@@ -18,7 +18,7 @@
 <form (ngSubmit)="add()" class="dialog-container">
   <mat-toolbar color="primary">
     <h2 translate>rulenode.add</h2>
-    <span fxFlex>: {{ruleNode.component.name}}</span>
+    <span class="flex-1">: {{ruleNode.component.name}}</span>
     <div [tb-help]="helpLinkIdForRuleNodeType()"></div>
     <button mat-icon-button
             (click)="cancel()"
@@ -36,7 +36,7 @@
                   isAdd>
     </tb-rule-node>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-link-dialog.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-link-dialog.component.html
index ed9a7ca5ea..01150bef01 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-link-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-link-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="ruleNodeLinkFormGroup" (ngSubmit)="add()" style="width: 480px;">
   <mat-toolbar color="primary">
     <h2 translate>rulenode.add-link</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <div [tb-help]="'ruleEngine'"></div>
     <button mat-icon-button
             (click)="cancel()"
@@ -39,7 +39,7 @@
       </tb-rule-node-link>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/create-nested-rulechain-dialog.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/create-nested-rulechain-dialog.component.html
index 3ee27c7674..0525f7b44c 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/create-nested-rulechain-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/create-nested-rulechain-dialog.component.html
@@ -18,7 +18,7 @@
 <form (ngSubmit)="add()" style="min-width: 650px;">
   <mat-toolbar color="primary">
     <h2 translate>rulenode.create-nested-rulechain</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -30,7 +30,7 @@
   <div mat-dialog-content>
     <form [formGroup]="createNestedRuleChainFormGroup" class="mat-padding">
       <fieldset [disabled]="isLoading$ | async">
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>rulechain.name</mat-label>
           <input matInput formControlName="name" required>
           <mat-error *ngIf="createNestedRuleChainFormGroup.get('name').hasError('required')">
@@ -49,7 +49,7 @@
       </fieldset>
     </form>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
index 95c7343e7f..014a73973c 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
@@ -23,7 +23,7 @@
 </div>
 <form [formGroup]="ruleNodeFormGroup" class="mat-padding">
   <section class="title-row">
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>rulenode.name</mat-label>
       <input matInput formControlName="name" required>
       <mat-error *ngIf="ruleNodeFormGroup.get('name').hasError('required')
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-link.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-link.component.html
index 1e8c297734..b74d9f0be2 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-link.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-link.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <form [formGroup]="ruleNodeLinkFormGroup">
     <tb-link-labels
       required
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html
index 39f6f7b870..5e955dc4b4 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html
@@ -15,22 +15,21 @@
     limitations under the License.
 
 -->
-<div class="mat-content tb-rulechain" fxFlex tb-fullscreen [fullscreen]="isFullscreen" [tb-hotkeys]="hotKeys"
-     [cheatSheet]="cheatSheetComponent" fxLayout="column">
+<div class="mat-content tb-rulechain flex flex-1 flex-col" tb-fullscreen [fullscreen]="isFullscreen" [tb-hotkeys]="hotKeys"
+     [cheatSheet]="cheatSheetComponent">
   <tb-hotkeys-cheatsheet #cheatSheetComponent></tb-hotkeys-cheatsheet>
-  <section class="tb-rulechain-container" fxFlex fxLayout="column">
-    <div class="tb-rulechain-layout" fxFlex fxLayout="row">
-      <mat-drawer-container style="width: 100%; height: 100%;">
-        <mat-drawer class="tb-rulechain-library mat-elevation-z4"
+  <section class="tb-rulechain-container flex flex-1 flex-col">
+    <div class="tb-rulechain-layout flex flex-1 flex-row">
+      <mat-drawer-container class="size-full">
+        <mat-drawer class="tb-rulechain-library mat-elevation-z4 flex flex-col"
                     disableClose="true"
                     mode="side"
                     #drawer
                     opened
-                    position="start"
-                    fxLayout="column">
+                    position="start">
           <mat-toolbar color="primary" class="tb-dark">
             <tb-rule-chain-select
-              fxFlex
+              class="flex-1"
               *ngIf="!isImport"
               [ruleChainType]="ruleChainType"
               [disabled]="isDirtyValue"
@@ -40,7 +39,7 @@
           </mat-toolbar>
           <mat-toolbar>
             <div class="mat-toolbar-tools">
-              <mat-form-field fxFlex class="tb-appearance-transparent">
+              <mat-form-field class="tb-appearance-transparent flex-1">
                 <button mat-icon-button matPrefix class="tb-small"
                         matTooltip="{{'rulenode.search' | translate}}"
                         matTooltipPosition="above">
@@ -50,7 +49,7 @@
                        [formControl]="ruleNodeTypeSearch"
                        placeholder="{{'rulenode.search' | translate}}"/>
                 <button mat-icon-button matSuffix class="tb-small"
-                        [fxShow]="ruleNodeTypeSearch.value !== ''"
+                        [class.!hidden]="ruleNodeTypeSearch.value === ''"
                         (click)="ruleNodeTypeSearch.reset()"
                         matTooltip="{{'action.clear-search' | translate}}"
                         matTooltipPosition="above">
@@ -89,7 +88,7 @@
                     (closed)="onDetailsDrawerClosed()"
                     mode="over"
                     position="end">
-          <tb-details-panel *ngIf="editingRuleNode" fxFlex
+          <tb-details-panel *ngIf="editingRuleNode" class="flex-1"
                             headerTitle="{{editingRuleNode.name}}"
                             headerSubtitle="{{
                               (ruleNodeTypeDescriptorsMap.get(editingRuleNode.component.type).name | translate)
@@ -104,7 +103,7 @@
             <div class="details-buttons">
               <div [tb-help]="helpLinkIdForRuleNodeType()"></div>
             </div>
-            <mat-tab-group fxFlex mat-stretch-tabs="false" class="tb-absolute-fill tb-rulenode-details" [(selectedIndex)]="selectedRuleNodeTabIndex">
+            <mat-tab-group mat-stretch-tabs="false" class="tb-absolute-fill tb-rulenode-details flex-1" [(selectedIndex)]="selectedRuleNodeTabIndex">
               <mat-tab label="{{ 'rulenode.details' | translate }}">
                 <tb-rule-node #tbRuleNode
                               [ruleNode]="editingRuleNode"
@@ -126,7 +125,7 @@
               </mat-tab>
               <mat-tab label="{{ 'rulenode.help' | translate }}">
                 <div class="tb-rule-node-help">
-                  <div id="tb-node-content" class="mat-padding" fxLayout="column">
+                  <div id="tb-node-content" class="mat-padding flex flex-col">
                     <div class="tb-node-title">{{editingRuleNode.component.name}}</div>
                     <div>&nbsp;</div>
                     <div class="tb-node-description" [innerHtml]="editingRuleNode.component.configurationDescriptor.nodeDefinition.description | safe: 'html'"></div>
@@ -137,7 +136,7 @@
               </mat-tab>
             </mat-tab-group>
           </tb-details-panel>
-          <tb-details-panel *ngIf="editingRuleNodeLink" fxFlex
+          <tb-details-panel *ngIf="editingRuleNodeLink" class="flex-1"
                             headerTitle="{{editingRuleNodeLink.label}}"
                             headerSubtitle="{{'rulenode.link-details' | translate}}"
                             [isReadOnly]="false"
@@ -150,7 +149,7 @@
               <div [tb-help]="'ruleEngine'"></div>
             </div>
             <tb-rule-node-link
-              fxFlex
+              class="flex-1"
               #tbRuleNodeLink
               [(ngModel)]="editingRuleNodeLink"
               [allowedLabels]="editingRuleNodeLinkLabels"
@@ -166,7 +165,7 @@
                   (click)="drawer.toggle();"
                   matTooltip="{{ (drawer.opened ? 'rulenode.close-node-library' : 'rulenode.open-node-library') | translate }}"
                   matTooltipPosition="above">
-            <mat-icon class="tb-library-node-btn-icon" [ngClass]="{'tb-library-node-btn-icon-toggled' : drawer.opened}">chevron_right</mat-icon>
+            <mat-icon class="tb-library-node-btn-icon" [class.tb-library-node-btn-icon-toggled]="drawer.opened">chevron_right</mat-icon>
           </button>
           <button #versionControlButton
                   *ngIf="!isImport"
@@ -198,7 +197,7 @@
                   <div class="tb-context-menu-header {{contextInfo.headerClass}}">
                     <mat-icon *ngIf="!contextInfo.iconUrl">{{contextInfo.icon}}</mat-icon>
                     <img *ngIf="contextInfo.iconUrl" [src]="contextInfo.iconUrl"/>
-                    <div fxFlex>
+                    <div class="flex-1">
                       <div class="tb-context-menu-title">{{contextInfo.title}}</div>
                       <div class="tb-context-menu-subtitle">{{contextInfo.subtitle}}</div>
                     </div>
@@ -231,10 +230,10 @@
                        [userCallbacks]="editCallbacks">
             </fc-canvas>
           </div>
-          <section fxLayout="row" class="layout-wrap tb-footer-buttons" fxLayoutAlign="start end">
+          <section class="tb-footer-buttons flex flex-row flex-wrap items-end justify-start">
             <button [disabled]="isLoading$ | async"
                     mat-fab color="accent" class="tb-btn-footer"
-                    [ngClass]="{'tb-hide': !objectsSelected()}"
+                    [class.tb-hide]="!objectsSelected()"
                     (click)="deleteSelected()"
                     matTooltip="{{ 'rulenode.delete-selected-objects' | translate }}"
                     matTooltipPosition="above">
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain.component.html
index 4dcfd8967a..167374ed11 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain.component.html
@@ -19,63 +19,63 @@
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'rulechain.open-rulechain' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'export')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'rulechain.export' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'setRoot')"
-          [fxShow]="!isEdit && ((!entity?.root && ruleChainScope === 'tenant') || (!isEdgeRootRuleChain() && ruleChainScope === 'edge'))">
+          [class.!hidden]="isEdit || !((!entity?.root && ruleChainScope === 'tenant') || (!isEdgeRootRuleChain() && ruleChainScope === 'edge'))">
     {{'rulechain.set-root' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'setEdgeTemplateRoot')"
-          [fxShow]="!isEdit && !entity?.root && ruleChainScope === 'edges'">
+          [class.!hidden]="isEdit || entity?.root || ruleChainScope !== 'edges'">
     {{'rulechain.set-edge-template-root-rulechain' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'setAutoAssignToEdge')"
-          [fxShow]="!isEdit && isNotAutoAssignToEdgeRuleChain() && ruleChainScope === 'edges'">
+          [class.!hidden]="isEdit || !isNotAutoAssignToEdgeRuleChain() || ruleChainScope !== 'edges'">
     {{'rulechain.set-auto-assign-to-edge' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unsetAutoAssignToEdge')"
-          [fxShow]="!isEdit && isAutoAssignToEdgeRuleChain() && ruleChainScope === 'edges'">
+          [class.!hidden]="isEdit || !isAutoAssignToEdgeRuleChain() || ruleChainScope !== 'edges'">
     {{'rulechain.unset-auto-assign-to-edge' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromEdge')"
-          [fxShow]="!isEdit && !isEdgeRootRuleChain() && ruleChainScope === 'edge'">
+          [class.!hidden]="isEdit || isEdgeRootRuleChain() || ruleChainScope !== 'edges'">
     {{'edge.unassign-from-edge' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit && ruleChainScope !== 'edge'">
+          [class.!hidden]="hideDelete() || isEdit || ruleChainScope === 'edge'">
     {{'rulechain.delete' | translate }}
   </button>
-  <div fxLayout="row">
+  <div class="flex flex-row">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onRuleChainIdCopied($event)"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>rulechain.copyId</span>
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block">
@@ -88,7 +88,7 @@
           {{ 'rulechain.name-max-length' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-checkbox fxFlex formControlName="debugMode" style="padding-bottom: 16px;">
+      <mat-checkbox class="flex-1" formControlName="debugMode" style="padding-bottom: 16px;">
         {{ 'rulechain.debug-mode' | translate }}
       </mat-checkbox>
       <div formGroupName="additionalInfo">
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulenode.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rulenode.component.html
index e03c5469dd..8ca8f4eece 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulenode.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulenode.component.html
@@ -22,11 +22,11 @@
    (mouseleave)="userNodeCallbacks.mouseLeave($event, node)">
   <div class="fc-node-overlay"></div>
   <div class="tb-rule-node {{node.nodeClass}}"
-       [ngClass]="{'tb-rule-node-highlighted' : node.highlighted,
-                   'tb-rule-node-invalid': node.error }">
-    <mat-icon *ngIf="!iconUrl" fxFlex="15">{{node.icon}}</mat-icon>
-    <img *ngIf="iconUrl" fxFlex="15" [src]="iconUrl"/>
-    <div fxLayout="column" fxFlex="85" fxLayoutAlign="center">
+       [class.tb-rule-node-highlighted]="node.highlighted"
+       [class.tb-rule-node-invalid]="node.error">
+    <mat-icon *ngIf="!iconUrl" class="max-w-15% flex-full">{{node.icon}}</mat-icon>
+    <img *ngIf="iconUrl" class="max-w-15% flex-full" [src]="iconUrl"/>
+    <div class="flex max-w-85% flex-full flex-col items-stretch justify-center">
       <span class="tb-node-type">{{ node.component.name }}</span>
       <span class="tb-node-title" *ngIf="node.name">{{ node.name }}</span>
     </div>

From 32d7978c9efe9d2563e101c53daf658e9603f37b Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Wed, 16 Oct 2024 19:15:53 +0300
Subject: [PATCH 25/34] Flex layout replacements. Switch to tailwind.css.

---
 ...scada-symbol-behavior-panel.component.html |  6 ++---
 .../scada-symbol-behaviors.component.html     |  7 +++--
 .../scada-symbol-metadata-tags.component.html |  5 ++--
 .../scada-symbol-metadata.component.html      | 20 +++++++-------
 .../scada-symbol-properties.component.html    |  7 +++--
 ...scada-symbol-property-panel.component.html |  4 +--
 .../scada-symbol-editor.component.html        | 10 +++----
 .../scada-symbol/scada-symbol.component.html  | 22 ++++++++--------
 .../pages/security/security.component.html    | 26 +++++++++----------
 ui-ngx/tailwind.config.js                     | 15 ++++++++---
 10 files changed, 63 insertions(+), 59 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html
index 849a8661ab..9494fb8092 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html
@@ -92,7 +92,7 @@
       </ng-container>
       <div class="tb-form-row">
         <div class="fixed-title-width" translate>scada.behavior.default-settings</div>
-        <tb-get-value-action-settings fxFlex
+        <tb-get-value-action-settings class="flex-1"
                                       panelTitle="{{ behaviorFormGroup.get('name').value | customTranslate }}"
                                       [valueType]="behaviorFormGroup.get('valueType').value"
                                       [trueLabel]="behaviorFormGroup.get('trueLabel').value | customTranslate"
@@ -107,7 +107,7 @@
     <ng-container *ngIf="behaviorFormGroup.get('type').value === ScadaSymbolBehaviorType.action">
       <div class="tb-form-row">
         <div class="fixed-title-width" translate>scada.behavior.default-settings</div>
-        <tb-set-value-action-settings fxFlex
+        <tb-set-value-action-settings class="flex-1"
                                       panelTitle="{{ behaviorFormGroup.get('name').value | customTranslate }}"
                                       [valueType]="behaviorFormGroup.get('valueType').value"
                                       [aliasController]="aliasController"
@@ -119,7 +119,7 @@
     <ng-container *ngIf="behaviorFormGroup.get('type').value === ScadaSymbolBehaviorType.widgetAction">
       <div class="tb-form-row">
         <div class="fixed-title-width" translate>scada.behavior.default-settings</div>
-        <tb-widget-action-settings fxFlex
+        <tb-widget-action-settings class="flex-1"
                                    panelTitle="{{ behaviorFormGroup.get('name').value | customTranslate }}"
                                    [callbacks]="callbacks"
                                    [widgetType]="widgetType.rpc"
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.html
index 7cefc6af63..d566336057 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.html
@@ -30,7 +30,7 @@
       <div cdkDrag [cdkDragDisabled]="!dragEnabled"
            [class.tb-draggable-form-table-row]="!disabled"
            *ngFor="let behaviorControl of behaviorsFormArray().controls; trackBy: trackByBehavior; let $index = index;">
-        <tb-scada-symbol-metadata-behavior-row fxFlex
+        <tb-scada-symbol-metadata-behavior-row class="flex-1"
           [index]="$index"
           [formControl]="behaviorControl"
           [aliasController]="aliasController"
@@ -42,7 +42,7 @@
                   *ngIf="!disabled"
                   type="button"
                   cdkDragHandle
-                  [ngClass]="{'tb-hidden': !dragEnabled}"
+                  [class.tb-hidden]="!dragEnabled"
                   matTooltip="{{ 'action.drag' | translate }}"
                   matTooltipPosition="above">
             <mat-icon>drag_indicator</mat-icon>
@@ -60,6 +60,5 @@
 </div>
 
 <ng-template #noBehaviors>
-  <span fxLayoutAlign="center center"
-        class="tb-prompt">{{ 'scada.behavior.no-behaviors' | translate }}</span>
+  <span class="tb-prompt flex items-center justify-center">{{ 'scada.behavior.no-behaviors' | translate }}</span>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.html
index 32bb345ecf..c8f900ce54 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.html
@@ -24,7 +24,7 @@
     </div>
     <div *ngIf="tagsFormArray().controls.length; else noTags" class="tb-form-table-body">
       <div *ngFor="let tagControl of tagsFormArray().controls; trackBy: trackByTag; let $index = index; let $last = last">
-        <tb-scada-symbol-metadata-tag fxFlex
+        <tb-scada-symbol-metadata-tag class="flex-1"
                                       [elementStateRenderFunctionCompleter]="elementStateRenderFunctionCompleter"
                                       [clickActionFunctionCompleter]="clickActionFunctionCompleter"
                                       [formControl]="tagControl">
@@ -35,6 +35,5 @@
   </div>
 </div>
 <ng-template #noTags>
-  <span fxLayoutAlign="center center"
-        class="tb-prompt">{{ 'scada.tag.no-tags' | translate }}</span>
+  <span class="tb-prompt flex items-center justify-center">{{ 'scada.tag.no-tags' | translate }}</span>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.html
index 67c77f7f2a..c505546286 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.html
@@ -25,17 +25,17 @@
     </div>
   </div>
   <div [formGroup]="metadataFormGroup" class="tb-scada-symbol-metadata-content">
-    <div [fxShow]="selectedOption === 'general'" class="mat-content">
+    <div [class.!hidden]="selectedOption !== 'general'" class="mat-content">
       <div class="tb-form-panel">
         <div class="tb-form-row">
           <div class="fixed-title-width" translate>scada.title</div>
-          <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <input matInput required formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
           </mat-form-field>
         </div>
         <div class="tb-form-row">
           <div class="fixed-title-width" translate>scada.description</div>
-          <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <textarea matInput
                       formControlName="description"
                       rows="2"></textarea>
@@ -43,8 +43,8 @@
         </div>
         <div class="tb-form-row">
           <div class="fixed-title-width" translate>scada.search-tags</div>
-          <div fxFlex fxLayout="row" fxLayoutAlign="start center">
-            <tb-string-items-list fxFlex
+          <div class="flex flex-1 flex-row items-center justify-start">
+            <tb-string-items-list class="flex-1"
                                   style="display: flex;"
                                   formControlName="searchTags"
                                   appearance="outline"
@@ -54,7 +54,7 @@
         </div>
         <div class="tb-form-row">
           <div class="fixed-title-width" translate>scada.widget-size</div>
-          <div fxLayout="row" fxFlex fxLayoutAlign="end center" fxLayoutGap="8px">
+          <div class="flex flex-1 flex-row items-center justify-end gap-2">
             <div class="tb-small-label">{{ 'scada.cols' | translate }}</div>
             <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
               <input matInput formControlName="widgetSizeX" required
@@ -71,7 +71,7 @@
         </div>
         <div class="tb-form-panel stroked">
           <mat-expansion-panel class="tb-settings" expanded>
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex flex-row flex-wrap">
               <mat-panel-title>
                 {{ 'scada.state-render-function' | translate }}
               </mat-panel-title>
@@ -89,7 +89,7 @@
         </div>
       </div>
     </div>
-    <div [fxShow]="selectedOption === 'tags'" class="mat-content overflow-hidden">
+    <div [class.!hidden]="selectedOption !== 'tags'" class="mat-content overflow-hidden">
       <tb-scada-symbol-metadata-tags
         #symbolMetadataTags
         [tags]="tags"
@@ -98,14 +98,14 @@
         formControlName="tags">
       </tb-scada-symbol-metadata-tags>
     </div>
-    <div [fxShow]="selectedOption === 'behavior'" class="mat-content overflow-hidden">
+    <div [class.!hidden]="selectedOption !== 'behavior'" class="mat-content overflow-hidden">
       <tb-scada-symbol-metadata-behaviors
         formControlName="behavior"
         [aliasController]="aliasController"
         [callbacks]="callbacks">
       </tb-scada-symbol-metadata-behaviors>
     </div>
-    <div [fxShow]="selectedOption === 'properties'" class="mat-content overflow-hidden">
+    <div [class.!hidden]="selectedOption !== 'properties'" class="mat-content overflow-hidden">
       <tb-scada-symbol-metadata-properties
         formControlName="properties">
       </tb-scada-symbol-metadata-properties>
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.html
index 1b553a5130..684609937e 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.html
@@ -30,7 +30,7 @@
       <div cdkDrag [cdkDragDisabled]="!dragEnabled"
            [class.tb-draggable-form-table-row]="!disabled"
            *ngFor="let propertyControl of propertiesFormArray().controls; trackBy: trackByProperty; let $index = index;">
-        <tb-scada-symbol-metadata-property-row fxFlex
+        <tb-scada-symbol-metadata-property-row class="flex-1"
                                                [index]="$index"
                                                [booleanPropertyIds]="booleanPropertyIds"
                                                [formControl]="propertyControl"
@@ -41,7 +41,7 @@
                   *ngIf="!disabled"
                   type="button"
                   cdkDragHandle
-                  [ngClass]="{'tb-hidden': !dragEnabled}"
+                  [class.tb-hidden]="!dragEnabled"
                   matTooltip="{{ 'action.drag' | translate }}"
                   matTooltipPosition="above">
             <mat-icon>drag_indicator</mat-icon>
@@ -59,6 +59,5 @@
 </div>
 
 <ng-template #noProperties>
-  <span fxLayoutAlign="center center"
-        class="tb-prompt">{{ 'scada.property.no-properties' | translate }}</span>
+  <span class="tb-prompt flex items-center justify-center">{{ 'scada.property.no-properties' | translate }}</span>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.html
index 6090a9504e..94efffca85 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.html
@@ -83,7 +83,7 @@
     </div>
     <div *ngIf="propertyFormGroup.get('type').value === ScadaSymbolPropertyType.number" class="tb-form-row space-between">
       <div translate>scada.property.number-settings</div>
-      <div fxLayout="row" fxFlex fxLayoutAlign="end center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-end gap-2">
         <div class="tb-small-label" translate>scada.property.min</div>
         <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="min"
@@ -110,7 +110,7 @@
     </div>
     <div class="tb-form-panel stroked">
       <mat-expansion-panel class="tb-settings">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
             {{ 'scada.property.advanced-ui-settings' | translate }}
           </mat-panel-title>
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html
index 3ece699a83..8f75949a47 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html
@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<div class="tb-scada-symbol-editor-shape" [fxShow]="editorMode === 'svg'" #scadaSymbolShape></div>
-<div class="tb-scada-symbol-editor-tooltips" [fxShow]="editorMode === 'svg'" #tooltipsContainer>
+<div class="tb-scada-symbol-editor-shape" [class.!hidden]="editorMode !== 'svg'" #scadaSymbolShape></div>
+<div class="tb-scada-symbol-editor-tooltips" [class.!hidden]="editorMode !== 'svg'" #tooltipsContainer>
   <tb-anchor #tooltipsContainerComponent></tb-anchor>
 </div>
-<div class="tb-scada-symbol-editor-svg-xml" [fxShow]="editorMode === 'xml'">
+<div class="tb-scada-symbol-editor-svg-xml" [class.!hidden]="editorMode !== 'xml'">
   <tb-svg-xml [formControl]="svgContentFormControl"
               fillHeight
               noLabel>
@@ -27,7 +27,7 @@
 </div>
 <div class="tb-scada-symbol-editor-buttons">
   <div class="tb-scada-symbol-editor-view-buttons">
-    <div class="tb-scada-symbol-editor-zoom-buttons tb-primary-fill" [fxShow]="editorMode === 'svg'">
+    <div class="tb-scada-symbol-editor-zoom-buttons tb-primary-fill" [class.!hidden]="editorMode !== 'svg'">
       <button mat-icon-button
               [disabled]="zoomInDisabled"
               (click)="zoomIn()"
@@ -43,7 +43,7 @@
         <mat-icon>remove</mat-icon>
       </button>
     </div>
-    <div *ngIf="displayShowHidden" [fxShow]="editorMode === 'svg'" class="tb-primary-fill">
+    <div *ngIf="displayShowHidden" [class.!hidden]="editorMode !== 'svg'" class="tb-primary-fill">
       <button mat-icon-button
               (click)="toggleShowHidden()"
               matTooltip="{{ (showHiddenElements ? 'scada.hide-hidden-elements' : 'scada.show-hidden-elements') | translate }}"
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html
index 6110f4afc0..809b85206f 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html
@@ -15,21 +15,21 @@
     limitations under the License.
 
 -->
-<div class="tb-scada-symbol-editor mat-content" fxLayout="column">
-  <section class="tb-scada-symbol-editor-container" fxFlex fxLayout="column">
-    <div class="tb-scada-symbol-editor-layout" fxFlex fxLayout="row">
-      <mat-drawer-container style="width: 100%; height: 100%;">
+<div class="tb-scada-symbol-editor mat-content flex flex-col">
+  <section class="tb-scada-symbol-editor-container flex flex-1 flex-col">
+    <div class="tb-scada-symbol-editor-layout flex flex-1 flex-row">
+      <mat-drawer-container class="size-full">
         <mat-drawer class="tb-scada-symbol-editor-details-drawer mat-elevation-z4"
                     disableClose="true"
                     mode="side"
                     opened
                     position="end">
-          <tb-details-panel fxFlex
+          <tb-details-panel class="flex-1"
                             [isReadOnly]="true"
                             [showCloseDetails]="false"
                             headerHeightPx="64"
                             headerTitle="{{symbolData?.imageResource?.title}}">
-            <div class="details-buttons" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
+            <div class="details-buttons flex flex-row items-center justify-start gap-4">
               <div tb-help="scadaSymbolDev"></div>
               <button mat-stroked-button
                       [disabled]="scadaSymbolFormGroup.invalid"
@@ -77,7 +77,7 @@
                 </div>
               </div>
             </div>
-            <div [fxShow]="!previewMode" [formGroup]="scadaSymbolFormGroup">
+            <div [class.!hidden]="previewMode" [formGroup]="scadaSymbolFormGroup">
               <tb-scada-symbol-metadata
                 #symbolMetadata
                 [tags]="tags"
@@ -85,7 +85,7 @@
                 [callbacks]="widgetActionCallbacks"
                 formControlName="metadata">
                 <div class="tb-scada-symbol-metadata-header-prefix">
-                  <button fxHide.gt-sm
+                  <button class="gt-sm:!hidden"
                           [disabled]="scadaSymbolFormGroup.invalid || !symbolEditorValid"
                           mat-button color="primary"
                           (click)="enterPreviewMode()">
@@ -93,15 +93,15 @@
                     {{ 'scada.preview' | translate }}
                   </button>
                 </div>
-                <div fxFlex.lt-md class="tb-scada-symbol-metadata-header-suffix" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="12px">
-                  <button fxHide.lt-md
+                <div class="tb-scada-symbol-metadata-header-suffix flex flex-row items-center justify-end gap-3 lt-md:flex-1">
+                  <button class="lt-md:!hidden"
                           [disabled]="scadaSymbolFormGroup.invalid || !symbolEditorValid"
                           mat-button color="primary"
                           (click)="enterPreviewMode()">
                     <mat-icon>visibility</mat-icon>
                     {{ 'scada.preview' | translate }}
                   </button>
-                  <div *ngIf="!readonly" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
+                  <div *ngIf="!readonly" class="flex flex-row items-center justify-start gap-3">
                     <button [disabled]="!(scadaSymbolFormGroup.dirty || symbolEditorDirty)"
                             mat-stroked-button color="primary"
                             (click)="onRevertScadaSymbolConfig()">
diff --git a/ui-ngx/src/app/modules/home/pages/security/security.component.html b/ui-ngx/src/app/modules/home/pages/security/security.component.html
index d512090617..35dc557552 100644
--- a/ui-ngx/src/app/modules/home/pages/security/security.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/security.component.html
@@ -15,12 +15,12 @@
     limitations under the License.
 
 -->
-<div class="profile-container" fxLayout="column" fxLayoutGap="8px">
-  <mat-card appearance="outlined" class="profile-card" fxLayout="column">
+<div class="profile-container flex flex-col gap-2">
+  <mat-card appearance="outlined" class="profile-card flex flex-col">
     <mat-card-title style="margin-bottom: 8px;">
       <span class="mat-headline-5 card-title" translate>profile.jwt-token</span>
     </mat-card-title>
-    <div fxLayout="row" fxLayoutAlign="space-between center">
+    <div class="flex flex-row items-center justify-between">
       <div class="token-text">{{ 'profile.token-valid-till' | translate }} <span class="date">{{ jwtTokenExpiration | date: 'yyyy-MM-dd HH:mm:ss' }}</span></div>
       <button mat-raised-button
               color="primary"
@@ -30,16 +30,16 @@
       </button>
     </div>
   </mat-card>
-  <mat-card appearance="outlined" class="profile-card" fxLayout="column">
+  <mat-card appearance="outlined" class="profile-card flex flex-col">
     <div class="change-password" tb-toast toastTarget="changePassword">
       <form #changePasswordForm="ngForm" [formGroup]="changePassword" (ngSubmit)="onChangePassword(changePasswordForm)">
-        <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="25px" fxLayoutGap.xs="0">
-          <div fxFlex="290px" fxFlex.sm="250px"  fxFlex.xs="100">
+        <div class="flex flex-row gap-6.25 xs:flex-col xs:gap-0">
+          <div class="min-w-72.5 max-w-72.5 flex-1 basis-72.5 xs:min-w-0 xs:max-w-full xs:basis-full sm:min-w-62.5 sm:max-w-62.5 sm:basis-62.5">
             <h3 class="card-title" translate>profile.change-password</h3>
             <mat-form-field class="mat-block same-color" appearance="fill" color="primary">
               <mat-label translate>profile.current-password</mat-label>
               <input matInput type="password" name="current-password" formControlName="currentPassword" autocomplete="current-password"/>
-              <tb-toggle-password [fxShow]="changePassword.get('currentPassword').dirty || changePassword.get('currentPassword').touched" matSuffix></tb-toggle-password>
+              <tb-toggle-password [class.!hidden]="!changePassword.get('currentPassword').dirty && !changePassword.get('currentPassword').touched" matSuffix></tb-toggle-password>
               <mat-error *ngIf="changePassword.get('currentPassword').hasError('differencePassword')">
                 {{ 'security.password-requirement.incorrect-password-try-again' | translate }}
               </mat-error>
@@ -47,7 +47,7 @@
             <mat-form-field class="mat-block same-color" hideRequiredMarker appearance="fill" color="primary" subscriptSizing="dynamic">
               <mat-label translate>login.new-password</mat-label>
               <input matInput type="password" name="new-password" formControlName="newPassword" autocomplete="new-password" required/>
-              <tb-toggle-password [fxShow]="changePassword.get('newPassword').dirty || changePassword.get('newPassword').touched" matSuffix></tb-toggle-password>
+              <tb-toggle-password [class.!hidden]="!changePassword.get('newPassword').dirty && !changePassword.get('newPassword').touched" matSuffix></tb-toggle-password>
               <mat-hint></mat-hint>
               <mat-error *ngIf="changePassword.get('newPassword').errors
                               && !changePassword.get('newPassword').hasError('alreadyUsed')
@@ -65,20 +65,20 @@
                 {{ 'security.password-requirement.password-should-not-contain-spaces' | translate }}
               </mat-error>
             </mat-form-field>
-            <div fxFlex fxHide fxShow.xs fxLayoutAlign="start center">
+            <div class="flex flex-1 items-center justify-start gt-xs:!hidden">
               <ng-container *ngTemplateOutlet="passwordRequirements"></ng-container>
             </div>
             <mat-form-field class="mat-block same-color" hideRequiredMarker appearance="fill" color="primary">
               <mat-label translate>login.new-password-again</mat-label>
               <input matInput type="password" name="new-password" formControlName="newPassword2" autocomplete="new-password" required/>
-              <tb-toggle-password [fxShow]="changePassword.get('newPassword2').dirty || changePassword.get('newPassword2').touched" matSuffix></tb-toggle-password>
+              <tb-toggle-password [class.!hidden]="!changePassword.get('newPassword2').dirty && !changePassword.get('newPassword2').touched" matSuffix></tb-toggle-password>
               <mat-error *ngIf="changePassword.get('newPassword2').hasError('differencePassword')">
                 {{ 'security.password-requirement.new-passwords-not-match' | translate }}
               </mat-error>
             </mat-form-field>
           </div>
           <mat-divider [vertical]="true"></mat-divider>
-          <div fxFlex fxHide.xs fxLayoutAlign="start start">
+          <div class="flex flex-1 items-start justify-start xs:!hidden">
             <ng-container *ngTemplateOutlet="passwordRequirements"></ng-container>
           </div>
         </div>
@@ -125,7 +125,7 @@
             </div>
           </div>
         </ng-template>
-        <div fxLayout="row" fxLayoutGap="8px" style="margin-top: 18px;" [fxShow]="changePassword.dirty || changePassword.touched">
+        <div class="flex flex-row gap-2" style="margin-top: 18px;" [class.!hidden]="!changePassword.dirty && !changePassword.touched">
           <button mat-button color="primary"
                   type="button"
                   (click)="discardChanges(changePasswordForm, $event)"
@@ -153,7 +153,7 @@
       <ng-container *ngFor="let provider of allowTwoFactorProviders; let $last = last; trackBy: trackByProvider">
         <div class="provider">
           <h4 class="provider-title">{{ providersData.get(provider).name | translate }}</h4>
-          <div fxLayout="row" fxLayoutAlign="space-between start">
+          <div class="flex flex-row items-start justify-between">
             <div class="mat-body-2 description" *ngIf="!twoFactorAuth.get(provider).value; else providerInfo">
               {{ providersData.get(provider).description | translate }}
             </div>
diff --git a/ui-ngx/tailwind.config.js b/ui-ngx/tailwind.config.js
index b5eb1d077f..247ab70326 100644
--- a/ui-ngx/tailwind.config.js
+++ b/ui-ngx/tailwind.config.js
@@ -82,14 +82,17 @@ module.exports = {
       flexBasis: {
         '7.5': '1.875rem',
         '25': '6.25rem',
-        '37.5': '9.375rem'
+        '37.5': '9.375rem',
+        '62.5': '15.625rem',
+        '72.5': '18.125rem'
       },
       flex: {
         full: '1 1 100%'
       },
       gap: {
         '0.75': '0.1875rem',
-        '1.25': '0.3125rem'
+        '1.25': '0.3125rem',
+        '6.25': '1.5625rem'
       },
       minHeight: {
         '19': '4.75rem'
@@ -97,7 +100,9 @@ module.exports = {
       minWidth: {
         '7.5': '1.875rem',
         '25': '6.25rem',
-        '37.5': '9.375rem'
+        '37.5': '9.375rem',
+        '62.5': '15.625rem',
+        '72.5': '18.125rem'
       },
       maxWidth: {
         '5%': '5%',
@@ -143,7 +148,9 @@ module.exports = {
         '11/12': '91.666667%',
         '7.5': '1.875rem',
         '25': '6.25rem',
-        '37.5': '9.375rem'
+        '37.5': '9.375rem',
+        '62.5': '15.625rem',
+        '72.5': '18.125rem'
       }
     },
   },

From 2626b56d45f2eb1e29fb8c5d4d3b4e0f42837069 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Thu, 17 Oct 2024 10:43:29 +0300
Subject: [PATCH 26/34] Flex layout replacements. Switch to tailwind.css.

---
 .../alarm-assignee-select.component.html      | 10 ++---
 .../alarm/alarm-table.component.html          |  2 +-
 .../audit-log/audit-log-table.component.html  |  2 +-
 .../dashboard-toolbar.component.html          |  3 +-
 .../filter/filter-text.component.html         |  2 +-
 .../device-profile-alarms.component.html      |  2 +-
 .../rate-limits-text.component.html           |  2 +-
 .../widget/lib/legend.component.html          | 13 ++++---
 .../action/mobile-action-editor.models.ts     | 10 ++---
 .../common/background-settings.component.html |  2 +-
 .../color-range-settings.component.html       |  2 +-
 .../common/color-settings.component.html      |  2 +-
 .../widget/widget-container.component.html    | 20 +++++-----
 .../widget/widget-container.component.ts      |  8 ++--
 .../backup-code-auth-dialog.component.html    | 12 +++---
 .../email-auth-dialog.component.html          | 16 ++++----
 .../sms-auth-dialog.component.html            | 16 ++++----
 .../totp-auth-dialog.component.html           | 16 ++++----
 .../home/pages/tenant/tenant.component.html   | 24 ++++++------
 .../activation-link-dialog.component.html     | 10 ++---
 .../pages/user/add-user-dialog.component.html |  4 +-
 .../home/pages/user/user.component.html       | 38 +++++++++----------
 .../save-widget-type-as-dialog.component.html |  4 +-
 .../select-widget-type-dialog.component.html  |  6 +--
 .../pages/widget/widget-editor.component.html | 35 +++++++++--------
 .../pages/widget/widget-type.component.html   | 16 ++++----
 .../widgets-bundle-dialog.component.html      |  4 +-
 .../widgets-bundle-widgets.component.html     |  4 +-
 .../widget/widgets-bundle.component.html      | 14 +++----
 ui-ngx/tailwind.config.js                     |  1 +
 30 files changed, 150 insertions(+), 150 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-select.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-select.component.html
index 903b473dbe..8ef4044dac 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-select.component.html
@@ -16,16 +16,16 @@
 
 -->
 <ng-container [formGroup]="assigneeFormGroup">
-  <mat-form-field [ngStyle]="inline ? {width: '100%'} : {marginBottom: '25px'}"
+  <mat-form-field [style]="inline ? {width: '100%'} : {marginBottom: '25px'}"
                   (click)="openAlarmAssigneeSelectPanel($event)"
                   subscriptSizing="dynamic" [appearance]="inline ? 'outline' : 'fill'">
     <mat-label *ngIf="!inline" translate>alarm.assignee</mat-label>
     <input matInput readonly formControlName="assignee">
-    <span *ngIf="assignee" matPrefix class="user-avatar" [ngClass]="{'inline': inline}"
-          [style.backgroundColor]="getAvatarBgColor()">
+    <span *ngIf="assignee" matPrefix class="user-avatar" [class.inline]="inline"
+          [style.background-color]="getAvatarBgColor()">
       {{ getUserInitials() }}
     </span>
-    <mat-icon *ngIf="!assignee" matPrefix class="unassigned-icon" [ngClass]="{'inline': inline}">account_circle</mat-icon>
-    <mat-icon *ngIf="!disabled" matSuffix class="drop-down-icon" [ngClass]="{'inline': inline}">arrow_drop_down</mat-icon>
+    <mat-icon *ngIf="!assignee" matPrefix class="unassigned-icon" [class.inline]="inline">account_circle</mat-icon>
+    <mat-icon *ngIf="!disabled" matSuffix class="drop-down-icon" [class.inline]="inline">arrow_drop_down</mat-icon>
   </mat-form-field>
 </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-table.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-table.component.html
index bec2c21de5..df86e9a08b 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-table.component.html
@@ -15,4 +15,4 @@
     limitations under the License.
 
 -->
-<tb-entities-table [entitiesTableConfig]="alarmTableConfig" [ngClass]="{'tb-details-mode': detailsMode}"></tb-entities-table>
+<tb-entities-table [entitiesTableConfig]="alarmTableConfig" [class.tb-details-mode]="detailsMode"></tb-entities-table>
diff --git a/ui-ngx/src/app/modules/home/components/audit-log/audit-log-table.component.html b/ui-ngx/src/app/modules/home/components/audit-log/audit-log-table.component.html
index b6b6073567..fc4f12d37a 100644
--- a/ui-ngx/src/app/modules/home/components/audit-log/audit-log-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/audit-log/audit-log-table.component.html
@@ -15,4 +15,4 @@
     limitations under the License.
 
 -->
-<tb-entities-table [entitiesTableConfig]="auditLogTableConfig" [ngClass]="{'tb-details-mode': detailsMode}"></tb-entities-table>
+<tb-entities-table [entitiesTableConfig]="auditLogTableConfig" [class.tb-details-mode]="detailsMode"></tb-entities-table>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-toolbar.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-toolbar.component.html
index 6878ce8113..3b4a66112a 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-toolbar.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-toolbar.component.html
@@ -16,7 +16,8 @@
 
 -->
 <mat-fab-toolbar [isOpen]="toolbarOpened" color="primary" direction="left"
-                 [ngClass]="{'is-fullscreen': forceFullscreen, 'mat-elevation-z1': forceFullscreen && toolbarOpened }">
+                 [class.is-fullscreen]="forceFullscreen"
+                 [class.mat-elevation-z1]="forceFullscreen && toolbarOpened">
   <mat-fab-trigger>
     <button mat-fab color="primary"
             [matTooltip]="!toolbarOpened ? ('dashboard.open-toolbar' | translate) : ''"
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-text.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-text.component.html
index 43001b3a62..6858a96435 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-text.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-text.component.html
@@ -15,5 +15,5 @@
     limitations under the License.
 
 -->
-<div class="tb-filter-text" [ngClass]="{disabled: disabled, required: requiredClass, nowrap: nowrap}"
+<div class="tb-filter-text" [class.disabled]="disabled" [class.required]="requiredClass" [class.nowrap]="nowrap"
      [innerHTML]="filterText"></div>
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.html
index da30c52e22..2f1bf140ea 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.html
@@ -19,7 +19,7 @@
   <div class="tb-device-profile-alarms">
     <div *ngFor="let alarmControl of alarmsFormArray.controls; trackBy: trackByAlarm;
                  let $index = index; last as isLast;"
-         class="flex flex-col" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+         class="flex flex-col" [class.pb-2]="!isLast">
       <tb-device-profile-alarm [formControl]="alarmControl"
                                [expanded]="$index === 0"
                                [deviceProfileId]="deviceProfileId"
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-text.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-text.component.html
index 39fc900b5e..b0884fc840 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-text.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-text.component.html
@@ -15,4 +15,4 @@
     limitations under the License.
 
 -->
-<div class="tb-rate-limits-text" [ngClass]="{disabled: disabled}" [innerHTML]="rateLimitsText"></div>
+<div class="tb-rate-limits-text" [class.disabled]="disabled" [innerHTML]="rateLimitsText"></div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/legend.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/legend.component.html
index 2e7e4b786c..a824b0c45d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/legend.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/legend.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<table class="tb-legend" [ngClass]="isRowDirection ? 'tb-legend-row' : 'tb-legend-column'">
+<table class="tb-legend" [class.tb-legend-row]="isRowDirection" [class.tb-legend-column]="!isRowDirection">
   <thead>
   <tr class="tb-legend-header" *ngIf="!isRowDirection">
     <th colspan="2"></th>
@@ -29,11 +29,12 @@
   <tbody>
     <ng-container *ngIf="!isRowDirection">
       <tr class="tb-legend-keys" *ngFor="let legendKey of legendKeys()">
-        <td><span class="tb-legend-line" [ngStyle]="{backgroundColor: legendKey.dataKey.color}"></span></td>
+        <td><span class="tb-legend-line" [style.background-color]="legendKey.dataKey.color"></span></td>
         <td class="tb-legend-label"
             (click)="toggleHideData(legendKey.dataIndex)"
             [innerHTML]="legendKey.dataKey.label | safe: 'html'"
-            [ngClass]="{ 'tb-hidden-label': legendKey.dataKey.hidden, 'tb-horizontal': isHorizontal }">
+            [class.tb-hidden-label]="legendKey.dataKey.hidden"
+            [class.tb-horizontal]="isHorizontal">
         </td>
         <td class="tb-legend-value" *ngIf="legendConfig.showMin === true"
             [innerHTML]="legendData.data[legendKey.dataIndex].min | safe: 'html'"></td>
@@ -47,14 +48,14 @@
             [innerHTML]="legendData.data[legendKey.dataIndex].latest | safe: 'html'"></td>
       </tr>
     </ng-container>
-    <tr *ngIf="isRowDirection" class="tb-legend-keys" [ngClass]="{ 'tb-row-direction': !displayHeader }">
+    <tr *ngIf="isRowDirection" class="tb-legend-keys" [class.tb-row-direction]="!displayHeader">
       <td></td>
       <td *ngFor="let legendKey of legendKeys()">
-        <span class="tb-legend-line" [ngStyle]="{backgroundColor: legendKey.dataKey.color}"></span>
+        <span class="tb-legend-line" [style.background-color]="legendKey.dataKey.color"></span>
         <span class="tb-legend-label"
               [innerHTML]="legendKey.dataKey.label | safe: 'html'"
               (click)="toggleHideData(legendKey.dataIndex)"
-              [ngClass]="{ 'tb-hidden-label': legendKey.dataKey.hidden}">
+              [class.tb-hidden-label]="legendKey.dataKey.hidden">
         </span>
       </td>
     </tr>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.models.ts
index 5abf69c523..4700620035 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.models.ts
@@ -49,24 +49,24 @@ const processImageFunctionTemplate =
   '  imageDialogTemplate =\n' +
   '    \'<div aria-label="Image">\' +\n' +
   '    \'<form #theForm="ngForm">\' +\n' +
-  '    \'<mat-toolbar fxLayout="row" color="primary">\' +\n' +
+  '    \'<mat-toolbar class="flex flex-row" color="primary">\' +\n' +
   '    \'<h2>{{title}}</h2>\' +\n' +
-  '    \'<span fxFlex></span>\' +\n' +
+  '    \'<span class="flex-1"></span>\' +\n' +
   '    \'<button mat-icon-button (click)="close()">\' +\n' +
   '    \'<mat-icon>close</mat-icon>\' +\n' +
   '    \'</button>\' +\n' +
   '    \'</mat-toolbar>\' +\n' +
   '    \'<div mat-dialog-content>\' +\n' +
   '    \'<div class="mat-content mat-padding">\' +\n' +
-  '    \'<div fxLayout="column" fxFlex>\' +\n' +
+  '    \'<div class="flex flex-1 flex-col">\' +\n' +
   '    \'<div style="padding-top: 20px;">\' +\n' +
   '    \'<img [src]="imageUrl" style="height: 300px;"/>\' +\n' +
   '    \'</div>\' +\n' +
   '    \'</div>\' +\n' +
   '    \'</div>\' +\n' +
   '    \'</div>\' +\n' +
-  '    \'<div mat-dialog-actions fxLayout="row">\' +\n' +
-  '    \'<span fxFlex></span>\' +\n' +
+  '    \'<div mat-dialog-actions class="flex flex-row">\' +\n' +
+  '    \'<span class="flex-1"></span>\' +\n' +
   '    \'<button mat-button (click)="close()" style="margin-right:20px;">Close</button>\' +\n' +
   '    \'</div>\' +\n' +
   '    \'</form>\' +\n' +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings.component.html
index ea685bd85f..dcce754a93 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings.component.html
@@ -21,7 +21,7 @@
         [disabled]="disabled"
         #matButton
         (click)="openBackgroundSettingsPopup($event, matButton)">
-  <div class="tb-color-preview box" [ngClass]="{'disabled': disabled}">
+  <div class="tb-color-preview box" [class.disabled]="disabled">
     <div class="tb-color-result" [style]="backgroundStyle$ | async">
       <div class="tb-color-overlay" [style]="overlayStyle">
       </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-settings.component.html
index 7bf97390f4..17195b2d15 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-settings.component.html
@@ -21,7 +21,7 @@
         [disabled]="disabled"
         #matButton
         (click)="openColorRangeSettingsPopup($event, matButton)">
-  <div class="tb-color-preview box" [ngClass]="{'disabled': disabled}">
+  <div class="tb-color-preview box" [class.disabled]="disabled">
     <div class="tb-color-result" [style]="colorStyle"></div>
   </div>
 </button>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.html
index fdfab0173c..487f23774c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.html
@@ -24,7 +24,7 @@
   <tb-icon matButtonIcon *ngIf="modelValue?.type === colorType.function; else colorPreview">mdi:function-variant</tb-icon>
 </button>
 <ng-template #colorPreview>
-  <div class="tb-color-preview box" [ngClass]="{'disabled': disabled}">
+  <div class="tb-color-preview box" [class.disabled]="disabled">
     <div class="tb-color-result" [style]="colorStyle"></div>
   </div>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
index 5c81563ed8..ed1f089454 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
@@ -20,16 +20,14 @@
      [fullscreenBackgroundImage]="backgroundImage"
      (fullscreenChanged)="onFullscreenChanged($event)"
      class="tb-widget"
-     [ngClass]="{
-                'tb-highlighted': isHighlighted(widget),
-                'tb-not-highlighted': isNotHighlighted(widget),
-                'mat-elevation-z4': widget.dropShadow,
-                'tb-overflow-visible': widgetComponent.widgetContext?.overflowVisible,
-                'tb-has-timewindow': widget.hasTimewindow,
-                'tb-edit': isEdit || isEditingWidget,
-                'tb-hover': hovered
-             }"
-     [ngStyle]="widget.style">
+     [class.tb-highlighted]="isHighlighted(widget)"
+     [class.tb-not-highlighted]="isNotHighlighted(widget)"
+     [class.mat-elevation-z4]="widget.dropShadow"
+     [class.tb-overflow-visible]="widgetComponent.widgetContext?.overflowVisible"
+     [class.tb-has-timewindow]="widget.hasTimewindow"
+     [class.tb-edit]="isEdit || isEditingWidget"
+     [class.tb-hover]="hovered"
+     [style]="widget.style">
   <div *ngIf="!!widgetComponent.widgetContext?.inited"
        class="tb-widget-header">
     <ng-container *ngIf="!widgetComponent.widgetContext?.embedTitlePanel">
@@ -62,7 +60,7 @@
       </button>
     </div>
   </div>
-  <div class="tb-widget-content" [ngClass]="{'tb-no-interaction': disableWidgetInteraction}">
+  <div class="tb-widget-content" [class.tb-no-interaction]="disableWidgetInteraction">
     <tb-widget #widgetComponent
                [dashboardWidget]="widget"
                [isEdit]="isEdit"
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts
index 2480597218..13a1815fe1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts
@@ -385,7 +385,7 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
         {{ 'widget.reference' | translate }}
         <button mat-icon-button class="tb-mat-16"
                 color="primary"
-                [fxShow]="container.isEditActionEnabled"
+                [class.!hidden]="!container.isEditActionEnabled"
                 (click)="container.onReplaceReferenceWithWidgetCopy($event)"
                 matTooltip="{{ 'widget.replace-reference-with-widget-copy' | translate }}"
                 matTooltipPosition="above">
@@ -394,21 +394,21 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
       </div>
       <div class="tb-widget-actions-panel">
         <button mat-icon-button class="tb-mat-20"
-                [fxShow]="container.isEditActionEnabled"
+                [class.!hidden]="!container.isEditActionEnabled"
                 (click)="container.onEdit($event)"
                 matTooltip="{{ 'widget.edit' | translate }}"
                 matTooltipPosition="above">
           <tb-icon>edit</tb-icon>
         </button>
         <button mat-icon-button class="tb-mat-20"
-                [fxShow]="container.isExportActionEnabled"
+                [class.!hidden]="!container.isExportActionEnabled"
                 (click)="container.onExport($event)"
                 matTooltip="{{ 'widget.export' | translate }}"
                 matTooltipPosition="above">
           <tb-icon>file_download</tb-icon>
         </button>
         <button mat-icon-button class="tb-mat-20"
-                [fxShow]="container.isRemoveActionEnabled"
+                [class.!hidden]="!container.isRemoveActionEnabled"
                 (click)="container.onRemove($event);"
                 matTooltip="{{ 'widget.remove' | translate }}"
                 matTooltipPosition="above">
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.html
index 8578dba02b..0a28ba7ae7 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<mat-toolbar fxLayout="row" color="primary">
+<mat-toolbar class="flex flex-row" color="primary">
   <h2 translate>security.2fa.dialog.get-backup-code-title</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           (click)="closeDialog()"
           type="button">
@@ -29,12 +29,12 @@
 <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
 <div mat-dialog-content tb-toast class="backup-code">
   <p class="mat-body-2 description" translate>security.2fa.dialog.backup-code-description</p>
-  <div class="container" fxLayout="row wrap">
-    <div *ngFor="let code of backupCode?.codes; even as $even" fxFlex="50" class="code" [ngClass]="{'even': $even}">
+  <div class="container flex flex-row flex-wrap">
+    <div *ngFor="let code of backupCode?.codes; even as $even" class="code max-w-50% flex-full" [class.even]="$even">
       {{ code }}
     </div>
   </div>
-  <div fxLayout="row" fxLayoutAlign="center start"  fxLayoutGap="16px" class="action-buttons">
+  <div class="action-buttons flex flex-row items-center justify-start gap-4">
     <button type="button" mat-stroked-button color="primary" (click)="downloadFile()">
       {{ 'security.2fa.dialog.download-txt' | translate }}
     </button>
@@ -43,7 +43,7 @@
     </button>
   </div>
   <p class="mat-body-2 description" translate>security.2fa.dialog.backup-code-warn</p>
-  <div fxLayout="row" fxLayoutAlign="end start">
+  <div class="flex flex-row items-start justify-end">
     <button type="button" mat-raised-button color="primary" (click)="closeDialog()">
       {{ 'action.done' | translate }}
     </button>
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html
index a660a7fb86..dbcc11a74a 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<mat-toolbar fxLayout="row" color="primary">
+<mat-toolbar class="flex flex-row" color="primary">
   <h2 translate>security.2fa.dialog.enable-email-title</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           (click)="closeDialog()"
           type="button">
@@ -36,8 +36,8 @@
       <ng-template matStepLabel>{{ 'security.2fa.dialog.email-step-label' | translate }}</ng-template>
       <form [formGroup]="emailConfigForm" (ngSubmit)="nextStep()">
         <p class="mat-body step-description input" translate>security.2fa.dialog.email-step-description</p>
-        <div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="8px">
-          <mat-form-field fxFlex class="mat-block input-container">
+        <div class="flex flex-row items-center justify-between gap-2">
+          <mat-form-field class="mat-block input-container flex-1">
             <input matInput formControlName="email"
                    type="email" required
                    placeholder="{{ 'security.2fa.dialog.email-step-label' | translate }}" />
@@ -63,8 +63,8 @@
         <p class="mat-body step-description input">
           {{ 'security.2fa.dialog.verification-step-description' | translate : {address: emailConfigForm.get('email').value} }}
         </p>
-        <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between center" fxLayoutAlign.xs="start end">
-          <mat-form-field fxFlex class="mat-block code-container full-width-xs">
+        <div class="flex flex-row items-center justify-between xs:flex-col xs:items-end xs:justify-start">
+          <mat-form-field class="mat-block code-container full-width-xs flex-1">
             <input matInput formControlName="verificationCode"
                    maxlength="6" type="text" required
                    inputmode="numeric" pattern="[0-9]*"
@@ -74,7 +74,7 @@
               {{ 'security.2fa.dialog.verification-code-invalid' | translate }}
             </mat-error>
           </mat-form-field>
-          <div fxLayoutGap="8px">
+          <div class="flex gap-2">
             <button mat-button
                     matStepperPrevious
                     [disabled]="(isLoading$ | async)">
@@ -95,7 +95,7 @@
       <div>
         <h3 class="result-title" translate>security.2fa.dialog.success</h3>
         <p class="mat-body result-description" translate>security.2fa.dialog.activation-step-description-email</p>
-        <div fxLayout="row" fxLayoutAlign="end center">
+        <div class="flex flex-row items-center justify-end">
           <button mat-raised-button
                   type="button"
                   color="primary"
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
index a9429f8cb8..0b32ebc947 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<mat-toolbar fxLayout="row" color="primary">
+<mat-toolbar class="flex flex-row" color="primary">
   <h2 translate>security.2fa.dialog.enable-sms-title</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           (click)="closeDialog()"
           type="button">
@@ -36,8 +36,8 @@
       <ng-template matStepLabel>{{ 'security.2fa.dialog.sms-step-label' | translate }}</ng-template>
       <form [formGroup]="smsConfigForm" (ngSubmit)="nextStep()">
         <p class="mat-body step-description input" translate>security.2fa.dialog.sms-step-description</p>
-        <div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="15px">
-          <tb-phone-input fxFlex
+        <div class="flex flex-row items-center justify-between gap-3.75">
+          <tb-phone-input class="flex-1"
                           formControlName="phone"
                           [floatLabel]="'never'"
                           placeholder="{{ 'security.2fa.dialog.sms-step-label' | translate }}">
@@ -57,8 +57,8 @@
         <p class="mat-body step-description input">
           {{ 'security.2fa.dialog.verification-step-description' | translate : {address: smsConfigForm.get('phone').value} }}
         </p>
-        <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between center" fxLayoutAlign.xs="start end">
-          <mat-form-field fxFlex class="mat-block code-container full-width-xs">
+        <div class="flex flex-row items-center justify-between xs:flex-col xs:items-end xs:justify-start">
+          <mat-form-field class="mat-block code-container full-width-xs flex-1">
             <input matInput formControlName="verificationCode"
                    maxlength="6" type="text" required
                    inputmode="numeric" pattern="[0-9]*"
@@ -68,7 +68,7 @@
               {{ 'security.2fa.dialog.verification-code-invalid' | translate }}
             </mat-error>
           </mat-form-field>
-          <div fxLayoutGap="8px">
+          <div class="flex gap-2">
             <button mat-button
                     matStepperPrevious
                     [disabled]="(isLoading$ | async)">
@@ -89,7 +89,7 @@
       <div>
         <h3 class="result-title" translate>security.2fa.dialog.success</h3>
         <p class="mat-body result-description" translate>security.2fa.dialog.activation-step-description-sms</p>
-        <div fxLayout="row" fxLayoutAlign="end center">
+        <div class="flex flex-row items-center justify-end">
           <button mat-raised-button
                   type="button"
                   color="primary"
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html
index 7818674a25..98273f4720 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<mat-toolbar fxLayout="row" color="primary">
+<mat-toolbar class="flex flex-row" color="primary">
   <h2 translate>security.2fa.dialog.enable-totp-title</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           (click)="closeDialog()"
           type="button">
@@ -37,7 +37,7 @@
       <div>
         <p class="mat-body-2" translate>security.2fa.dialog.totp-step-description-open</p>
         <p class="mat-body-2" translate>security.2fa.dialog.totp-step-description-install</p>
-        <div fxLayout="row" fxLayoutAlign="end center">
+        <div class="flex flex-row items-center justify-end">
           <button mat-raised-button
                   type="button"
                   color="primary"
@@ -49,11 +49,11 @@
     </mat-step>
     <mat-step [stepControl]="totpConfigForm">
       <ng-template matStepLabel>{{ 'security.2fa.dialog.verification-step-label' | translate }}</ng-template>
-      <form [formGroup]="totpConfigForm" fxLayoutAlign="start center" fxLayout="column" (ngSubmit)="onSaveConfig()">
+      <form [formGroup]="totpConfigForm" class="flex flex-col items-center justify-start" (ngSubmit)="onSaveConfig()">
         <p class="mat-body qr-code-description" translate>security.2fa.dialog.scan-qr-code</p>
-        <canvas fxFlex #canvas [ngStyle]="{display: totpAuthURL ? 'block' : 'none'}"></canvas>
+        <canvas class="flex-1" #canvas [style.display]="totpAuthURL ? 'block' : 'none'"></canvas>
         <p class="mat-body qr-code-description" style="margin-top: 30px;" translate>security.2fa.dialog.enter-verification-code</p>
-        <mat-form-field fxFlex class="mat-block code-container">
+        <mat-form-field class="mat-block code-container flex-1">
           <input matInput formControlName="verificationCode"
                  maxlength="6" type="text" required
                  inputmode="numeric" pattern="[0-9]*"
@@ -64,7 +64,7 @@
           </mat-error>
         </mat-form-field>
       </form>
-      <div fxLayout="row" fxLayoutAlign="end center">
+      <div class="flex flex-row items-center justify-end">
         <button mat-raised-button
                 type="button"
                 color="primary"
@@ -79,7 +79,7 @@
       <div>
         <h3 class="result-title" translate>security.2fa.dialog.success</h3>
         <p class="mat-body result-description" translate>security.2fa.dialog.activation-step-description-totp</p>
-        <div fxLayout="row" fxLayoutAlign="end center">
+        <div class="flex flex-row items-center justify-end">
           <button mat-raised-button
                   type="button"
                   color="primary"
diff --git a/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.html b/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.html
index b2d26a7129..32533e98da 100644
--- a/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.html
+++ b/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.html
@@ -15,37 +15,37 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageTenantAdmins')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'tenant.manage-tenant-admins' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'tenant.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onTenantIdCopied($event)"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>tenant.copyId</span>
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block">
@@ -65,22 +65,22 @@
         formControlName="tenantProfileId"
         (tenantProfileUpdated)="onTenantProfileUpdated()">
       </tb-tenant-profile-autocomplete>
-      <div formGroupName="additionalInfo" fxLayout="column">
+      <div formGroupName="additionalInfo" class="flex flex-col">
         <mat-form-field class="mat-block">
           <mat-label translate>tenant.description</mat-label>
           <textarea matInput formControlName="description" rows="2"></textarea>
         </mat-form-field>
-        <section class="tb-default-dashboard" fxFlex fxLayout="column" *ngIf="entity?.id">
-          <section fxFlex fxLayout="column" fxLayout.gt-sm="row">
+        <section class="tb-default-dashboard flex flex-1 flex-col" *ngIf="entity?.id">
+          <section class="flex flex-1 flex-col gt-sm:flex-row">
             <tb-dashboard-autocomplete
-              fxFlex
+              class="flex-1"
               label="{{ 'dashboard.home-dashboard' | translate }}"
               formControlName="homeDashboardId"
               [dashboardsScope]="'tenant'"
               [tenantId]="entity?.id.id"
               [selectFirstDashboard]="false"
             ></tb-dashboard-autocomplete>
-            <mat-checkbox fxFlex formControlName="homeDashboardHideToolbar">
+            <mat-checkbox class="flex-1" formControlName="homeDashboardHideToolbar">
               {{ 'dashboard.home-dashboard-hide-toolbar' | translate }}
             </mat-checkbox>
           </section>
diff --git a/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.html b/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.html
index d03b50418d..2b41eff575 100644
--- a/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.html
@@ -18,7 +18,7 @@
 <form style="min-width: 400px; position: relative;">
   <mat-toolbar color="primary">
     <h2 translate>user.activation-link</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="close()"
             type="button">
@@ -29,10 +29,10 @@
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
   <div mat-dialog-content tb-toast toastTarget="activationLinkDialogContent">
-    <div class="mat-content" fxLayout="column">
+    <div class="mat-content flex flex-col">
       <span [innerHTML]="'user.activation-link-text' | translate: {activationLink: activationLink, activationLinkTtl: activationLinkTtl}"></span>
-      <div fxLayout="row" fxLayoutAlign="start center">
-        <pre class="tb-highlight" fxFlex><code>{{ activationLink }}</code></pre>
+      <div class="flex flex-row items-center justify-start">
+        <pre class="tb-highlight flex-1"><code>{{ activationLink }}</code></pre>
         <button mat-icon-button
                 color="primary"
                 ngxClipboard
@@ -45,7 +45,7 @@
       </div>
     </div>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
diff --git a/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html b/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html
index 6a4283bc44..4012b13c82 100644
--- a/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html
@@ -18,7 +18,7 @@
 <form (ngSubmit)="add()" style="min-width: 450px;">
   <mat-toolbar color="primary">
     <h2 translate>user.add</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <div [tb-help]="'users'"></div>
     <button mat-icon-button
             (click)="cancel()"
@@ -40,7 +40,7 @@
       </mat-select>
     </mat-form-field>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
diff --git a/ui-ngx/src/app/modules/home/pages/user/user.component.html b/ui-ngx/src/app/modules/home/pages/user/user.component.html
index bbb999d3d7..933e244290 100644
--- a/ui-ngx/src/app/modules/home/pages/user/user.component.html
+++ b/ui-ngx/src/app/modules/home/pages/user/user.component.html
@@ -15,63 +15,63 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'disableAccount')"
-          [fxShow]="!isEdit && isUserCredentialPresent() && isUserCredentialsEnabled()">
+          [class.!hidden]="isEdit || !isUserCredentialPresent() || !isUserCredentialsEnabled()">
     {{'user.disable-account' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'enableAccount')"
-          [fxShow]="!isEdit && isUserCredentialPresent() && !isUserCredentialsEnabled()">
+          [class.!hidden]="isEdit || !isUserCredentialPresent() || isUserCredentialsEnabled()">
     {{'user.enable-account' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'displayActivationLink')"
-          [fxShow]="!isEdit && !isUserCredentialPresent()">
+          [class.!hidden]="isEdit || isUserCredentialPresent()">
     {{'user.display-activation-link' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'resendActivation')"
-          [fxShow]="!isEdit && !isUserCredentialPresent()">
+          [class.!hidden]="isEdit || isUserCredentialPresent()">
     {{'user.resend-activation' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'loginAsUser')"
           *ngIf="loginAsUserEnabled$ | async"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{ (entity?.authority === authority.TENANT_ADMIN ? 'user.login-as-tenant-admin' : 'user.login-as-customer-user') | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'user.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onUserIdCopied($event)"
             [cbContent]="entity?.id?.id"
             [disabled]="(isLoading$ | async)"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>user.copyId</span>
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block">
@@ -97,15 +97,15 @@
                       [enableFlagsSelect]="true"
                       formControlName="phone">
       </tb-phone-input>
-      <div formGroupName="additionalInfo" fxLayout="column">
+      <div formGroupName="additionalInfo" class="flex flex-col">
         <mat-form-field class="mat-block">
           <mat-label translate>user.description</mat-label>
           <textarea matInput formControlName="description" rows="2"></textarea>
         </mat-form-field>
-        <section class="tb-default-dashboard" fxFlex fxLayout="column" *ngIf="entity?.id">
-          <section fxFlex fxLayout="column" fxLayout.gt-sm="row">
+        <section class="tb-default-dashboard flex flex-1 flex-col" *ngIf="entity?.id">
+          <section class="flex flex-1 flex-col gt-sm:flex-row">
             <tb-dashboard-autocomplete
-              fxFlex
+              class="flex-1"
               label="{{ 'user.default-dashboard' | translate }}"
               formControlName="defaultDashboardId"
               [dashboardsScope]="entity?.authority === authority.TENANT_ADMIN ? 'tenant' : 'customer'"
@@ -113,13 +113,13 @@
               [customerId]="entity?.customerId?.id"
               [selectFirstDashboard]="false"
             ></tb-dashboard-autocomplete>
-            <mat-checkbox fxFlex formControlName="defaultDashboardFullscreen">
+            <mat-checkbox class="flex-1" formControlName="defaultDashboardFullscreen">
               {{ 'user.always-fullscreen' | translate }}
             </mat-checkbox>
           </section>
-          <section fxFlex fxLayout="column" fxLayout.gt-sm="row">
+          <section class="flex flex-1 flex-col gt-sm:flex-row">
             <tb-dashboard-autocomplete
-              fxFlex
+              class="flex-1"
               label="{{ 'dashboard.home-dashboard' | translate }}"
               formControlName="homeDashboardId"
               [dashboardsScope]="entity?.authority === authority.TENANT_ADMIN ? 'tenant' : 'customer'"
@@ -127,7 +127,7 @@
               [customerId]="entity?.customerId?.id"
               [selectFirstDashboard]="false"
             ></tb-dashboard-autocomplete>
-            <mat-checkbox fxFlex formControlName="homeDashboardHideToolbar">
+            <mat-checkbox class="flex-1" formControlName="homeDashboardHideToolbar">
               {{ 'dashboard.home-dashboard-hide-toolbar' | translate }}
             </mat-checkbox>
           </section>
diff --git a/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html b/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html
index 804730dbfe..35260628ea 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="saveWidgetTypeAsFormGroup" (ngSubmit)="saveAs()" style="min-width: 360px">
   <mat-toolbar color="primary">
     <h2 translate>{{ dialogTitle }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -43,7 +43,7 @@
       bundlesScope="{{bundlesScope}}">
     </tb-widgets-bundle-select>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/pages/widget/select-widget-type-dialog.component.html b/ui-ngx/src/app/modules/home/pages/widget/select-widget-type-dialog.component.html
index 116829cffd..039b5acdf4 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/select-widget-type-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/select-widget-type-dialog.component.html
@@ -18,7 +18,7 @@
 <form style="width: 800px;">
   <mat-toolbar color="primary">
     <h2 translate>widget.select-widget-type</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -30,7 +30,7 @@
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
   <div mat-dialog-content>
     <fieldset [disabled]="(isLoading$ | async)">
-      <div fxLayout="column" fxLayoutGap="16px" fxLayout.gt-sm="row" fxLayoutAlign="center center">
+      <div class="flex flex-col items-center justify-center gap-4 gt-sm:flex-row">
         <button *ngFor="let type of allWidgetTypes;" class="tb-card-button" mat-raised-button color="primary"
                 type="button"
                 (click)="typeSelected(widgetTypes[type])">
@@ -42,7 +42,7 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.html b/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.html
index 19f306fad8..a4c8e4a193 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.html
@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="column">
-  <div fxFlex fxLayout="column" tb-fullscreen [fullscreen]="fullscreen" [tb-hotkeys]="hotKeys" [cheatSheet]="cheatSheetComponent">
+<div class="flex flex-1 flex-col">
+  <div class="flex flex-1 flex-col" tb-fullscreen [fullscreen]="fullscreen" [tb-hotkeys]="hotKeys" [cheatSheet]="cheatSheetComponent">
     <tb-hotkeys-cheatsheet #cheatSheetComponent></tb-hotkeys-cheatsheet>
-    <mat-toolbar class="mat-elevation-z1 tb-edit-toolbar mat-hue-3" fxLayoutGap="16px" fxLayoutGap.lt-xl="8px">
+    <mat-toolbar class="mat-elevation-z1 tb-edit-toolbar mat-hue-3 gap-4 lt-xl:gap-2">
       <mat-form-field class="tb-widget-title tb-appearance-transparent">
         <input [disabled]="isReadOnly" matInput required maxlength="255"
                [(ngModel)]="widget.widgetName" (ngModelChange)="isDirty = true"
@@ -32,8 +32,8 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <span fxFlex></span>
-      <button mat-button fxHide.lt-md [disabled]="!iframeWidgetEditModeInited"
+      <span class="flex-1"></span>
+      <button mat-button class="lt-md:!hidden" [disabled]="!iframeWidgetEditModeInited"
               (click)="applyWidgetScript()"
               matTooltip="{{ 'widget.run' | translate }} (CTRL + Return)"
               matTooltipPosition="below">
@@ -41,7 +41,7 @@
         <span translate>action.run</span>
       </button>
       <button mat-raised-button
-              fxHide.lt-md [disabled]="(isLoading$ | async) || undoDisabled()"
+              class="lt-md:!hidden" [disabled]="(isLoading$ | async) || undoDisabled()"
               (click)="undoWidget()"
               matTooltip="{{ 'widget.undo' | translate }} (CTRL + Q)"
               matTooltipPosition="below">
@@ -49,7 +49,7 @@
         <span translate>action.undo</span>
       </button>
       <button *ngIf="!isReadOnly" mat-raised-button
-              fxHide.lt-md [disabled]="(isLoading$ | async) || saveDisabled()"
+              class="lt-md:!hidden" [disabled]="(isLoading$ | async) || saveDisabled()"
               (click)="saveWidget()"
               [tb-circular-progress]="saveWidgetPending"
               matTooltip="{{ 'widget.save' | translate }} (CTRL + S)"
@@ -58,7 +58,7 @@
         <span translate>action.save</span>
       </button>
       <button mat-raised-button
-              fxHide.lt-md [disabled]="(isLoading$ | async) || saveAsDisabled()"
+              class="lt-md:!hidden" [disabled]="(isLoading$ | async) || saveAsDisabled()"
               (click)="saveWidgetAs()"
               [tb-circular-progress]="saveWidgetAsPending"
               matTooltip="{{ 'widget.saveAs' | translate }} (Shift + CTRL + S)"
@@ -67,20 +67,20 @@
         <span translate>action.saveAs</span>
       </button>
       <button mat-button
-              fxHide.lt-lg
+              class="lt-lg:!hidden"
               (click)="fullscreen = !fullscreen"
               matTooltip="{{ 'widget.toggle-fullscreen' | translate }} (Shift + CTRL + F)"
               matTooltipPosition="below">
         <mat-icon>{{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
         <span translate>widget.toggle-fullscreen</span>
       </button>
-      <button mat-icon-button fxHide fxShow.md
+      <button mat-icon-button class="lt-md:!hidden gt-md:!hidden"
               (click)="fullscreen = !fullscreen"
               matTooltip="{{ 'widget.toggle-fullscreen' | translate }} (Shift + CTRL + F)"
               matTooltipPosition="below">
         <mat-icon>{{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
       </button>
-      <button mat-icon-button fxHide.gt-sm
+      <button mat-icon-button class="gt-md:!hidden"
               [matMenuTriggerFor]="widgetEditMenu">
         <mat-icon>more_vert</mat-icon>
       </button>
@@ -111,7 +111,7 @@
         </button>
       </mat-menu>
     </mat-toolbar>
-    <div fxFlex style="position: relative;">
+    <div class="flex-1" style="position: relative;">
       <div class="tb-editor tb-absolute-fill">
         <div #topPanel class="tb-split tb-split-vertical">
           <div #topLeftPanel class="tb-split tb-content">
@@ -119,10 +119,9 @@
               <mat-tab label="{{ 'widget.resources' | translate }}">
                 <div class="tb-resize-container" style="background-color: #fff;">
                   <div class="mat-padding">
-                    <div fxFlex fxLayout="row" style="max-height: 40px;"
-                         fxLayoutAlign="start center"
+                    <div class="flex flex-1 flex-row items-center justify-start" style="max-height: 40px;"
                          *ngFor="let resource of widget.resources; let i = index" >
-                      <tb-resource-autocomplete fxFlex class="mat-block resource-field"
+                      <tb-resource-autocomplete class="mat-block resource-field flex-1"
                                                 hideRequiredMarker required
                                                 subscriptSizing="dynamic"
                                                 [allowAutocomplete]="resource.isModule"
@@ -240,7 +239,7 @@
               <mat-tab label="{{ 'widget.widget-settings' | translate }}">
                 <div class="tb-resize-container" style="background-color: #fff;">
                   <div class="mat-padding">
-                    <tb-gallery-image-input fxFlex label="{{'widget.image-preview' | translate}}"
+                    <tb-gallery-image-input class="flex-1" label="{{'widget.image-preview' | translate}}"
                                     [(ngModel)]="widget.image"
                                     (ngModelChange)="isDirty = true" >
                     </tb-gallery-image-input>
@@ -257,7 +256,7 @@
                       [(ngModel)]="widget.tags"
                       (ngModelChange)="isDirty = true">
                     </tb-string-items-list>
-                    <div fxLayout="column" fxLayoutGap="16px" style="padding-bottom: 16px;">
+                    <div class="flex flex-col gap-4" style="padding-bottom: 16px;">
                       <mat-slide-toggle class="mat-block"
                                         [(ngModel)]="widget.scada"
                                         (ngModelChange)="isDirty = true">
@@ -324,7 +323,7 @@
             </div>
           </div>
           <div #framePanel class="tb-split tb-content" style="overflow-y: hidden; position: relative;">
-            <div class="mat-content tb-progress-cover" fxFlex fxLayout="column" fxLayoutAlign="center center"
+            <div class="mat-content tb-progress-cover flex flex-1 flex-col items-center justify-center"
                  *ngIf="!iframeWidgetEditModeInited">
               <mat-spinner diameter="100" mode="indeterminate" color="warn"></mat-spinner>
             </div>
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widget-type.component.html b/ui-ngx/src/app/modules/home/pages/widget/widget-type.component.html
index f5f6f5268f..11b3a58d07 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widget-type.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/widget-type.component.html
@@ -15,33 +15,33 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'edit')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{ 'widget.edit' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'openDetails')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'export')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{ 'widget.export' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{ 'widget.delete-widget' | translate }}
   </button>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block">
@@ -54,7 +54,7 @@
           {{ 'widget.title-max-length' | translate }}
         </mat-error>
       </mat-form-field>
-      <tb-gallery-image-input fxFlex
+      <tb-gallery-image-input class="flex-1"
                       label="{{'widget.image-preview' | translate}}"
                       formControlName="image">
       </tb-gallery-image-input>
@@ -67,7 +67,7 @@
         label="{{ 'widget.tags' | translate }}"
         formControlName="tags">
       </tb-string-items-list>
-      <div fxLayout="column" fxLayoutGap="16px">
+      <div class="flex flex-col gap-4">
         <mat-slide-toggle formControlName="scada">
           {{ 'widget.scada' | translate }}
         </mat-slide-toggle>
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-dialog.component.html b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-dialog.component.html
index 592be51486..355c08ce5a 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-dialog.component.html
@@ -18,7 +18,7 @@
 <form (ngSubmit)="save()" style="width: 650px;">
   <mat-toolbar color="primary">
     <h2 translate>widgets-bundle.add</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -36,7 +36,7 @@
       [standalone]="true">
     </tb-widgets-bundle>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.html b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.html
index 821eebfe92..3667f8962e 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.html
@@ -26,7 +26,7 @@
           <mat-icon>arrow_back</mat-icon>
         </button>
         <span class="mat-headline-5">{{ widgetsBundle.title }}: {{ 'widget.widgets' | translate }}</span>
-        <span fxFlex></span>
+        <span class="flex-1"></span>
         <button mat-icon-button [disabled]="isLoading$ | async"
                 *ngIf="!isReadOnly"
                 matTooltip="{{ 'widget.add-new-widget' | translate }}"
@@ -90,7 +90,7 @@
           <mat-icon>delete</mat-icon>
         </button>
         <button cdkDragHandle *ngIf="editMode"
-                [fxShow]="widgets?.length > 1"
+                [class.!hidden]="!widgets || widgets.length <= 1"
                 mat-icon-button
                 matTooltip="{{ 'action.drag' | translate }}"
                 matTooltipPosition="above"
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html
index df66eee579..ce83ff9f4d 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html
@@ -15,33 +15,33 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column" *ngIf="!standalone">
+<div class="tb-details-buttons xs:flex xs:flex-col" *ngIf="!standalone">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'widgets-bundle.open-widgets-bundle' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'openDetails')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'export')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'widgets-bundle.export' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'widgets-bundle.delete' | translate }}
   </button>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block">
@@ -54,7 +54,7 @@
           {{ 'widgets-bundle.title-max-length' | translate }}
         </mat-error>
       </mat-form-field>
-      <tb-gallery-image-input fxFlex
+      <tb-gallery-image-input class="flex-1"
                               label="{{'widgets-bundle.image-preview' | translate}}"
                               formControlName="image">
       </tb-gallery-image-input>
diff --git a/ui-ngx/tailwind.config.js b/ui-ngx/tailwind.config.js
index 247ab70326..56a3cd8ccd 100644
--- a/ui-ngx/tailwind.config.js
+++ b/ui-ngx/tailwind.config.js
@@ -92,6 +92,7 @@ module.exports = {
       gap: {
         '0.75': '0.1875rem',
         '1.25': '0.3125rem',
+        '3.75': '0.9375rem',
         '6.25': '1.5625rem'
       },
       minHeight: {

From 3a5ab479f00371db7af42eae0640d84aad2c007b Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Thu, 17 Oct 2024 11:45:35 +0300
Subject: [PATCH 27/34] Flex layout replacements. Switch to tailwind.css.

---
 .../custom_pretty_create_dialog_html.md       | 62 +++++++--------
 .../custom_pretty_edit_dialog_html.md         | 76 +++++++++---------
 .../custom_pretty_clone_device_html.md        | 11 ++-
 .../custom_pretty_create_dialog_html.md       | 62 +++++++--------
 .../custom_pretty_create_user_html.md         | 29 +++----
 .../custom_pretty_create_user_js.md           | 10 +--
 .../custom_pretty_edit_dialog_html.md         | 78 +++++++++----------
 .../custom_pretty_edit_image_html.md          | 10 +--
 .../widget/action/mobile_process_image_fn.md  | 10 +--
 .../widget/editor/examples/alarm_widget.md    |  6 +-
 .../editor/examples/latest_values_widget.md   |  4 +-
 .../widget/editor/examples/rpc_widget.md      |  2 +-
 .../widget/editor/examples/static_widget.md   |  2 +-
 13 files changed, 178 insertions(+), 184 deletions(-)

diff --git a/ui-ngx/src/assets/help/en_US/widget/action/examples/custom_pretty_create_dialog_html.md b/ui-ngx/src/assets/help/en_US/widget/action/examples/custom_pretty_create_dialog_html.md
index e9a2a90ef7..db3c17e0b5 100644
--- a/ui-ngx/src/assets/help/en_US/widget/action/examples/custom_pretty_create_dialog_html.md
+++ b/ui-ngx/src/assets/help/en_US/widget/action/examples/custom_pretty_create_dialog_html.md
@@ -4,9 +4,9 @@
 {:code-style="max-height: 400px;"}
 <form #addEntityForm="ngForm" [formGroup]="addEntityFormGroup"
       (ngSubmit)="save()" class="add-entity-form">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>Add entity</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button (click)="cancel()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
@@ -14,21 +14,21 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-  <div mat-dialog-content fxLayout="column">
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-      <mat-form-field fxFlex class="mat-block">
+  <div mat-dialog-content class="flex flex-col">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Entity Name</mat-label>
         <input matInput formControlName="entityName" required>
         <mat-error *ngIf="addEntityFormGroup.get('entityName').hasError('required')">
           Entity name is required.
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Entity Label</mat-label>
         <input matInput formControlName="entityLabel" >
       </mat-form-field>
     </div>
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
       <tb-entity-type-select
         class="mat-block"
         formControlName="entityType"
@@ -36,50 +36,50 @@
         [allowedEntityTypes]="allowedEntityTypes"
       ></tb-entity-type-select>
       <tb-entity-subtype-autocomplete
-        fxFlex *ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'"
-        class="mat-block"
+        *ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'"
+        class="mat-block flex-1"
         formControlName="type"
         [required]="true"
         [entityType]="'ASSET'"
       ></tb-entity-subtype-autocomplete>
       <tb-entity-subtype-autocomplete
-        fxFlex *ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'"
-        class="mat-block"
+        *ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'"
+        class="mat-block flex-1"
         formControlName="type"
         [required]="true"
         [entityType]="'DEVICE'"
       ></tb-entity-subtype-autocomplete>
     </div>
-    <div formGroupName="attributes" fxLayout="column">
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+    <div formGroupName="attributes" class="flex flex-col">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Latitude</mat-label>
           <input type="number" step="any" matInput formControlName="latitude">
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Longitude</mat-label>
           <input type="number" step="any" matInput formControlName="longitude">
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Address</mat-label>
           <input matInput formControlName="address">
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Owner</mat-label>
           <input matInput formControlName="owner">
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Integer Value</mat-label>
           <input type="number" step="1" matInput formControlName="number">
           <mat-error *ngIf="addEntityFormGroup.get('attributes.number').hasError('pattern')">
             Invalid integer value.
           </mat-error>
         </mat-form-field>
-        <div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex>
+        <div class="boolean-value-input flex flex-1 flex-col items-center justify-start">
           <label class="checkbox-label">Boolean Value</label>
           <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">
             {{ (addEntityFormGroup.get('attributes.booleanValue').value ? "value.true" : "value.false") | translate }}
@@ -89,11 +89,11 @@
     </div>
     <div class="relations-list">
       <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>
-      <div class="body" [fxShow]="relations().length">
-        <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">
-          <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">
-            <div fxFlex fxLayout="column">
-              <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
+      <div class="body" [class.!hidden]="!relations().length">
+        <div class="row flex flex-row items-center justify-start" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">
+          <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">
+            <div class="flex flex-1 flex-col">
+              <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
                 <mat-form-field class="mat-block" style="min-width: 100px;">
                   <mat-label>Direction</mat-label>
                   <mat-select formControlName="direction" name="direction">
@@ -106,20 +106,20 @@
                   </mat-error>
                 </mat-form-field>
                 <tb-relation-type-autocomplete
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   formControlName="relationType"
                   [required]="true">
                 </tb-relation-type-autocomplete>
               </div>
-              <div fxLayout="row" fxLayout.xs="column">
+              <div class="flex flex-row xs:flex-col">
                 <tb-entity-select
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   [required]="true"
                   formControlName="relatedEntity">
                 </tb-entity-select>
               </div>
             </div>
-            <div fxLayout="column" fxLayoutAlign="center center">
+            <div class="flex flex-col items-center justify-center">
               <button mat-icon-button color="primary"
                       aria-label="Remove"
                       type="button"
@@ -143,7 +143,7 @@
       </div>
     </div>
   </div>
-  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex flex-row items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/examples/custom_pretty_edit_dialog_html.md b/ui-ngx/src/assets/help/en_US/widget/action/examples/custom_pretty_edit_dialog_html.md
index e2f4f531bc..76b656385c 100644
--- a/ui-ngx/src/assets/help/en_US/widget/action/examples/custom_pretty_edit_dialog_html.md
+++ b/ui-ngx/src/assets/help/en_US/widget/action/examples/custom_pretty_edit_dialog_html.md
@@ -4,9 +4,9 @@
 {:code-style="max-height: 400px;"}
 <form #editEntityForm="ngForm" [formGroup]="editEntityFormGroup"
       (ngSubmit)="save()"  class="edit-entity-form">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>Edit {{entityType.toLowerCase()}} {{entityName}}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button (click)="cancel()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
@@ -14,57 +14,57 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-  <div mat-dialog-content fxLayout="column">
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-      <mat-form-field fxFlex class="mat-block">
+  <div mat-dialog-content class="flex flex-col">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Entity Name</mat-label>
         <input matInput formControlName="entityName" required readonly="">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Entity Label</mat-label>
         <input matInput formControlName="entityLabel">
       </mat-form-field>
     </div>
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-      <mat-form-field fxFlex class="mat-block">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Entity Type</mat-label>
         <input matInput formControlName="entityType" readonly>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Type</mat-label>
         <input matInput formControlName="type" readonly>
       </mat-form-field>
     </div>
-    <div formGroupName="attributes" fxLayout="column">
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+    <div formGroupName="attributes" class="flex flex-col">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Latitude</mat-label>
           <input type="number" step="any" matInput formControlName="latitude">
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Longitude</mat-label>
           <input type="number" step="any" matInput formControlName="longitude">
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Address</mat-label>
           <input matInput formControlName="address">
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Owner</mat-label>
           <input matInput formControlName="owner">
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Integer Value</mat-label>
           <input type="number" step="1" matInput formControlName="number">
           <mat-error *ngIf="editEntityFormGroup.get('attributes.number').hasError('pattern')">
             Invalid integer value.
           </mat-error>
         </mat-form-field>
-        <div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex>
+        <div class="boolean-value-input flex flex-1 flex-col items-start justify-center">
           <label class="checkbox-label">Boolean Value</label>
           <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">
             {{ (editEntityFormGroup.get('attributes.booleanValue').value ? "value.true" : "value.false") | translate }}
@@ -74,12 +74,12 @@
     </div>
     <div class="relations-list old-relations">
       <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>
-      <div class="body" [fxShow]="oldRelations().length">
-        <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="oldRelations"
+      <div class="body" [class.!hidden]="!oldRelations().length">
+        <div class="row flex flex-row items-center justify-start" formArrayName="oldRelations"
              *ngFor="let relation of oldRelations().controls; let i = index;">
-          <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">
-            <div fxFlex fxLayout="column">
-              <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
+          <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">
+            <div class="flex flex-1 flex-col">
+              <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
                 <mat-form-field class="mat-block" style="min-width: 100px;">
                   <mat-label>Direction</mat-label>
                   <mat-select formControlName="direction" name="direction">
@@ -92,20 +92,20 @@
                   </mat-error>
                 </mat-form-field>
                 <tb-relation-type-autocomplete
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   formControlName="relationType"
                   required="true">
                 </tb-relation-type-autocomplete>
               </div>
-              <div fxLayout="row" fxLayout.xs="column">
+              <div class="flex flex-row xs:flex-col">
                 <tb-entity-select
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   required="true"
                   formControlName="relatedEntity">
                 </tb-entity-select>
               </div>
             </div>
-            <div fxLayout="column" fxLayoutAlign="center center">
+            <div class="flex flex-col items-center justify-center">
               <button mat-icon-button color="primary"
                       aria-label="Remove"
                       type="button"
@@ -121,11 +121,11 @@
     </div>
     <div class="relations-list">
       <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">New Relations</div>
-      <div class="body" [fxShow]="relations().length">
-        <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">
-          <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">
-            <div fxFlex fxLayout="column">
-              <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
+      <div class="body" [class.!hidden]="!relations().length">
+        <div class="row flex flex-row items-center justify-start" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">
+          <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">
+            <div class="flex flex-1 flex-col">
+              <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
                 <mat-form-field class="mat-block" style="min-width: 100px;">
                   <mat-label>Direction</mat-label>
                   <mat-select formControlName="direction" name="direction">
@@ -138,20 +138,20 @@
                   </mat-error>
                 </mat-form-field>
                 <tb-relation-type-autocomplete
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   formControlName="relationType"
                   [required]="true">
                 </tb-relation-type-autocomplete>
               </div>
-              <div fxLayout="row" fxLayout.xs="column">
+              <div class="flex flex-row xs:flex-col">
                 <tb-entity-select
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   [required]="true"
                   formControlName="relatedEntity">
                 </tb-entity-select>
               </div>
             </div>
-            <div fxLayout="column" fxLayoutAlign="center center">
+            <div class="flex flex-col items-center justify-center">
               <button mat-icon-button color="primary"
                       aria-label="Remove"
                       type="button"
@@ -175,7 +175,7 @@
       </div>
     </div>
   </div>
-  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex flex-row items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_clone_device_html.md b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_clone_device_html.md
index 7f93d6266b..d012914b00 100644
--- a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_clone_device_html.md
+++ b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_clone_device_html.md
@@ -3,9 +3,9 @@
 ```html
 {:code-style="max-height: 400px;"}
 <form [formGroup]="cloneDeviceFormGroup" (ngSubmit)="save()" style="min-width:320px;">
-    <mat-toolbar fxLayout="row" color="primary">
+    <mat-toolbar class="flex flex-row" color="primary">
         <h2>Clone device: {{ deviceName }}</h2>
-        <span fxFlex></span>
+        <span class="flex-1"></span>
         <button mat-icon-button (click)="cancel()"
                 type="button">
             <mat-icon class="material-icons">close
@@ -16,8 +16,8 @@
                       *ngIf="isLoading$ | async">
     </mat-progress-bar>
     <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-    <div mat-dialog-content fxLayout="column">
-        <mat-form-field fxFlex class="mat-block">
+    <div mat-dialog-content class="flex flex-col">
+        <mat-form-field class="mat-block flex-1">
             <mat-label>Clone device name</mat-label>
             <input matInput formControlName="cloneName" required>
             <mat-error *ngIf="cloneDeviceFormGroup.get('cloneName').hasError('required')">
@@ -25,8 +25,7 @@
             </mat-error>
         </mat-form-field>
     </div>
-    <div mat-dialog-actions fxLayout="row"
-         fxLayoutAlign="end center">
+    <div mat-dialog-actions class="flex flex-row items-center justify-end">
         <button mat-button color="primary" type="button"
                 [disabled]="(isLoading$ | async)"
                 (click)="cancel()" cdkFocusInitial>
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_dialog_html.md b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_dialog_html.md
index e9a2a90ef7..db3c17e0b5 100644
--- a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_dialog_html.md
+++ b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_dialog_html.md
@@ -4,9 +4,9 @@
 {:code-style="max-height: 400px;"}
 <form #addEntityForm="ngForm" [formGroup]="addEntityFormGroup"
       (ngSubmit)="save()" class="add-entity-form">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>Add entity</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button (click)="cancel()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
@@ -14,21 +14,21 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-  <div mat-dialog-content fxLayout="column">
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-      <mat-form-field fxFlex class="mat-block">
+  <div mat-dialog-content class="flex flex-col">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Entity Name</mat-label>
         <input matInput formControlName="entityName" required>
         <mat-error *ngIf="addEntityFormGroup.get('entityName').hasError('required')">
           Entity name is required.
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Entity Label</mat-label>
         <input matInput formControlName="entityLabel" >
       </mat-form-field>
     </div>
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
       <tb-entity-type-select
         class="mat-block"
         formControlName="entityType"
@@ -36,50 +36,50 @@
         [allowedEntityTypes]="allowedEntityTypes"
       ></tb-entity-type-select>
       <tb-entity-subtype-autocomplete
-        fxFlex *ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'"
-        class="mat-block"
+        *ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'"
+        class="mat-block flex-1"
         formControlName="type"
         [required]="true"
         [entityType]="'ASSET'"
       ></tb-entity-subtype-autocomplete>
       <tb-entity-subtype-autocomplete
-        fxFlex *ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'"
-        class="mat-block"
+        *ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'"
+        class="mat-block flex-1"
         formControlName="type"
         [required]="true"
         [entityType]="'DEVICE'"
       ></tb-entity-subtype-autocomplete>
     </div>
-    <div formGroupName="attributes" fxLayout="column">
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+    <div formGroupName="attributes" class="flex flex-col">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Latitude</mat-label>
           <input type="number" step="any" matInput formControlName="latitude">
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Longitude</mat-label>
           <input type="number" step="any" matInput formControlName="longitude">
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Address</mat-label>
           <input matInput formControlName="address">
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Owner</mat-label>
           <input matInput formControlName="owner">
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Integer Value</mat-label>
           <input type="number" step="1" matInput formControlName="number">
           <mat-error *ngIf="addEntityFormGroup.get('attributes.number').hasError('pattern')">
             Invalid integer value.
           </mat-error>
         </mat-form-field>
-        <div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex>
+        <div class="boolean-value-input flex flex-1 flex-col items-center justify-start">
           <label class="checkbox-label">Boolean Value</label>
           <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">
             {{ (addEntityFormGroup.get('attributes.booleanValue').value ? "value.true" : "value.false") | translate }}
@@ -89,11 +89,11 @@
     </div>
     <div class="relations-list">
       <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>
-      <div class="body" [fxShow]="relations().length">
-        <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">
-          <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">
-            <div fxFlex fxLayout="column">
-              <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
+      <div class="body" [class.!hidden]="!relations().length">
+        <div class="row flex flex-row items-center justify-start" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">
+          <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">
+            <div class="flex flex-1 flex-col">
+              <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
                 <mat-form-field class="mat-block" style="min-width: 100px;">
                   <mat-label>Direction</mat-label>
                   <mat-select formControlName="direction" name="direction">
@@ -106,20 +106,20 @@
                   </mat-error>
                 </mat-form-field>
                 <tb-relation-type-autocomplete
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   formControlName="relationType"
                   [required]="true">
                 </tb-relation-type-autocomplete>
               </div>
-              <div fxLayout="row" fxLayout.xs="column">
+              <div class="flex flex-row xs:flex-col">
                 <tb-entity-select
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   [required]="true"
                   formControlName="relatedEntity">
                 </tb-entity-select>
               </div>
             </div>
-            <div fxLayout="column" fxLayoutAlign="center center">
+            <div class="flex flex-col items-center justify-center">
               <button mat-icon-button color="primary"
                       aria-label="Remove"
                       type="button"
@@ -143,7 +143,7 @@
       </div>
     </div>
   </div>
-  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex flex-row items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_user_html.md b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_user_html.md
index c523258fbc..44343e8d2f 100644
--- a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_user_html.md
+++ b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_user_html.md
@@ -3,9 +3,9 @@
 ```html
 {:code-style="max-height: 400px;"}
 <form [formGroup]="addEntityFormGroup" (ngSubmit)="save()" style="min-width:480px;">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>Add new User</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button (click)="cancel()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
@@ -15,10 +15,9 @@
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)">
   </div>
-  <div mat-dialog-content fxLayout="column">
-    <div fxLayout="row" fxLayoutGap="8px"
-         fxLayout.xs="column" fxLayoutGap.xs="0">
-      <mat-form-field fxFlex class="mat-block">
+  <div mat-dialog-content class="flex flex-col">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Email</mat-label>
         <input matInput formControlName="email" required
                ng-pattern='/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\_\-0-9]+\.)+[a-zA-Z]{2,}))$/'>
@@ -30,25 +29,22 @@
         </mat-error>
       </mat-form-field>
     </div>
-    <div fxLayout="row" fxLayoutGap="8px"
-         fxLayout.xs="column" fxLayoutGap.xs="0">
-      <mat-form-field fxFlex class="mat-block">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>First Name</mat-label>
         <input matInput
                formControlName="firstName">
       </mat-form-field>
     </div>
-    <div fxLayout="row" fxLayoutGap="8px"
-         fxLayout.xs="column" fxLayoutGap.xs="0">
-      <mat-form-field fxFlex class="mat-block">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Last Name</mat-label>
         <input matInput
                formControlName="lastName">
       </mat-form-field>
     </div>
-    <div fxLayout="row" fxLayoutGap="8px"
-         fxLayout.xs="column" fxLayoutGap.xs="0">
-      <mat-form-field fxFlex class="mat-block">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>User activation method</mat-label>
         <mat-select matInput formControlName="userActivationMethod">
           <mat-option *ngFor="let activationMethod of activationMethods" [value]="activationMethod.value">
@@ -60,8 +56,7 @@
       </mat-form-field>
     </div>
   </div>
-  <div mat-dialog-actions fxLayout="row"
-       fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex flex-row items-center justify-end">
     <button mat-button color="primary" type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_user_js.md b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_user_js.md
index 130426c6cf..c23de01abf 100644
--- a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_user_js.md
+++ b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_user_js.md
@@ -93,7 +93,7 @@ function ActivationLinkDialogController(instance) {
 let activationLinkDialogTemplate = `<form style="min-width: 400px; position: relative;">
   <mat-toolbar color="primary">
     <h2 translate>user.activation-link</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="close()"
             type="button">
@@ -104,10 +104,10 @@ let activationLinkDialogTemplate = `<form style="min-width: 400px; position: rel
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
   <div mat-dialog-content tb-toast toastTarget="activationLinkDialogContent">
-    <div class="mat-content" fxLayout="column">
+    <div class="mat-content" class="flex flex-col">
       <span [innerHTML]="'user.activation-link-text' | translate: {activationLink: activationLink}"></span>
-      <div fxLayout="row" fxLayoutAlign="start center">
-        <pre class="tb-highlight" fxFlex><code>{{ activationLink }}</code></pre>
+      <div class="flex flex-row items-center justify-start">
+        <pre class="tb-highlight flex-1"><code>{{ activationLink }}</code></pre>
         <button mat-icon-button
                 color="primary"
                 ngxClipboard
@@ -120,7 +120,7 @@ let activationLinkDialogTemplate = `<form style="min-width: 400px; position: rel
       </div>
     </div>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_edit_dialog_html.md b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_edit_dialog_html.md
index 05f494666f..76b656385c 100644
--- a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_edit_dialog_html.md
+++ b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_edit_dialog_html.md
@@ -4,9 +4,9 @@
 {:code-style="max-height: 400px;"}
 <form #editEntityForm="ngForm" [formGroup]="editEntityFormGroup"
       (ngSubmit)="save()"  class="edit-entity-form">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>Edit {{entityType.toLowerCase()}} {{entityName}}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button (click)="cancel()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
@@ -14,57 +14,57 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-  <div mat-dialog-content fxLayout="column">
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-      <mat-form-field fxFlex class="mat-block">
+  <div mat-dialog-content class="flex flex-col">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Entity Name</mat-label>
         <input matInput formControlName="entityName" required readonly="">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Entity Label</mat-label>
         <input matInput formControlName="entityLabel">
       </mat-form-field>
     </div>
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-      <mat-form-field fxFlex class="mat-block">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Entity Type</mat-label>
         <input matInput formControlName="entityType" readonly>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Type</mat-label>
         <input matInput formControlName="type" readonly>
       </mat-form-field>
     </div>
-    <div formGroupName="attributes" fxLayout="column">
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+    <div formGroupName="attributes" class="flex flex-col">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Latitude</mat-label>
           <input type="number" step="any" matInput formControlName="latitude">
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Longitude</mat-label>
           <input type="number" step="any" matInput formControlName="longitude">
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Address</mat-label>
           <input matInput formControlName="address">
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Owner</mat-label>
           <input matInput formControlName="owner">
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Integer Value</mat-label>
           <input type="number" step="1" matInput formControlName="number">
           <mat-error *ngIf="editEntityFormGroup.get('attributes.number').hasError('pattern')">
             Invalid integer value.
           </mat-error>
         </mat-form-field>
-        <div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex>
+        <div class="boolean-value-input flex flex-1 flex-col items-start justify-center">
           <label class="checkbox-label">Boolean Value</label>
           <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">
             {{ (editEntityFormGroup.get('attributes.booleanValue').value ? "value.true" : "value.false") | translate }}
@@ -74,12 +74,12 @@
     </div>
     <div class="relations-list old-relations">
       <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>
-      <div class="body" [fxShow]="oldRelations().length">
-        <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="oldRelations"
+      <div class="body" [class.!hidden]="!oldRelations().length">
+        <div class="row flex flex-row items-center justify-start" formArrayName="oldRelations"
              *ngFor="let relation of oldRelations().controls; let i = index;">
-          <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">
-            <div fxFlex fxLayout="column">
-              <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
+          <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">
+            <div class="flex flex-1 flex-col">
+              <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
                 <mat-form-field class="mat-block" style="min-width: 100px;">
                   <mat-label>Direction</mat-label>
                   <mat-select formControlName="direction" name="direction">
@@ -92,20 +92,20 @@
                   </mat-error>
                 </mat-form-field>
                 <tb-relation-type-autocomplete
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   formControlName="relationType"
                   required="true">
                 </tb-relation-type-autocomplete>
               </div>
-              <div fxLayout="row" fxLayout.xs="column">
+              <div class="flex flex-row xs:flex-col">
                 <tb-entity-select
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   required="true"
                   formControlName="relatedEntity">
                 </tb-entity-select>
               </div>
             </div>
-            <div fxLayout="column" fxLayoutAlign="center center">
+            <div class="flex flex-col items-center justify-center">
               <button mat-icon-button color="primary"
                       aria-label="Remove"
                       type="button"
@@ -121,16 +121,16 @@
     </div>
     <div class="relations-list">
       <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">New Relations</div>
-      <div class="body" [fxShow]="relations().length">
-        <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">
-          <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">
-            <div fxFlex fxLayout="column">
-              <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
+      <div class="body" [class.!hidden]="!relations().length">
+        <div class="row flex flex-row items-center justify-start" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">
+          <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">
+            <div class="flex flex-1 flex-col">
+              <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
                 <mat-form-field class="mat-block" style="min-width: 100px;">
                   <mat-label>Direction</mat-label>
                   <mat-select formControlName="direction" name="direction">
                     <mat-option *ngFor="let direction of entitySearchDirection | keyvalue" [value]="direction.value">
-                        {{ ("relation.search-direction." + direction.value) | translate}}
+                      {{ ("relation.search-direction." + direction.value) | translate}}
                     </mat-option>
                   </mat-select>
                   <mat-error *ngIf="relation.get('direction').hasError('required')">
@@ -138,20 +138,20 @@
                   </mat-error>
                 </mat-form-field>
                 <tb-relation-type-autocomplete
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   formControlName="relationType"
                   [required]="true">
                 </tb-relation-type-autocomplete>
               </div>
-              <div fxLayout="row" fxLayout.xs="column">
+              <div class="flex flex-row xs:flex-col">
                 <tb-entity-select
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   [required]="true"
                   formControlName="relatedEntity">
                 </tb-entity-select>
               </div>
             </div>
-            <div fxLayout="column" fxLayoutAlign="center center">
+            <div class="flex flex-col items-center justify-center">
               <button mat-icon-button color="primary"
                       aria-label="Remove"
                       type="button"
@@ -175,7 +175,7 @@
       </div>
     </div>
   </div>
-  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex flex-row items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_edit_image_html.md b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_edit_image_html.md
index 3f2eff11c6..4b621239e8 100644
--- a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_edit_image_html.md
+++ b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_edit_image_html.md
@@ -3,9 +3,9 @@
 ```html
 {:code-style="max-height: 400px;"}
 <form [formGroup]="editEntity" (ngSubmit)="save()" class="edit-entity-form">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>Edit {{entityName}} image</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button (click)="cancel()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
@@ -13,15 +13,15 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="(isLoading$ | async) || loading">
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async) && !loading"></div>
-  <div mat-dialog-content fxLayout="column">
-    <div formGroupName="attributes" fxLayout="column">
+  <div mat-dialog-content class="flex flex-col">
+    <div formGroupName="attributes" class="flex flex-col">
       <tb-image-input
         label="Entity image"
         formControlName="image"
       ></tb-image-input>
     </div>
   </div>
-  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex flex-row items-center justify-end">
     <button mat-button mat-raised-button color="primary"
             type="submit"
             [disabled]="(isLoading$ | async) || editEntity.invalid || !editEntity.dirty">
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/mobile_process_image_fn.md b/ui-ngx/src/assets/help/en_US/widget/action/mobile_process_image_fn.md
index 5759571fe7..25df3a7e84 100644
--- a/ui-ngx/src/assets/help/en_US/widget/action/mobile_process_image_fn.md
+++ b/ui-ngx/src/assets/help/en_US/widget/action/mobile_process_image_fn.md
@@ -56,24 +56,24 @@ function showImageDialog(title, imageUrl) {
 var imageDialogTemplate =
     '<div aria-label="Image">' +
     '<form #theForm="ngForm">' +
-    '<mat-toolbar fxLayout="row" color="primary">' +
+    '<mat-toolbar class="flex flex-row" color="primary">' +
     '<h2>{{title}}</h2>' +
-    '<span fxFlex></span>' +
+    '<span class="flex-1"></span>' +
     '<button mat-icon-button (click)="close()">' +
     '<mat-icon>close</mat-icon>' +
     '</button>' +
     '</mat-toolbar>' +
     '<div mat-dialog-content>' +
     '<div class="mat-content mat-padding">' +
-    '<div fxLayout="column" fxFlex>' +
+    '<div class="flex flex-1 flex-col">' +
     '<div style="padding-top: 20px;">' +
     '<img [src]="imageUrl" style="height: 300px;"/>' +
     '</div>' +
     '</div>' +
     '</div>' +
     '</div>' +
-    '<div mat-dialog-actions fxLayout="row">' +
-    '<span fxFlex></span>' +
+    '<div mat-dialog-actions class="flex flex-row">' +
+    '<span class="flex-1"></span>' +
     '<button mat-button (click)="close()" style="margin-right:20px;">Close</button>' +
     '</div>' +
     '</form>' +
diff --git a/ui-ngx/src/assets/help/en_US/widget/editor/examples/alarm_widget.md b/ui-ngx/src/assets/help/en_US/widget/editor/examples/alarm_widget.md
index f3ba4c0590..c0126214c7 100644
--- a/ui-ngx/src/assets/help/en_US/widget/editor/examples/alarm_widget.md
+++ b/ui-ngx/src/assets/help/en_US/widget/editor/examples/alarm_widget.md
@@ -19,9 +19,9 @@ The **Widget Editor** will be opened, pre-populated with the content of the defa
  - Put the following HTML code inside the HTML tab of "Resources" section:
 
 ```html
-  <div fxFlex fxLayout="column" style="height: 100%;">
+  <div class="flex h-full flex-1 flex-col">
       <div>My first Alarm widget.</div>
-      <table class="my-alarm-table" style="width: 100%;">
+      <table class="my-alarm-table w-full">
           <thead>
               <tr>
                   <th *ngFor="let dataKey of alarmSource?.dataKeys">{{dataKey.label}}</th> 
@@ -30,7 +30,7 @@ The **Widget Editor** will be opened, pre-populated with the content of the defa
           <tbody>
               <tr *ngFor="let alarm of alarms">
                   <td *ngFor="let dataKey of alarmSource?.dataKeys" 
-                      [ngStyle]="getAlarmCellStyle(alarm, dataKey)">
+                      [style]="getAlarmCellStyle(alarm, dataKey)">
                       {{getAlarmValue(alarm, dataKey)}}
                   </td>
               </tr>      
diff --git a/ui-ngx/src/assets/help/en_US/widget/editor/examples/latest_values_widget.md b/ui-ngx/src/assets/help/en_US/widget/editor/examples/latest_values_widget.md
index afe4f6a0e1..19f79d0962 100644
--- a/ui-ngx/src/assets/help/en_US/widget/editor/examples/latest_values_widget.md
+++ b/ui-ngx/src/assets/help/en_US/widget/editor/examples/latest_values_widget.md
@@ -11,9 +11,9 @@ The **Widget Editor** will open, pre-populated with the content of the default *
  - Put the following HTML code inside the HTML tab of "Resources" section:
 
 ```html
-  <div fxFlex fxLayout="column" style="height: 100%;" fxLayoutAlign="center stretch">
+  <div class="flex h-full flex-1 flex-col items-stretch justify-center">
     <div>My first latest values widget.</div>
-    <div fxFlex fxLayout="row" *ngFor="let dataKeyData of data" fxLayoutAlign="space-around center">
+    <div class="flex flex-1 flex-row items-center justify-around" *ngFor="let dataKeyData of data">
         <div>{{dataKeyData.dataKey.label}}:</div>
         <div>{{(dataKeyData.data[0] && dataKeyData.data[0][0]) | date : 'yyyy-MM-dd HH:mm:ss' }}</div>
         <div>{{dataKeyData.data[0] && dataKeyData.data[0][1]}}</div>
diff --git a/ui-ngx/src/assets/help/en_US/widget/editor/examples/rpc_widget.md b/ui-ngx/src/assets/help/en_US/widget/editor/examples/rpc_widget.md
index 2fa83c2062..44abed8a46 100644
--- a/ui-ngx/src/assets/help/en_US/widget/editor/examples/rpc_widget.md
+++ b/ui-ngx/src/assets/help/en_US/widget/editor/examples/rpc_widget.md
@@ -12,7 +12,7 @@ The **Widget Editor** will open, pre-populated with default **Control** template
 
 ```html
     <form #rpcForm="ngForm" (submit)="sendCommand()">
-      <div class="mat-content mat-padding" fxLayout="column">
+      <div class="mat-content mat-padding flex flex-col">
         <mat-form-field class="mat-block">
           <mat-label>RPC method</mat-label>
           <input matInput required name="rpcMethod" #rpcMethodField="ngModel" [(ngModel)]="rpcMethod"/>
diff --git a/ui-ngx/src/assets/help/en_US/widget/editor/examples/static_widget.md b/ui-ngx/src/assets/help/en_US/widget/editor/examples/static_widget.md
index 7e73b63307..d7c7901052 100644
--- a/ui-ngx/src/assets/help/en_US/widget/editor/examples/static_widget.md
+++ b/ui-ngx/src/assets/help/en_US/widget/editor/examples/static_widget.md
@@ -10,7 +10,7 @@ The **Widget Editor** will be opened pre-populated with the content of default *
  - Put the following HTML code inside the HTML tab of "Resources" section:
 
 ```html
-  <div fxFlex fxLayout="column" style="height: 100%;" fxLayoutAlign="space-around stretch">
+  <div class="flex h-full flex-1 flex-col items-stretch justify-around">
     <h3 style="text-align: center;">My first static widget.</h3>
     <button mat-raised-button color="primary" (click)="showAlert()">Click me</button>
   </div>

From 26f0028294521a3e2b7617d829a8509d9cb89b20 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Thu, 17 Oct 2024 16:26:29 +0300
Subject: [PATCH 28/34] Flex layout replacements. Switch to tailwind.css.

---
 ui-ngx/src/app/core/core.module.ts            |  2 -
 .../dynamic-component-factory.service.ts      |  9 +-
 .../app/core/services/resources.service.ts    | 77 ++++++++++++++---
 .../app/modules/common/modules-map.models.ts  |  4 +-
 ui-ngx/src/app/modules/common/modules-map.ts  | 68 ++++++++-------
 .../app/shared/layout/layout.directives.ts    | 85 -------------------
 .../app/shared/legacy/flex-layout.models.ts   | 41 +++++++++
 ui-ngx/src/app/shared/shared.module.ts        | 31 -------
 8 files changed, 153 insertions(+), 164 deletions(-)
 delete mode 100644 ui-ngx/src/app/shared/layout/layout.directives.ts
 create mode 100644 ui-ngx/src/app/shared/legacy/flex-layout.models.ts

diff --git a/ui-ngx/src/app/core/core.module.ts b/ui-ngx/src/app/core/core.module.ts
index a8e2ccbe02..43f3f14df4 100644
--- a/ui-ngx/src/app/core/core.module.ts
+++ b/ui-ngx/src/app/core/core.module.ts
@@ -35,7 +35,6 @@ import { TbMissingTranslationHandler } from './translate/missing-translate-handl
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DEFAULT_OPTIONS, MatDialogConfig, MatDialogModule } from '@angular/material/dialog';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { TranslateDefaultCompiler } from '@core/translate/translate-default-compiler';
 import { WINDOW_PROVIDERS } from '@core/services/window.service';
 import { HotkeyModule } from 'angular2-hotkeys';
@@ -44,7 +43,6 @@ import { TranslateDefaultLoader } from '@core/translate/translate-default-loader
 import { EntityConflictInterceptor } from '@core/interceptors/entity-conflict.interceptor';
 
 @NgModule({ exports: [], imports: [CommonModule,
-        FlexLayoutModule.withConfig({ addFlexToParent: false }),
         MatDialogModule,
         MatButtonModule,
         MatSnackBarModule,
diff --git a/ui-ngx/src/app/core/services/dynamic-component-factory.service.ts b/ui-ngx/src/app/core/services/dynamic-component-factory.service.ts
index 40ac9c354b..cbf56dc44d 100644
--- a/ui-ngx/src/app/core/services/dynamic-component-factory.service.ts
+++ b/ui-ngx/src/app/core/services/dynamic-component-factory.service.ts
@@ -15,10 +15,11 @@
 ///
 
 import { Component, Injectable, Type, ɵComponentDef, ɵNG_COMP_DEF } from '@angular/core';
-import { from, Observable, of } from 'rxjs';
+import { forkJoin, from, Observable, of } from 'rxjs';
 import { CommonModule } from '@angular/common';
 import { mergeMap } from 'rxjs/operators';
 import { guid } from '@core/utils';
+import { getFlexLayoutModule } from '@shared/legacy/flex-layout.models';
 
 @Injectable({
     providedIn: 'root'
@@ -34,9 +35,9 @@ export class DynamicComponentFactoryService {
                      imports?: Type<any>[],
                      preserveWhitespaces?: boolean,
                      styles?: string[]): Observable<Type<T>> {
-    return from(import('@angular/compiler')).pipe(
-      mergeMap(() => {
-        let componentImports: Type<any>[] = [CommonModule];
+    return forkJoin({flexLayoutModule: getFlexLayoutModule(), compiler: from(import('@angular/compiler'))}).pipe(
+      mergeMap((data) => {
+        let componentImports: Type<any>[] = [CommonModule, data.flexLayoutModule];
         if (imports) {
           componentImports = [...componentImports, ...imports];
         }
diff --git a/ui-ngx/src/app/core/services/resources.service.ts b/ui-ngx/src/app/core/services/resources.service.ts
index 8088cf0736..21bd11293e 100644
--- a/ui-ngx/src/app/core/services/resources.service.ts
+++ b/ui-ngx/src/app/core/services/resources.service.ts
@@ -27,7 +27,7 @@ import {
   ɵNgModuleDef
 } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
-import { Observable, ReplaySubject, throwError } from 'rxjs';
+import { forkJoin, from, Observable, ReplaySubject, throwError } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { IModulesMap } from '@modules/common/modules-map.models';
 import { TbResourceId } from '@shared/models/id/tb-resource-id';
@@ -38,6 +38,7 @@ import { selectIsAuthenticated } from '@core/auth/auth.selectors';
 import { AppState } from '@core/core.state';
 import { map, tap } from 'rxjs/operators';
 import { RequestConfig } from '@core/http/http-utils';
+import { getFlexLayoutModule } from '@app/shared/legacy/flex-layout.models';
 
 export interface ModuleInfo {
   module: ɵNgModuleDef<any>;
@@ -187,26 +188,46 @@ export class ResourcesService {
     if (this.loadedModulesWithComponents[url]) {
       return this.loadedModulesWithComponents[url].asObservable();
     }
-    modulesMap.init();
     const meta = this.getMetaInfo(resourceId);
     const subject = new ReplaySubject<ModulesWithComponents>();
     this.loadedModulesWithComponents[url] = subject;
-    import('@angular/compiler').then(
+
+    forkJoin(
+      [
+        modulesMap.init(),
+        from(import('@angular/compiler'))
+      ]
+    ).subscribe(
       () => {
         // @ts-ignore
         System.import(url, undefined, meta).then(
           (module: any) => {
             try {
               const modulesWithComponents = this.extractModulesWithComponents(module);
-              if (modulesWithComponents.modules.length || modulesWithComponents.standaloneComponents.length) {
-                for (const module of modulesWithComponents.modules) {
-                  createNgModule(module.module.type, this.injector);
+              this.patchModulesWithFlexLayout(modulesWithComponents).subscribe(
+                {
+                  next: modules => {
+                    if (modules.modules.length || modules.standaloneComponents.length) {
+                      try {
+                        for (const module of modules.modules) {
+                          createNgModule(module.module.type, this.injector);
+                        }
+                        this.loadedModulesWithComponents[url].next(modulesWithComponents);
+                        this.loadedModulesWithComponents[url].complete();
+                      } catch (e) {
+                        console.log(`Unable to parse module from url: ${url}`, e);
+                        this.loadedModulesWithComponents[url].error(new Error(`Unable to parse module from url: ${url}`));
+                      }
+                    } else {
+                      this.loadedModulesWithComponents[url].error(new Error(`Module '${url}' doesn't have exported modules or components!`));
+                    }
+                  },
+                  error: err => {
+                    console.log(`Unable to patch module with flexLayout, module url: ${url}`, err);
+                    this.loadedModulesWithComponents[url].error(new Error(`Unable to patch module with flexLayout, module url: ${url}`));
+                  }
                 }
-                this.loadedModulesWithComponents[url].next(modulesWithComponents);
-                this.loadedModulesWithComponents[url].complete();
-              } else {
-                this.loadedModulesWithComponents[url].error(new Error(`Module '${url}' doesn't have exported modules or components!`));
-              }
+              );
             } catch (e) {
               console.log(`Unable to parse module from url: ${url}`, e);
               this.loadedModulesWithComponents[url].error(new Error(`Unable to parse module from url: ${url}`));
@@ -284,6 +305,40 @@ export class ResourcesService {
     return modulesWithComponents;
   }
 
+  private patchModulesWithFlexLayout(modulesWithComponents: ModulesWithComponents): Observable<ModulesWithComponents> {
+    return getFlexLayoutModule().pipe(
+      map((flexLayoutModule) => {
+        modulesWithComponents.modules.forEach(m => {
+          if (Array.isArray(m.module.imports)) {
+            if (!m.module.imports.includes(flexLayoutModule)) {
+              m.module.imports.push(flexLayoutModule);
+            }
+          } else {
+            const imports = m.module.imports();
+            if (!imports.includes(flexLayoutModule)) {
+              imports.push(flexLayoutModule);
+              m.module.imports = imports;
+            }
+          }
+        });
+        modulesWithComponents.standaloneComponents.forEach(c => {
+          if (Array.isArray(c.dependencies)) {
+            if (!c.dependencies.includes(flexLayoutModule)) {
+              c.dependencies.push(flexLayoutModule);
+            }
+          } else {
+            const dependencies = c.dependencies();
+            if (!dependencies.includes(flexLayoutModule)) {
+              dependencies.push(flexLayoutModule);
+              c.dependencies = dependencies;
+            }
+          }
+        });
+        return modulesWithComponents;
+      })
+    );
+  }
+
   private loadResourceByType(type: 'css' | 'js', url: string): Observable<any> {
     const subject = new ReplaySubject<void>();
     this.loadedResources[url] = subject;
diff --git a/ui-ngx/src/app/modules/common/modules-map.models.ts b/ui-ngx/src/app/modules/common/modules-map.models.ts
index e1c88e557a..8913996851 100644
--- a/ui-ngx/src/app/modules/common/modules-map.models.ts
+++ b/ui-ngx/src/app/modules/common/modules-map.models.ts
@@ -14,6 +14,8 @@
 /// limitations under the License.
 ///
 
+import { Observable } from 'rxjs';
+
 export interface IModulesMap {
-  init(): void;
+  init(): Observable<any>;
 }
diff --git a/ui-ngx/src/app/modules/common/modules-map.ts b/ui-ngx/src/app/modules/common/modules-map.ts
index 76bc84bbec..4ca23753c6 100644
--- a/ui-ngx/src/app/modules/common/modules-map.ts
+++ b/ui-ngx/src/app/modules/common/modules-map.ts
@@ -20,10 +20,6 @@ import * as AngularAnimations from '@angular/animations';
 import * as AngularCore from '@angular/core';
 import * as AngularCommon from '@angular/common';
 import * as AngularForms from '@angular/forms';
-import * as AngularFlexLayout from '@angular/flex-layout';
-import * as AngularFlexLayoutFlex from '@angular/flex-layout/flex';
-import * as AngularFlexLayoutGrid from '@angular/flex-layout/grid';
-import * as AngularFlexLayoutExtended from '@angular/flex-layout/extended';
 import * as AngularPlatformBrowser from '@angular/platform-browser';
 import * as AngularPlatformBrowserAnimations from '@angular/platform-browser/animations';
 import * as AngularRouter from '@angular/router';
@@ -338,6 +334,8 @@ import { IModulesMap } from '@modules/common/modules-map.models';
 import { TimezoneComponent } from '@shared/components/time/timezone.component';
 import { TimezonePanelComponent } from '@shared/components/time/timezone-panel.component';
 import { DatapointsLimitComponent } from '@shared/components/time/datapoints-limit.component';
+import { Observable, map, of } from 'rxjs';
+import { getFlexLayout } from '@shared/legacy/flex-layout.models';
 
 class ModulesMap implements IModulesMap {
 
@@ -349,10 +347,10 @@ class ModulesMap implements IModulesMap {
     '@angular/common': AngularCommon,
     '@angular/common/http': HttpClientModule,
     '@angular/forms': AngularForms,
-    '@angular/flex-layout': AngularFlexLayout,
-    '@angular/flex-layout/flex': AngularFlexLayoutFlex,
-    '@angular/flex-layout/grid': AngularFlexLayoutGrid,
-    '@angular/flex-layout/extended': AngularFlexLayoutExtended,
+    '@angular/flex-layout': {},
+    '@angular/flex-layout/flex': {},
+    '@angular/flex-layout/grid': {},
+    '@angular/flex-layout/extended': {},
     '@angular/platform-browser': AngularPlatformBrowser,
     '@angular/platform-browser/animations': AngularPlatformBrowserAnimations,
     '@angular/router': AngularRouter,
@@ -669,30 +667,40 @@ class ModulesMap implements IModulesMap {
     '@home/components/queue/queue-form.component': QueueFormComponent
   };
 
-  init() {
+  init(): Observable<any> {
     if (!this.initialized) {
-      System.constructor.prototype.resolve = (id: string) => {
-        try {
-          if (this.modulesMap[id]) {
-            return 'app:' + id;
-          } else {
-            return id;
+      return getFlexLayout().pipe(
+        map((flexLayout) => {
+          this.modulesMap['@angular/flex-layout'] = flexLayout;
+          this.modulesMap['@angular/flex-layout/flex'] = flexLayout;
+          this.modulesMap['@angular/flex-layout/grid'] = flexLayout;
+          this.modulesMap['@angular/flex-layout/extended'] = flexLayout;
+          System.constructor.prototype.resolve = (id: string) => {
+            try {
+              if (this.modulesMap[id]) {
+                return 'app:' + id;
+              } else {
+                return id;
+              }
+            } catch (err) {
+              return id;
+            }
+          };
+          for (const moduleId of Object.keys(this.modulesMap)) {
+            System.set('app:' + moduleId, this.modulesMap[moduleId]);
           }
-        } catch (err) {
-          return id;
-        }
-      };
-      for (const moduleId of Object.keys(this.modulesMap)) {
-        System.set('app:' + moduleId, this.modulesMap[moduleId]);
-      }
-      System.constructor.prototype.shouldFetch = (url: string) => url.endsWith('/download');
-      System.constructor.prototype.fetch = (url: string, options: RequestInit & {meta?: any}) => {
-        if (options?.meta?.additionalHeaders) {
-          options.headers = { ...options.headers, ...options.meta.additionalHeaders };
-        }
-        return fetch(url, options);
-      };
-      this.initialized = true;
+          System.constructor.prototype.shouldFetch = (url: string) => url.endsWith('/download');
+          System.constructor.prototype.fetch = (url: string, options: RequestInit & {meta?: any}) => {
+            if (options?.meta?.additionalHeaders) {
+              options.headers = { ...options.headers, ...options.meta.additionalHeaders };
+            }
+            return fetch(url, options);
+          };
+          this.initialized = true;
+        })
+      );
+    } else {
+      return of(null);
     }
   }
 }
diff --git a/ui-ngx/src/app/shared/layout/layout.directives.ts b/ui-ngx/src/app/shared/layout/layout.directives.ts
deleted file mode 100644
index 22b8430662..0000000000
--- a/ui-ngx/src/app/shared/layout/layout.directives.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { Directive } from '@angular/core';
-import { BREAKPOINT, LayoutAlignDirective, LayoutDirective, LayoutGapDirective, ShowHideDirective } from '@angular/flex-layout';
-
-const TB_BREAKPOINTS = [
-  {
-    alias: 'md-lg',
-    mediaQuery: 'screen and (min-width: 960px) and (max-width: 1819px)',
-    priority: 750
-  },
-  {
-    alias: 'gt-md-lg',
-    mediaQuery: 'screen and (min-width: 1820px)',
-    priority: -600
-  }
-];
-
-export const TbBreakPointsProvider = {
-  provide: BREAKPOINT,
-  useValue: TB_BREAKPOINTS,
-  multi: true
-};
-
-// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector
-@Directive({selector: '[fxLayout.md-lg]', inputs: ['fxLayout.md-lg']})
-export class MdLgLayoutDirective extends LayoutDirective {
-  protected inputs = ['fxLayout.md-lg'];
-}
-
-// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector
-@Directive({selector: '[fxLayoutAlign.md-lg]', inputs: ['fxLayoutAlign.md-lg']})
-export class MdLgLayoutAlignDirective extends LayoutAlignDirective {
-  protected inputs = ['fxLayoutAlign.md-lg'];
-}
-
-// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector
-@Directive({selector: '[fxLayoutGap.md-lg]', inputs: ['fxLayoutGap.md-lg']})
-export class MdLgLayoutGapDirective extends LayoutGapDirective {
-  protected inputs = ['fxLayoutGap.md-lg'];
-}
-
-// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector
-@Directive({selector: '[fxHide.md-lg]', inputs: ['fxHide.md-lg']})
-export class MdLgShowHideDirective extends ShowHideDirective {
-  protected inputs = ['fxHide.md-lg'];
-}
-
-// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector
-@Directive({selector: '[fxLayout.gt-md-lg]', inputs: ['fxLayout.gt-md-lg']})
-export class GtMdLgLayoutDirective extends LayoutDirective {
-  protected inputs = ['fxLayout.gt-md-lg'];
-}
-
-// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector
-@Directive({selector: '[fxLayoutAlign.gt-md-lg]', inputs: ['fxLayoutAlign.gt-md-lg']})
-export class GtMdLgLayoutAlignDirective extends LayoutAlignDirective {
-  protected inputs = ['fxLayoutAlign.gt-md-lg'];
-}
-
-// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector
-@Directive({selector: '[fxLayoutGap.gt-md-lg]', inputs: ['fxLayoutGap.gt-md-lg']})
-export class GtMdLgLayoutGapDirective extends LayoutGapDirective {
-  protected inputs = ['fxLayoutGap.gt-md-lg'];
-}
-
-// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector
-@Directive({selector: '[fxHide.gt-md-lg]', inputs: ['fxHide.gt-md-lg']})
-export class GtMdLgShowHideDirective extends ShowHideDirective {
-  protected inputs = ['fxHide.gt-md-lg'];
-}
diff --git a/ui-ngx/src/app/shared/legacy/flex-layout.models.ts b/ui-ngx/src/app/shared/legacy/flex-layout.models.ts
new file mode 100644
index 0000000000..5e00ae1f06
--- /dev/null
+++ b/ui-ngx/src/app/shared/legacy/flex-layout.models.ts
@@ -0,0 +1,41 @@
+///
+/// Copyright © 2016-2024 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Observable } from 'rxjs/internal/Observable';
+import { from, of } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
+import { Type } from '@angular/core';
+
+let flexLayoutModule: any;
+
+export function getFlexLayout(): Observable<any> {
+  if (flexLayoutModule) {
+    return of(flexLayoutModule);
+  } else {
+    return from(import('@angular/flex-layout')).pipe(
+      tap((module) => {
+        module.DEFAULT_CONFIG.addFlexToParent = false;
+        flexLayoutModule = module;
+      })
+    );
+  }
+}
+
+export function getFlexLayoutModule(): Observable<Type<any>> {
+  return getFlexLayout().pipe(
+    map(module => module.FlexLayoutModule)
+  );
+}
diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts
index c715377e92..8bb22b83df 100644
--- a/ui-ngx/src/app/shared/shared.module.ts
+++ b/ui-ngx/src/app/shared/shared.module.ts
@@ -58,7 +58,6 @@ import { MatListModule } from '@angular/material/list';
 import { DatetimeAdapter, MatDatetimepickerModule, MatNativeDatetimeModule } from '@mat-datetimepicker/core';
 import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
 import { GridsterModule } from 'angular-gridster2';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { ShareButtonDirective } from 'ngx-sharebuttons';
@@ -179,17 +178,6 @@ import { NotificationComponent } from '@shared/components/notification/notificat
 import { TemplateAutocompleteComponent } from '@shared/components/notification/template-autocomplete.component';
 import { SlackConversationAutocompleteComponent } from '@shared/components/slack-conversation-autocomplete.component';
 import { DateAgoPipe } from '@shared/pipe/date-ago.pipe';
-import {
-  GtMdLgLayoutAlignDirective,
-  GtMdLgLayoutDirective,
-  GtMdLgLayoutGapDirective,
-  GtMdLgShowHideDirective,
-  MdLgLayoutAlignDirective,
-  MdLgLayoutDirective,
-  MdLgLayoutGapDirective,
-  MdLgShowHideDirective,
-  TbBreakPointsProvider
-} from '@shared/layout/layout.directives';
 import { ColorPickerComponent } from '@shared/components/color-picker/color-picker.component';
 import { ResourceAutocompleteComponent } from '@shared/components/resource/resource-autocomplete.component';
 import { ShortNumberPipe } from '@shared/pipe/short-number.pipe';
@@ -286,7 +274,6 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
         disableTooltipInteractivity: true
       }
     },
-    TbBreakPointsProvider,
     CountryData
   ],
   declarations: [
@@ -404,14 +391,6 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     NotificationComponent,
     TemplateAutocompleteComponent,
     SlackConversationAutocompleteComponent,
-    MdLgLayoutDirective,
-    MdLgLayoutAlignDirective,
-    MdLgLayoutGapDirective,
-    MdLgShowHideDirective,
-    GtMdLgLayoutDirective,
-    GtMdLgLayoutAlignDirective,
-    GtMdLgLayoutGapDirective,
-    GtMdLgShowHideDirective,
     ColorPickerComponent,
     ColorPickerPanelComponent,
     ResourceAutocompleteComponent,
@@ -484,7 +463,6 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     DragDropModule,
     GridsterModule,
     ClipboardModule,
-    FlexLayoutModule.withConfig({addFlexToParent: false}),
     FormsModule,
     ReactiveFormsModule,
     OverlayModule,
@@ -606,7 +584,6 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     DragDropModule,
     GridsterModule,
     ClipboardModule,
-    FlexLayoutModule,
     FormsModule,
     ReactiveFormsModule,
     OverlayModule,
@@ -671,14 +648,6 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     NotificationComponent,
     TemplateAutocompleteComponent,
     SlackConversationAutocompleteComponent,
-    MdLgLayoutDirective,
-    MdLgLayoutAlignDirective,
-    MdLgLayoutGapDirective,
-    MdLgShowHideDirective,
-    GtMdLgLayoutDirective,
-    GtMdLgLayoutAlignDirective,
-    GtMdLgLayoutGapDirective,
-    GtMdLgShowHideDirective,
     ColorPickerComponent,
     ColorPickerPanelComponent,
     ResourceAutocompleteComponent,

From 1dd24501f13db0009cd60c2c55e7330de4a7fcc1 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Thu, 17 Oct 2024 17:17:24 +0300
Subject: [PATCH 29/34] Flex layout replacements. Switch to tailwind.css.

---
 .../components/entity/entities-table.component.html    | 10 +++-------
 .../src/assets/dashboard/customer_user_home_page.json  |  4 ++--
 ui-ngx/src/assets/dashboard/sys_admin_home_page.json   |  4 ++--
 .../src/assets/dashboard/tenant_admin_home_page.json   |  6 +++---
 ui-ngx/tailwind.config.js                              |  5 ++++-
 5 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
index feac5e4532..6bebae3273 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
@@ -224,13 +224,11 @@
             <ng-container matColumnDef="actions" stickyEnd>
               <mat-header-cell *matHeaderCellDef>
                 <ng-container *ngIf="cellActionDescriptors.length">
-                  <div class="gt-md:!hidden" style="width: 48px; min-width: 48px; max-width: 48px;">
+                  <div class="gt-md:!hidden" style="min-width: 48px;">
                     {{ entitiesTableConfig.actionsColumnTitle ? (entitiesTableConfig.actionsColumnTitle | translate) : '' }}
                   </div>
                   <div class="lt-lg:!hidden"
-                       [style.width]="(cellActionDescriptors.length * 48) + 'px'"
-                       [style.min-width]="(cellActionDescriptors.length * 48) + 'px'"
-                       [style.max-width]="(cellActionDescriptors.length * 48) + 'px'">
+                       [style.min-width]="(cellActionDescriptors.length * 48) + 'px'">
                     {{ entitiesTableConfig.actionsColumnTitle ? (entitiesTableConfig.actionsColumnTitle | translate) : '' }}
                   </div>
                 </ng-container>
@@ -238,9 +236,7 @@
               <mat-cell *matCellDef="let entity">
                 <ng-container *ngIf="cellActionDescriptors.length">
                   <div [class.lt-lg:!hidden]="cellActionDescriptors.length !== 1" class="flex flex-row items-stretch justify-end"
-                       [style.width]="(cellActionDescriptors.length * 48) + 'px'"
-                       [style.min-width]="(cellActionDescriptors.length * 48) + 'px'"
-                       [style.max-width]="(cellActionDescriptors.length * 48) + 'px'">
+                       [style.min-width]="(cellActionDescriptors.length * 48) + 'px'">
                     <button mat-icon-button [disabled]="(isLoading$ | async) || !actionDescriptor.isEnabled(entity)"
                             *ngFor="let actionDescriptor of cellActionDescriptors"
                             matTooltip="{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}"
diff --git a/ui-ngx/src/assets/dashboard/customer_user_home_page.json b/ui-ngx/src/assets/dashboard/customer_user_home_page.json
index aef3367ff3..6e381a9ab2 100644
--- a/ui-ngx/src/assets/dashboard/customer_user_home_page.json
+++ b/ui-ngx/src/assets/dashboard/customer_user_home_page.json
@@ -193,7 +193,7 @@
           "padding": "16px",
           "settings": {
             "useMarkdownTextFunction": false,
-            "markdownTextPattern": "<div class=\"tb-card-content\">\n    <div class=\"tb-content-container\">\n        <div class=\"tb-card-header\">\n            <div class=\"tb-card-title\">\n                <a class=\"tb-home-widget-title tb-home-widget-link\" routerLink=\"/entities/devices\">{{ 'device.devices' | translate }}</a>\n            </div>\n            <div fxLayout=\"row\" fxLayoutGap=\"12px\">\n                <a mat-stroked-button color=\"primary\" href=\"https://thingsboard.io/docs\" target=\"_blank\">{{ 'widgets.devices.view-docs' | translate }}</a>\n            </div>\n        </div>\n        <div class=\"tb-item-cards\">\n            <a class=\"tb-item-card tb-inactive\" routerLink=\"/entities/devices\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.devices.inactive</div>\n                </div>\n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${inactiveDevices:0}</div>\n                </div>\n            </a>\n            <a class=\"tb-item-card tb-active\" routerLink=\"/entities/devices\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.devices.active</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${activeDevices:0}</div>\n                </div>\n            </a>\n            <a fxHide.md class=\"tb-item-card tb-total\" routerLink=\"/entities/devices\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.devices.total</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${totalDevices:0}</div>\n                </div>\n            </a>\n        </div>\n    </div>\n</div>",
+            "markdownTextPattern": "<div class=\"tb-card-content\">\n    <div class=\"tb-content-container\">\n        <div class=\"tb-card-header\">\n            <div class=\"tb-card-title\">\n                <a class=\"tb-home-widget-title tb-home-widget-link\" routerLink=\"/entities/devices\">{{ 'device.devices' | translate }}</a>\n            </div>\n            <div class=\"flex flex-row gap-3\">\n                <a mat-stroked-button color=\"primary\" href=\"https://thingsboard.io/docs\" target=\"_blank\">{{ 'widgets.devices.view-docs' | translate }}</a>\n            </div>\n        </div>\n        <div class=\"tb-item-cards\">\n            <a class=\"tb-item-card tb-inactive\" routerLink=\"/entities/devices\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.devices.inactive</div>\n                </div>\n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${inactiveDevices:0}</div>\n                </div>\n            </a>\n            <a class=\"tb-item-card tb-active\" routerLink=\"/entities/devices\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.devices.active</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${activeDevices:0}</div>\n                </div>\n            </a>\n            <a class=\"tb-item-card tb-total md:!hidden\" routerLink=\"/entities/devices\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.devices.total</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${totalDevices:0}</div>\n                </div>\n            </a>\n        </div>\n    </div>\n</div>",
             "applyDefaultMarkdownStyle": false,
             "markdownCss": ".tb-card-content {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: row;\n}\n\n.tb-content-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    gap: 12px;\n}\n\n.tb-card-header {\n    height: 36px;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n}\n\n.tb-item-cards {\n    flex: 1;\n    display: flex;\n    flex-direction: row;\n    gap: 12px;\n}\n\na.tb-item-card {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    padding: 8px 12px;\n    border: 1px solid;\n    border-radius: 10px;\n    margin-bottom: 12px;\n}\n\na.tb-item-card.tb-inactive {\n    background: rgba(209, 39, 48, 0.04);\n    border-color: rgba(209, 39, 48, 0.06);\n}\n\na.tb-item-card.tb-active {\n    background: rgba(48, 86, 128, 0.04);\n    border-color: rgba(48, 86, 128, 0.12);\n}\n\na.tb-item-card.tb-total {\n    background: rgba(0, 0, 0, 0.01);\n    border-color: rgba(0, 0, 0, 0.05);\n}\n\n.tb-item-title-container {\n    display: grid;\n}\n\n.tb-item-title {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 20px;\n    letter-spacing: 0.2px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;    \n    color: rgba(0, 0, 0, 0.76);\n}\n\n.tb-item-title.tb-home-widget-link:after {\n    position: absolute;\n    right: 0;\n}\n\na.tb-item-card:hover .tb-item-title.tb-home-widget-link:after { \n    color: rgba(0, 0, 0, 0.38);\n}\n\na.tb-item-card:hover {\n    box-shadow: 0px 4px 10px rgba(23, 33, 90, 0.08);\n}\n\n.tb-count-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: center;\n}\n\n.tb-count {\n    font-style: normal;\n    font-weight: 500;\n    font-size: 24px;\n    line-height: 36px;\n    white-space: nowrap;\n    color: rgba(0, 0, 0, 0.87);\n}\n\n@media screen and (max-width: 959px) {\n    .tb-item-cards {\n        flex-direction: column;\n    }\n    a.tb-item-card {\n        margin-bottom: 0;\n    }\n}\n\n@media screen and (max-width: 1279px) {\n    a.tb-item-card {\n        flex-direction: row;\n        align-items: center;\n    }\n    .tb-item-title.tb-home-widget-link:after {\n        position: relative;\n    }\n    .tb-count-container {\n        align-items: flex-end;\n    }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n    .tb-item-title {\n        font-size: 11px;\n        line-height: 16px;\n    }\n    .tb-count {\n        font-size: 16px;\n        line-height: 24px;\n    }\n    a.tb-item-card {\n        padding: 4px 8px;\n        margin-bottom: 6px;\n    }\n    a.tb-item-card:hover {\n        box-shadow: 0px 2px 5px rgba(23, 33, 90, 0.08);\n    }\n}\n"
           },
@@ -342,7 +342,7 @@
           "padding": "16px",
           "settings": {
             "useMarkdownTextFunction": false,
-            "markdownTextPattern": "<div class=\"tb-card-content\">\n    <div class=\"tb-content-container\">\n        <div class=\"tb-card-header\">\n            <div class=\"tb-card-title\">\n                <a class=\"tb-home-widget-title tb-home-widget-link\" routerLink=\"/alarms\">{{ 'alarm.alarms' | translate }}</a>\n            </div>\n        </div>\n        <div class=\"tb-item-cards\">\n            <a class=\"tb-item-card tb-critical\" routerLink=\"/alarms\" [queryParams]=\"{severityList: ['CRITICAL']}\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.alarms.critical</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${criticalAlarms:0}</div>\n                </div>\n            </a>\n            <a class=\"tb-item-card tb-assigned\" routerLink=\"/alarms\" [queryParams]=\"{assignedToMe: true}\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.alarms.assigned-to-me</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${assignedToMeAlarms:0}</div>\n                </div>\n            </a>\n            <a fxHide.md class=\"tb-item-card tb-total\" routerLink=\"/alarms\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.alarms.total</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${totalAlarms:0}</div>\n                </div>\n            </a>\n        </div>\n    </div>\n</div>",
+            "markdownTextPattern": "<div class=\"tb-card-content\">\n    <div class=\"tb-content-container\">\n        <div class=\"tb-card-header\">\n            <div class=\"tb-card-title\">\n                <a class=\"tb-home-widget-title tb-home-widget-link\" routerLink=\"/alarms\">{{ 'alarm.alarms' | translate }}</a>\n            </div>\n        </div>\n        <div class=\"tb-item-cards\">\n            <a class=\"tb-item-card tb-critical\" routerLink=\"/alarms\" [queryParams]=\"{severityList: ['CRITICAL']}\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.alarms.critical</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${criticalAlarms:0}</div>\n                </div>\n            </a>\n            <a class=\"tb-item-card tb-assigned\" routerLink=\"/alarms\" [queryParams]=\"{assignedToMe: true}\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.alarms.assigned-to-me</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${assignedToMeAlarms:0}</div>\n                </div>\n            </a>\n            <a class=\"tb-item-card tb-total md:!hidden\" routerLink=\"/alarms\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.alarms.total</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${totalAlarms:0}</div>\n                </div>\n            </a>\n        </div>\n    </div>\n</div>",
             "applyDefaultMarkdownStyle": false,
             "markdownCss": ".tb-card-content {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: row;\n}\n\n.tb-content-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    gap: 12px;\n}\n\n.tb-card-header {\n    height: 36px;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n}\n\n.tb-item-cards {\n    flex: 1;\n    display: flex;\n    flex-direction: row;\n    gap: 12px;\n}\n\na.tb-item-card {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    padding: 8px 12px;\n    border: 1px solid;\n    border-radius: 10px;\n    margin-bottom: 12px;\n}\n\na.tb-item-card.tb-critical {\n    background: rgba(209, 39, 48, 0.04);\n    border-color: rgba(209, 39, 48, 0.06);\n}\n\na.tb-item-card.tb-assigned {\n    background: rgba(48, 86, 128, 0.04);\n    border-color: rgba(48, 86, 128, 0.12);\n}\n\na.tb-item-card.tb-total {\n    background: rgba(0, 0, 0, 0.01);\n    border-color: rgba(0, 0, 0, 0.05);\n}\n\n.tb-item-title-container {\n    display: grid;\n}\n\n.tb-item-title {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 20px;\n    letter-spacing: 0.2px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;    \n    color: rgba(0, 0, 0, 0.76);\n}\n\n.tb-item-title.tb-home-widget-link:after {\n    position: absolute;\n    right: 0;\n}\n\na.tb-item-card:hover .tb-item-title.tb-home-widget-link:after { \n    color: rgba(0, 0, 0, 0.38);\n}\n\na.tb-item-card:hover {\n    box-shadow: 0px 4px 10px rgba(23, 33, 90, 0.08);\n}\n\n.tb-count-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: center;\n}\n\n.tb-count {\n    font-style: normal;\n    font-weight: 500;\n    font-size: 24px;\n    line-height: 36px;\n    white-space: nowrap;\n    color: rgba(0, 0, 0, 0.87);\n}\n\na.tb-item-card.tb-critical .tb-count:after {\n    content: \"warning\";\n    display: inline-block;\n    position: relative;\n    font-family: 'Material Icons Round';\n    color: #D12730;\n    vertical-align: bottom;\n    margin-left: 6px;\n}\n\n@media screen and (max-width: 959px) {\n    .tb-item-cards {\n        flex-direction: column;\n    }\n    a.tb-item-card {\n        margin-bottom: 0;\n    }\n}\n\n@media screen and (max-width: 1279px) {\n    a.tb-item-card {\n        flex-direction: row;\n        align-items: center;\n    }\n    .tb-item-title.tb-home-widget-link:after {\n        position: relative;\n    }\n    .tb-count-container {\n        align-items: flex-end;\n    }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n    .tb-item-title {\n        font-size: 11px;\n        line-height: 16px;\n    }\n    .tb-count {\n        font-size: 16px;\n        line-height: 24px;\n    }\n    a.tb-item-card {\n        padding: 4px 8px;\n        margin-bottom: 6px;\n    }\n    a.tb-item-card:hover {\n        box-shadow: 0px 2px 5px rgba(23, 33, 90, 0.08);\n    }\n    a.tb-item-card.tb-critical .tb-count:after {\n        margin-left: 2px;\n    }\n}\n"
           },
diff --git a/ui-ngx/src/assets/dashboard/sys_admin_home_page.json b/ui-ngx/src/assets/dashboard/sys_admin_home_page.json
index 310dac83ae..739402e72f 100644
--- a/ui-ngx/src/assets/dashboard/sys_admin_home_page.json
+++ b/ui-ngx/src/assets/dashboard/sys_admin_home_page.json
@@ -42,7 +42,7 @@
           "padding": "16px",
           "settings": {
             "useMarkdownTextFunction": false,
-            "markdownTextPattern": "<div class=\"tb-card-content\">\n    <div class=\"tb-card-title\">\n        <div class=\"tb-home-widget-title\">{{ 'widgets.transport-messages.title' | translate }}\n            <mat-icon\n                matTooltip=\"{{ 'widgets.transport-messages.info' | translate }}\"\n                matTooltipPosition=\"above\"\n                class=\"tb-home-widget-info-icon\">info</mat-icon>\n        </div>\n    </div>\n    <tb-dashboard-state fxFlex stateId=\"transport_messages\" [ctx]=\"ctx\"></tb-dashboard-state>\n</div>",
+            "markdownTextPattern": "<div class=\"tb-card-content\">\n    <div class=\"tb-card-title\">\n        <div class=\"tb-home-widget-title\">{{ 'widgets.transport-messages.title' | translate }}\n            <mat-icon\n                matTooltip=\"{{ 'widgets.transport-messages.info' | translate }}\"\n                matTooltipPosition=\"above\"\n                class=\"tb-home-widget-info-icon\">info</mat-icon>\n        </div>\n    </div>\n    <tb-dashboard-state class=\"flex-1\" stateId=\"transport_messages\" [ctx]=\"ctx\"></tb-dashboard-state>\n</div>",
             "applyDefaultMarkdownStyle": false,
             "markdownCss": ".tb-card-content {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n}\n"
           },
@@ -194,7 +194,7 @@
           "padding": "16px",
           "settings": {
             "useMarkdownTextFunction": false,
-            "markdownTextPattern": "<div style=\"height: 100%;\" fxLayout=\"column\">\n    <div class=\"tb-card-header\">\n        <div class=\"tb-card-title\">\n            <div class=\"tb-home-widget-title\" translate>widgets.functions.title</div>\n        </div>\n        <a mat-stroked-button color=\"primary\" class=\"tb-switch-to-pe\"\n        href=\"https://thingsboard.io/pricing/?product=thingsboard-pe&solution=pe-pay-as-you-go\" target=\"_blank\">{{ 'widgets.functions.switch-to-pe' | translate }}</a>\n    </div>\n    <div fxFlex class=\"tb-card-content\">\n        <div class=\"tb-card-column\">\n            <div class=\"feature\" translate>widgets.functions.alarms</div>\n            <div class=\"feature\" translate>widgets.functions.dashboards</div>\n            <div class=\"feature\" translate>widgets.functions.entities-and-relations</div>\n            <div class=\"feature\" translate>widgets.functions.profiles</div>\n            <div class=\"feature\" translate>widgets.functions.advanced-features</div>\n        </div>\n        <div class=\"tb-card-column\">\n            <div class=\"feature\" translate>widgets.functions.notification-center</div>\n            <div class=\"feature\" translate>widgets.functions.api-usage</div>\n            <div class=\"feature\" translate>widgets.functions.customers</div>\n            <div matTooltip=\"{{ 'widgets.functions.pe-feature-tooltip' | translate }}\" matTooltipPosition=\"above\" class=\"feature pe\" translate>widgets.functions.customers-hierarchy</div>\n            <div matTooltip=\"{{ 'widgets.functions.pe-feature-tooltip' | translate }}\" matTooltipPosition=\"above\" class=\"feature pe\" translate>widgets.functions.roles-and-permissions</div>\n        </div>\n        <div class=\"tb-card-column\">\n            <div matTooltip=\"{{ 'widgets.functions.pe-feature-tooltip' | translate }}\" matTooltipPosition=\"above\" class=\"feature pe\" translate>widgets.functions.groups</div>\n            <div matTooltip=\"{{ 'widgets.functions.pe-feature-tooltip' | translate }}\" matTooltipPosition=\"above\" class=\"feature pe\" translate>widgets.functions.integrations</div>\n            <div matTooltip=\"{{ 'widgets.functions.pe-feature-tooltip' | translate }}\" matTooltipPosition=\"above\" class=\"feature pe\" translate>widgets.functions.solution-templates</div>\n            <div matTooltip=\"{{ 'widgets.functions.pe-feature-tooltip' | translate }}\" matTooltipPosition=\"above\" class=\"feature pe\" translate>widgets.functions.scheduler</div>\n            <div matTooltip=\"{{ 'widgets.functions.pe-feature-tooltip' | translate }}\" matTooltipPosition=\"above\" class=\"feature pe\" translate>widgets.functions.white-labeling</div>\n        </div>\n    </div>\n</div>",
+            "markdownTextPattern": "<div style=\"height: 100%;\" class=\"flex flex-col\">\n    <div class=\"tb-card-header\">\n        <div class=\"tb-card-title\">\n            <div class=\"tb-home-widget-title\" translate>widgets.functions.title</div>\n        </div>\n        <a mat-stroked-button color=\"primary\" class=\"tb-switch-to-pe\"\n        href=\"https://thingsboard.io/pricing/?product=thingsboard-pe&solution=pe-pay-as-you-go\" target=\"_blank\">{{ 'widgets.functions.switch-to-pe' | translate }}</a>\n    </div>\n    <div class=\"tb-card-content flex-1\">\n        <div class=\"tb-card-column\">\n            <div class=\"feature\" translate>widgets.functions.alarms</div>\n            <div class=\"feature\" translate>widgets.functions.dashboards</div>\n            <div class=\"feature\" translate>widgets.functions.entities-and-relations</div>\n            <div class=\"feature\" translate>widgets.functions.profiles</div>\n            <div class=\"feature\" translate>widgets.functions.advanced-features</div>\n        </div>\n        <div class=\"tb-card-column\">\n            <div class=\"feature\" translate>widgets.functions.notification-center</div>\n            <div class=\"feature\" translate>widgets.functions.api-usage</div>\n            <div class=\"feature\" translate>widgets.functions.customers</div>\n            <div matTooltip=\"{{ 'widgets.functions.pe-feature-tooltip' | translate }}\" matTooltipPosition=\"above\" class=\"feature pe\" translate>widgets.functions.customers-hierarchy</div>\n            <div matTooltip=\"{{ 'widgets.functions.pe-feature-tooltip' | translate }}\" matTooltipPosition=\"above\" class=\"feature pe\" translate>widgets.functions.roles-and-permissions</div>\n        </div>\n        <div class=\"tb-card-column\">\n            <div matTooltip=\"{{ 'widgets.functions.pe-feature-tooltip' | translate }}\" matTooltipPosition=\"above\" class=\"feature pe\" translate>widgets.functions.groups</div>\n            <div matTooltip=\"{{ 'widgets.functions.pe-feature-tooltip' | translate }}\" matTooltipPosition=\"above\" class=\"feature pe\" translate>widgets.functions.integrations</div>\n            <div matTooltip=\"{{ 'widgets.functions.pe-feature-tooltip' | translate }}\" matTooltipPosition=\"above\" class=\"feature pe\" translate>widgets.functions.solution-templates</div>\n            <div matTooltip=\"{{ 'widgets.functions.pe-feature-tooltip' | translate }}\" matTooltipPosition=\"above\" class=\"feature pe\" translate>widgets.functions.scheduler</div>\n            <div matTooltip=\"{{ 'widgets.functions.pe-feature-tooltip' | translate }}\" matTooltipPosition=\"above\" class=\"feature pe\" translate>widgets.functions.white-labeling</div>\n        </div>\n    </div>\n</div>",
             "applyDefaultMarkdownStyle": false,
             "markdownCss": ".tb-card-header {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n}\n\n.tb-card-content {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: row;\n    margin-top: 4px;\n    overflow: auto;\n}\n\n.tb-card-column {\n    min-width: 0px;\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n}\n\n.feature {\n    position: relative;\n    cursor: default;\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 28px;\n    letter-spacing: 0.2px;\n    color: rgba(0, 0, 0, 0.76);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.feature:before {\n    content: \"check\";\n    font-family: 'Material Icons Round';\n    display: inline-block;\n    font-size: 20px;\n    line-height: 20px;\n    color: #198038;\n    font-weight: 600;\n    position: relative;\n    background: #F3F6FA;\n    border-radius: 4px;\n    width: 20px;\n    height: 20px;\n    padding: 2px;\n    vertical-align: sub;\n    margin-right: 8px;\n}\n\n.feature.pe:before {\n    content: \"close\";\n    background: #F4F4F4;\n    color: rgba(0, 0, 0, 0.12);\n}\n\n.feature.pe:after {\n    position: relative;\n    display: inline-block;\n    margin-left: 4px;\n    vertical-align: baseline;\n    top: -0.5em;\n    content: \"PE\";\n    color: #305680;\n    font-weight: 700;\n    font-size: 12px;\n    line-height: 12px;\n    letter-spacing: 0.0015em;\n}\n\n.feature+.feature {\n    margin-top: 4px;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n    .tb-switch-to-pe {\n        height: 24px;\n        font-size: 12px;\n        padding: 0 4px;\n    }\n    \n    .feature+.feature {\n        margin-top: 2px;\n    }\n    \n    .feature {\n        font-size: 11px;\n        line-height: 18px;\n    }\n\n    .feature:before {\n      font-size: 14px;\n      line-height: 14px;\n      width: 14px;\n      height: 14px;\n      margin-right: 4px;\n    }\n    .feature.pe:after {\n        margin-left: 2px;\n        top: -0.5em;\n        content: \"PE\";\n        font-size: 8px;\n        line-height: 8px;\n    }\n    \n}\n\n"
           },
diff --git a/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json b/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json
index ac027f93df..6e3b698200 100644
--- a/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json
+++ b/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json
@@ -42,7 +42,7 @@
           "padding": "16px",
           "settings": {
             "useMarkdownTextFunction": false,
-            "markdownTextPattern": "<div class=\"tb-card-content\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"space-between start\" fxLayout.lt-md=\"column\" fxLayoutGap.lt-md=\"12px\">\n        <div class=\"tb-home-widget-title\">{{ 'widgets.activity.title' | translate }}</div>\n        <tb-toggle-header #activityStates value=\"devices\" name=\"activityStates\">\n     <tb-toggle-option value=\"devices\">{{ 'device.devices' | translate }}</tb-toggle-option>\n        <tb-toggle-option value=\"transportMessages\">{{ 'widgets.transport-messages.title' | translate }}</tb-toggle-option>\n        </tb-toggle-header>\n    </div>\n    <ng-container [ngSwitch]=\"activityStates.value\">\n        <ng-template [ngSwitchCase]=\"'devices'\">\n            <tb-dashboard-state fxFlex stateId=\"devices_activity\" [ctx]=\"ctx\"></tb-dashboard-state>\n        </ng-template>\n        <ng-template [ngSwitchCase]=\"'transportMessages'\">\n            <tb-dashboard-state fxFlex stateId=\"transport_messages\" [ctx]=\"ctx\"></tb-dashboard-state>\n        </ng-template>\n    </ng-container>\n</div>",
+            "markdownTextPattern": "<div class=\"tb-card-content\">\n    <div class=\"flex flex-row items-start justify-between lt-md:flex-col lt-md:gap-3\">\n        <div class=\"tb-home-widget-title\">{{ 'widgets.activity.title' | translate }}</div>\n        <tb-toggle-header #activityStates value=\"devices\" name=\"activityStates\">\n     <tb-toggle-option value=\"devices\">{{ 'device.devices' | translate }}</tb-toggle-option>\n        <tb-toggle-option value=\"transportMessages\">{{ 'widgets.transport-messages.title' | translate }}</tb-toggle-option>\n        </tb-toggle-header>\n    </div>\n    <ng-container [ngSwitch]=\"activityStates.value\">\n        <ng-template [ngSwitchCase]=\"'devices'\">\n            <tb-dashboard-state class=\"flex-1\" stateId=\"devices_activity\" [ctx]=\"ctx\"></tb-dashboard-state>\n        </ng-template>\n        <ng-template [ngSwitchCase]=\"'transportMessages'\">\n            <tb-dashboard-state class=\"flex-1\" stateId=\"transport_messages\" [ctx]=\"ctx\"></tb-dashboard-state>\n        </ng-template>\n    </ng-container>\n</div>",
             "applyDefaultMarkdownStyle": false,
             "markdownCss": ".tb-card-content {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n}\n"
           },
@@ -281,7 +281,7 @@
           "padding": "16px",
           "settings": {
             "useMarkdownTextFunction": false,
-            "markdownTextPattern": "<div class=\"tb-card-content\">\n    <div class=\"tb-content-container\">\n        <div class=\"tb-card-header\">\n            <div class=\"tb-card-title\">\n                <a class=\"tb-home-widget-title tb-home-widget-link\" routerLink=\"/entities/devices\">{{ 'device.devices' | translate }}</a>\n            </div>\n            <div fxLayout=\"row\" fxLayoutGap=\"12px\">\n                <a fxHide.md mat-stroked-button color=\"primary\" href=\"https://thingsboard.io/docs\" target=\"_blank\">{{ 'widgets.devices.view-docs' | translate }}</a>\n                <a mat-flat-button color=\"primary\" routerLink=\"/entities/devices\" [queryParams]=\"{action: 'add'}\">{{ 'device.add' | translate }}</a>\n            </div>\n        </div>\n        <div class=\"tb-item-cards\">\n            <a class=\"tb-item-card tb-inactive\" routerLink=\"/entities/devices\" [queryParams]=\"{active: false}\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.devices.inactive</div>\n                </div>\n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${inactiveDevices:0}</div>\n                </div>\n            </a>\n            <a class=\"tb-item-card tb-active\" routerLink=\"/entities/devices\" [queryParams]=\"{active: true}\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.devices.active</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${activeDevices:0}</div>\n                </div>\n            </a>\n            <a fxHide.md class=\"tb-item-card tb-total\" routerLink=\"/entities/devices\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.devices.total</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${totalDevices:0}</div>\n                </div>\n            </a>\n        </div>\n    </div>\n</div>",
+            "markdownTextPattern": "<div class=\"tb-card-content\">\n    <div class=\"tb-content-container\">\n        <div class=\"tb-card-header\">\n            <div class=\"tb-card-title\">\n                <a class=\"tb-home-widget-title tb-home-widget-link\" routerLink=\"/entities/devices\">{{ 'device.devices' | translate }}</a>\n            </div>\n            <div class=\"flex flex-row gap-3\">\n                <a class=\"md:!hidden\" mat-stroked-button color=\"primary\" href=\"https://thingsboard.io/docs\" target=\"_blank\">{{ 'widgets.devices.view-docs' | translate }}</a>\n                <a mat-flat-button color=\"primary\" routerLink=\"/entities/devices\" [queryParams]=\"{action: 'add'}\">{{ 'device.add' | translate }}</a>\n            </div>\n        </div>\n        <div class=\"tb-item-cards\">\n            <a class=\"tb-item-card tb-inactive\" routerLink=\"/entities/devices\" [queryParams]=\"{active: false}\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.devices.inactive</div>\n                </div>\n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${inactiveDevices:0}</div>\n                </div>\n            </a>\n            <a class=\"tb-item-card tb-active\" routerLink=\"/entities/devices\" [queryParams]=\"{active: true}\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.devices.active</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${activeDevices:0}</div>\n                </div>\n            </a>\n            <a class=\"tb-item-card tb-total md:!hidden\" routerLink=\"/entities/devices\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.devices.total</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${totalDevices:0}</div>\n                </div>\n            </a>\n        </div>\n    </div>\n</div>",
             "applyDefaultMarkdownStyle": false,
             "markdownCss": ".tb-card-content {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: row;\n}\n\n.tb-content-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    gap: 12px;\n}\n\n.tb-card-header {\n    height: 36px;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n}\n\n.tb-item-cards {\n    flex: 1;\n    display: flex;\n    flex-direction: row;\n    gap: 12px;\n    overflow: hidden;\n}\n\na.tb-item-card {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    padding: 8px 12px;\n    border: 1px solid;\n    border-radius: 10px;\n    margin-bottom: 12px;\n    overflow: hidden;\n    justify-content: space-evenly;\n}\n\na.tb-item-card.tb-inactive {\n    background: rgba(209, 39, 48, 0.04);\n    border-color: rgba(209, 39, 48, 0.06);\n}\n\na.tb-item-card.tb-active {\n    background: rgba(48, 86, 128, 0.04);\n    border-color: rgba(48, 86, 128, 0.12);\n}\n\na.tb-item-card.tb-total {\n    background: rgba(0, 0, 0, 0.01);\n    border-color: rgba(0, 0, 0, 0.05);\n}\n\n.tb-item-title-container {\n    display: grid;\n}\n\n.tb-item-title {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 20px;\n    letter-spacing: 0.2px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;    \n    color: rgba(0, 0, 0, 0.76);\n}\n\n.tb-item-title.tb-home-widget-link:after {\n    position: absolute;\n    right: 0;\n}\n\na.tb-item-card:hover .tb-item-title.tb-home-widget-link:after { \n    color: rgba(0, 0, 0, 0.38);\n}\n\na.tb-item-card:hover {\n    box-shadow: 0px 4px 10px rgba(23, 33, 90, 0.08);\n}\n\n.tb-count-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: center;\n}\n\n.tb-count {\n    font-style: normal;\n    font-weight: 500;\n    font-size: 24px;\n    line-height: 36px;\n    white-space: nowrap;\n    color: rgba(0, 0, 0, 0.87);\n}\n\n@media screen and (max-width: 959px) {\n    .tb-item-cards {\n        flex-direction: column;\n    }\n    a.tb-item-card {\n        margin-bottom: 0;\n    }\n}\n\n@media screen and (max-width: 1279px) {\n    a.tb-item-card {\n        flex-direction: row;\n        align-items: center;\n    }\n    .tb-item-title.tb-home-widget-link:after {\n        position: relative;\n    }\n    .tb-count-container {\n        align-items: flex-end;\n    }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n    .tb-item-title {\n        font-size: 11px;\n        line-height: 16px;\n    }\n    .tb-count {\n        font-size: 16px;\n        line-height: 24px;\n    }\n    a.tb-item-card {\n        padding: 4px 8px;\n        margin-bottom: 6px;\n    }\n    a.tb-item-card:hover {\n        box-shadow: 0px 2px 5px rgba(23, 33, 90, 0.08);\n    }\n}\n"
           },
@@ -430,7 +430,7 @@
           "padding": "16px",
           "settings": {
             "useMarkdownTextFunction": false,
-            "markdownTextPattern": "<div class=\"tb-card-content\">\n    <div class=\"tb-content-container\">\n        <div class=\"tb-card-header\">\n            <div class=\"tb-card-title\">\n                <a class=\"tb-home-widget-title tb-home-widget-link\" routerLink=\"/alarms\">{{ 'alarm.alarms' | translate }}</a>\n            </div>\n        </div>\n        <div class=\"tb-item-cards\">\n            <a class=\"tb-item-card tb-critical\" routerLink=\"/alarms\" [queryParams]=\"{severityList: ['CRITICAL']}\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.alarms.critical</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${criticalAlarms:0}</div>\n                </div>\n            </a>\n            <a class=\"tb-item-card tb-assigned\" routerLink=\"/alarms\" [queryParams]=\"{assignedToMe: true}\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.alarms.assigned-to-me</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${assignedToMeAlarms:0}</div>\n                </div>\n            </a>\n            <a fxHide.md class=\"tb-item-card tb-total\" routerLink=\"/alarms\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.alarms.total</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${totalAlarms:0}</div>\n                </div>\n            </a>\n        </div>\n    </div>\n</div>",
+            "markdownTextPattern": "<div class=\"tb-card-content\">\n    <div class=\"tb-content-container\">\n        <div class=\"tb-card-header\">\n            <div class=\"tb-card-title\">\n                <a class=\"tb-home-widget-title tb-home-widget-link\" routerLink=\"/alarms\">{{ 'alarm.alarms' | translate }}</a>\n            </div>\n        </div>\n        <div class=\"tb-item-cards\">\n            <a class=\"tb-item-card tb-critical\" routerLink=\"/alarms\" [queryParams]=\"{severityList: ['CRITICAL']}\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.alarms.critical</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${criticalAlarms:0}</div>\n                </div>\n            </a>\n            <a class=\"tb-item-card tb-assigned\" routerLink=\"/alarms\" [queryParams]=\"{assignedToMe: true}\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.alarms.assigned-to-me</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${assignedToMeAlarms:0}</div>\n                </div>\n            </a>\n            <a class=\"tb-item-card tb-total md:!hidden\" routerLink=\"/alarms\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.alarms.total</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${totalAlarms:0}</div>\n                </div>\n            </a>\n        </div>\n    </div>\n</div>",
             "applyDefaultMarkdownStyle": false,
             "markdownCss": ".tb-card-content {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: row;\n}\n\n.tb-content-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    gap: 12px;\n}\n\n.tb-card-header {\n    height: 36px;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n}\n\n.tb-item-cards {\n    flex: 1;\n    display: flex;\n    flex-direction: row;\n    gap: 12px;\n    overflow: hidden;\n}\n\na.tb-item-card {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    padding: 8px 12px;\n    border: 1px solid;\n    border-radius: 10px;\n    margin-bottom: 12px;\n    overflow: hidden;\n    justify-content: space-evenly;\n}\n\na.tb-item-card.tb-critical {\n    background: rgba(209, 39, 48, 0.04);\n    border-color: rgba(209, 39, 48, 0.06);\n}\n\na.tb-item-card.tb-assigned {\n    background: rgba(48, 86, 128, 0.04);\n    border-color: rgba(48, 86, 128, 0.12);\n}\n\na.tb-item-card.tb-total {\n    background: rgba(0, 0, 0, 0.01);\n    border-color: rgba(0, 0, 0, 0.05);\n}\n\n.tb-item-title-container {\n    display: grid;\n}\n\n.tb-item-title {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 20px;\n    letter-spacing: 0.2px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;    \n    color: rgba(0, 0, 0, 0.76);\n}\n\n.tb-item-title.tb-home-widget-link:after {\n    position: absolute;\n    right: 0;\n}\n\na.tb-item-card:hover .tb-item-title.tb-home-widget-link:after { \n    color: rgba(0, 0, 0, 0.38);\n}\n\na.tb-item-card:hover {\n    box-shadow: 0px 4px 10px rgba(23, 33, 90, 0.08);\n}\n\n.tb-count-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: center;\n}\n\n.tb-count {\n    font-style: normal;\n    font-weight: 500;\n    font-size: 24px;\n    line-height: 36px;\n    white-space: nowrap;\n    color: rgba(0, 0, 0, 0.87);\n}\n\na.tb-item-card.tb-critical .tb-count:after {\n    content: \"warning\";\n    display: inline-block;\n    position: relative;\n    font-family: 'Material Icons Round';\n    color: #D12730;\n    vertical-align: bottom;\n    margin-left: 6px;\n}\n\n@media screen and (max-width: 959px) {\n    .tb-item-cards {\n        flex-direction: column;\n    }\n    a.tb-item-card {\n        margin-bottom: 0;\n    }\n}\n\n@media screen and (max-width: 1279px) {\n    a.tb-item-card {\n        flex-direction: row;\n        align-items: center;\n    }\n    .tb-item-title.tb-home-widget-link:after {\n        position: relative;\n    }\n    .tb-count-container {\n        align-items: flex-end;\n    }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n    .tb-item-title {\n        font-size: 11px;\n        line-height: 16px;\n    }\n    .tb-count {\n        font-size: 16px;\n        line-height: 24px;\n    }\n    a.tb-item-card {\n        padding: 4px 8px;\n        margin-bottom: 6px;\n    }\n    a.tb-item-card:hover {\n        box-shadow: 0px 2px 5px rgba(23, 33, 90, 0.08);\n    }\n    a.tb-item-card.tb-critical .tb-count:after {\n        margin-left: 2px;\n    }\n}\n"
           },
diff --git a/ui-ngx/tailwind.config.js b/ui-ngx/tailwind.config.js
index 56a3cd8ccd..b14d21ddc2 100644
--- a/ui-ngx/tailwind.config.js
+++ b/ui-ngx/tailwind.config.js
@@ -155,7 +155,10 @@ module.exports = {
       }
     },
   },
-  safelist: [],
+  safelist: [
+    'lt-md:gap-3',
+    'md:!hidden'
+  ],
   corePlugins: {
     preflight: false
   },

From 84b431373c60f131bc61a22885b141b7e511565b Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Thu, 17 Oct 2024 19:32:48 +0300
Subject: [PATCH 30/34] Flex layout replacements. Switch to tailwind.css.

---
 .../main/data/json/system/widget_types/asset_admin_table.json | 2 +-
 .../data/json/system/widget_types/basic_gpio_control.json     | 4 ++--
 .../main/data/json/system/widget_types/basic_gpio_panel.json  | 4 ++--
 .../data/json/system/widget_types/device_admin_table.json     | 2 +-
 .../json/system/widget_types/raspberry_pi_gpio_control.json   | 4 ++--
 .../json/system/widget_types/raspberry_pi_gpio_panel.json     | 4 ++--
 .../src/main/data/json/system/widget_types/rpc_button.json    | 2 +-
 .../src/main/data/json/system/widget_types/service_rpc.json   | 2 +-
 .../json/system/widget_types/update_device_attribute.json     | 2 +-
 .../json/system/widget_types/update_location_timeseries.json  | 2 +-
 .../system/widget_types/update_server_image_attribute.json    | 2 +-
 .../system/widget_types/update_shared_image_attribute.json    | 2 +-
 12 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/application/src/main/data/json/system/widget_types/asset_admin_table.json b/application/src/main/data/json/system/widget_types/asset_admin_table.json
index cd373b9635..10a96e0043 100644
--- a/application/src/main/data/json/system/widget_types/asset_admin_table.json
+++ b/application/src/main/data/json/system/widget_types/asset_admin_table.json
@@ -18,7 +18,7 @@
     "dataKeySettingsDirective": "tb-entities-table-key-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-entities-table-basic-config",
-    "defaultConfig": "{\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":86400000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"4px\",\"settings\":{\"entitiesTitle\":\"Asset admin table\",\"enableSearch\":true,\"enableSelectColumnDisplay\":true,\"enableStickyHeader\":true,\"enableStickyAction\":true,\"showCellActionsMenu\":true,\"reserveSpaceForHiddenAction\":\"true\",\"displayEntityName\":false,\"displayEntityLabel\":false,\"displayEntityType\":false,\"displayPagination\":true,\"defaultPageSize\":10,\"defaultSortOrder\":\"entityName\",\"useRowStyleFunction\":false},\"title\":\"Asset admin table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"datasources\":[{\"type\":\"function\",\"name\":\"Simulated\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Entity name\",\"color\":\"#4caf50\",\"settings\":{},\"_hash\":0.6985800247727296,\"funcBody\":\"return 'Simulated';\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Entity type\",\"color\":\"#f44336\",\"settings\":{},\"_hash\":0.10073938422359707,\"funcBody\":\"return 'Device';\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#f44336\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.6401141393938932,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"showTitleIcon\":false,\"titleIcon\":\"more_horiz\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"titleTooltip\":\"\",\"widgetStyle\":{},\"displayTimewindow\":true,\"actions\":{\"headerButton\":[{\"name\":\"Add asset\",\"icon\":\"add\",\"type\":\"customPretty\",\"customHtml\":\"<form #addAssetForm=\\\"ngForm\\\" [formGroup]=\\\"addAssetFormGroup\\\"\\n      (ngSubmit)=\\\"save()\\\" style=\\\"width: 480px;\\\">\\n  <mat-toolbar fxLayout=\\\"row\\\" color=\\\"primary\\\">\\n    <h2>Add asset</h2>\\n    <span fxFlex></span>\\n    <button mat-icon-button\\n            (click)=\\\"cancel()\\\"\\n            type=\\\"button\\\">\\n      <mat-icon class=\\\"material-icons\\\">close</mat-icon>\\n    </button>\\n  </mat-toolbar>\\n  <mat-progress-bar color=\\\"warn\\\" mode=\\\"indeterminate\\\" *ngIf=\\\"isLoading$ | async\\\">\\n  </mat-progress-bar>\\n  <div style=\\\"height: 4px;\\\" *ngIf=\\\"!(isLoading$ | async)\\\"></div>\\n  <div mat-dialog-content>\\n      <div class=\\\"mat-padding\\\" fxLayout=\\\"column\\\">\\n            <mat-form-field class=\\\"mat-block\\\">\\n                <mat-label>Asset name</mat-label>\\n                <input matInput formControlName=\\\"assetName\\\" required>\\n                <mat-error *ngIf=\\\"addAssetFormGroup.get('assetName').hasError('required')\\\">\\n                    Asset name is required.\\n                </mat-error>\\n            </mat-form-field>\\n            <div fxLayout=\\\"row\\\" fxLayoutGap=\\\"8px\\\">\\n                <tb-entity-subtype-autocomplete\\n                    fxFlex=\\\"50\\\"\\n                    formControlName=\\\"assetType\\\"\\n                    [required]=\\\"true\\\"\\n                    [entityType]=\\\"'ASSET'\\\"\\n                ></tb-entity-subtype-autocomplete>\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Label</mat-label>\\n                    <input matInput formControlName=\\\"assetLabel\\\">\\n                </mat-form-field>\\n            </div>\\n            <div formGroupName=\\\"attributes\\\" fxLayout=\\\"row\\\" fxLayoutGap=\\\"8px\\\">\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Latitude</mat-label>\\n                    <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"latitude\\\">\\n                </mat-form-field>\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Longitude</mat-label>\\n                    <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"longitude\\\">\\n                </mat-form-field>\\n            </div>\\n      </div>  \\n  </div>\\n  <div mat-dialog-actions fxLayout=\\\"row\\\">\\n    <span fxFlex></span>\\n    <button mat-button color=\\\"primary\\\"\\n            type=\\\"button\\\"\\n            [disabled]=\\\"(isLoading$ | async)\\\"\\n            (click)=\\\"cancel()\\\" cdkFocusInitial>\\n      Cancel\\n    </button>\\n    <button mat-button mat-raised-button color=\\\"primary\\\"\\n            style=\\\"margin-right: 20px;\\\"\\n            type=\\\"submit\\\"\\n            [disabled]=\\\"(isLoading$ | async) || addAssetForm.invalid || !addAssetForm.dirty\\\">\\n      Create\\n    </button>\\n  </div>\\n</form>\\n\",\"customCss\":\"\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\\nlet assetService = $injector.get(widgetContext.servicesMap.get('assetService'));\\nlet attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));\\n\\nopenAddAssetDialog();\\n\\nfunction openAddAssetDialog() {\\n    customDialog.customDialog(htmlTemplate, AddAssetDialogController).subscribe();\\n}\\n\\nfunction AddAssetDialogController(instance) {\\n    let vm = instance;\\n    \\n    vm.addAssetFormGroup = vm.fb.group({\\n      assetName: ['', [vm.validators.required]],\\n      assetType: ['', [vm.validators.required]],\\n      assetLabel: [''],\\n      attributes: vm.fb.group({\\n          latitude: [null],\\n          longitude: [null]\\n      })      \\n    });\\n    \\n    vm.cancel = function() {\\n        vm.dialogRef.close(null);\\n    };\\n    \\n    vm.save = function() {\\n        vm.addAssetFormGroup.markAsPristine();\\n        let asset = {\\n            name: vm.addAssetFormGroup.get('assetName').value,\\n            type: vm.addAssetFormGroup.get('assetType').value,\\n            label: vm.addAssetFormGroup.get('assetLabel').value\\n        };\\n        assetService.saveAsset(asset).subscribe(\\n            function (asset) {\\n                saveAttributes(asset.id).subscribe(\\n                    function () {\\n                        widgetContext.updateAliases();\\n                        vm.dialogRef.close(null);\\n                    }\\n                );\\n            }\\n        );\\n    };\\n    \\n    function saveAttributes(entityId) {\\n        let attributes = vm.addAssetFormGroup.get('attributes').value;\\n        let attributesArray = [];\\n        for (let key in attributes) {\\n            attributesArray.push({key: key, value: attributes[key]});\\n        }\\n        if (attributesArray.length > 0) {\\n            return attributeService.saveEntityAttributes(entityId, \\\"SERVER_SCOPE\\\", attributesArray);\\n        } else {\\n            return widgetContext.rxjs.of([]);\\n        }\\n    }\\n}\",\"customResources\":[],\"id\":\"70837a9d-c3de-a9a7-03c5-dccd14998758\"}],\"actionCellButton\":[{\"name\":\"Edit asset\",\"icon\":\"edit\",\"type\":\"customPretty\",\"customHtml\":\"<form #editAssetForm=\\\"ngForm\\\" [formGroup]=\\\"editAssetFormGroup\\\"\\n      (ngSubmit)=\\\"save()\\\" style=\\\"width: 480px;\\\">\\n  <mat-toolbar fxLayout=\\\"row\\\" color=\\\"primary\\\">\\n    <h2>Edit asset</h2>\\n    <span fxFlex></span>\\n    <button mat-icon-button\\n            (click)=\\\"cancel()\\\"\\n            type=\\\"button\\\">\\n      <mat-icon class=\\\"material-icons\\\">close</mat-icon>\\n    </button>\\n  </mat-toolbar>\\n  <mat-progress-bar color=\\\"warn\\\" mode=\\\"indeterminate\\\" *ngIf=\\\"isLoading$ | async\\\">\\n  </mat-progress-bar>\\n  <div style=\\\"height: 4px;\\\" *ngIf=\\\"!(isLoading$ | async)\\\"></div>\\n  <div mat-dialog-content>\\n      <div class=\\\"mat-padding\\\" fxLayout=\\\"column\\\">\\n            <mat-form-field class=\\\"mat-block\\\">\\n                <mat-label>Asset name</mat-label>\\n                <input matInput formControlName=\\\"assetName\\\" required>\\n                <mat-error *ngIf=\\\"editAssetFormGroup.get('assetName').hasError('required')\\\">\\n                    Asset name is required.\\n                </mat-error>\\n            </mat-form-field>\\n            <div fxLayout=\\\"row\\\" fxLayoutGap=\\\"8px\\\">\\n                <tb-entity-subtype-autocomplete\\n                    fxFlex=\\\"50\\\"\\n                    formControlName=\\\"assetType\\\"\\n                    [required]=\\\"true\\\"\\n                    [entityType]=\\\"'ASSET'\\\"\\n                ></tb-entity-subtype-autocomplete>\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Label</mat-label>\\n                    <input matInput formControlName=\\\"assetLabel\\\">\\n                </mat-form-field>\\n            </div>\\n            <div formGroupName=\\\"attributes\\\" fxLayout=\\\"row\\\" fxLayoutGap=\\\"8px\\\">\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Latitude</mat-label>\\n                    <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"latitude\\\">\\n                </mat-form-field>\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Longitude</mat-label>\\n                    <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"longitude\\\">\\n                </mat-form-field>\\n            </div>\\n      </div>  \\n  </div>\\n  <div mat-dialog-actions fxLayout=\\\"row\\\">\\n    <span fxFlex></span>\\n    <button mat-button color=\\\"primary\\\"\\n            type=\\\"button\\\"\\n            [disabled]=\\\"(isLoading$ | async)\\\"\\n            (click)=\\\"cancel()\\\" cdkFocusInitial>\\n      Cancel\\n    </button>\\n    <button mat-button mat-raised-button color=\\\"primary\\\"\\n            type=\\\"submit\\\"\\n            style=\\\"margin-right: 20px;\\\"\\n            [disabled]=\\\"(isLoading$ | async) || editAssetForm.invalid || !editAssetForm.dirty\\\">\\n      Update\\n    </button>\\n  </div>\\n</form>\\n\",\"customCss\":\"\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\\nlet assetService = $injector.get(widgetContext.servicesMap.get('assetService'));\\nlet attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));\\n\\nopenEditAssetDialog();\\n\\nfunction openEditAssetDialog() {\\n    customDialog.customDialog(htmlTemplate, EditAssetDialogController).subscribe();\\n}\\n\\nfunction EditAssetDialogController(instance) {\\n    let vm = instance;\\n    \\n    vm.asset = null;\\n    vm.attributes = {};\\n    \\n    vm.editAssetFormGroup = vm.fb.group({\\n      assetName: ['', [vm.validators.required]],\\n      assetType: ['', [vm.validators.required]],\\n      assetLabel: [''],\\n      attributes: vm.fb.group({\\n          latitude: [null],\\n          longitude: [null]\\n      })      \\n    });\\n    \\n    vm.cancel = function() {\\n        vm.dialogRef.close(null);\\n    };\\n    \\n    vm.save = function() {\\n        vm.editAssetFormGroup.markAsPristine();\\n        vm.asset.name = vm.editAssetFormGroup.get('assetName').value,\\n        vm.asset.type = vm.editAssetFormGroup.get('assetType').value,\\n        vm.asset.label = vm.editAssetFormGroup.get('assetLabel').value\\n        assetService.saveAsset(vm.asset).subscribe(\\n            function () {\\n                saveAttributes().subscribe(\\n                    function () {\\n                        widgetContext.updateAliases();\\n                        vm.dialogRef.close(null);\\n                    }\\n                );\\n            }\\n        );\\n    };\\n    \\n    getEntityInfo();\\n    \\n    function getEntityInfo() {\\n        assetService.getAsset(entityId.id).subscribe(\\n            function (asset) {\\n                attributeService.getEntityAttributes(entityId, 'SERVER_SCOPE',\\n                                                    ['latitude', 'longitude']).subscribe(\\n                   function (attributes) {\\n                        for (let i = 0; i < attributes.length; i++) {\\n                            vm.attributes[attributes[i].key] = attributes[i].value; \\n                        }\\n                        vm.asset = asset;\\n                        vm.editAssetFormGroup.patchValue(\\n                            {\\n                                assetName: vm.asset.name,\\n                                assetType: vm.asset.type,\\n                                assetLabel: vm.asset.label,\\n                                attributes: {\\n                                    latitude: vm.attributes.latitude,\\n                                    longitude: vm.attributes.longitude\\n                                }\\n                            }, {emitEvent: false}\\n                        );\\n                   } \\n                );\\n            }\\n        );    \\n    }\\n    \\n    function saveAttributes() {\\n        let attributes = vm.editAssetFormGroup.get('attributes').value;\\n        let attributesArray = [];\\n        for (let key in attributes) {\\n            attributesArray.push({key: key, value: attributes[key]});\\n        }\\n        if (attributesArray.length > 0) {\\n            return attributeService.saveEntityAttributes(entityId, 'SERVER_SCOPE', attributesArray);\\n        } else {\\n            return widgetContext.rxjs.of([]);\\n        }\\n    }\\n}\",\"customResources\":[],\"id\":\"93931e52-5d7c-903e-67aa-b9435df44ff4\"},{\"name\":\"Delete asset\",\"icon\":\"delete\",\"type\":\"custom\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet dialogs = $injector.get(widgetContext.servicesMap.get('dialogs'));\\nlet assetService = $injector.get(widgetContext.servicesMap.get('assetService'));\\n\\nopenDeleteAssetDialog();\\n\\nfunction openDeleteAssetDialog() {\\n    let title = \\\"Are you sure you want to delete the asset \\\" + entityName +  \\\"?\\\";\\n    let content = \\\"Be careful, after the confirmation, the asset and all related data will become unrecoverable!\\\";\\n    dialogs.confirm(title, content, 'Cancel', 'Delete').subscribe(\\n        function (result) {\\n            if (result) {\\n                deleteAsset();\\n            }\\n        }\\n    );\\n}\\n\\nfunction deleteAsset() {\\n    assetService.deleteAsset(entityId.id).subscribe(\\n        function () {\\n            widgetContext.updateAliases();\\n        }\\n    );\\n}\\n\",\"id\":\"ec2708f6-9ff0-186b-e4fc-7635ebfa3074\"}]},\"configMode\":\"basic\",\"titleFont\":null,\"titleColor\":null}"
+    "defaultConfig": "{\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":86400000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"4px\",\"settings\":{\"entitiesTitle\":\"Asset admin table\",\"enableSearch\":true,\"enableSelectColumnDisplay\":true,\"enableStickyHeader\":true,\"enableStickyAction\":true,\"showCellActionsMenu\":true,\"reserveSpaceForHiddenAction\":\"true\",\"displayEntityName\":false,\"displayEntityLabel\":false,\"displayEntityType\":false,\"displayPagination\":true,\"defaultPageSize\":10,\"defaultSortOrder\":\"entityName\",\"useRowStyleFunction\":false},\"title\":\"Asset admin table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"datasources\":[{\"type\":\"function\",\"name\":\"Simulated\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Entity name\",\"color\":\"#4caf50\",\"settings\":{},\"_hash\":0.6985800247727296,\"funcBody\":\"return 'Simulated';\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Entity type\",\"color\":\"#f44336\",\"settings\":{},\"_hash\":0.10073938422359707,\"funcBody\":\"return 'Device';\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#f44336\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.6401141393938932,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"showTitleIcon\":false,\"titleIcon\":\"more_horiz\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"titleTooltip\":\"\",\"widgetStyle\":{},\"displayTimewindow\":true,\"actions\":{\"headerButton\":[{\"name\":\"Add asset\",\"icon\":\"add\",\"type\":\"customPretty\",\"customHtml\":\"<form #addAssetForm=\\\"ngForm\\\" [formGroup]=\\\"addAssetFormGroup\\\"\\n      (ngSubmit)=\\\"save()\\\" style=\\\"width: 480px;\\\">\\n  <mat-toolbar class=\\\"flex flex-row\\\" color=\\\"primary\\\">\\n    <h2>Add asset</h2>\\n    <span class=\\\"flex-1\\\"></span>\\n    <button mat-icon-button\\n            (click)=\\\"cancel()\\\"\\n            type=\\\"button\\\">\\n      <mat-icon class=\\\"material-icons\\\">close</mat-icon>\\n    </button>\\n  </mat-toolbar>\\n  <mat-progress-bar color=\\\"warn\\\" mode=\\\"indeterminate\\\" *ngIf=\\\"isLoading$ | async\\\">\\n  </mat-progress-bar>\\n  <div style=\\\"height: 4px;\\\" *ngIf=\\\"!(isLoading$ | async)\\\"></div>\\n  <div mat-dialog-content>\\n    <div class=\\\"mat-padding flex flex-col\\\">\\n      <mat-form-field class=\\\"mat-block\\\">\\n        <mat-label>Asset name</mat-label>\\n        <input matInput formControlName=\\\"assetName\\\" required>\\n        <mat-error *ngIf=\\\"addAssetFormGroup.get('assetName').hasError('required')\\\">\\n          Asset name is required.\\n        </mat-error>\\n      </mat-form-field>\\n      <div class=\\\"flex flex-row gap-2\\\">\\n        <tb-entity-subtype-autocomplete\\n            class=\\\"max-w-50% flex-full\\\"\\n            formControlName=\\\"assetType\\\"\\n            [required]=\\\"true\\\"\\n            [entityType]=\\\"'ASSET'\\\"\\n        ></tb-entity-subtype-autocomplete>\\n        <mat-form-field class=\\\"mat-block max-w-50% flex-full\\\">\\n          <mat-label>Label</mat-label>\\n          <input matInput formControlName=\\\"assetLabel\\\">\\n        </mat-form-field>\\n      </div>\\n      <div formGroupName=\\\"attributes\\\" class=\\\"flex flex-row gap-2\\\">\\n        <mat-form-field class=\\\"mat-block max-w-50% flex-full\\\">\\n          <mat-label>Latitude</mat-label>\\n          <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"latitude\\\">\\n        </mat-form-field>\\n        <mat-form-field class=\\\"mat-block max-w-50% flex-full\\\">\\n          <mat-label>Longitude</mat-label>\\n          <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"longitude\\\">\\n        </mat-form-field>\\n      </div>\\n    </div>\\n  </div>\\n  <div mat-dialog-actions class=\\\"flex flex-row\\\">\\n    <span class=\\\"flex-1\\\"></span>\\n    <button mat-button color=\\\"primary\\\"\\n            type=\\\"button\\\"\\n            [disabled]=\\\"(isLoading$ | async)\\\"\\n            (click)=\\\"cancel()\\\" cdkFocusInitial>\\n      Cancel\\n    </button>\\n    <button mat-button mat-raised-button color=\\\"primary\\\"\\n            style=\\\"margin-right: 20px;\\\"\\n            type=\\\"submit\\\"\\n            [disabled]=\\\"(isLoading$ | async) || addAssetForm.invalid || !addAssetForm.dirty\\\">\\n      Create\\n    </button>\\n  </div>\\n</form>\\n\",\"customCss\":\"\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\\nlet assetService = $injector.get(widgetContext.servicesMap.get('assetService'));\\nlet attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));\\n\\nopenAddAssetDialog();\\n\\nfunction openAddAssetDialog() {\\n    customDialog.customDialog(htmlTemplate, AddAssetDialogController).subscribe();\\n}\\n\\nfunction AddAssetDialogController(instance) {\\n    let vm = instance;\\n    \\n    vm.addAssetFormGroup = vm.fb.group({\\n      assetName: ['', [vm.validators.required]],\\n      assetType: ['', [vm.validators.required]],\\n      assetLabel: [''],\\n      attributes: vm.fb.group({\\n          latitude: [null],\\n          longitude: [null]\\n      })      \\n    });\\n    \\n    vm.cancel = function() {\\n        vm.dialogRef.close(null);\\n    };\\n    \\n    vm.save = function() {\\n        vm.addAssetFormGroup.markAsPristine();\\n        let asset = {\\n            name: vm.addAssetFormGroup.get('assetName').value,\\n            type: vm.addAssetFormGroup.get('assetType').value,\\n            label: vm.addAssetFormGroup.get('assetLabel').value\\n        };\\n        assetService.saveAsset(asset).subscribe(\\n            function (asset) {\\n                saveAttributes(asset.id).subscribe(\\n                    function () {\\n                        widgetContext.updateAliases();\\n                        vm.dialogRef.close(null);\\n                    }\\n                );\\n            }\\n        );\\n    };\\n    \\n    function saveAttributes(entityId) {\\n        let attributes = vm.addAssetFormGroup.get('attributes').value;\\n        let attributesArray = [];\\n        for (let key in attributes) {\\n            attributesArray.push({key: key, value: attributes[key]});\\n        }\\n        if (attributesArray.length > 0) {\\n            return attributeService.saveEntityAttributes(entityId, \\\"SERVER_SCOPE\\\", attributesArray);\\n        } else {\\n            return widgetContext.rxjs.of([]);\\n        }\\n    }\\n}\",\"customResources\":[],\"id\":\"70837a9d-c3de-a9a7-03c5-dccd14998758\"}],\"actionCellButton\":[{\"name\":\"Edit asset\",\"icon\":\"edit\",\"type\":\"customPretty\",\"customHtml\":\"<form #editAssetForm=\\\"ngForm\\\" [formGroup]=\\\"editAssetFormGroup\\\"\\n      (ngSubmit)=\\\"save()\\\" style=\\\"width: 480px;\\\">\\n  <mat-toolbar class=\\\"flex flex-row\\\" color=\\\"primary\\\">\\n    <h2>Edit asset</h2>\\n    <span class=\\\"flex-1\\\"></span>\\n    <button mat-icon-button\\n            (click)=\\\"cancel()\\\"\\n            type=\\\"button\\\">\\n      <mat-icon class=\\\"material-icons\\\">close</mat-icon>\\n    </button>\\n  </mat-toolbar>\\n  <mat-progress-bar color=\\\"warn\\\" mode=\\\"indeterminate\\\" *ngIf=\\\"isLoading$ | async\\\">\\n  </mat-progress-bar>\\n  <div style=\\\"height: 4px;\\\" *ngIf=\\\"!(isLoading$ | async)\\\"></div>\\n  <div mat-dialog-content>\\n    <div class=\\\"mat-padding\\\" class=\\\"flex flex-col\\\">\\n      <mat-form-field class=\\\"mat-block\\\">\\n        <mat-label>Asset name</mat-label>\\n        <input matInput formControlName=\\\"assetName\\\" required>\\n        <mat-error *ngIf=\\\"editAssetFormGroup.get('assetName').hasError('required')\\\">\\n          Asset name is required.\\n        </mat-error>\\n      </mat-form-field>\\n      <div class=\\\"flex flex-row gap-2\\\">\\n        <tb-entity-subtype-autocomplete\\n            class=\\\"max-w-50% flex-full\\\"\\n            formControlName=\\\"assetType\\\"\\n            [required]=\\\"true\\\"\\n            [entityType]=\\\"'ASSET'\\\"\\n        ></tb-entity-subtype-autocomplete>\\n        <mat-form-field class=\\\"mat-block max-w-50% flex-full\\\">\\n          <mat-label>Label</mat-label>\\n          <input matInput formControlName=\\\"assetLabel\\\">\\n        </mat-form-field>\\n      </div>\\n      <div formGroupName=\\\"attributes\\\" class=\\\"flex flex-row gap-2\\\">\\n        <mat-form-field class=\\\"mat-block max-w-50% flex-full\\\">\\n          <mat-label>Latitude</mat-label>\\n          <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"latitude\\\">\\n        </mat-form-field>\\n        <mat-form-field class=\\\"mat-block max-w-50% flex-full\\\">\\n          <mat-label>Longitude</mat-label>\\n          <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"longitude\\\">\\n        </mat-form-field>\\n      </div>\\n    </div>\\n  </div>\\n  <div mat-dialog-actions class=\\\"flex flex-row\\\">\\n    <span class=\\\"flex-1\\\"></span>\\n    <button mat-button color=\\\"primary\\\"\\n            type=\\\"button\\\"\\n            [disabled]=\\\"(isLoading$ | async)\\\"\\n            (click)=\\\"cancel()\\\" cdkFocusInitial>\\n      Cancel\\n    </button>\\n    <button mat-button mat-raised-button color=\\\"primary\\\"\\n            type=\\\"submit\\\"\\n            style=\\\"margin-right: 20px;\\\"\\n            [disabled]=\\\"(isLoading$ | async) || editAssetForm.invalid || !editAssetForm.dirty\\\">\\n      Update\\n    </button>\\n  </div>\\n</form>\\n\",\"customCss\":\"\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\\nlet assetService = $injector.get(widgetContext.servicesMap.get('assetService'));\\nlet attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));\\n\\nopenEditAssetDialog();\\n\\nfunction openEditAssetDialog() {\\n    customDialog.customDialog(htmlTemplate, EditAssetDialogController).subscribe();\\n}\\n\\nfunction EditAssetDialogController(instance) {\\n    let vm = instance;\\n    \\n    vm.asset = null;\\n    vm.attributes = {};\\n    \\n    vm.editAssetFormGroup = vm.fb.group({\\n      assetName: ['', [vm.validators.required]],\\n      assetType: ['', [vm.validators.required]],\\n      assetLabel: [''],\\n      attributes: vm.fb.group({\\n          latitude: [null],\\n          longitude: [null]\\n      })      \\n    });\\n    \\n    vm.cancel = function() {\\n        vm.dialogRef.close(null);\\n    };\\n    \\n    vm.save = function() {\\n        vm.editAssetFormGroup.markAsPristine();\\n        vm.asset.name = vm.editAssetFormGroup.get('assetName').value,\\n        vm.asset.type = vm.editAssetFormGroup.get('assetType').value,\\n        vm.asset.label = vm.editAssetFormGroup.get('assetLabel').value\\n        assetService.saveAsset(vm.asset).subscribe(\\n            function () {\\n                saveAttributes().subscribe(\\n                    function () {\\n                        widgetContext.updateAliases();\\n                        vm.dialogRef.close(null);\\n                    }\\n                );\\n            }\\n        );\\n    };\\n    \\n    getEntityInfo();\\n    \\n    function getEntityInfo() {\\n        assetService.getAsset(entityId.id).subscribe(\\n            function (asset) {\\n                attributeService.getEntityAttributes(entityId, 'SERVER_SCOPE',\\n                                                    ['latitude', 'longitude']).subscribe(\\n                   function (attributes) {\\n                        for (let i = 0; i < attributes.length; i++) {\\n                            vm.attributes[attributes[i].key] = attributes[i].value; \\n                        }\\n                        vm.asset = asset;\\n                        vm.editAssetFormGroup.patchValue(\\n                            {\\n                                assetName: vm.asset.name,\\n                                assetType: vm.asset.type,\\n                                assetLabel: vm.asset.label,\\n                                attributes: {\\n                                    latitude: vm.attributes.latitude,\\n                                    longitude: vm.attributes.longitude\\n                                }\\n                            }, {emitEvent: false}\\n                        );\\n                   } \\n                );\\n            }\\n        );    \\n    }\\n    \\n    function saveAttributes() {\\n        let attributes = vm.editAssetFormGroup.get('attributes').value;\\n        let attributesArray = [];\\n        for (let key in attributes) {\\n            attributesArray.push({key: key, value: attributes[key]});\\n        }\\n        if (attributesArray.length > 0) {\\n            return attributeService.saveEntityAttributes(entityId, 'SERVER_SCOPE', attributesArray);\\n        } else {\\n            return widgetContext.rxjs.of([]);\\n        }\\n    }\\n}\",\"customResources\":[],\"id\":\"93931e52-5d7c-903e-67aa-b9435df44ff4\"},{\"name\":\"Delete asset\",\"icon\":\"delete\",\"type\":\"custom\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet dialogs = $injector.get(widgetContext.servicesMap.get('dialogs'));\\nlet assetService = $injector.get(widgetContext.servicesMap.get('assetService'));\\n\\nopenDeleteAssetDialog();\\n\\nfunction openDeleteAssetDialog() {\\n    let title = \\\"Are you sure you want to delete the asset \\\" + entityName +  \\\"?\\\";\\n    let content = \\\"Be careful, after the confirmation, the asset and all related data will become unrecoverable!\\\";\\n    dialogs.confirm(title, content, 'Cancel', 'Delete').subscribe(\\n        function (result) {\\n            if (result) {\\n                deleteAsset();\\n            }\\n        }\\n    );\\n}\\n\\nfunction deleteAsset() {\\n    assetService.deleteAsset(entityId.id).subscribe(\\n        function () {\\n            widgetContext.updateAliases();\\n        }\\n    );\\n}\\n\",\"id\":\"ec2708f6-9ff0-186b-e4fc-7635ebfa3074\"}]},\"configMode\":\"basic\",\"titleFont\":null,\"titleColor\":null}"
   },
   "externalId": null,
   "tags": [
diff --git a/application/src/main/data/json/system/widget_types/basic_gpio_control.json b/application/src/main/data/json/system/widget_types/basic_gpio_control.json
index df54377dc5..2471997b46 100644
--- a/application/src/main/data/json/system/widget_types/basic_gpio_control.json
+++ b/application/src/main/data/json/system/widget_types/basic_gpio_control.json
@@ -9,8 +9,8 @@
     "sizeX": 4,
     "sizeY": 2,
     "resources": [],
-    "templateHtml": "<fieldset class=\"gpio-panel\" style=\"height: 100%;\">\n    <section class=\"gpio-row\" fxLayout=\"row\" *ngFor=\"let row of rows\" \n            [ngStyle]=\"{'height': prefferedRowHeight+'px'}\">\n        <section fxFlex fxLayout=\"row\" *ngFor=\"let cell of row; let $index = index\">\n            <section fxLayout=\"row\" fxFlex *ngIf=\"cell\" fxLayoutAlign=\"{{$index===0 ? 'end center' : 'start center'}}\">\n                <span class=\"gpio-left-label\" [fxShow]=\"$index===0\">{{ cell.label }}</span>\n                <section fxLayout=\"row\" class=\"switch-panel\" fxLayoutAlign=\"start center\" [ngClass]=\"$index===0 ? 'col-0' : 'col-1'\"\n                      [ngStyle]=\"{'height': prefferedRowHeight+'px', 'backgroundColor':  switchPanelBackgroundColor }\">\n                    <span class=\"pin\" [fxShow]=\"$index===0\">{{cell.pin}}</span>\n                    <span fxFlex [fxShow]=\"$index===1\"></span>\n                    <mat-slide-toggle\n                        [disabled]=\"!rpcEnabled || executingRpcRequest\"\n                        [checked]=\"cell.enabled\" \n                        (change)=\"gpioToggleChange($event, cell)\" \n                        (click)=\"gpioClick($event, cell)\">\n                    </mat-slide-toggle>\n                    <span fxFlex [fxShow]=\"$index===0\"></span>\n                    <span class=\"pin\" [fxShow]=\"$index===1\">{{cell.pin}}</span>\n                </section>\n                <span class=\"gpio-right-label\" [fxShow]=\"$index===1\">{{ cell.label }}</span>\n            </section>\n            <section fxLayout=\"row\" fxFlex *ngIf=\"!cell\">\n                <span fxFlex [fxShow]=\"$index===0\"></span>\n                <span class=\"switch-panel\"\n                      [ngStyle]=\"{'height': prefferedRowHeight+'px', 'backgroundColor':  switchPanelBackgroundColor }\"></span>\n                <span fxFlex [fxShow]=\"$index===1\"></span>\n            </section>\n        </section>\n    </section>                            \n    <span class=\"error\" style=\"position: absolute; bottom: 5px;\" [fxShow]=\"rpcErrorText\">{{rpcErrorText}}</span>\n    <mat-progress-bar [fxShow]=\"executingRpcRequest\" style=\"position: absolute; bottom: 0;\" mode=\"indeterminate\"></mat-progress-bar>\n</fieldset>",
-    "templateCss": ".error {\n    font-size: 14px !important;\n    color: maroon;/*rgb(250,250,250);*/\n    background-color: transparent;\n    padding: 6px;\n}\n\n.error span {\n    margin: auto;\n}\n\n.gpio-panel {\n    padding-top: 10px;\n    white-space: nowrap;\n}\n\n.gpio-panel section[fxflex] {\n    min-width: 0px;\n}\n\n\n.switch-panel {\n    margin: 0;\n    height: 32px;\n    width: 66px;\n    min-width: 66px;\n}\n\n.switch-panel mat-slide-toggle {\n    margin: 0;\n    width: 36px;\n    min-width: 36px;\n}\n\n.switch-panel.col-0 mat-slide-toggle {\n    margin-left: 8px;\n    margin-right: 4px;\n}\n\n.switch-panel.col-1 mat-slide-toggle {\n    margin-left: 4px;\n    margin-right: 8px;\n}\n\n.gpio-row {\n    height: 32px;\n}\n\n.pin {\n    margin-top: auto;\n    margin-bottom: auto;\n    color: white;\n    font-size: 12px;\n    width: 16px;\n    min-width: 16px;\n}\n\n.switch-panel.col-0 .pin {\n    margin-left: auto;\n    padding-left: 2px;\n    text-align: right;\n}\n\n.switch-panel.col-1 .pin {\n    margin-right: auto;\n    \n    text-align: left;\n}\n\n.gpio-left-label {\n    margin-right: 8px;\n}\n\n.gpio-right-label {\n    margin-left: 8px;\n}",
+    "templateHtml": "<fieldset class=\"gpio-panel\" style=\"height: 100%;\">\n  <section class=\"gpio-row flex flex-row\" *ngFor=\"let row of rows\"\n           [style.height.px]=\"prefferedRowHeight\">\n    <section class=\"flex flex-1 flex-row\" *ngFor=\"let cell of row; let $index = index\">\n      <section class=\"flex flex-1 flex-row items-center\" [class.justify-end]=\"$index===0\" [class.justify-start]=\"$index!==0\" *ngIf=\"cell\">\n        <span class=\"gpio-left-label\" [class.!hidden]=\"$index!==0\">{{ cell.label }}</span>\n        <section class=\"switch-panel flex flex-row items-center justify-start\" [class.col-0]=\"$index===0\" [class.col-1]=\"$index!==0\"\n                 [style.height.px]=\"prefferedRowHeight\"\n                 [style.background-color]=\"switchPanelBackgroundColor\">\n          <span class=\"pin\" [class.!hidden]=\"$index!==0\">{{cell.pin}}</span>\n          <span class=\"flex-1\" [class.!hidden]=\"$index!==1\"></span>\n          <mat-slide-toggle\n              [disabled]=\"!rpcEnabled || executingRpcRequest\"\n              [checked]=\"cell.enabled\"\n              (change)=\"gpioToggleChange($event, cell)\"\n              (click)=\"gpioClick($event, cell)\">\n          </mat-slide-toggle>\n          <span class=\"flex-1\" [class.!hidden]=\"$index!==0\"></span>\n          <span class=\"pin\" [class.!hidden]=\"$index!==1\">{{cell.pin}}</span>\n        </section>\n        <span class=\"gpio-right-label\" [class.!hidden]=\"$index!==1\">{{ cell.label }}</span>\n      </section>\n      <section class=\"flex flex-1 flex-row\" *ngIf=\"!cell\">\n        <span class=\"flex-1\" [class.!hidden]=\"$index!==0\"></span>\n        <span class=\"switch-panel\"\n              [style.height.px]=\"prefferedRowHeight\"\n              [style.background-color]=\"switchPanelBackgroundColor\"></span>\n        <span class=\"flex-1\" [class.!hidden]=\"$index!==1\"></span>\n      </section>\n    </section>\n  </section>\n  <span class=\"error\" style=\"position: absolute; bottom: 5px;\" [class.!hidden]=\"!rpcErrorText\">{{rpcErrorText}}</span>\n  <mat-progress-bar [class.!hidden]=\"!executingRpcRequest\" style=\"position: absolute; bottom: 0;\" mode=\"indeterminate\"></mat-progress-bar>\n</fieldset>",
+    "templateCss": ".error {\n    font-size: 14px !important;\n    color: maroon;/*rgb(250,250,250);*/\n    background-color: transparent;\n    padding: 6px;\n}\n\n.error span {\n    margin: auto;\n}\n\n.gpio-panel {\n    padding-top: 10px;\n    white-space: nowrap;\n}\n\n.gpio-panel section.flex-1 {\n    min-width: 0px;\n}\n\n\n.switch-panel {\n    margin: 0;\n    height: 32px;\n    width: 66px;\n    min-width: 66px;\n}\n\n.switch-panel mat-slide-toggle {\n    margin: 0;\n    width: 36px;\n    min-width: 36px;\n}\n\n.switch-panel.col-0 mat-slide-toggle {\n    margin-left: 8px;\n    margin-right: 4px;\n}\n\n.switch-panel.col-1 mat-slide-toggle {\n    margin-left: 4px;\n    margin-right: 8px;\n}\n\n.gpio-row {\n    height: 32px;\n}\n\n.pin {\n    margin-top: auto;\n    margin-bottom: auto;\n    color: white;\n    font-size: 12px;\n    width: 16px;\n    min-width: 16px;\n}\n\n.switch-panel.col-0 .pin {\n    margin-left: auto;\n    padding-left: 2px;\n    text-align: right;\n}\n\n.switch-panel.col-1 .pin {\n    margin-right: auto;\n\n    text-align: left;\n}\n\n.gpio-left-label {\n    margin-right: 8px;\n}\n\n.gpio-right-label {\n    margin-left: 8px;\n}",
     "controllerScript": "var namespace;\nvar cssParser = new cssjs();\n\nself.onInit = function() {\n    var utils = self.ctx.$injector.get(self.ctx.servicesMap.get('utils'));\n    namespace = 'gpio-control-' + utils.guid();\n    cssParser.testMode = false;\n    cssParser.cssPreviewNamespace = namespace;\n    self.ctx.$container.addClass(namespace);\n    self.ctx.ngZone.run(function() {\n       init(); \n    });\n}\n\nfunction init() {\n        \n    var i, gpio;\n    var scope = self.ctx.$scope;\n    var settings = self.ctx.settings;\n    scope.gpioList = [];\n    for (var g = 0; g < settings.gpioList.length; g++) {\n        gpio = settings.gpioList[g];\n        scope.gpioList.push(\n            {\n                row: gpio.row,\n                col: gpio.col,\n                pin: gpio.pin,\n                label: gpio.label,\n                enabled: false\n            }\n        );\n    }\n\n    scope.requestTimeout = settings.requestTimeout || 1000;\n\n    scope.switchPanelBackgroundColor = settings.switchPanelBackgroundColor || tinycolor('green').lighten(2).toRgbString();\n\n    scope.gpioStatusRequest = {\n        method: \"getGpioStatus\",\n        paramsBody: \"{}\"\n    };\n    \n    if (settings.gpioStatusRequest) {\n        scope.gpioStatusRequest.method = settings.gpioStatusRequest.method || scope.gpioStatusRequest.method;\n        scope.gpioStatusRequest.paramsBody = settings.gpioStatusRequest.paramsBody || scope.gpioStatusRequest.paramsBody;\n    }\n    \n    scope.gpioStatusChangeRequest = {\n        method: \"setGpioStatus\",\n        paramsBody: \"{\\n   \\\"pin\\\": \\\"{$pin}\\\",\\n   \\\"enabled\\\": \\\"{$enabled}\\\"\\n}\"\n    };\n    \n    if (settings.gpioStatusChangeRequest) {\n        scope.gpioStatusChangeRequest.method = settings.gpioStatusChangeRequest.method || scope.gpioStatusChangeRequest.method;\n        scope.gpioStatusChangeRequest.paramsBody = settings.gpioStatusChangeRequest.paramsBody || scope.gpioStatusChangeRequest.paramsBody;\n    }\n    \n    scope.parseGpioStatusFunction = \"return body[pin] === true;\";\n    \n    if (settings.parseGpioStatusFunction && settings.parseGpioStatusFunction.length > 0) {\n        scope.parseGpioStatusFunction = settings.parseGpioStatusFunction;\n    }\n    \n    scope.parseGpioStatusFunction = new Function(\"body, pin\", scope.parseGpioStatusFunction);\n    \n    function requestGpioStatus() {\n        self.ctx.controlApi.sendTwoWayCommand(scope.gpioStatusRequest.method, \n                            scope.gpioStatusRequest.paramsBody, \n                            scope.requestTimeout)\n            .subscribe(\n                function success(responseBody) {\n                    for (var g = 0; g < scope.gpioList.length; g++) {\n                        var gpio = scope.gpioList[g];\n                        var enabled = scope.parseGpioStatusFunction.apply(this, [responseBody, gpio.pin]);\n                        gpio.enabled = enabled;   \n                        self.ctx.detectChanges();\n                    }\n                }\n            );\n    }\n    \n    function changeGpioStatus(gpio) {\n        var pin = gpio.pin + '';\n        var enabled = !gpio.enabled;\n        enabled = enabled === true ? 'true' : 'false';\n        var paramsBody = scope.gpioStatusChangeRequest.paramsBody;\n        var requestBody = JSON.parse(paramsBody.replace(\"\\\"{$pin}\\\"\", pin).replace(\"\\\"{$enabled}\\\"\", enabled));\n        self.ctx.controlApi.sendTwoWayCommand(scope.gpioStatusChangeRequest.method, \n                                    requestBody, scope.requestTimeout)\n                    .subscribe(\n                        function success(responseBody) {\n                            var enabled = scope.parseGpioStatusFunction.apply(this, [responseBody, gpio.pin]);\n                            gpio.enabled = enabled;\n                            self.ctx.detectChanges();\n                        }\n                    );\n    }\n    \n    scope.gpioCells = {};\n    var rowCount = 0;\n    for (i = 0; i < scope.gpioList.length; i++) {\n        gpio = scope.gpioList[i];\n        scope.gpioCells[gpio.row+'_'+gpio.col] = gpio;\n        rowCount = Math.max(rowCount, gpio.row+1);\n    }\n    \n    scope.prefferedRowHeight = 32;\n    scope.rows = [];\n    for (i = 0; i < rowCount; i++) {\n        var row = [];\n        for (var c =0; c<2;c++) {\n            if (scope.gpioCells[i+'_'+c]) {\n                row[c] = scope.gpioCells[i+'_'+c];\n            } else {\n                row[c] = null;\n            }\n        }\n        scope.rows.push(row);\n    }\n\n    scope.gpioClick = function($event, gpio) {\n        if (scope.rpcEnabled && !scope.executingRpcRequest) {\n            changeGpioStatus(gpio);\n        }\n    };\n    \n    scope.gpioToggleChange = function($event, gpio) {\n        gpio.enabled = !$event.checked;\n        $event.source.toggle();\n        self.ctx.detectChanges();\n    }\n    \n    if (scope.rpcEnabled) {\n        requestGpioStatus();   \n    }\n    \n    self.onResize();\n}\n\nself.onResize = function() {\n    var scope = self.ctx.$scope;\n    var rowCount = scope.rows.length;\n    var prefferedRowHeight = (self.ctx.height - 35)/rowCount;\n    prefferedRowHeight = Math.min(32, prefferedRowHeight);\n    prefferedRowHeight = Math.max(12, prefferedRowHeight);\n    scope.prefferedRowHeight = prefferedRowHeight;\n    var ratio = prefferedRowHeight/32;\n    \n    var css = '.mat-slide-toggle .mat-slide-toggle-bar {\\n' +\n        '   height: ' + 14*ratio+'px;\\n'+\n        '   width: ' + 36*ratio+'px;\\n'+\n    '}\\n';\n    css += '.mat-slide-toggle .mat-slide-toggle-thumb-container {\\n' +\n        '   height: ' + 20*ratio+'px;\\n'+\n        '   width: ' + 20*ratio+'px;\\n'+\n    '}\\n';\n    css += '.mat-slide-toggle .mat-slide-toggle-thumb {\\n' +\n        '   height: ' + 20*ratio+'px;\\n'+\n        '   width: ' + 20*ratio+'px;\\n'+\n    '}\\n';\n    css += '.mat-slide-toggle .mat-slide-toggle-ripple {\\n' +\n        '   height: ' + 40*ratio+'px;\\n'+\n        '   width: ' + 40*ratio+'px;\\n'+\n        '   top: calc(50% - '+20*ratio+'px);\\n'+\n        '   left: calc(50% - '+20*ratio+'px);\\n'+\n    '}\\n';\n    css += '.gpio-left-label, .gpio-right-label {\\n' +\n        '   font-size: ' + 16*ratio+'px;\\n'+\n    '}\\n';\n    var pinsFontSize = Math.max(9, 12*ratio);\n    css += '.pin {\\n' +\n        '   font-size: ' + pinsFontSize+'px;\\n'+\n    '}\\n';\n\n    cssParser.createStyleElement(namespace, css);\n    \n    self.ctx.detectChanges();\n}\n\nself.onDestroy = function() {\n}\n",
     "settingsSchema": "",
     "dataKeySettingsSchema": "{}\n",
diff --git a/application/src/main/data/json/system/widget_types/basic_gpio_panel.json b/application/src/main/data/json/system/widget_types/basic_gpio_panel.json
index 5a46e216a1..568b6efe75 100644
--- a/application/src/main/data/json/system/widget_types/basic_gpio_panel.json
+++ b/application/src/main/data/json/system/widget_types/basic_gpio_panel.json
@@ -9,8 +9,8 @@
     "sizeX": 5,
     "sizeY": 2,
     "resources": [],
-    "templateHtml": "<div class=\"gpio-panel\" style=\"height: 100%;\">\n    <section fxLayout=\"row\" *ngFor=\"let row of rows\">\n        <section fxFlex fxLayout=\"row\" *ngFor=\"let cell of row; let $index = index\">\n            <section fxLayout=\"row\" fxFlex *ngIf=\"cell\" fxLayoutAlign=\"{{$index===0 ? 'end center' : 'start center'}}\">\n                <span class=\"gpio-left-label\" [fxShow]=\"$index===0\">{{ cell.label }}</span>\n                <section fxLayout=\"row\" class=\"led-panel\" [ngClass]=\"$index===0 ? 'col-0' : 'col-1'\"\n                      [ngStyle]=\"{backgroundColor: ledPanelBackgroundColor}\">\n                    <span class=\"pin\" [fxShow]=\"$index===0\">{{cell.pin}}</span>\n                    <span class=\"led-container\">\n                        <tb-led-light [size]=\"prefferedRowHeight\"\n                                      [colorOn]=\"cell.colorOn\"\n                                      [colorOff]=\"cell.colorOff\"\n                                      [offOpacity]=\"'0.9'\"\n                                      [enabled]=\"cell.enabled\">\n                        </tb-led-light>\n                    </span>\n                    <span class=\"pin\" [fxShow]=\"$index===1\">{{cell.pin}}</span>\n                </section>\n                <span class=\"gpio-right-label\" [fxShow]=\"$index===1\">{{ cell.label }}</span>\n            </section>\n            <section fxLayout=\"row\" fxFlex *ngIf=\"!cell\">\n                <span fxFlex [fxShow]=\"$index===0\"></span>\n                <span class=\"led-panel\"\n                      [ngStyle]=\"{height: prefferedRowHeight+'px', backgroundColor: ledPanelBackgroundColor}\"></span>\n                <span fxFlex [fxShow]=\"$index===1\"></span>\n            </section>\n        </section>\n    </section>                            \n</div>",
-    "templateCss": ".error {\n    font-size: 14px !important;\n    color: maroon;/*rgb(250,250,250);*/\n    background-color: transparent;\n    padding: 6px;\n}\n\n.error span {\n    margin: auto;\n}\n\n.gpio-panel {\n    padding-top: 10px;\n    white-space: nowrap;\n}\n\n.gpio-panel section[fxflex] {\n    min-width: 0px;\n}\n\n\n.gpio-panel tb-led-light > div {\n    margin: auto;\n}\n\n.led-panel {\n    margin: 0;\n    width: 66px;\n    min-width: 66px;\n}\n\n.led-container {\n    width: 48px;\n    min-width: 48px;\n}\n\n.pin {\n    margin-top: auto;\n    margin-bottom: auto;\n    color: white;\n    font-size: 12px;\n    width: 16px;\n    min-width: 16px;\n}\n\n.led-panel.col-0 .pin {\n    margin-left: auto;\n    padding-left: 2px;\n    text-align: right;\n}\n\n.led-panel.col-1 .pin {\n    margin-right: auto;\n    \n    text-align: left;\n}\n\n.gpio-left-label {\n    margin-right: 8px;\n}\n\n.gpio-right-label {\n    margin-left: 8px;\n}",
+    "templateHtml": "<div class=\"gpio-panel\" style=\"height: 100%;\">\n  <section class=\"flex flex-row\" *ngFor=\"let row of rows\">\n    <section class=\"flex flex-1 flex-row\" *ngFor=\"let cell of row; let $index = index\">\n      <section class=\"flex flex-1 flex-row\" [class.justify-end]=\"$index===0\" [class.justify-start]=\"$index!==0\" *ngIf=\"cell\">\n        <span class=\"gpio-left-label\" [class.!hidden]=\"$index!==0\">{{ cell.label }}</span>\n        <section class=\"led-panel flex flex-row\" [class.col-0]=\"$index===0\" [class.col-1]=\"$index!==0\"\n                 [style.background-color]=\"ledPanelBackgroundColor\">\n          <span class=\"pin\" [class.!hidden]=\"$index!==0\">{{cell.pin}}</span>\n          <span class=\"led-container\">\n                        <tb-led-light [size]=\"prefferedRowHeight\"\n                                      [colorOn]=\"cell.colorOn\"\n                                      [colorOff]=\"cell.colorOff\"\n                                      [offOpacity]=\"'0.9'\"\n                                      [enabled]=\"cell.enabled\">\n                        </tb-led-light>\n                    </span>\n          <span class=\"pin\" [class.!hidden]=\"$index!==1\">{{cell.pin}}</span>\n        </section>\n        <span class=\"gpio-right-label\" [class.!hidden]=\"$index!==1\">{{ cell.label }}</span>\n      </section>\n      <section class=\"flex flex-1 flex-row\" *ngIf=\"!cell\">\n        <span class=\"flex-1\" [class.!hidden]=\"$index!==0\"></span>\n        <span class=\"led-panel\"\n              [style.height.px]=\"prefferedRowHeight\"\n              [style.background-color]=\"ledPanelBackgroundColor\"></span>\n        <span class=\"flex-1\" [class.!hidden]=\"$index!==1\"></span>\n      </section>\n    </section>\n  </section>\n</div>",
+    "templateCss": ".error {\n    font-size: 14px !important;\n    color: maroon;/*rgb(250,250,250);*/\n    background-color: transparent;\n    padding: 6px;\n}\n\n.error span {\n    margin: auto;\n}\n\n.gpio-panel {\n    padding-top: 10px;\n    white-space: nowrap;\n}\n\n.gpio-panel section.flex-1 {\n    min-width: 0px;\n}\n\n\n.gpio-panel tb-led-light > div {\n    margin: auto;\n}\n\n.led-panel {\n    margin: 0;\n    width: 66px;\n    min-width: 66px;\n}\n\n.led-container {\n    width: 48px;\n    min-width: 48px;\n}\n\n.pin {\n    margin-top: auto;\n    margin-bottom: auto;\n    color: white;\n    font-size: 12px;\n    width: 16px;\n    min-width: 16px;\n}\n\n.led-panel.col-0 .pin {\n    margin-left: auto;\n    padding-left: 2px;\n    text-align: right;\n}\n\n.led-panel.col-1 .pin {\n    margin-right: auto;\n\n    text-align: left;\n}\n\n.gpio-left-label {\n    margin-right: 8px;\n}\n\n.gpio-right-label {\n    margin-left: 8px;\n}",
     "controllerScript": "var namespace;\nvar cssParser = new cssjs();\n\nself.onInit = function() {\n    var utils = self.ctx.$injector.get(self.ctx.servicesMap.get('utils'));\n    namespace = 'gpio-panel-' + utils.guid();\n    cssParser.testMode = false;\n    cssParser.cssPreviewNamespace = namespace;\n    self.ctx.$container.addClass(namespace);\n    self.ctx.ngZone.run(function() {\n       init(); \n    });\n}\n\nfunction init() {\n    var i, gpio;\n    \n    var scope = self.ctx.$scope;\n    var settings = self.ctx.settings;\n    \n    scope.gpioList = [];\n    scope.gpioByPin = {};\n    for (var g = 0; g < settings.gpioList.length; g++) {\n        gpio = settings.gpioList[g];\n        scope.gpioList.push(\n            {\n                row: gpio.row,\n                col: gpio.col,\n                pin: gpio.pin,\n                label: gpio.label,\n                enabled: false,\n                colorOn: tinycolor(gpio.color).lighten(20).toHexString(),\n                colorOff: tinycolor(gpio.color).darken().toHexString()\n            }\n        );\n        scope.gpioByPin[gpio.pin] = scope.gpioList[scope.gpioList.length-1];\n    }\n\n    scope.ledPanelBackgroundColor = settings.ledPanelBackgroundColor || tinycolor('green').lighten(2).toRgbString();\n\n    scope.gpioCells = {};\n    var rowCount = 0;\n    for (i = 0; i < scope.gpioList.length; i++) {\n        gpio = scope.gpioList[i];\n        scope.gpioCells[gpio.row+'_'+gpio.col] = gpio;\n        rowCount = Math.max(rowCount, gpio.row+1);\n    }\n    \n    scope.prefferedRowHeight = 32;\n    scope.rows = [];\n    for (i = 0; i < rowCount; i++) {\n        var row = [];\n        for (var c =0; c<2;c++) {\n            if (scope.gpioCells[i+'_'+c]) {\n                row[c] = scope.gpioCells[i+'_'+c];\n            } else {\n                row[c] = null;\n            }\n        }\n        scope.rows.push(row);\n    }    \n    \n    self.onResize();\n}\n\nself.onDataUpdated = function() {\n    var changed = false;\n    for (var d = 0; d < self.ctx.data.length; d++) {\n        var cellData = self.ctx.data[d];\n        var dataKey = cellData.dataKey;\n        var gpio = self.ctx.$scope.gpioByPin[dataKey.label];\n        if (gpio) {\n            var enabled = false;\n            if (cellData.data.length > 0) {\n                var tvPair = cellData.data[cellData.data.length - 1];\n                enabled = (tvPair[1] === true || tvPair[1] === 'true');\n            }\n            if (gpio.enabled != enabled) {\n                changed = true;\n                gpio.enabled = enabled;\n            }\n        }\n    }\n    if (changed) {\n        self.ctx.detectChanges();\n    }    \n}\n\nself.onResize = function() {\n    var rowCount = self.ctx.$scope.rows.length;\n    var prefferedRowHeight = (self.ctx.height - 35)/rowCount;\n    prefferedRowHeight = Math.min(32, prefferedRowHeight);\n    prefferedRowHeight = Math.max(12, prefferedRowHeight);\n    self.ctx.$scope.prefferedRowHeight = prefferedRowHeight;\n    \n    var ratio = prefferedRowHeight/32;\n    \n    var css = '.gpio-left-label, .gpio-right-label {\\n' +\n        '   font-size: ' + 16*ratio+'px;\\n'+\n    '}\\n';\n    var pinsFontSize = Math.max(9, 12*ratio);\n    css += '.pin {\\n' +\n        '   font-size: ' + pinsFontSize+'px;\\n'+\n    '}\\n';\n   \n    cssParser.createStyleElement(namespace, css); \n   \n    self.ctx.detectChanges();\n}\n\nself.onDestroy = function() {\n}\n",
     "settingsSchema": "",
     "dataKeySettingsSchema": "{}\n",
diff --git a/application/src/main/data/json/system/widget_types/device_admin_table.json b/application/src/main/data/json/system/widget_types/device_admin_table.json
index 014734df54..96fd7b8919 100644
--- a/application/src/main/data/json/system/widget_types/device_admin_table.json
+++ b/application/src/main/data/json/system/widget_types/device_admin_table.json
@@ -18,7 +18,7 @@
     "dataKeySettingsDirective": "tb-entities-table-key-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-entities-table-basic-config",
-    "defaultConfig": "{\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":86400000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"4px\",\"settings\":{\"entitiesTitle\":\"Device admin table\",\"enableSearch\":true,\"enableSelectColumnDisplay\":true,\"enableStickyHeader\":true,\"enableStickyAction\":true,\"showCellActionsMenu\":true,\"reserveSpaceForHiddenAction\":\"true\",\"displayEntityName\":false,\"displayEntityLabel\":false,\"displayEntityType\":false,\"displayPagination\":true,\"defaultPageSize\":10,\"defaultSortOrder\":\"entityName\",\"useRowStyleFunction\":false},\"title\":\"Device admin table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"datasources\":[{\"type\":\"function\",\"name\":\"Simulated\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Entity name\",\"color\":\"#4caf50\",\"settings\":{},\"_hash\":0.8332260553092266,\"funcBody\":\"return 'Simulated';\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Entity type\",\"color\":\"#f44336\",\"settings\":{},\"_hash\":0.08583217494773887,\"funcBody\":\"return 'Device';\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#f44336\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.6401141393938932,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"showTitleIcon\":false,\"titleIcon\":\"more_horiz\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"titleTooltip\":\"\",\"widgetStyle\":{},\"displayTimewindow\":true,\"actions\":{\"headerButton\":[{\"name\":\"Add device\",\"icon\":\"add\",\"type\":\"customPretty\",\"customHtml\":\"<form #addDeviceForm=\\\"ngForm\\\" [formGroup]=\\\"addDeviceFormGroup\\\"\\n      (ngSubmit)=\\\"save()\\\" style=\\\"width: 480px;\\\">\\n  <mat-toolbar fxLayout=\\\"row\\\" color=\\\"primary\\\">\\n    <h2>Add device</h2>\\n    <span fxFlex></span>\\n    <button mat-icon-button\\n            (click)=\\\"cancel()\\\"\\n            type=\\\"button\\\">\\n      <mat-icon class=\\\"material-icons\\\">close</mat-icon>\\n    </button>\\n  </mat-toolbar>\\n  <mat-progress-bar color=\\\"warn\\\" mode=\\\"indeterminate\\\" *ngIf=\\\"isLoading$ | async\\\">\\n  </mat-progress-bar>\\n  <div style=\\\"height: 4px;\\\" *ngIf=\\\"!(isLoading$ | async)\\\"></div>\\n  <div mat-dialog-content>\\n      <div class=\\\"mat-padding\\\" fxLayout=\\\"column\\\">\\n            <mat-form-field class=\\\"mat-block\\\">\\n                <mat-label>Device name</mat-label>\\n                <input matInput formControlName=\\\"deviceName\\\" required>\\n                <mat-error *ngIf=\\\"addDeviceFormGroup.get('deviceName').hasError('required')\\\">\\n                    Device name is required.\\n                </mat-error>\\n            </mat-form-field>\\n            <div fxLayout=\\\"row\\\" fxLayoutGap=\\\"8px\\\">\\n                <tb-entity-subtype-autocomplete\\n                    fxFlex=\\\"50\\\"\\n                    formControlName=\\\"deviceType\\\"\\n                    [required]=\\\"true\\\"\\n                    [entityType]=\\\"'DEVICE'\\\"\\n                ></tb-entity-subtype-autocomplete>\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Label</mat-label>\\n                    <input matInput formControlName=\\\"deviceLabel\\\">\\n                </mat-form-field>\\n            </div>\\n            <div formGroupName=\\\"attributes\\\" fxLayout=\\\"row\\\" fxLayoutGap=\\\"8px\\\">\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Latitude</mat-label>\\n                    <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"latitude\\\">\\n                </mat-form-field>\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Longitude</mat-label>\\n                    <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"longitude\\\">\\n                </mat-form-field>\\n            </div>\\n      </div>  \\n  </div>\\n  <div mat-dialog-actions fxLayout=\\\"row\\\">\\n    <span fxFlex></span>\\n    <button mat-button color=\\\"primary\\\"\\n            type=\\\"button\\\"\\n            [disabled]=\\\"(isLoading$ | async)\\\"\\n            (click)=\\\"cancel()\\\" cdkFocusInitial>\\n      Cancel\\n    </button>\\n    <button mat-button mat-raised-button color=\\\"primary\\\"\\n            style=\\\"margin-right: 20px;\\\"\\n            type=\\\"submit\\\"\\n            [disabled]=\\\"(isLoading$ | async) || addDeviceForm.invalid || !addDeviceForm.dirty\\\">\\n      Create\\n    </button>\\n  </div>\\n</form>\\n\",\"customCss\":\"\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\\nlet attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));\\n\\nopenAddDeviceDialog();\\n\\nfunction openAddDeviceDialog() {\\n    customDialog.customDialog(htmlTemplate, AddDeviceDialogController).subscribe();\\n}\\n\\nfunction AddDeviceDialogController(instance) {\\n    let vm = instance;\\n    \\n    vm.addDeviceFormGroup = vm.fb.group({\\n      deviceName: ['', [vm.validators.required]],\\n      deviceType: ['', [vm.validators.required]],\\n      deviceLabel: [''],\\n      attributes: vm.fb.group({\\n          latitude: [null],\\n          longitude: [null]\\n      })      \\n    });\\n    \\n    vm.cancel = function() {\\n        vm.dialogRef.close(null);\\n    };\\n    \\n    vm.save = function() {\\n        vm.addDeviceFormGroup.markAsPristine();\\n        let device = {\\n            name: vm.addDeviceFormGroup.get('deviceName').value,\\n            type: vm.addDeviceFormGroup.get('deviceType').value,\\n            label: vm.addDeviceFormGroup.get('deviceLabel').value\\n        };\\n        deviceService.saveDevice(device).subscribe(\\n            function (device) {\\n                saveAttributes(device.id).subscribe(\\n                    function () {\\n                        widgetContext.updateAliases();\\n                        vm.dialogRef.close(null);\\n                    }\\n                );\\n            }\\n        );\\n    };\\n    \\n    function saveAttributes(entityId) {\\n        let attributes = vm.addDeviceFormGroup.get('attributes').value;\\n        let attributesArray = [];\\n        for (let key in attributes) {\\n            attributesArray.push({key: key, value: attributes[key]});\\n        }\\n        if (attributesArray.length > 0) {\\n            return attributeService.saveEntityAttributes(entityId, \\\"SERVER_SCOPE\\\", attributesArray);\\n        } else {\\n            return widgetContext.rxjs.of([]);\\n        }\\n    }\\n}\",\"customResources\":[],\"id\":\"70837a9d-c3de-a9a7-03c5-dccd14998758\"}],\"actionCellButton\":[{\"name\":\"Edit device\",\"icon\":\"edit\",\"useShowWidgetActionFunction\":null,\"showWidgetActionFunction\":\"return true;\",\"type\":\"customPretty\",\"customHtml\":\"<form #editDeviceForm=\\\"ngForm\\\" [formGroup]=\\\"editDeviceFormGroup\\\"\\n      (ngSubmit)=\\\"save()\\\" style=\\\"width: 480px;\\\">\\n  <mat-toolbar fxLayout=\\\"row\\\" color=\\\"primary\\\">\\n    <h2>Edit device</h2>\\n    <span fxFlex></span>\\n    <button mat-icon-button\\n            (click)=\\\"cancel()\\\"\\n            type=\\\"button\\\">\\n      <mat-icon class=\\\"material-icons\\\">close</mat-icon>\\n    </button>\\n  </mat-toolbar>\\n  <mat-progress-bar color=\\\"warn\\\" mode=\\\"indeterminate\\\" *ngIf=\\\"isLoading$ | async\\\">\\n  </mat-progress-bar>\\n  <div style=\\\"height: 4px;\\\" *ngIf=\\\"!(isLoading$ | async)\\\"></div>\\n  <div mat-dialog-content>\\n      <div class=\\\"mat-padding\\\" fxLayout=\\\"column\\\">\\n            <mat-form-field class=\\\"mat-block\\\">\\n                <mat-label>Device name</mat-label>\\n                <input matInput formControlName=\\\"deviceName\\\" required>\\n                <mat-error *ngIf=\\\"editDeviceFormGroup.get('deviceName').hasError('required')\\\">\\n                    Device name is required.\\n                </mat-error>\\n            </mat-form-field>\\n            <div fxLayout=\\\"row\\\" fxLayoutGap=\\\"8px\\\">\\n                <tb-entity-subtype-autocomplete\\n                    fxFlex=\\\"50\\\"\\n                    formControlName=\\\"deviceType\\\"\\n                    [required]=\\\"true\\\"\\n                    [entityType]=\\\"'DEVICE'\\\"\\n                ></tb-entity-subtype-autocomplete>\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Label</mat-label>\\n                    <input matInput formControlName=\\\"deviceLabel\\\">\\n                </mat-form-field>\\n            </div>\\n            <div formGroupName=\\\"attributes\\\" fxLayout=\\\"row\\\" fxLayoutGap=\\\"8px\\\">\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Latitude</mat-label>\\n                    <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"latitude\\\">\\n                </mat-form-field>\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Longitude</mat-label>\\n                    <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"longitude\\\">\\n                </mat-form-field>\\n            </div>\\n      </div>  \\n  </div>\\n  <div mat-dialog-actions fxLayout=\\\"row\\\">\\n    <span fxFlex></span>\\n    <button mat-button color=\\\"primary\\\"\\n            type=\\\"button\\\"\\n            [disabled]=\\\"(isLoading$ | async)\\\"\\n            (click)=\\\"cancel()\\\" cdkFocusInitial>\\n      Cancel\\n    </button>\\n    <button mat-button mat-raised-button color=\\\"primary\\\"\\n            style=\\\"margin-right: 20px;\\\"\\n            type=\\\"submit\\\"\\n            [disabled]=\\\"(isLoading$ | async) || editDeviceForm.invalid || !editDeviceForm.dirty\\\">\\n      Update\\n    </button>\\n  </div>\\n</form>\\n\",\"customCss\":\"\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\\nlet attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));\\n\\nopenEditDeviceDialog();\\n\\nfunction openEditDeviceDialog() {\\n    customDialog.customDialog(htmlTemplate, EditDeviceDialogController).subscribe();\\n}\\n\\nfunction EditDeviceDialogController(instance) {\\n    let vm = instance;\\n    \\n    vm.device = null;\\n    vm.attributes = {};\\n    \\n    vm.editDeviceFormGroup = vm.fb.group({\\n      deviceName: ['', [vm.validators.required]],\\n      deviceType: ['', [vm.validators.required]],\\n      deviceLabel: [''],\\n      attributes: vm.fb.group({\\n          latitude: [null],\\n          longitude: [null]\\n      })      \\n    });\\n    \\n    vm.cancel = function() {\\n        vm.dialogRef.close(null);\\n    };\\n    \\n    vm.save = function() {\\n        vm.editDeviceFormGroup.markAsPristine();\\n        if (vm.editDeviceFormGroup.get('deviceType').value !== vm.device.type) {\\n            delete vm.device.deviceProfileId;\\n        }\\n        vm.device.name = vm.editDeviceFormGroup.get('deviceName').value,\\n        vm.device.type = vm.editDeviceFormGroup.get('deviceType').value,\\n        vm.device.label = vm.editDeviceFormGroup.get('deviceLabel').value\\n        deviceService.saveDevice(vm.device).subscribe(\\n            function () {\\n                saveAttributes().subscribe(\\n                    function () {\\n                        widgetContext.updateAliases();\\n                        vm.dialogRef.close(null);\\n                    }\\n                );\\n            }\\n        );\\n    };\\n    \\n    getEntityInfo();\\n    \\n    function getEntityInfo() {\\n        deviceService.getDevice(entityId.id).subscribe(\\n            function (device) {\\n                attributeService.getEntityAttributes(entityId, 'SERVER_SCOPE',\\n                                                    ['latitude', 'longitude']).subscribe(\\n                   function (attributes) {\\n                        for (let i = 0; i < attributes.length; i++) {\\n                            vm.attributes[attributes[i].key] = attributes[i].value; \\n                        }\\n                        vm.device = device;\\n                        vm.editDeviceFormGroup.patchValue(\\n                            {\\n                                deviceName: vm.device.name,\\n                                deviceType: vm.device.type,\\n                                deviceLabel: vm.device.label,\\n                                attributes: {\\n                                    latitude: vm.attributes.latitude,\\n                                    longitude: vm.attributes.longitude\\n                                }\\n                            }, {emitEvent: false}\\n                        );\\n                   } \\n                );\\n            }\\n        );    \\n    }\\n    \\n    function saveAttributes() {\\n        let attributes = vm.editDeviceFormGroup.get('attributes').value;\\n        let attributesArray = [];\\n        for (let key in attributes) {\\n            attributesArray.push({key: key, value: attributes[key]});\\n        }\\n        if (attributesArray.length > 0) {\\n            return attributeService.saveEntityAttributes(entityId, 'SERVER_SCOPE', attributesArray);\\n        } else {\\n            return widgetContext.rxjs.of([]);\\n        }\\n    }\\n}\",\"customResources\":[],\"openInSeparateDialog\":false,\"openInPopover\":false,\"id\":\"93931e52-5d7c-903e-67aa-b9435df44ff4\"},{\"name\":\"Delete device\",\"icon\":\"delete\",\"type\":\"custom\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet dialogs = $injector.get(widgetContext.servicesMap.get('dialogs'));\\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\\n\\nopenDeleteDeviceDialog();\\n\\nfunction openDeleteDeviceDialog() {\\n    let title = \\\"Are you sure you want to delete the device \\\" + entityName +  \\\"?\\\";\\n    let content = \\\"Be careful, after the confirmation, the device and all related data will become unrecoverable!\\\";\\n    dialogs.confirm(title, content, 'Cancel', 'Delete').subscribe(\\n        function (result) {\\n            if (result) {\\n                deleteDevice();\\n            }\\n        }\\n    );\\n}\\n\\nfunction deleteDevice() {\\n    deviceService.deleteDevice(entityId.id).subscribe(\\n        function () {\\n            widgetContext.updateAliases();\\n        }\\n    );\\n}\\n\",\"id\":\"ec2708f6-9ff0-186b-e4fc-7635ebfa3074\"}]},\"configMode\":\"basic\"}"
+    "defaultConfig": "{\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":86400000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"4px\",\"settings\":{\"entitiesTitle\":\"Device admin table\",\"enableSearch\":true,\"enableSelectColumnDisplay\":true,\"enableStickyHeader\":true,\"enableStickyAction\":true,\"showCellActionsMenu\":true,\"reserveSpaceForHiddenAction\":\"true\",\"displayEntityName\":false,\"displayEntityLabel\":false,\"displayEntityType\":false,\"displayPagination\":true,\"defaultPageSize\":10,\"defaultSortOrder\":\"entityName\",\"useRowStyleFunction\":false},\"title\":\"Device admin table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"datasources\":[{\"type\":\"function\",\"name\":\"Simulated\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Entity name\",\"color\":\"#4caf50\",\"settings\":{},\"_hash\":0.8332260553092266,\"funcBody\":\"return 'Simulated';\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Entity type\",\"color\":\"#f44336\",\"settings\":{},\"_hash\":0.08583217494773887,\"funcBody\":\"return 'Device';\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#f44336\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.6401141393938932,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"showTitleIcon\":false,\"titleIcon\":\"more_horiz\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"titleTooltip\":\"\",\"widgetStyle\":{},\"displayTimewindow\":true,\"actions\":{\"headerButton\":[{\"name\":\"Add device\",\"icon\":\"add\",\"type\":\"customPretty\",\"customHtml\":\"<form #addDeviceForm=\\\"ngForm\\\" [formGroup]=\\\"addDeviceFormGroup\\\"\\n      (ngSubmit)=\\\"save()\\\" style=\\\"width: 480px;\\\">\\n  <mat-toolbar class=\\\"flex flex-row\\\" color=\\\"primary\\\">\\n    <h2>Add device</h2>\\n    <span class=\\\"flex-1\\\"></span>\\n    <button mat-icon-button\\n            (click)=\\\"cancel()\\\"\\n            type=\\\"button\\\">\\n      <mat-icon class=\\\"material-icons\\\">close</mat-icon>\\n    </button>\\n  </mat-toolbar>\\n  <mat-progress-bar color=\\\"warn\\\" mode=\\\"indeterminate\\\" *ngIf=\\\"isLoading$ | async\\\">\\n  </mat-progress-bar>\\n  <div style=\\\"height: 4px;\\\" *ngIf=\\\"!(isLoading$ | async)\\\"></div>\\n  <div mat-dialog-content>\\n    <div class=\\\"mat-padding flex flex-col\\\">\\n      <mat-form-field class=\\\"mat-block\\\">\\n        <mat-label>Device name</mat-label>\\n        <input matInput formControlName=\\\"deviceName\\\" required>\\n        <mat-error *ngIf=\\\"addDeviceFormGroup.get('deviceName').hasError('required')\\\">\\n          Device name is required.\\n        </mat-error>\\n      </mat-form-field>\\n      <div class=\\\"flex flex-row gap-2\\\">\\n        <tb-entity-subtype-autocomplete\\n            class=\\\"max-w-50% flex-full\\\"\\n            formControlName=\\\"deviceType\\\"\\n            [required]=\\\"true\\\"\\n            [entityType]=\\\"'DEVICE'\\\"\\n        ></tb-entity-subtype-autocomplete>\\n        <mat-form-field class=\\\"mat-block max-w-50% flex-full\\\">\\n          <mat-label>Label</mat-label>\\n          <input matInput formControlName=\\\"deviceLabel\\\">\\n        </mat-form-field>\\n      </div>\\n      <div formGroupName=\\\"attributes\\\" class=\\\"flex flex-row gap-2\\\">\\n        <mat-form-field class=\\\"mat-block max-w-50% flex-full\\\">\\n          <mat-label>Latitude</mat-label>\\n          <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"latitude\\\">\\n        </mat-form-field>\\n        <mat-form-field class=\\\"mat-block max-w-50% flex-full\\\">\\n          <mat-label>Longitude</mat-label>\\n          <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"longitude\\\">\\n        </mat-form-field>\\n      </div>\\n    </div>\\n  </div>\\n  <div mat-dialog-actions class=\\\"flex flex-row\\\">\\n    <span class=\\\"flex-1\\\"></span>\\n    <button mat-button color=\\\"primary\\\"\\n            type=\\\"button\\\"\\n            [disabled]=\\\"(isLoading$ | async)\\\"\\n            (click)=\\\"cancel()\\\" cdkFocusInitial>\\n      Cancel\\n    </button>\\n    <button mat-button mat-raised-button color=\\\"primary\\\"\\n            style=\\\"margin-right: 20px;\\\"\\n            type=\\\"submit\\\"\\n            [disabled]=\\\"(isLoading$ | async) || addDeviceForm.invalid || !addDeviceForm.dirty\\\">\\n      Create\\n    </button>\\n  </div>\\n</form>\\n\",\"customCss\":\"\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\\nlet attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));\\n\\nopenAddDeviceDialog();\\n\\nfunction openAddDeviceDialog() {\\n    customDialog.customDialog(htmlTemplate, AddDeviceDialogController).subscribe();\\n}\\n\\nfunction AddDeviceDialogController(instance) {\\n    let vm = instance;\\n    \\n    vm.addDeviceFormGroup = vm.fb.group({\\n      deviceName: ['', [vm.validators.required]],\\n      deviceType: ['', [vm.validators.required]],\\n      deviceLabel: [''],\\n      attributes: vm.fb.group({\\n          latitude: [null],\\n          longitude: [null]\\n      })      \\n    });\\n    \\n    vm.cancel = function() {\\n        vm.dialogRef.close(null);\\n    };\\n    \\n    vm.save = function() {\\n        vm.addDeviceFormGroup.markAsPristine();\\n        let device = {\\n            name: vm.addDeviceFormGroup.get('deviceName').value,\\n            type: vm.addDeviceFormGroup.get('deviceType').value,\\n            label: vm.addDeviceFormGroup.get('deviceLabel').value\\n        };\\n        deviceService.saveDevice(device).subscribe(\\n            function (device) {\\n                saveAttributes(device.id).subscribe(\\n                    function () {\\n                        widgetContext.updateAliases();\\n                        vm.dialogRef.close(null);\\n                    }\\n                );\\n            }\\n        );\\n    };\\n    \\n    function saveAttributes(entityId) {\\n        let attributes = vm.addDeviceFormGroup.get('attributes').value;\\n        let attributesArray = [];\\n        for (let key in attributes) {\\n            attributesArray.push({key: key, value: attributes[key]});\\n        }\\n        if (attributesArray.length > 0) {\\n            return attributeService.saveEntityAttributes(entityId, \\\"SERVER_SCOPE\\\", attributesArray);\\n        } else {\\n            return widgetContext.rxjs.of([]);\\n        }\\n    }\\n}\",\"customResources\":[],\"id\":\"70837a9d-c3de-a9a7-03c5-dccd14998758\"}],\"actionCellButton\":[{\"name\":\"Edit device\",\"icon\":\"edit\",\"useShowWidgetActionFunction\":null,\"showWidgetActionFunction\":\"return true;\",\"type\":\"customPretty\",\"customHtml\":\"<form #editDeviceForm=\\\"ngForm\\\" [formGroup]=\\\"editDeviceFormGroup\\\"\\n      (ngSubmit)=\\\"save()\\\" style=\\\"width: 480px;\\\">\\n  <mat-toolbar class=\\\"flex flex-row\\\" color=\\\"primary\\\">\\n    <h2>Edit device</h2>\\n    <span class=\\\"flex-1\\\"></span>\\n    <button mat-icon-button\\n            (click)=\\\"cancel()\\\"\\n            type=\\\"button\\\">\\n      <mat-icon class=\\\"material-icons\\\">close</mat-icon>\\n    </button>\\n  </mat-toolbar>\\n  <mat-progress-bar color=\\\"warn\\\" mode=\\\"indeterminate\\\" *ngIf=\\\"isLoading$ | async\\\">\\n  </mat-progress-bar>\\n  <div style=\\\"height: 4px;\\\" *ngIf=\\\"!(isLoading$ | async)\\\"></div>\\n  <div mat-dialog-content>\\n    <div class=\\\"mat-padding flex flex-col\\\">\\n      <mat-form-field class=\\\"mat-block\\\">\\n        <mat-label>Device name</mat-label>\\n        <input matInput formControlName=\\\"deviceName\\\" required>\\n        <mat-error *ngIf=\\\"editDeviceFormGroup.get('deviceName').hasError('required')\\\">\\n          Device name is required.\\n        </mat-error>\\n      </mat-form-field>\\n      <div class=\\\"flex flex-row gap-2\\\">\\n        <tb-entity-subtype-autocomplete\\n            class=\\\"max-w-50% flex-full\\\"\\n            formControlName=\\\"deviceType\\\"\\n            [required]=\\\"true\\\"\\n            [entityType]=\\\"'DEVICE'\\\"\\n        ></tb-entity-subtype-autocomplete>\\n        <mat-form-field class=\\\"mat-block max-w-50% flex-full\\\">\\n          <mat-label>Label</mat-label>\\n          <input matInput formControlName=\\\"deviceLabel\\\">\\n        </mat-form-field>\\n      </div>\\n      <div formGroupName=\\\"attributes\\\" class=\\\"flex flex-row gap-2\\\">\\n        <mat-form-field class=\\\"mat-block max-w-50% flex-full\\\">\\n          <mat-label>Latitude</mat-label>\\n          <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"latitude\\\">\\n        </mat-form-field>\\n        <mat-form-field class=\\\"mat-block max-w-50% flex-full\\\">\\n          <mat-label>Longitude</mat-label>\\n          <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"longitude\\\">\\n        </mat-form-field>\\n      </div>\\n    </div>\\n  </div>\\n  <div mat-dialog-actions class=\\\"flex flex-row\\\">\\n    <span class=\\\"flex-1\\\"></span>\\n    <button mat-button color=\\\"primary\\\"\\n            type=\\\"button\\\"\\n            [disabled]=\\\"(isLoading$ | async)\\\"\\n            (click)=\\\"cancel()\\\" cdkFocusInitial>\\n      Cancel\\n    </button>\\n    <button mat-button mat-raised-button color=\\\"primary\\\"\\n            style=\\\"margin-right: 20px;\\\"\\n            type=\\\"submit\\\"\\n            [disabled]=\\\"(isLoading$ | async) || editDeviceForm.invalid || !editDeviceForm.dirty\\\">\\n      Update\\n    </button>\\n  </div>\\n</form>\\n\",\"customCss\":\"\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\\nlet attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));\\n\\nopenEditDeviceDialog();\\n\\nfunction openEditDeviceDialog() {\\n    customDialog.customDialog(htmlTemplate, EditDeviceDialogController).subscribe();\\n}\\n\\nfunction EditDeviceDialogController(instance) {\\n    let vm = instance;\\n    \\n    vm.device = null;\\n    vm.attributes = {};\\n    \\n    vm.editDeviceFormGroup = vm.fb.group({\\n      deviceName: ['', [vm.validators.required]],\\n      deviceType: ['', [vm.validators.required]],\\n      deviceLabel: [''],\\n      attributes: vm.fb.group({\\n          latitude: [null],\\n          longitude: [null]\\n      })      \\n    });\\n    \\n    vm.cancel = function() {\\n        vm.dialogRef.close(null);\\n    };\\n    \\n    vm.save = function() {\\n        vm.editDeviceFormGroup.markAsPristine();\\n        if (vm.editDeviceFormGroup.get('deviceType').value !== vm.device.type) {\\n            delete vm.device.deviceProfileId;\\n        }\\n        vm.device.name = vm.editDeviceFormGroup.get('deviceName').value,\\n        vm.device.type = vm.editDeviceFormGroup.get('deviceType').value,\\n        vm.device.label = vm.editDeviceFormGroup.get('deviceLabel').value\\n        deviceService.saveDevice(vm.device).subscribe(\\n            function () {\\n                saveAttributes().subscribe(\\n                    function () {\\n                        widgetContext.updateAliases();\\n                        vm.dialogRef.close(null);\\n                    }\\n                );\\n            }\\n        );\\n    };\\n    \\n    getEntityInfo();\\n    \\n    function getEntityInfo() {\\n        deviceService.getDevice(entityId.id).subscribe(\\n            function (device) {\\n                attributeService.getEntityAttributes(entityId, 'SERVER_SCOPE',\\n                                                    ['latitude', 'longitude']).subscribe(\\n                   function (attributes) {\\n                        for (let i = 0; i < attributes.length; i++) {\\n                            vm.attributes[attributes[i].key] = attributes[i].value; \\n                        }\\n                        vm.device = device;\\n                        vm.editDeviceFormGroup.patchValue(\\n                            {\\n                                deviceName: vm.device.name,\\n                                deviceType: vm.device.type,\\n                                deviceLabel: vm.device.label,\\n                                attributes: {\\n                                    latitude: vm.attributes.latitude,\\n                                    longitude: vm.attributes.longitude\\n                                }\\n                            }, {emitEvent: false}\\n                        );\\n                   } \\n                );\\n            }\\n        );    \\n    }\\n    \\n    function saveAttributes() {\\n        let attributes = vm.editDeviceFormGroup.get('attributes').value;\\n        let attributesArray = [];\\n        for (let key in attributes) {\\n            attributesArray.push({key: key, value: attributes[key]});\\n        }\\n        if (attributesArray.length > 0) {\\n            return attributeService.saveEntityAttributes(entityId, 'SERVER_SCOPE', attributesArray);\\n        } else {\\n            return widgetContext.rxjs.of([]);\\n        }\\n    }\\n}\",\"customResources\":[],\"openInSeparateDialog\":false,\"openInPopover\":false,\"id\":\"93931e52-5d7c-903e-67aa-b9435df44ff4\"},{\"name\":\"Delete device\",\"icon\":\"delete\",\"type\":\"custom\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet dialogs = $injector.get(widgetContext.servicesMap.get('dialogs'));\\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\\n\\nopenDeleteDeviceDialog();\\n\\nfunction openDeleteDeviceDialog() {\\n    let title = \\\"Are you sure you want to delete the device \\\" + entityName +  \\\"?\\\";\\n    let content = \\\"Be careful, after the confirmation, the device and all related data will become unrecoverable!\\\";\\n    dialogs.confirm(title, content, 'Cancel', 'Delete').subscribe(\\n        function (result) {\\n            if (result) {\\n                deleteDevice();\\n            }\\n        }\\n    );\\n}\\n\\nfunction deleteDevice() {\\n    deviceService.deleteDevice(entityId.id).subscribe(\\n        function () {\\n            widgetContext.updateAliases();\\n        }\\n    );\\n}\\n\",\"id\":\"ec2708f6-9ff0-186b-e4fc-7635ebfa3074\"}]},\"configMode\":\"basic\"}"
   },
   "tags": [
     "provisioning",
diff --git a/application/src/main/data/json/system/widget_types/raspberry_pi_gpio_control.json b/application/src/main/data/json/system/widget_types/raspberry_pi_gpio_control.json
index b2e03f19a7..f2b95881d5 100644
--- a/application/src/main/data/json/system/widget_types/raspberry_pi_gpio_control.json
+++ b/application/src/main/data/json/system/widget_types/raspberry_pi_gpio_control.json
@@ -9,8 +9,8 @@
     "sizeX": 6,
     "sizeY": 10.5,
     "resources": [],
-    "templateHtml": "<fieldset class=\"gpio-panel\" style=\"height: 100%;\">\n    <section class=\"gpio-row\" fxLayout=\"row\" *ngFor=\"let row of rows\" \n            [ngStyle]=\"{'height': prefferedRowHeight+'px'}\">\n        <section fxFlex fxLayout=\"row\" *ngFor=\"let cell of row; let $index = index\">\n            <section fxLayout=\"row\" fxFlex *ngIf=\"cell\" fxLayoutAlign=\"{{$index===0 ? 'end center' : 'start center'}}\">\n                <span class=\"gpio-left-label\" [fxShow]=\"$index===0\">{{ cell.label }}</span>\n                <section fxLayout=\"row\" class=\"switch-panel\" fxLayoutAlign=\"start center\" [ngClass]=\"$index===0 ? 'col-0' : 'col-1'\"\n                      [ngStyle]=\"{'height': prefferedRowHeight+'px', 'backgroundColor':  switchPanelBackgroundColor }\">\n                    <span class=\"pin\" [fxShow]=\"$index===0\">{{cell.pin}}</span>\n                    <span fxFlex [fxShow]=\"$index===1\"></span>\n                    <mat-slide-toggle\n                        [disabled]=\"!rpcEnabled || executingRpcRequest\"\n                        [checked]=\"cell.enabled\" \n                        (change)=\"gpioToggleChange($event, cell)\" \n                        (click)=\"gpioClick($event, cell)\">\n                    </mat-slide-toggle>\n                    <span fxFlex [fxShow]=\"$index===0\"></span>\n                    <span class=\"pin\" [fxShow]=\"$index===1\">{{cell.pin}}</span>\n                </section>\n                <span class=\"gpio-right-label\" [fxShow]=\"$index===1\">{{ cell.label }}</span>\n            </section>\n            <section fxLayout=\"row\" fxFlex *ngIf=\"!cell\">\n                <span fxFlex [fxShow]=\"$index===0\"></span>\n                <span class=\"switch-panel\"\n                      [ngStyle]=\"{'height': prefferedRowHeight+'px', 'backgroundColor':  switchPanelBackgroundColor }\"></span>\n                <span fxFlex [fxShow]=\"$index===1\"></span>\n            </section>\n        </section>\n    </section>                            \n    <span class=\"error\" style=\"position: absolute; bottom: 5px;\" [fxShow]=\"rpcErrorText\">{{rpcErrorText}}</span>\n    <mat-progress-bar [fxShow]=\"executingRpcRequest\" style=\"position: absolute; bottom: 0;\" mode=\"indeterminate\"></mat-progress-bar>\n</fieldset>",
-    "templateCss": ".error {\n    font-size: 14px !important;\n    color: maroon;/*rgb(250,250,250);*/\n    background-color: transparent;\n    padding: 6px;\n}\n\n.error span {\n    margin: auto;\n}\n\n.gpio-panel {\n    padding-top: 10px;\n    white-space: nowrap;\n}\n\n.gpio-panel section[fxflex] {\n    min-width: 0px;\n}\n\n.switch-panel {\n    margin: 0;\n    height: 32px;\n    width: 66px;\n    min-width: 66px;\n}\n\n.switch-panel mat-slide-toggle {\n    margin: 0;\n    width: 36px;\n    min-width: 36px;\n}\n\n.switch-panel.col-0 mat-slide-toggle {\n    margin-left: 8px;\n    margin-right: 4px;\n}\n\n.switch-panel.col-1 mat-slide-toggle {\n    margin-left: 4px;\n    margin-right: 8px;\n}\n\n.gpio-row {\n    height: 32px;\n}\n\n.pin {\n    margin-top: auto;\n    margin-bottom: auto;\n    color: white;\n    font-size: 12px;\n    width: 16px;\n    min-width: 16px;\n}\n\n.switch-panel.col-0 .pin {\n    margin-left: auto;\n    padding-left: 2px;\n    text-align: right;\n}\n\n.switch-panel.col-1 .pin {\n    margin-right: auto;\n    \n    text-align: left;\n}\n\n.gpio-left-label {\n    margin-right: 8px;\n}\n\n.gpio-right-label {\n    margin-left: 8px;\n}",
+    "templateHtml": "<fieldset class=\"gpio-panel\" style=\"height: 100%;\">\n  <section class=\"gpio-row flex flex-row\" *ngFor=\"let row of rows\"\n           [style.height.px]=\"prefferedRowHeight\">\n    <section class=\"flex flex-1 flex-row\" *ngFor=\"let cell of row; let $index = index\">\n      <section class=\"flex flex-1 flex-row items-center\" [class.justify-end]=\"$index===0\" [class.justify-start]=\"$index!==0\" *ngIf=\"cell\">\n        <span class=\"gpio-left-label\" [class.!hidden]=\"$index!==0\">{{ cell.label }}</span>\n        <section class=\"switch-panel flex flex-row items-center justify-start\" [class.col-0]=\"$index===0\" [class.col-1]=\"$index!==0\"\n                 [style.height.px]=\"prefferedRowHeight\"\n                 [style.background-color]=\"switchPanelBackgroundColor\">\n          <span class=\"pin\" [class.!hidden]=\"$index!==0\">{{cell.pin}}</span>\n          <span class=\"flex-1\" [class.!hidden]=\"$index!==1\"></span>\n          <mat-slide-toggle\n              [disabled]=\"!rpcEnabled || executingRpcRequest\"\n              [checked]=\"cell.enabled\"\n              (change)=\"gpioToggleChange($event, cell)\"\n              (click)=\"gpioClick($event, cell)\">\n          </mat-slide-toggle>\n          <span class=\"flex-1\" [class.!hidden]=\"$index!==0\"></span>\n          <span class=\"pin\" [class.!hidden]=\"$index!==1\">{{cell.pin}}</span>\n        </section>\n        <span class=\"gpio-right-label\" [class.!hidden]=\"$index!==1\">{{ cell.label }}</span>\n      </section>\n      <section class=\"flex flex-1 flex-row\" *ngIf=\"!cell\">\n        <span class=\"flex-1\" [class.!hidden]=\"$index!==0\"></span>\n        <span class=\"switch-panel\"\n              [style.height.px]=\"prefferedRowHeight\"\n              [style.background-color]=\"switchPanelBackgroundColor\"></span>\n        <span class=\"flex-1\" [class.!hidden]=\"$index!==1\"></span>\n      </section>\n    </section>\n  </section>\n  <span class=\"error\" style=\"position: absolute; bottom: 5px;\" [class.!hidden]=\"!rpcErrorText\">{{rpcErrorText}}</span>\n  <mat-progress-bar [class.!hidden]=\"!executingRpcRequest\" style=\"position: absolute; bottom: 0;\" mode=\"indeterminate\"></mat-progress-bar>\n</fieldset>",
+    "templateCss": ".error {\n    font-size: 14px !important;\n    color: maroon;/*rgb(250,250,250);*/\n    background-color: transparent;\n    padding: 6px;\n}\n\n.error span {\n    margin: auto;\n}\n\n.gpio-panel {\n    padding-top: 10px;\n    white-space: nowrap;\n}\n\n.gpio-panel section.flex-1 {\n    min-width: 0px;\n}\n\n\n.switch-panel {\n    margin: 0;\n    height: 32px;\n    width: 66px;\n    min-width: 66px;\n}\n\n.switch-panel mat-slide-toggle {\n    margin: 0;\n    width: 36px;\n    min-width: 36px;\n}\n\n.switch-panel.col-0 mat-slide-toggle {\n    margin-left: 8px;\n    margin-right: 4px;\n}\n\n.switch-panel.col-1 mat-slide-toggle {\n    margin-left: 4px;\n    margin-right: 8px;\n}\n\n.gpio-row {\n    height: 32px;\n}\n\n.pin {\n    margin-top: auto;\n    margin-bottom: auto;\n    color: white;\n    font-size: 12px;\n    width: 16px;\n    min-width: 16px;\n}\n\n.switch-panel.col-0 .pin {\n    margin-left: auto;\n    padding-left: 2px;\n    text-align: right;\n}\n\n.switch-panel.col-1 .pin {\n    margin-right: auto;\n\n    text-align: left;\n}\n\n.gpio-left-label {\n    margin-right: 8px;\n}\n\n.gpio-right-label {\n    margin-left: 8px;\n}",
     "controllerScript": "var namespace;\nvar cssParser = new cssjs();\n\nself.onInit = function() {\n    var utils = self.ctx.$injector.get(self.ctx.servicesMap.get('utils'));\n    namespace = 'gpio-control-' + utils.guid();\n    cssParser.testMode = false;\n    cssParser.cssPreviewNamespace = namespace;\n    self.ctx.$container.addClass(namespace);\n    self.ctx.ngZone.run(function() {\n       init(); \n    });\n}\n\nfunction init() {\n        \n    var i, gpio;\n    var scope = self.ctx.$scope;\n    var settings = self.ctx.settings;\n    scope.gpioList = [];\n    for (var g = 0; g < settings.gpioList.length; g++) {\n        gpio = settings.gpioList[g];\n        scope.gpioList.push(\n            {\n                row: gpio.row,\n                col: gpio.col,\n                pin: gpio.pin,\n                label: gpio.label,\n                enabled: false\n            }\n        );\n    }\n\n    scope.requestTimeout = settings.requestTimeout || 1000;\n\n    scope.switchPanelBackgroundColor = settings.switchPanelBackgroundColor || tinycolor('green').lighten(2).toRgbString();\n\n    scope.gpioStatusRequest = {\n        method: \"getGpioStatus\",\n        paramsBody: \"{}\"\n    };\n    \n    if (settings.gpioStatusRequest) {\n        scope.gpioStatusRequest.method = settings.gpioStatusRequest.method || scope.gpioStatusRequest.method;\n        scope.gpioStatusRequest.paramsBody = settings.gpioStatusRequest.paramsBody || scope.gpioStatusRequest.paramsBody;\n    }\n    \n    scope.gpioStatusChangeRequest = {\n        method: \"setGpioStatus\",\n        paramsBody: \"{\\n   \\\"pin\\\": \\\"{$pin}\\\",\\n   \\\"enabled\\\": \\\"{$enabled}\\\"\\n}\"\n    };\n    \n    if (settings.gpioStatusChangeRequest) {\n        scope.gpioStatusChangeRequest.method = settings.gpioStatusChangeRequest.method || scope.gpioStatusChangeRequest.method;\n        scope.gpioStatusChangeRequest.paramsBody = settings.gpioStatusChangeRequest.paramsBody || scope.gpioStatusChangeRequest.paramsBody;\n    }\n    \n    scope.parseGpioStatusFunction = \"return body[pin] === true;\";\n    \n    if (settings.parseGpioStatusFunction && settings.parseGpioStatusFunction.length > 0) {\n        scope.parseGpioStatusFunction = settings.parseGpioStatusFunction;\n    }\n    \n    scope.parseGpioStatusFunction = new Function(\"body, pin\", scope.parseGpioStatusFunction);\n    \n    function requestGpioStatus() {\n        self.ctx.controlApi.sendTwoWayCommand(scope.gpioStatusRequest.method, \n                            scope.gpioStatusRequest.paramsBody, \n                            scope.requestTimeout)\n            .subscribe(\n                function success(responseBody) {\n                    for (var g = 0; g < scope.gpioList.length; g++) {\n                        var gpio = scope.gpioList[g];\n                        var enabled = scope.parseGpioStatusFunction.apply(this, [responseBody, gpio.pin]);\n                        gpio.enabled = enabled;   \n                        self.ctx.detectChanges();\n                    }\n                }\n            );\n    }\n    \n    function changeGpioStatus(gpio) {\n        var pin = gpio.pin + '';\n        var enabled = !gpio.enabled;\n        enabled = enabled === true ? 'true' : 'false';\n        var paramsBody = scope.gpioStatusChangeRequest.paramsBody;\n        var requestBody = JSON.parse(paramsBody.replace(\"\\\"{$pin}\\\"\", pin).replace(\"\\\"{$enabled}\\\"\", enabled));\n        self.ctx.controlApi.sendTwoWayCommand(scope.gpioStatusChangeRequest.method, \n                                    requestBody, scope.requestTimeout)\n                    .subscribe(\n                        function success(responseBody) {\n                            var enabled = scope.parseGpioStatusFunction.apply(this, [responseBody, gpio.pin]);\n                            gpio.enabled = enabled;\n                            self.ctx.detectChanges();\n                        }\n                    );\n    }\n    \n    scope.gpioCells = {};\n    var rowCount = 0;\n    for (i = 0; i < scope.gpioList.length; i++) {\n        gpio = scope.gpioList[i];\n        scope.gpioCells[gpio.row+'_'+gpio.col] = gpio;\n        rowCount = Math.max(rowCount, gpio.row+1);\n    }\n    \n    scope.prefferedRowHeight = 32;\n    scope.rows = [];\n    for (i = 0; i < rowCount; i++) {\n        var row = [];\n        for (var c =0; c<2;c++) {\n            if (scope.gpioCells[i+'_'+c]) {\n                row[c] = scope.gpioCells[i+'_'+c];\n            } else {\n                row[c] = null;\n            }\n        }\n        scope.rows.push(row);\n    }\n\n    scope.gpioClick = function($event, gpio) {\n        if (scope.rpcEnabled && !scope.executingRpcRequest) {\n            changeGpioStatus(gpio);\n        }\n    };\n    \n    scope.gpioToggleChange = function($event, gpio) {\n        gpio.enabled = !$event.checked;\n        $event.source.toggle();\n        self.ctx.detectChanges();\n    }\n    \n    if (scope.rpcEnabled) {\n        requestGpioStatus();   \n    }\n    \n    self.onResize();\n}\n\nself.onResize = function() {\n    var scope = self.ctx.$scope;\n    var rowCount = scope.rows.length;\n    var prefferedRowHeight = (self.ctx.height - 35)/rowCount;\n    prefferedRowHeight = Math.min(32, prefferedRowHeight);\n    prefferedRowHeight = Math.max(12, prefferedRowHeight);\n    scope.prefferedRowHeight = prefferedRowHeight;\n    var ratio = prefferedRowHeight/32;\n    \n    var css = '.mat-slide-toggle .mat-slide-toggle-bar {\\n' +\n        '   height: ' + 14*ratio+'px;\\n'+\n        '   width: ' + 36*ratio+'px;\\n'+\n    '}\\n';\n    css += '.mat-slide-toggle .mat-slide-toggle-thumb-container {\\n' +\n        '   height: ' + 20*ratio+'px;\\n'+\n        '   width: ' + 20*ratio+'px;\\n'+\n    '}\\n';\n    css += '.mat-slide-toggle .mat-slide-toggle-thumb {\\n' +\n        '   height: ' + 20*ratio+'px;\\n'+\n        '   width: ' + 20*ratio+'px;\\n'+\n    '}\\n';\n    css += '.mat-slide-toggle .mat-slide-toggle-ripple {\\n' +\n        '   height: ' + 40*ratio+'px;\\n'+\n        '   width: ' + 40*ratio+'px;\\n'+\n        '   top: calc(50% - '+20*ratio+'px);\\n'+\n        '   left: calc(50% - '+20*ratio+'px);\\n'+\n    '}\\n';\n    css += '.gpio-left-label, .gpio-right-label {\\n' +\n        '   font-size: ' + 16*ratio+'px;\\n'+\n    '}\\n';\n    var pinsFontSize = Math.max(9, 12*ratio);\n    css += '.pin {\\n' +\n        '   font-size: ' + pinsFontSize+'px;\\n'+\n    '}\\n';\n\n    cssParser.createStyleElement(namespace, css);\n    \n    self.ctx.detectChanges();\n}\n\nself.onDestroy = function() {\n}\n",
     "settingsSchema": "",
     "dataKeySettingsSchema": "{}\n",
diff --git a/application/src/main/data/json/system/widget_types/raspberry_pi_gpio_panel.json b/application/src/main/data/json/system/widget_types/raspberry_pi_gpio_panel.json
index 1bbe2482f2..6595ec473b 100644
--- a/application/src/main/data/json/system/widget_types/raspberry_pi_gpio_panel.json
+++ b/application/src/main/data/json/system/widget_types/raspberry_pi_gpio_panel.json
@@ -9,8 +9,8 @@
     "sizeX": 7,
     "sizeY": 10.5,
     "resources": [],
-    "templateHtml": "<div class=\"gpio-panel\" style=\"height: 100%;\">\n    <section fxLayout=\"row\" *ngFor=\"let row of rows\">\n        <section fxFlex fxLayout=\"row\" *ngFor=\"let cell of row; let $index = index\">\n            <section fxLayout=\"row\" fxFlex *ngIf=\"cell\" fxLayoutAlign=\"{{$index===0 ? 'end center' : 'start center'}}\">\n                <span class=\"gpio-left-label\" [fxShow]=\"$index===0\">{{ cell.label }}</span>\n                <section fxLayout=\"row\" class=\"led-panel\" [ngClass]=\"$index===0 ? 'col-0' : 'col-1'\"\n                      [ngStyle]=\"{backgroundColor: ledPanelBackgroundColor}\">\n                    <span class=\"pin\" [fxShow]=\"$index===0\">{{cell.pin}}</span>\n                    <span class=\"led-container\">\n                        <tb-led-light [size]=\"prefferedRowHeight\"\n                                      [colorOn]=\"cell.colorOn\"\n                                      [colorOff]=\"cell.colorOff\"\n                                      [offOpacity]=\"'0.9'\"\n                                      [enabled]=\"cell.enabled\">\n                        </tb-led-light>\n                    </span>\n                    <span class=\"pin\" [fxShow]=\"$index===1\">{{cell.pin}}</span>\n                </section>\n                <span class=\"gpio-right-label\" [fxShow]=\"$index===1\">{{ cell.label }}</span>\n            </section>\n            <section fxLayout=\"row\" fxFlex *ngIf=\"!cell\">\n                <span fxFlex [fxShow]=\"$index===0\"></span>\n                <span class=\"led-panel\"\n                      [ngStyle]=\"{height: prefferedRowHeight+'px', backgroundColor: ledPanelBackgroundColor}\"></span>\n                <span fxFlex [fxShow]=\"$index===1\"></span>\n            </section>\n        </section>\n    </section>                            \n</div>",
-    "templateCss": ".error {\n    font-size: 14px !important;\n    color: maroon;/*rgb(250,250,250);*/\n    background-color: transparent;\n    padding: 6px;\n}\n\n.error span {\n    margin: auto;\n}\n\n.gpio-panel {\n    padding-top: 10px;\n    white-space: nowrap;\n}\n\n.gpio-panel section[fxflex] {\n    min-width: 0px;\n}\n\n.gpio-panel tb-led-light > div {\n    margin: auto;\n}\n\n.led-panel {\n    margin: 0;\n    width: 66px;\n    min-width: 66px;\n}\n\n.led-container {\n    width: 48px;\n    min-width: 48px;\n}\n\n.pin {\n    margin-top: auto;\n    margin-bottom: auto;\n    color: white;\n    font-size: 12px;\n    width: 16px;\n    min-width: 16px;\n}\n\n.led-panel.col-0 .pin {\n    margin-left: auto;\n    padding-left: 2px;\n    text-align: right;\n}\n\n.led-panel.col-1 .pin {\n    margin-right: auto;\n    \n    text-align: left;\n}\n\n.gpio-left-label {\n    margin-right: 8px;\n}\n\n.gpio-right-label {\n    margin-left: 8px;\n}",
+    "templateHtml": "<div class=\"gpio-panel\" style=\"height: 100%;\">\n  <section class=\"flex flex-row\" *ngFor=\"let row of rows\">\n    <section class=\"flex flex-1 flex-row\" *ngFor=\"let cell of row; let $index = index\">\n      <section class=\"flex flex-1 flex-row\" [class.justify-end]=\"$index===0\" [class.justify-start]=\"$index!==0\" *ngIf=\"cell\">\n        <span class=\"gpio-left-label\" [class.!hidden]=\"$index!==0\">{{ cell.label }}</span>\n        <section class=\"led-panel flex flex-row\" [class.col-0]=\"$index===0\" [class.col-1]=\"$index!==0\"\n                 [style.background-color]=\"ledPanelBackgroundColor\">\n          <span class=\"pin\" [class.!hidden]=\"$index!==0\">{{cell.pin}}</span>\n          <span class=\"led-container\">\n                        <tb-led-light [size]=\"prefferedRowHeight\"\n                                      [colorOn]=\"cell.colorOn\"\n                                      [colorOff]=\"cell.colorOff\"\n                                      [offOpacity]=\"'0.9'\"\n                                      [enabled]=\"cell.enabled\">\n                        </tb-led-light>\n                    </span>\n          <span class=\"pin\" [class.!hidden]=\"$index!==1\">{{cell.pin}}</span>\n        </section>\n        <span class=\"gpio-right-label\" [class.!hidden]=\"$index!==1\">{{ cell.label }}</span>\n      </section>\n      <section class=\"flex flex-1 flex-row\" *ngIf=\"!cell\">\n        <span class=\"flex-1\" [class.!hidden]=\"$index!==0\"></span>\n        <span class=\"led-panel\"\n              [style.height.px]=\"prefferedRowHeight\"\n              [style.background-color]=\"ledPanelBackgroundColor\"></span>\n        <span class=\"flex-1\" [class.!hidden]=\"$index!==1\"></span>\n      </section>\n    </section>\n  </section>\n</div>",
+    "templateCss": ".error {\n    font-size: 14px !important;\n    color: maroon;/*rgb(250,250,250);*/\n    background-color: transparent;\n    padding: 6px;\n}\n\n.error span {\n    margin: auto;\n}\n\n.gpio-panel {\n    padding-top: 10px;\n    white-space: nowrap;\n}\n\n.gpio-panel section.flex-1 {\n    min-width: 0px;\n}\n\n\n.gpio-panel tb-led-light > div {\n    margin: auto;\n}\n\n.led-panel {\n    margin: 0;\n    width: 66px;\n    min-width: 66px;\n}\n\n.led-container {\n    width: 48px;\n    min-width: 48px;\n}\n\n.pin {\n    margin-top: auto;\n    margin-bottom: auto;\n    color: white;\n    font-size: 12px;\n    width: 16px;\n    min-width: 16px;\n}\n\n.led-panel.col-0 .pin {\n    margin-left: auto;\n    padding-left: 2px;\n    text-align: right;\n}\n\n.led-panel.col-1 .pin {\n    margin-right: auto;\n\n    text-align: left;\n}\n\n.gpio-left-label {\n    margin-right: 8px;\n}\n\n.gpio-right-label {\n    margin-left: 8px;\n}",
     "controllerScript": "var namespace;\nvar cssParser = new cssjs();\n\nself.onInit = function() {\n    var utils = self.ctx.$injector.get(self.ctx.servicesMap.get('utils'));\n    namespace = 'gpio-panel-' + utils.guid();\n    cssParser.testMode = false;\n    cssParser.cssPreviewNamespace = namespace;\n    self.ctx.$container.addClass(namespace);\n    self.ctx.ngZone.run(function() {\n       init(); \n    });\n}\n\nfunction init() {\n    var i, gpio;\n    \n    var scope = self.ctx.$scope;\n    var settings = self.ctx.settings;\n    \n    scope.gpioList = [];\n    scope.gpioByPin = {};\n    for (var g = 0; g < settings.gpioList.length; g++) {\n        gpio = settings.gpioList[g];\n        scope.gpioList.push(\n            {\n                row: gpio.row,\n                col: gpio.col,\n                pin: gpio.pin,\n                label: gpio.label,\n                enabled: false,\n                colorOn: tinycolor(gpio.color).lighten(20).toHexString(),\n                colorOff: tinycolor(gpio.color).darken().toHexString()\n            }\n        );\n        scope.gpioByPin[gpio.pin] = scope.gpioList[scope.gpioList.length-1];\n    }\n\n    scope.ledPanelBackgroundColor = settings.ledPanelBackgroundColor || tinycolor('green').lighten(2).toRgbString();\n\n    scope.gpioCells = {};\n    var rowCount = 0;\n    for (i = 0; i < scope.gpioList.length; i++) {\n        gpio = scope.gpioList[i];\n        scope.gpioCells[gpio.row+'_'+gpio.col] = gpio;\n        rowCount = Math.max(rowCount, gpio.row+1);\n    }\n    \n    scope.prefferedRowHeight = 32;\n    scope.rows = [];\n    for (i = 0; i < rowCount; i++) {\n        var row = [];\n        for (var c =0; c<2;c++) {\n            if (scope.gpioCells[i+'_'+c]) {\n                row[c] = scope.gpioCells[i+'_'+c];\n            } else {\n                row[c] = null;\n            }\n        }\n        scope.rows.push(row);\n    }    \n    \n    self.onResize();\n}\n\nself.onDataUpdated = function() {\n    var changed = false;\n    for (var d = 0; d < self.ctx.data.length; d++) {\n        var cellData = self.ctx.data[d];\n        var dataKey = cellData.dataKey;\n        var gpio = self.ctx.$scope.gpioByPin[dataKey.label];\n        if (gpio) {\n            var enabled = false;\n            if (cellData.data.length > 0) {\n                var tvPair = cellData.data[cellData.data.length - 1];\n                enabled = (tvPair[1] === true || tvPair[1] === 'true');\n            }\n            if (gpio.enabled != enabled) {\n                changed = true;\n                gpio.enabled = enabled;\n            }\n        }\n    }\n    if (changed) {\n        self.ctx.detectChanges();\n    }    \n}\n\nself.onResize = function() {\n    var rowCount = self.ctx.$scope.rows.length;\n    var prefferedRowHeight = (self.ctx.height - 35)/rowCount;\n    prefferedRowHeight = Math.min(32, prefferedRowHeight);\n    prefferedRowHeight = Math.max(12, prefferedRowHeight);\n    self.ctx.$scope.prefferedRowHeight = prefferedRowHeight;\n    \n    var ratio = prefferedRowHeight/32;\n    \n    var css = '.gpio-left-label, .gpio-right-label {\\n' +\n        '   font-size: ' + 16*ratio+'px;\\n'+\n    '}\\n';\n    var pinsFontSize = Math.max(9, 12*ratio);\n    css += '.pin {\\n' +\n        '   font-size: ' + pinsFontSize+'px;\\n'+\n    '}\\n';\n   \n    cssParser.createStyleElement(namespace, css); \n   \n    self.ctx.detectChanges();\n}\n\nself.onDestroy = function() {\n}\n",
     "settingsSchema": "",
     "dataKeySettingsSchema": "{}\n",
diff --git a/application/src/main/data/json/system/widget_types/rpc_button.json b/application/src/main/data/json/system/widget_types/rpc_button.json
index a5edbcc5a3..cd9b5d567a 100644
--- a/application/src/main/data/json/system/widget_types/rpc_button.json
+++ b/application/src/main/data/json/system/widget_types/rpc_button.json
@@ -9,7 +9,7 @@
     "sizeX": 4,
     "sizeY": 2,
     "resources": [],
-    "templateHtml": "<div class=\"tb-rpc-button\" fxLayout=\"column\">\n    <div fxFlex=\"20\" class=\"title-container\" fxLayout=\"row\"\n        fxLayoutAlign=\"center center\" [fxShow]=\"showTitle\">\n        <span class=\"button-title\">{{title}}</span>\n    </div>\n    <div fxFlex=\"{{showTitle ? 80 : 100}}\" [ngStyle]=\"{paddingTop: showTitle ? '5px': '10px'}\"\n        class=\"button-container\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n        <div>\n            <button mat-button (click)=\"sendCommand()\"\n                    [class.mat-mdc-raised-button]=\"styleButton?.isRaised\"\n                    [color]=\"styleButton?.isPrimary ? 'primary' : ''\"\n                    [ngStyle]=\"customStyle\">\n                {{buttonLable}}\n            </button>\n        </div>\n    </div>\n    <div class=\"error-container\" [ngStyle]=\"{'background': error?.length ? 'rgba(255,255,255,0.25)' : 'none'}\"\n         fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <span class=\"button-error\">{{ error }}</span>\n    </div>\n</div>",
+    "templateHtml": "<div class=\"tb-rpc-button flex flex-col\">\n  <div class=\"title-container flex max-w-20% flex-full flex-row items-center justify-center\"\n       [class.!hidden]=\"!showTitle\">\n    <span class=\"button-title\">{{title}}</span>\n  </div>\n  <div class=\"button-container flex flex-full flex-col items-center justify-center\"\n       [class]=\"{\n          'max-w-80%': showTitle,\n          'max-w-100%': !showTitle\n       }\"\n       [style.padding-top]=\"showTitle ? '5px': '10px'\">\n    <div>\n      <button mat-button (click)=\"sendCommand()\"\n              [class.mat-mdc-raised-button]=\"styleButton?.isRaised\"\n              [color]=\"styleButton?.isPrimary ? 'primary' : ''\"\n              [style]=\"customStyle\">\n        {{buttonLable}}\n      </button>\n    </div>\n  </div>\n  <div class=\"error-container flex flex-row items-center justify-center\" [style.background]=\"error?.length ? 'rgba(255,255,255,0.25)' : 'none'\">\n    <span class=\"button-error\">{{ error }}</span>\n  </div>\n</div>",
     "templateCss": ".tb-rpc-button {\n    width: 100%;\n    height: 100%;\n}\n\n.tb-rpc-button .title-container {\n    font-weight: 500;\n    white-space: nowrap;\n    margin: 10px 0;\n}\n\n.tb-rpc-button .button-container div{\n    min-width: 80%\n}\n\n.tb-rpc-button .button-container .mat-mdc-button{\n    width: 100%;\n    margin: 0;\n}\n\n.tb-rpc-button .error-container {\n    position: absolute;\n    top: 2%;\n    right: 0;\n    left: 0;\n    z-index: 4;\n    height: 14px;\n}\n\n.tb-rpc-button .error-container .button-error {\n    color: #ff3315;\n    white-space: nowrap;\n}",
     "controllerScript": "var requestPersistent = false;\nvar persistentPollingInterval = 5000;\n\nself.onInit = function() {\n    if (self.ctx.settings.requestPersistent) {\n        requestPersistent = self.ctx.settings.requestPersistent;\n    }\n    if (self.ctx.settings.persistentPollingInterval) {\n        persistentPollingInterval = self.ctx.settings.persistentPollingInterval;\n    }\n    \n    self.ctx.ngZone.run(function() {\n       init(); \n       self.ctx.detectChanges();\n    });\n};\n\nfunction init() {\n    let rpcEnabled = self.ctx.defaultSubscription.rpcEnabled;\n\n    self.ctx.$scope.buttonLable = self.ctx.settings.buttonText;\n    self.ctx.$scope.showTitle = self.ctx.settings.title &&\n        self.ctx.settings.title.length ? true : false;\n    self.ctx.$scope.title = self.ctx.settings.title;\n    self.ctx.$scope.styleButton = self.ctx.settings.styleButton;\n\n    if (self.ctx.settings.styleButton.isPrimary ===\n        false) {\n        self.ctx.$scope.customStyle = {\n            'background-color': self.ctx.$scope.styleButton.bgColor,\n            'color': self.ctx.$scope.styleButton.textColor\n        };\n    }\n\n    if (!rpcEnabled) {\n        self.ctx.$scope.error =\n            'Target device is not set!';\n    }\n\n    self.ctx.$scope.sendCommand = function() {\n        var rpcMethod = self.ctx.settings.methodName;\n        var rpcParams = self.ctx.settings.methodParams;\n        if (rpcParams.length) {\n            try {\n                rpcParams = JSON.parse(rpcParams);\n            } catch (e) {}\n        }\n        var timeout = self.ctx.settings.requestTimeout;\n        var oneWayElseTwoWay = self.ctx.settings.oneWayElseTwoWay ?\n            true : false;\n\n        var commandPromise;\n        if (oneWayElseTwoWay) {\n            commandPromise = self.ctx.controlApi.sendOneWayCommand(\n                rpcMethod, rpcParams, timeout, requestPersistent, persistentPollingInterval);\n        } else {\n            commandPromise = self.ctx.controlApi.sendTwoWayCommand(\n                rpcMethod, rpcParams, timeout, requestPersistent, persistentPollingInterval);\n        }\n        commandPromise.subscribe(\n            function success() {\n                self.ctx.$scope.error = \"\";\n                self.ctx.detectChanges();\n            },\n            function fail(rejection) {\n                if (self.ctx.settings.showError) {\n                    self.ctx.$scope.error =\n                        rejection.status + \": \" +\n                        rejection.statusText;\n                    self.ctx.detectChanges();\n                }\n            }\n        );\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.controlApi.completedCommand();\n}\n",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/service_rpc.json b/application/src/main/data/json/system/widget_types/service_rpc.json
index 23cc13adf0..e31e18bc57 100644
--- a/application/src/main/data/json/system/widget_types/service_rpc.json
+++ b/application/src/main/data/json/system/widget_types/service_rpc.json
@@ -10,7 +10,7 @@
     "sizeY": 5.5,
     "resources": [],
     "templateHtml": "<tb-gateway-service-rpc [ctx]=\"ctx\"></tb-gateway-service-rpc>",
-    "templateCss": ".error {\n    font-size: 14px !important;\n    color: maroon;/*rgb(250,250,250);*/\n    background-color: transparent;\n    padding: 6px;\n}\n\n.error span {\n    margin: auto;\n}\n\n.gpio-panel {\n    padding-top: 10px;\n    white-space: nowrap;\n}\n\n.gpio-panel section[fxflex] {\n    min-width: 0px;\n}\n\n\n.switch-panel {\n    margin: 0;\n    height: 32px;\n    width: 66px;\n    min-width: 66px;\n}\n\n.switch-panel mat-slide-toggle {\n    margin: 0;\n    width: 36px;\n    min-width: 36px;\n}\n\n.switch-panel.col-0 mat-slide-toggle {\n    margin-left: 8px;\n    margin-right: 4px;\n}\n\n.switch-panel.col-1 mat-slide-toggle {\n    margin-left: 4px;\n    margin-right: 8px;\n}\n\n.gpio-row {\n    height: 32px;\n}\n\n.pin {\n    margin-top: auto;\n    margin-bottom: auto;\n    color: white;\n    font-size: 12px;\n    width: 16px;\n    min-width: 16px;\n}\n\n.switch-panel.col-0 .pin {\n    margin-left: auto;\n    padding-left: 2px;\n    text-align: right;\n}\n\n.switch-panel.col-1 .pin {\n    margin-right: auto;\n    \n    text-align: left;\n}\n\n.gpio-left-label {\n    margin-right: 8px;\n}\n\n.gpio-right-label {\n    margin-left: 8px;\n}",
+    "templateCss": ".error {\n    font-size: 14px !important;\n    color: maroon;/*rgb(250,250,250);*/\n    background-color: transparent;\n    padding: 6px;\n}\n\n.error span {\n    margin: auto;\n}\n\n.gpio-panel {\n    padding-top: 10px;\n    white-space: nowrap;\n}\n\n.gpio-panel section.flex-1 {\n    min-width: 0px;\n}\n\n\n.switch-panel {\n    margin: 0;\n    height: 32px;\n    width: 66px;\n    min-width: 66px;\n}\n\n.switch-panel mat-slide-toggle {\n    margin: 0;\n    width: 36px;\n    min-width: 36px;\n}\n\n.switch-panel.col-0 mat-slide-toggle {\n    margin-left: 8px;\n    margin-right: 4px;\n}\n\n.switch-panel.col-1 mat-slide-toggle {\n    margin-left: 4px;\n    margin-right: 8px;\n}\n\n.gpio-row {\n    height: 32px;\n}\n\n.pin {\n    margin-top: auto;\n    margin-bottom: auto;\n    color: white;\n    font-size: 12px;\n    width: 16px;\n    min-width: 16px;\n}\n\n.switch-panel.col-0 .pin {\n    margin-left: auto;\n    padding-left: 2px;\n    text-align: right;\n}\n\n.switch-panel.col-1 .pin {\n    margin-right: auto;\n\n    text-align: left;\n}\n\n.gpio-left-label {\n    margin-right: 8px;\n}\n\n.gpio-right-label {\n    margin-left: 8px;\n}",
     "controllerScript": "\nself.onInit = function() {\n};",
     "settingsSchema": "",
     "dataKeySettingsSchema": "{}\n",
diff --git a/application/src/main/data/json/system/widget_types/update_device_attribute.json b/application/src/main/data/json/system/widget_types/update_device_attribute.json
index 3cb54b9d84..1e7b356ca6 100644
--- a/application/src/main/data/json/system/widget_types/update_device_attribute.json
+++ b/application/src/main/data/json/system/widget_types/update_device_attribute.json
@@ -9,7 +9,7 @@
     "sizeX": 4,
     "sizeY": 2,
     "resources": [],
-    "templateHtml": "<div class=\"tb-rpc-button\" fxLayout=\"column\">\n    <div fxFlex=\"20\" class=\"title-container\" fxLayout=\"row\"\n        fxLayoutAlign=\"center center\" [fxShow]=\"showTitle\">\n        <span class=\"button-title\">{{title}}</span>\n    </div>\n    <div fxFlex=\"{{showTitle ? 80 : 100}}\" [ngStyle]=\"{paddingTop: showTitle ? '5px': '10px'}\"\n        class=\"button-container\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n        <div>\n            <button mat-button (click)=\"sendUpdate()\"\n                    [class.mat-mdc-raised-button]=\"styleButton?.isRaised\"\n                    [color]=\"styleButton?.isPrimary ? 'primary' : ''\"\n                    [ngStyle]=\"customStyle\">\n                {{buttonLable}}\n            </button>\n        </div>\n    </div>\n    <div class=\"error-container\" [ngStyle]=\"{'background': error?.length ? 'rgba(255,255,255,0.25)' : 'none'}\"\n         fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <span class=\"button-error\">{{ error }}</span>\n    </div>\n</div>",
+    "templateHtml": "<div class=\"tb-rpc-button flex flex-col\">\n  <div class=\"title-container flex max-w-20% flex-full flex-row items-center justify-center\"\n       [class.!hidden]=\"!showTitle\">\n    <span class=\"button-title\">{{title}}</span>\n  </div>\n  <div class=\"button-container flex flex-full flex-col items-center justify-center\"\n       [class]=\"{\n          'max-w-80%': showTitle,\n          'max-w-100%': !showTitle\n       }\"\n       [style.padding-top]=\"showTitle ? '5px': '10px'\">\n    <div>\n      <button mat-button (click)=\"sendCommand()\"\n              [class.mat-mdc-raised-button]=\"styleButton?.isRaised\"\n              [color]=\"styleButton?.isPrimary ? 'primary' : ''\"\n              [style]=\"customStyle\">\n        {{buttonLable}}\n      </button>\n    </div>\n  </div>\n  <div class=\"error-container flex flex-row items-center justify-center\" [style.background]=\"error?.length ? 'rgba(255,255,255,0.25)' : 'none'\">\n    <span class=\"button-error\">{{ error }}</span>\n  </div>\n</div>",
     "templateCss": ".tb-rpc-button {\n    width: 100%;\n    height: 100%;\n}\n\n.tb-rpc-button .title-container {\n    font-weight: 500;\n    white-space: nowrap;\n    margin: 10px 0;\n}\n\n.tb-rpc-button .button-container div{\n    min-width: 80%\n}\n\n.tb-rpc-button .button-container .mat-mdc-button{\n    width: 100%;\n    margin: 0;\n}\n\n.tb-rpc-button .error-container {\n    position: absolute;\n    top: 2%;\n    right: 0;\n    left: 0;\n    z-index: 4;\n    height: 14px;\n}\n\n.tb-rpc-button .error-container .button-error {\n    color: #ff3315;\n    white-space: nowrap;\n}",
     "controllerScript": "self.onInit = function() {\n    self.ctx.ngZone.run(function() {\n       init(); \n       self.ctx.detectChanges();\n    });\n};\n\nfunction init() {\n    self.ctx.$scope.buttonLable = self.ctx.settings.buttonText;\n    self.ctx.$scope.showTitle = self.ctx.settings.title &&\n        self.ctx.settings.title.length ? true : false;\n    self.ctx.$scope.title = self.ctx.settings.title;\n    self.ctx.$scope.styleButton = self.ctx.settings.styleButton;\n    let entityAttributeType = self.ctx.settings.entityAttributeType;\n    let entityParameters = JSON.parse(self.ctx.settings.entityParameters);\n\n    if (self.ctx.settings.styleButton.isPrimary ===\n        false) {\n        self.ctx.$scope.customStyle = {\n            'background-color': self.ctx.$scope.styleButton\n                .bgColor,\n            'color': self.ctx.$scope.styleButton.textColor\n        };\n    }\n\n    let attributeService = self.ctx.$scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\n\n    self.ctx.$scope.sendUpdate = function() {\n        let attributes = [];\n        for (let key in entityParameters) {\n            attributes.push({\n                \"key\": key,\n                \"value\": entityParameters[key]\n            });\n        }\n        \n        let entityId = {\n            entityType: \"DEVICE\",\n            id: self.ctx.defaultSubscription.targetDeviceId\n        };\n        attributeService.saveEntityAttributes(entityId,\n            entityAttributeType, attributes).subscribe(\n            function success() {\n                self.ctx.$scope.error = \"\";\n                self.ctx.detectChanges();\n            },\n            function fail(rejection) {\n                if (self.ctx.settings.showError) {\n                    self.ctx.$scope.error =\n                        rejection.status + \": \" +\n                        rejection.statusText;\n                        self.ctx.detectChanges();\n                }\n            }\n\n        );\n    };\n}\n",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_location_timeseries.json b/application/src/main/data/json/system/widget_types/update_location_timeseries.json
index f868683a6f..3444c77c6c 100644
--- a/application/src/main/data/json/system/widget_types/update_location_timeseries.json
+++ b/application/src/main/data/json/system/widget_types/update_location_timeseries.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          [ngClass]=\"{'small-width': smallWidthContainer}\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n                <div class=\"grid__element\" \n                    [ngClass]=\"{'horizontal-alignment': isHorizontal && !changeAlignment}\">\n                    <mat-form-field class=\"mat-block\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? latLabel : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentLat\"\n                               required\n                               type=\"number\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               max=\"90\"\n                               min=\"-90\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentLat').hasError('required')\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>\n                    \n                    <mat-form-field class=\"mat-block\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? lngLabel : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentLng\"\n                               required\n                               type=\"number\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               max=\"180\"\n                               min=\"-180\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentLng').hasError('required')\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"getLocation\"\n                            type=\"button\"\n                            (click)=\"getCoordinate()\"\n                            *ngIf=\"settings.showGetLocation\"\n                            matTooltip=\"{{ 'widgets.input-widgets.get-location' | translate }}\"\n                            matTooltipPosition=\"above\">\n                        <mat-icon>my_location</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"applyChanges\"\n                            type=\"submit\"\n                            [disabled]=\"disableButton() || attributeUpdateFormGroup.invalid || attributeUpdateFormGroup.pristine\"\n                            matTooltip=\"{{ 'widgets.input-widgets.update-timeseries' | translate }}\"\n                            matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                            type=\"button\"\n                            [disabled]=\"disableButton()\"\n                            (click)=\"discardChange()\"\n                            matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                            matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\" >\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-timeseries-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !isValidParameter\">\n                {{ 'widgets.input-widgets.no-coordinate-specified' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n  <form *ngIf=\"attributeUpdateFormGroup\"\n        class=\"attribute-update-form\"\n        [formGroup]=\"attributeUpdateFormGroup\"\n        [ngClass]=\"{'small-width': smallWidthContainer}\"\n        (ngSubmit)=\"updateAttribute()\">\n    <div style=\"padding: 0 8px; margin: auto 0;\">\n      <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n        <div class=\"grid__element\"\n             [class.horizontal-alignment]=\"isHorizontal && !changeAlignment\">\n          <mat-form-field class=\"mat-block\"\n                          floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                          [hideRequiredMarker]=\"!settings.showLabel\">\n            <mat-label>{{ settings.showLabel ? latLabel : '' }}</mat-label>\n            <input matInput\n                   formControlName=\"currentLat\"\n                   required\n                   type=\"number\"\n                   (focus)=\"isFocused = true\"\n                   (blur)=\"changeFocus()\"\n                   max=\"90\"\n                   min=\"-90\"/>\n            <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentLat').hasError('required')\">\n              {{requiredErrorMessage}}\n            </mat-error>\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-block\"\n                          floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                          [hideRequiredMarker]=\"!settings.showLabel\">\n            <mat-label>{{ settings.showLabel ? lngLabel : '' }}</mat-label>\n            <input matInput\n                   formControlName=\"currentLng\"\n                   required\n                   type=\"number\"\n                   (focus)=\"isFocused = true\"\n                   (blur)=\"changeFocus()\"\n                   max=\"180\"\n                   min=\"-180\"/>\n            <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentLng').hasError('required')\">\n              {{requiredErrorMessage}}\n            </mat-error>\n          </mat-form-field>\n        </div>\n\n        <div class=\"grid__element\">\n          <button mat-icon-button class=\"getLocation\"\n                  type=\"button\"\n                  (click)=\"getCoordinate()\"\n                  *ngIf=\"settings.showGetLocation\"\n                  matTooltip=\"{{ 'widgets.input-widgets.get-location' | translate }}\"\n                  matTooltipPosition=\"above\">\n            <mat-icon>my_location</mat-icon>\n          </button>\n          <button mat-icon-button class=\"applyChanges\"\n                  type=\"submit\"\n                  [disabled]=\"disableButton() || attributeUpdateFormGroup.invalid || attributeUpdateFormGroup.pristine\"\n                  matTooltip=\"{{ 'widgets.input-widgets.update-timeseries' | translate }}\"\n                  matTooltipPosition=\"above\">\n            <mat-icon>check</mat-icon>\n          </button>\n          <button mat-icon-button class=\"discardChanges\"\n                  type=\"button\"\n                  [disabled]=\"disableButton()\"\n                  (click)=\"discardChange()\"\n                  matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                  matTooltipPosition=\"above\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </div>\n      </div>\n\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\">\n        {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n      </div>\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n           [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n        {{ 'widgets.input-widgets.no-timeseries-selected' | translate }}\n      </div>\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n           [class.!hidden]=\"!entityDetected || isValidParameter\">\n        {{ 'widgets.input-widgets.no-coordinate-specified' | translate }}\n      </div>\n    </div>\n  </form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex-direction: column;\n    flex: 1;\n}\n\n.grid__element.horizontal-alignment {\n    flex-direction: row;\n}\n\n.grid__element:last-child {\n    align-items: center;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    margin: 0;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0;\n    line-height: 20px;\n}\n\n.attribute-update-form .mat-button.getLocation {\n    margin-right: 10px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.attribute-update-form mat-form-field{\n    width: 100%;\n    padding-right: 5px;\n}\n\n.attribute-update-form.small-width mat-form-field{\n    width: 150px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let $scope;\r\nlet settings;\r\nlet attributeService;\r\nlet utils;\r\nlet translate;\r\n\r\nself.onInit = function() {\r\n    self.ctx.ngZone.run(function() {\r\n       init(); \r\n       self.ctx.detectChanges(true);\r\n    });\r\n};\r\n\r\n\r\nfunction init() {\r\n    $scope = self.ctx.$scope;\r\n    attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\r\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\r\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\r\n    $scope.toastTargetId = 'input-widget' + utils.guid();\r\n    settings = utils.deepClone(self.ctx.settings) || {};\r\n    \r\n    settings.showLabel = utils.defaultValue(settings.showLabel, true);\r\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\r\n    settings.showGetLocation = utils.defaultValue(settings.showGetLocation, true);\r\n    settings.enableHighAccuracy = utils.defaultValue(settings.enableHighAccuracy, false);\r\n    $scope.settings = settings;\r\n    $scope.isValidParameter = true;\r\n    $scope.dataKeyDetected = false; \r\n\r\n    $scope.isHorizontal = (settings.inputFieldsAlignment === 'row');\r\n    $scope.requiredErrorMessage = utils.customTranslation(settings.requiredErrorMessage, settings.requiredErrorMessage) || translate.instant('widgets.input-widgets.entity-coordinate-required');\r\n    $scope.latLabel = utils.customTranslation(settings.latLabel, settings.latLabel) || translate.instant('widgets.input-widgets.latitude');\r\n    $scope.lngLabel = utils.customTranslation(settings.lngLabel, settings.lngLabel) || translate.instant('widgets.input-widgets.longitude');\r\n\r\n    $scope.attributeUpdateFormGroup = $scope.fb.group(\r\n        {currentLat: [undefined, [$scope.validators.required,\r\n                                    $scope.validators.min(-90),\r\n                                    $scope.validators.max(90)]],\r\n        currentLng: [undefined, [$scope.validators.required,\r\n                                    $scope.validators.min(-180),\r\n                                    $scope.validators.max(180)]]}\r\n    );\r\n\r\n    if (self.ctx.datasources && self.ctx.datasources.length) {\r\n        var datasource = self.ctx.datasources[0];\r\n        if (datasource.type === 'entity') {\r\n            if (datasource.entityType && datasource.entityId) {\r\n                $scope.entityName = datasource.entityName;\r\n                if (settings.widgetTitle && settings.widgetTitle.length) {\r\n                    $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\r\n                } else {\r\n                    $scope.titleTemplate = self.ctx.widgetConfig.title;\r\n                }\r\n\r\n                $scope.entityDetected = true;\r\n            }\r\n        }\r\n        if (datasource.dataKeys.length > 1) {\r\n            $scope.dataKeyDetected = true;\r\n            for (let i = 0; i < datasource.dataKeys.length; i++) {\r\n                if (datasource.dataKeys[i].type != \"timeseries\"){\r\n                    $scope.isValidParameter = false;\r\n                }\r\n                if (datasource.dataKeys[i].name !== settings.latKeyName && datasource.dataKeys[i].name !== settings.lngKeyName){\r\n                    $scope.dataKeyDetected = false;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\r\n\r\n    $scope.updateAttribute = function () {\r\n        $scope.isFocused = false;\r\n        if ($scope.entityDetected) {\r\n            var datasource = self.ctx.datasources[0];\r\n\r\n            attributeService.saveEntityTimeseries(\r\n                datasource.entity.id,\r\n                'scope',\r\n                [\r\n                    {\r\n                        key: settings.latKeyName,\r\n                        value: $scope.attributeUpdateFormGroup.get('currentLat').value\r\n                    },{\r\n                        key: settings.lngKeyName,\r\n                        value: $scope.attributeUpdateFormGroup.get('currentLng').value\r\n                    }\r\n                ]\r\n            ).subscribe(\r\n                function success() {\r\n                    $scope.originalLat = $scope.attributeUpdateFormGroup.get('currentLat').value;\r\n                    $scope.originalLng = $scope.attributeUpdateFormGroup.get('currentLng').value;\r\n                    if (settings.showResultMessage) {\r\n                        $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\r\n                    }\r\n                },\r\n                function fail() {\r\n                    if (settings.showResultMessage) {\r\n                        $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\r\n                    }\r\n                }\r\n            );\r\n        }\r\n    };\r\n\r\n    $scope.changeFocus = function () {\r\n        if ($scope.attributeUpdateFormGroup.get('currentLat').value === $scope.originalLat && $scope.attributeUpdateFormGroup.get('currentLng').value === $scope.originalLng) {\r\n            $scope.isFocused = false;\r\n        }\r\n    };\r\n    \r\n    $scope.discardChange = function() {\r\n        $scope.attributeUpdateFormGroup.setValue({\r\n            'currentLat': $scope.originalLat,\r\n            'currentLng': $scope.originalLng\r\n        });\r\n        $scope.isFocused = false;\r\n        $scope.attributeUpdateFormGroup.markAsPristine();\r\n        self.onDataUpdated();\r\n    };\r\n    \r\n    $scope.disableButton = function () {\r\n        return $scope.attributeUpdateFormGroup.get('currentLat').value === $scope.originalLat && $scope.attributeUpdateFormGroup.get('currentLng').value === $scope.originalLng || $scope.currentLng === null || $scope.currentLat === null;\r\n    };\r\n    \r\n    $scope.getCoordinate = function() {\r\n        if (navigator.geolocation) {\r\n            navigator.geolocation.getCurrentPosition(showPosition, function (){\r\n                $scope.showErrorToast(translate.instant('widgets.input-widgets.blocked-location'), \r\n                                    'bottom', 'left', $scope.toastTargetId);\r\n            }, {\r\n                enableHighAccuracy: settings.enableHighAccuracy\r\n            });\r\n        } else {\r\n            $scope.showErrorToast(translate.instant('widgets.input-widgets.no-support-geolocation'), 'bottom', 'left', $scope.toastTargetId);\r\n        }\r\n    };\r\n    \r\n    function showPosition(position) {\r\n        $scope.attributeUpdateFormGroup.setValue({\r\n            currentLat: correctValue(position.coords.latitude),\r\n            currentLng: correctValue(position.coords.longitude)\r\n        });\r\n        $scope.attributeUpdateFormGroup.markAsDirty();\r\n        $scope.isFocused = true;\r\n    }\r\n    \r\n    self.onResize();\r\n}\r\n\r\nself.onDataUpdated = function() {\r\n    try {\r\n        if ($scope.dataKeyDetected) {\r\n            if (!$scope.isFocused) {\r\n                for(let i = 0; i < self.typeParameters().maxDataKeys; i++){\r\n                    if(self.ctx.data[i].dataKey.name === self.ctx.settings.latKeyName && $scope.attributeUpdateFormGroup.get('currentLat').pristine){\r\n                        $scope.originalLat = self.ctx.data[i].data[0][1];\r\n                        $scope.attributeUpdateFormGroup.get('currentLat').patchValue(correctValue($scope.originalLat));\r\n                    } else if(self.ctx.data[i].dataKey.name === self.ctx.settings.lngKeyName && $scope.attributeUpdateFormGroup.get('currentLng').pristine){\r\n                        $scope.originalLng = self.ctx.data[i].data[0][1];\r\n                        $scope.attributeUpdateFormGroup.get('currentLng').patchValue(correctValue($scope.originalLng));\r\n                    }\r\n                }\r\n                self.ctx.detectChanges();\r\n            }\r\n        }\r\n    } catch (e) {\r\n        console.log(e);\r\n    }\r\n};\r\n\r\nfunction correctValue(value) {\r\n    if (typeof value !== \"number\") {\r\n        return 0;\r\n    }\r\n    return value;\r\n}\r\n\r\nself.onResize = function() {\r\n    $scope.smallWidthContainer = (self.ctx.$container && self.ctx.$container[0].offsetWidth < 320);\r\n    $scope.changeAlignment = ($scope.isHorizontal && self.ctx.$container && self.ctx.$container[0].offsetWidth < 480);\r\n    self.ctx.detectChanges();\r\n};\r\n\r\nself.typeParameters = function() {\r\n    return {\r\n        maxDatasources: 1,\r\n        maxDataKeys: 2,\r\n        singleEntity: true\r\n    };\r\n};\r\n\r\nself.onDestroy = function() {\r\n\r\n};",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_server_image_attribute.json b/application/src/main/data/json/system/widget_types/update_server_image_attribute.json
index 79af76660c..b2b3c9600f 100644
--- a/application/src/main/data/json/system/widget_types/update_server_image_attribute.json
+++ b/application/src/main/data/json/system/widget_types/update_server_image_attribute.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3.5,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <tb-image-input fxFlex\n                        formControlName=\"currentValue\"\n                        [showPreview]=\"settings.displayPreview\"\n                        [showClearButton]=\"settings.displayClearButton\"\n                        >\n                    </tb-image-input>\n                </div>\n    \n                <div class=\"grid__element\">\n                    <button *ngIf=\"settings.displayApplyButton\" mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button *ngIf=\"settings.displayDiscardButton\" mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || !attributeUpdateFormGroup.dirty && settings.displayApplyButton\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\" >\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n  <form *ngIf=\"attributeUpdateFormGroup\"\n        class=\"attribute-update-form\"\n        [formGroup]=\"attributeUpdateFormGroup\"\n        (ngSubmit)=\"updateAttribute()\">\n    <div style=\"padding: 0 8px; margin: auto 0;\">\n      <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n        <div class=\"grid__element\">\n          <tb-image-input class=\"flex-1\"\n                          formControlName=\"currentValue\"\n                          [showPreview]=\"settings.displayPreview\"\n                          [showClearButton]=\"settings.displayClearButton\"\n          >\n          </tb-image-input>\n        </div>\n\n        <div class=\"grid__element\">\n          <button *ngIf=\"settings.displayApplyButton\" mat-icon-button class=\"applyChanges\"\n                  type=\"submit\"\n                  [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty\"\n                  matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                  matTooltipPosition=\"above\">\n            <mat-icon>check</mat-icon>\n          </button>\n          <button *ngIf=\"settings.displayDiscardButton\" mat-icon-button class=\"discardChanges\"\n                  type=\"button\"\n                  [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || !attributeUpdateFormGroup.dirty && settings.displayApplyButton\"\n                  (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue)\"\n                  matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                  matTooltipPosition=\"above\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </div>\n      </div>\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\">\n        {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n      </div>\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n           [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n        {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n      </div>\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n           [class.!hidden]=\"!entityDetected || isValidParameter\">\n        {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n      </div>\n    </div>\n  </form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex: 1;\n}\n.grid__element:last-child {\n    align-items: center;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0 !important;\n    line-height: 20px;\n}\n\n.tb-image-preview-container div,\n.tb-flow-drop label {\n    font-size: 16px !important;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let $scope;\r\nlet settings;\r\nlet attributeService;\r\nlet utils;\r\nlet translate;\r\n\r\nself.onInit = function() {\r\n    self.ctx.ngZone.run(function() {\r\n       init(); \r\n       self.ctx.detectChanges(true);\r\n    });\r\n};\r\n\r\nfunction init() {\r\n\r\n    $scope = self.ctx.$scope;\r\n    attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\r\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\r\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\r\n    $scope.toastTargetId = 'input-widget' + utils.guid();\r\n    settings = utils.deepClone(self.ctx.settings) || {};\r\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\r\n    settings.displayPreview = utils.defaultValue(settings.displayPreview, true);\r\n    settings.displayClearButton = utils.defaultValue(settings.displayClearButton, false);\r\n    settings.displayApplyButton = utils.defaultValue(settings.displayApplyButton, true);\r\n    settings.displayDiscardButton = utils.defaultValue(settings.displayDiscardButton, true);\r\n    $scope.settings = settings;\r\n    $scope.isValidParameter = true;\r\n    $scope.dataKeyDetected = false;\r\n    $scope.entityDetected = false;\r\n    \r\n    $scope.attributeUpdateFormGroup = $scope.fb.group(\r\n        {currentValue: [undefined, []]}\r\n    );\r\n    \r\n    $scope.attributeUpdateFormGroup.valueChanges.subscribe( () => {\r\n        self.ctx.detectChanges();\r\n        if (!settings.displayApplyButton) {\r\n            $scope.updateAttribute();\r\n        }\r\n    });\r\n\r\n    if (self.ctx.datasources && self.ctx.datasources.length) {\r\n        var datasource = self.ctx.datasources[0];\r\n        \r\n        if (datasource.type === 'entity') {\r\n            if (datasource.entityType && datasource.entityId) {\r\n                $scope.entityName = datasource.entityName;\r\n                if (settings.widgetTitle && settings.widgetTitle.length) {\r\n                    $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\r\n                } else {\r\n                    $scope.titleTemplate = self.ctx.widgetConfig.title;\r\n                }\r\n\r\n                $scope.entityDetected = true;\r\n            }\r\n        }\r\n        if (datasource.dataKeys.length) {\r\n            if (datasource.dataKeys[0].type !== \"attribute\") {\r\n                $scope.isValidParameter = false;\r\n            } else {\r\n                $scope.currentKey = datasource.dataKeys[0].name;\r\n                $scope.dataKeyType = datasource.dataKeys[0].type;\r\n                $scope.dataKeyDetected = true;\r\n            }\r\n        }\r\n    }\r\n\r\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\r\n    \r\n    $scope.updateAttribute = function () {\r\n        if ($scope.entityDetected) {\r\n            var datasource = self.ctx.datasources[0];\r\n\r\n            attributeService.saveEntityAttributes(\r\n                datasource.entity.id,\r\n                'SERVER_SCOPE',\r\n                [\r\n                    {\r\n                        key: $scope.currentKey,\r\n                        value: $scope.attributeUpdateFormGroup.get('currentValue').value\r\n                    }\r\n                ]\r\n            ).subscribe(\r\n                function success() {\r\n                    if (settings.displayApplyButton) {\r\n                        $scope.originalValue = $scope.attributeUpdateFormGroup.get('currentValue').value;\r\n                    }\r\n                    if (settings.showResultMessage) {\r\n                        $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\r\n                    }\r\n                },\r\n                function fail() {\r\n                    if (settings.showResultMessage) {\r\n                        $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\r\n                    }\r\n                }\r\n            );\r\n        }\r\n    };\r\n}\r\n\r\nself.onDataUpdated = function() {\r\n    try {\r\n        if ($scope.dataKeyDetected) {\r\n            var value = self.ctx.data[0].data[0][1];\r\n            if (settings.displayApplyButton || !$scope.originalValue) {\r\n                $scope.originalValue = value;\r\n            }\r\n            $scope.attributeUpdateFormGroup.get('currentValue').patchValue(value, {emitEvent: false});\r\n            self.ctx.detectChanges();\r\n        }\r\n    } catch (e) {\r\n        console.log(e);\r\n    }\r\n};\r\n\r\nself.onResize = function() {\r\n\r\n};\r\n\r\nself.typeParameters = function() {\r\n    return {\r\n        maxDatasources: 1,\r\n        maxDataKeys: 1,\r\n        singleEntity: true\r\n    };\r\n};\r\n\r\nself.onDestroy = function() {\r\n    $scope.attributeUpdateFormGroup.valueChanges.unsubscribe();\r\n}",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_shared_image_attribute.json b/application/src/main/data/json/system/widget_types/update_shared_image_attribute.json
index 895ef845c9..1feedab987 100644
--- a/application/src/main/data/json/system/widget_types/update_shared_image_attribute.json
+++ b/application/src/main/data/json/system/widget_types/update_shared_image_attribute.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3.5,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <tb-image-input fxFlex\n                        formControlName=\"currentValue\"\n                        [showPreview]=\"settings.displayPreview\"\n                        [showClearButton]=\"settings.displayClearButton\"\n                        >\n                    </tb-image-input>\n                </div>\n    \n                <div class=\"grid__element\">\n                    <button *ngIf=\"settings.displayApplyButton\" mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button *ngIf=\"settings.displayDiscardButton\" mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || !attributeUpdateFormGroup.dirty && settings.displayApplyButton\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\" [innerHtml]=\"message\"></div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n  <form *ngIf=\"attributeUpdateFormGroup\"\n        class=\"attribute-update-form\"\n        [formGroup]=\"attributeUpdateFormGroup\"\n        (ngSubmit)=\"updateAttribute()\">\n    <div style=\"padding: 0 8px; margin: auto 0;\">\n      <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n        <div class=\"grid__element\">\n          <tb-image-input class=\"flex-1\"\n                          formControlName=\"currentValue\"\n                          [showPreview]=\"settings.displayPreview\"\n                          [showClearButton]=\"settings.displayClearButton\"\n          >\n          </tb-image-input>\n        </div>\n\n        <div class=\"grid__element\">\n          <button *ngIf=\"settings.displayApplyButton\" mat-icon-button class=\"applyChanges\"\n                  type=\"submit\"\n                  [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty\"\n                  matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                  matTooltipPosition=\"above\">\n            <mat-icon>check</mat-icon>\n          </button>\n          <button *ngIf=\"settings.displayDiscardButton\" mat-icon-button class=\"discardChanges\"\n                  type=\"button\"\n                  [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || !attributeUpdateFormGroup.dirty && settings.displayApplyButton\"\n                  (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue)\"\n                  matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                  matTooltipPosition=\"above\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </div>\n      </div>\n\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\" [innerHtml]=\"message\"></div>\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n           [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n        {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n      </div>\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n           [class.!hidden]=\"!entityDetected || isValidParameter\">\n        {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n      </div>\n    </div>\n  </form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex: 1;\n}\n.grid__element:last-child {\n    align-items: center;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0 !important;\n    line-height: 20px;\n}\n\n.tb-image-preview-container div,\n.tb-flow-drop label {\n    font-size: 16px !important;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let $scope;\r\nlet settings;\r\nlet attributeService;\r\nlet utils;\r\nlet translate;\r\n\r\nself.onInit = function() {\r\n    self.ctx.ngZone.run(function() {\r\n       init(); \r\n       self.ctx.detectChanges(true);\r\n    });\r\n};\r\n\r\nfunction init() {\r\n\r\n    $scope = self.ctx.$scope;\r\n    attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\r\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\r\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\r\n    $scope.toastTargetId = 'input-widget' + utils.guid();\r\n    settings = utils.deepClone(self.ctx.settings) || {};\r\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\r\n    settings.displayPreview = utils.defaultValue(settings.displayPreview, true);\r\n    settings.displayClearButton = utils.defaultValue(settings.displayClearButton, false);\r\n    settings.displayApplyButton = utils.defaultValue(settings.displayApplyButton, true);\r\n    settings.displayDiscardButton = utils.defaultValue(settings.displayDiscardButton, true);\r\n    $scope.settings = settings;\r\n    $scope.isValidParameter = true;\r\n    $scope.dataKeyDetected = false;\r\n    $scope.entityDetected = false;\r\n    $scope.message = translate.instant('widgets.input-widgets.no-entity-selected');\r\n    \r\n    $scope.attributeUpdateFormGroup = $scope.fb.group(\r\n        {currentValue: [undefined, []]}\r\n    );\r\n    \r\n    $scope.attributeUpdateFormGroup.valueChanges.subscribe( () => {\r\n        self.ctx.detectChanges();\r\n         if (!settings.displayApplyButton) {\r\n            $scope.updateAttribute();\r\n        }\r\n    });\r\n\r\n    if (self.ctx.datasources && self.ctx.datasources.length) {\r\n        var datasource = self.ctx.datasources[0];\r\n        \r\n        if (datasource.type === 'entity') {\r\n            if (datasource.entityType === 'DEVICE') {\r\n                if (datasource.entityType && datasource.entityId) {\r\n                    $scope.entityName = datasource.entityName;\r\n                    if (settings.widgetTitle && settings.widgetTitle.length) {\r\n                        $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\r\n                    } else {\r\n                        $scope.titleTemplate = self.ctx.widgetConfig.title;\r\n                    }\r\n    \r\n                    $scope.entityDetected = true;\r\n                }\r\n            } else {\r\n                $scope.message = translate.instant('widgets.input-widgets.not-allowed-entity');\r\n            }\r\n        }\r\n        if (datasource.dataKeys.length) {\r\n            if (datasource.dataKeys[0].type !== \"attribute\") {\r\n                $scope.isValidParameter = false;\r\n            } else {\r\n                $scope.currentKey = datasource.dataKeys[0].name;\r\n                $scope.dataKeyType = datasource.dataKeys[0].type;\r\n                $scope.dataKeyDetected = true;\r\n            }\r\n        }\r\n    }\r\n\r\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\r\n    \r\n    $scope.updateAttribute = function () {\r\n        if ($scope.entityDetected) {\r\n            var datasource = self.ctx.datasources[0];\r\n\r\n            attributeService.saveEntityAttributes(\r\n                datasource.entity.id,\r\n                'SHARED_SCOPE',\r\n                [\r\n                    {\r\n                        key: $scope.currentKey,\r\n                        value: $scope.attributeUpdateFormGroup.get('currentValue').value\r\n                    }\r\n                ]\r\n            ).subscribe(\r\n                function success() {\r\n                    if (settings.displayApplyButton) {\r\n                        $scope.originalValue = $scope.attributeUpdateFormGroup.get('currentValue').value;\r\n                    }\r\n                    if (settings.showResultMessage) {\r\n                        $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\r\n                    }\r\n                },\r\n                function fail() {\r\n                    if (settings.showResultMessage) {\r\n                        $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\r\n                    }\r\n                }\r\n            );\r\n        }\r\n    };\r\n}\r\n\r\nself.onDataUpdated = function() {\r\n    try {\r\n        if ($scope.dataKeyDetected) {\r\n            var value = self.ctx.data[0].data[0][1];\r\n            if (settings.displayApplyButton || !$scope.originalValue) {\r\n                $scope.originalValue = value;\r\n            }\r\n            $scope.attributeUpdateFormGroup.get('currentValue').patchValue(value, {emitEvent: false});\r\n            self.ctx.detectChanges();\r\n        }\r\n    } catch (e) {\r\n        console.log(e);\r\n    }\r\n};\r\n\r\nself.onResize = function() {\r\n\r\n};\r\n\r\nself.typeParameters = function() {\r\n    return {\r\n        maxDatasources: 1,\r\n        maxDataKeys: 1,\r\n        singleEntity: true\r\n    };\r\n};\r\n\r\nself.onDestroy = function() {\r\n    $scope.attributeUpdateFormGroup.valueChanges.unsubscribe();\r\n}",
     "settingsSchema": "",

From a1df7ad22080ee90843b6933f1f95284035b2ab6 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Fri, 18 Oct 2024 13:16:24 +0300
Subject: [PATCH 31/34] Flex layout replacements. Switch to tailwind.css.

---
 .../data/json/system/widget_types/device_claiming_widget.json   | 2 +-
 .../json/system/widget_types/update_boolean_timeseries.json     | 2 +-
 .../data/json/system/widget_types/update_double_timeseries.json | 2 +-
 .../json/system/widget_types/update_integer_timeseries.json     | 2 +-
 .../json/system/widget_types/update_location_timeseries.json    | 2 +-
 .../system/widget_types/update_server_boolean_attribute.json    | 2 +-
 .../json/system/widget_types/update_server_date_attribute.json  | 2 +-
 .../system/widget_types/update_server_double_attribute.json     | 2 +-
 .../system/widget_types/update_server_integer_attribute.json    | 2 +-
 .../system/widget_types/update_server_location_attribute.json   | 2 +-
 .../system/widget_types/update_server_string_attribute.json     | 2 +-
 .../system/widget_types/update_shared_boolean_attribute.json    | 2 +-
 .../json/system/widget_types/update_shared_date_attribute.json  | 2 +-
 .../system/widget_types/update_shared_double_attribute.json     | 2 +-
 .../system/widget_types/update_shared_integer_attribute.json    | 2 +-
 .../system/widget_types/update_shared_location_attribute.json   | 2 +-
 .../system/widget_types/update_shared_string_attribute.json     | 2 +-
 .../data/json/system/widget_types/update_string_timeseries.json | 2 +-
 18 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/application/src/main/data/json/system/widget_types/device_claiming_widget.json b/application/src/main/data/json/system/widget_types/device_claiming_widget.json
index 4ac8654ab4..02b3d1aa53 100644
--- a/application/src/main/data/json/system/widget_types/device_claiming_widget.json
+++ b/application/src/main/data/json/system/widget_types/device_claiming_widget.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 4.5,
     "resources": [],
-    "templateHtml": "<form *ngIf=\"claimDeviceFormGroup\" #claimDeviceForm=\"ngForm\" [formGroup]=\"claimDeviceFormGroup\"\n      tb-toast toastTarget=\"{{ toastTargetId }}\"\n      class=\"claim-form\" (ngSubmit)=\"claim(claimDeviceForm)\">\n    <fieldset [disabled]=\"(isLoading$ | async) || loading\">\n        <mat-form-field class=\"mat-block\">\n            <mat-label *ngIf=\"showLabel\">{{deviceLabel}}</mat-label>\n            <input matInput formControlName=\"deviceName\" required>\n            <mat-error *ngIf=\"claimDeviceFormGroup.get('deviceName').hasError('required')\">\n                {{requiredErrorDevice}}\n            </mat-error>\n        </mat-form-field>\n        <mat-form-field *ngIf=\"secretKeyField\" class=\"mat-block\">\n            <mat-label *ngIf=\"showLabel\">{{secretKeyLabel}}</mat-label>\n            <input matInput formControlName=\"deviceSecret\" required>\n            <mat-error *ngIf=\"claimDeviceFormGroup.get('deviceSecret').hasError('required')\">\n                {{requiredErrorSecretKey}}\n            </mat-error>\n        </mat-form-field>\n    </fieldset>\n    <div class=\"mat-block\" fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-button mat-raised-button color=\"primary\"\n            type=\"submit\" [disabled]=\"(isLoading$ | async) || claimDeviceForm.invalid || !claimDeviceForm.dirty\">\n            {{labelClaimButon}}\n        </button>\n    </div>\n</form>\n",
+    "templateHtml": "<form *ngIf=\"claimDeviceFormGroup\" #claimDeviceForm=\"ngForm\" [formGroup]=\"claimDeviceFormGroup\"\n      tb-toast toastTarget=\"{{ toastTargetId }}\"\n      class=\"claim-form\" (ngSubmit)=\"claim(claimDeviceForm)\">\n  <fieldset [disabled]=\"(isLoading$ | async) || loading\">\n    <mat-form-field class=\"mat-block\">\n      <mat-label *ngIf=\"showLabel\">{{deviceLabel}}</mat-label>\n      <input matInput formControlName=\"deviceName\" required>\n      <mat-error *ngIf=\"claimDeviceFormGroup.get('deviceName').hasError('required')\">\n        {{requiredErrorDevice}}\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field *ngIf=\"secretKeyField\" class=\"mat-block\">\n      <mat-label *ngIf=\"showLabel\">{{secretKeyLabel}}</mat-label>\n      <input matInput formControlName=\"deviceSecret\" required>\n      <mat-error *ngIf=\"claimDeviceFormGroup.get('deviceSecret').hasError('required')\">\n        {{requiredErrorSecretKey}}\n      </mat-error>\n    </mat-form-field>\n  </fieldset>\n  <div class=\"mat-block flex flex-row items-center justify-end\">\n    <button mat-button mat-raised-button color=\"primary\"\n            type=\"submit\" [disabled]=\"(isLoading$ | async) || claimDeviceForm.invalid || !claimDeviceForm.dirty\">\n      {{labelClaimButon}}\n    </button>\n  </div>\n</form>\n",
     "templateCss": ".claim-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n",
     "controllerScript": "let $scope;\n\nself.onInit = function() {\n    self.ctx.ngZone.run(function() {\n       init(); \n       self.ctx.detectChanges(true);\n    });\n}\n\nfunction init() {\n    $scope = self.ctx.$scope;\n    let $injector = $scope.$injector;\n    let utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n    let $translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\n    let deviceService = $scope.$injector.get(self.ctx.servicesMap.get('deviceService'));\n    let settings = self.ctx.settings || {};\n    \n    $scope.toastTargetId = 'device-claiming-widget' + utils.guid();\n    $scope.secretKeyField = settings.deviceSecret;\n    $scope.showLabel = settings.showLabel;\n\n    let titleTemplate = \"\";\n    let successfulClaim = utils.customTranslation(settings.successfulClaimDevice, settings.successfulClaimDevice) || $translate.instant('widgets.input-widgets.claim-successful');\n    let failedClaimDevice = utils.customTranslation(settings.failedClaimDevice, settings.failedClaimDevice) || $translate.instant('widgets.input-widgets.claim-failed');\n    let deviceNotFound = utils.customTranslation(settings.deviceNotFound, settings.deviceNotFound) || $translate.instant('widgets.input-widgets.claim-not-found');\n    \n    if (settings.widgetTitle && settings.widgetTitle.length) {\n        titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\n    } else {\n        titleTemplate = self.ctx.widgetConfig.title;\n    }\n    self.ctx.widgetTitle = titleTemplate;\n    \n    $scope.deviceLabel = utils.customTranslation(settings.deviceLabel, settings.deviceLabel) || $translate.instant('widgets.input-widgets.device-name');\n    $scope.requiredErrorDevice= utils.customTranslation(settings.requiredErrorDevice, settings.requiredErrorDevice) || $translate.instant('widgets.input-widgets.device-name-required');\n    \n    $scope.secretKeyLabel = utils.customTranslation(settings.secretKeyLabel, settings.secretKeyLabel) || $translate.instant('widgets.input-widgets.secret-key');\n    $scope.requiredErrorSecretKey= utils.customTranslation(settings.requiredErrorSecretKey, settings.requiredErrorSecretKey) || $translate.instant('widgets.input-widgets.secret-key-required');\n    \n    $scope.labelClaimButon = utils.customTranslation(settings.labelClaimButon, settings.labelClaimButon) || $translate.instant('widgets.input-widgets.claim-device');\n    \n    $scope.claimDeviceFormGroup = $scope.fb.group(\n        {deviceName: ['', [$scope.validators.required]]}\n    );\n    if ($scope.secretKeyField) {\n        $scope.claimDeviceFormGroup.addControl('deviceSecret', $scope.fb.control('', [$scope.validators.required]));\n    }\n    \n    $scope.claim = function(claimDeviceForm) {\n        $scope.loading = true;\n\n        let deviceName = $scope.claimDeviceFormGroup.get('deviceName').value;\n        let claimRequest = {};\n        if ($scope.secretKeyField) {\n            claimRequest.secretKey = $scope.claimDeviceFormGroup.get('deviceSecret').value;\n        }\n        deviceService.claimDevice(deviceName, claimRequest, { ignoreErrors: true }).subscribe(\n            function (data) {\n                successClaim(claimDeviceForm);\n                self.ctx.detectChanges();\n            },\n            function (error) {\n                $scope.loading = false;\n                if(error.status == 404) {\n                    $scope.showErrorToast(deviceNotFound, 'bottom', 'left', $scope.toastTargetId);\n                } else {\n                    let errorMessage = failedClaimDevice;\n                    if (error.status !== 400) {\n                        if (error.error && error.error.message) {\n                            errorMessage = error.error.message;\n                        }\n                    }\n                    $scope.showErrorToast(errorMessage, 'bottom', 'left', $scope.toastTargetId);\n                }    \n                self.ctx.detectChanges();\n            }\n        );\n    }\n\n    function successClaim(claimDeviceForm) {\n        let deviceObj = {\n            deviceName: ''\n        };\n        if ($scope.secretKeyField) {\n            deviceObj.deviceSecret = '';\n        }    \n        claimDeviceForm.resetForm();    \n        $scope.claimDeviceFormGroup.reset(deviceObj);\n        $scope.loading = false;\n        $scope.showSuccessToast(successfulClaim, 2000, 'bottom', 'left', $scope.toastTargetId);\n        self.ctx.updateAliases();\n    }\n    \n}\n",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_boolean_timeseries.json b/application/src/main/data/json/system/widget_types/update_boolean_timeseries.json
index 7054be76be..6467ba1836 100644
--- a/application/src/main/data/json/system/widget_types/update_boolean_timeseries.json
+++ b/application/src/main/data/json/system/widget_types/update_boolean_timeseries.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-checkbox formControlName=\"checkboxValue\"\n                                  (change)=\"changed()\"\n                                  aria-label=\"{{'widgets.input-widgets.switch-timeseries-value' | translate}}\">\n                        {{currentValue}}\n                    </mat-checkbox>\n                </div>\n            </div>\n\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\">\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-timeseries-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !isValidParameter\">\n                {{ 'widgets.input-widgets.attribute-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-checkbox formControlName=\"checkboxValue\"\n                                  (change)=\"changed()\"\n                                  aria-label=\"{{'widgets.input-widgets.switch-timeseries-value' | translate}}\">\n                        {{currentValue}}\n                    </mat-checkbox>\n                </div>\n            </div>\n\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\">\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-timeseries-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || isValidParameter\">\n                {{ 'widgets.input-widgets.attribute-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
     "templateCss": ".attribute-update-form {\r\n    overflow: hidden;\r\n    height: 100%;\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n\r\n.attribute-update-form__grid {\r\n    display: flex;\r\n}\r\n.grid__element:first-child {\r\n    flex: 1;\r\n}\r\n\r\n.grid__element {\r\n    display: flex;\r\n}\r\n\r\n.attribute-update-form .mat-button.mat-icon-button {\r\n    width: 32px;\r\n    min-width: 32px;\r\n    height: 32px;\r\n    min-height: 32px;\r\n    padding: 0 !important;\r\n    margin: 0 !important;\r\n    line-height: 20px;\r\n}\r\n\r\n.attribute-update-form .mat-icon-button mat-icon {\r\n    width: 20px;\r\n    min-width: 20px;\r\n    height: 20px;\r\n    min-height: 20px;\r\n    font-size: 20px;\r\n}\r\n\r\n.tb-toast {\r\n    font-size: 14px!important;\r\n}",
     "controllerScript": "let settings;\nlet utils;\nlet translate;\nlet http;\nlet $scope;\nlet map;\n\nself.onInit = function() {\n    self.ctx.ngZone.run(function() {\n        init();\n        self.ctx.detectChanges(true);\n    });\n};\n\n\nfunction init() {\n    $scope = self.ctx.$scope;\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\n    http = $scope.$injector.get(self.ctx.servicesMap.get('http'));\n    $scope.toastTargetId = 'input-widget' + utils.guid();\n    settings = utils.deepClone(self.ctx.settings) || {};\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\n\n    $scope.isValidParameter = true;\n    $scope.dataKeyDetected = false;\n\n    settings.trueValue = utils.defaultValue(utils.customTranslation(settings.trueValue, settings.trueValue), true);\n    settings.falseValue = utils.defaultValue(utils.customTranslation(settings.falseValue, settings.falseValue), false);\n\n    map = {\n        true: settings.trueValue,\n        false: settings.falseValue\n    };\n    \n    $scope.checkboxValue = false;\n    $scope.currentValue = map[$scope.checkboxValue];\n\n    $scope.attributeUpdateFormGroup = $scope.fb.group({checkboxValue: [$scope.checkboxValue]});\n\n    $scope.changed = function() {\n        $scope.checkboxValue = $scope.attributeUpdateFormGroup.get('checkboxValue').value;\n        $scope.currentValue = map[$scope.checkboxValue];\n        $scope.updateAttribute();\n    };\n\n    if (self.ctx.datasources && self.ctx.datasources.length) {\n        var datasource = self.ctx.datasources[0];\n        if (datasource.type === 'entity') {\n            if (datasource.entityType && datasource.entityId) {\n                $scope.entityName = datasource.entityName;\n                if (settings.widgetTitle && settings.widgetTitle.length) {\n                    $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\n                } else {\n                    $scope.titleTemplate = self.ctx.widgetConfig.title;\n                }\n\n                $scope.entityDetected = true;\n            }\n        }\n        if (datasource.dataKeys.length) {\n            if (datasource.dataKeys[0].type !== \"timeseries\") {\n                $scope.isValidParameter = false;\n            } else {\n                $scope.currentKey = datasource.dataKeys[0].name;\n                $scope.dataKeyType = datasource.dataKeys[0].type;\n                $scope.dataKeyDetected = true;\n            }\n        }\n    }\n\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\n\n    $scope.updateAttribute = function() {\n        if ($scope.entityDetected) {\n            var datasource = self.ctx.datasources[0];\n\n            let observable = saveEntityTimeseries(\n                datasource.entityType,\n                datasource.entityId,\n                [{\n                    key: $scope.currentKey,\n                    value: $scope.checkboxValue\n                }]\n            );\n\n            if (observable) {\n                observable.subscribe(\n                    function success() {\n                       $scope.originalValue = $scope.attributeUpdateFormGroup.get('checkboxValue').value;\n                        if (settings.showResultMessage) {\n                            $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\n                        }\n                    },\n                    function fail() {\n                        if (settings.showResultMessage) {\n                            $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\n                        }\n                    }\n                );\n            }\n        }\n    };\n\n    function saveEntityTimeseries(entityType, entityId, telemetries) {\n        var telemetriesData = {};\n        for (var a = 0; a < telemetries.length; a++) {\n            if (typeof telemetries[a].value !== 'undefined' && telemetries[a].value !== null) {\n                telemetriesData[telemetries[a].key] = telemetries[a].value;\n            }\n        }\n        if (Object.keys(telemetriesData).length) {\n            var url = '/api/plugins/telemetry/' + entityType + '/' + entityId + '/timeseries/scope';\n            return http.post(url, telemetriesData);\n        }\n        return null;\n    }\n}\n\nself.onDataUpdated = function() {\n    try {\n        if ($scope.dataKeyDetected) {\n            $scope.checkboxValue = self.ctx.data[0].data[0][1] === 'true';\n            $scope.currentValue = map[$scope.checkboxValue];\n            $scope.attributeUpdateFormGroup.get('checkboxValue').patchValue($scope.checkboxValue);\n            self.ctx.detectChanges();\n        }\n    } catch (e) {\n        console.log(e);\n    }\n}\n\nself.onResize = function() {}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    }\n}\n\nself.onDestroy = function() {}",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_double_timeseries.json b/application/src/main/data/json/system/widget_types/update_double_timeseries.json
index 38b5a8e501..01357bdddd 100644
--- a/application/src/main/data/json/system/widget_types/update_double_timeseries.json
+++ b/application/src/main/data/json/system/widget_types/update_double_timeseries.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentValue\"\n                               required\n                               type=\"number\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               max=\"{{settings.maxValue}}\"\n                               min=\"{{settings.minValue}}\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required')\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-timeseries' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\">\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxShow]=\"entityDetected && !dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-timeseries-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxShow]=\"entityDetected && !isValidParameter\">\n                {{ 'widgets.input-widgets.attribute-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentValue\"\n                               required\n                               type=\"number\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               max=\"{{settings.maxValue}}\"\n                               min=\"{{settings.minValue}}\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required')\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-timeseries' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\">\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-timeseries-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"!entityDetected || isValidParameter\">\n                {{ 'widgets.input-widgets.attribute-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex: 1;\n}\n.grid__element:last-child {\n    margin-top: 19px;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0 !important;\n    line-height: 20px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let $scope;\nlet settings;\nlet utils;\nlet translate;\nlet http;\n\nself.onInit = function() {\n    self.ctx.ngZone.run(function() {\n       init(); \n       self.ctx.detectChanges(true);\n    });\n};\n\n\nfunction init() {\n    $scope = self.ctx.$scope;\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\n    http = $scope.$injector.get(self.ctx.servicesMap.get('http'));\n    $scope.toastTargetId = 'input-widget' + utils.guid();\n    settings = utils.deepClone(self.ctx.settings) || {};\n    settings.showLabel = utils.defaultValue(settings.showLabel, true);\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\n    $scope.settings = settings;\n    $scope.isValidParameter = true;\n    $scope.dataKeyDetected = false;\n    $scope.requiredErrorMessage = utils.customTranslation(settings.requiredErrorMessage, settings.requiredErrorMessage) || translate.instant('widgets.input-widgets.entity-timeseries-required');\n    $scope.labelValue = utils.customTranslation(settings.labelValue, settings.labelValue) || translate.instant('widgets.input-widgets.value');\n\n    $scope.attributeUpdateFormGroup = $scope.fb.group(\n        {currentValue: [undefined, [$scope.validators.required,\n                                    $scope.validators.min(settings.minValue),\n                                    $scope.validators.max(settings.maxValue)]]}\n    );\n\n    if (self.ctx.datasources && self.ctx.datasources.length) {\n        var datasource = self.ctx.datasources[0];\n        if (datasource.type === 'entity') {\n            if (datasource.entityType && datasource.entityId) {\n                $scope.entityName = datasource.entityName;\n                if (settings.widgetTitle && settings.widgetTitle.length) {\n                    $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\n                } else {\n                    $scope.titleTemplate = self.ctx.widgetConfig.title;\n                }\n\n                $scope.entityDetected = true;\n            }\n        }\n        if (datasource.dataKeys.length) {\n            if (datasource.dataKeys[0].type !== \"timeseries\") {\n                $scope.isValidParameter = false;\n            } else {\n                $scope.currentKey = datasource.dataKeys[0].name;\n                $scope.dataKeyType = datasource.dataKeys[0].type;\n                $scope.dataKeyDetected = true;\n            }\n        }\n    }\n\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\n\n    $scope.updateAttribute = function () {\n        $scope.isFocused = false;\n        if ($scope.entityDetected) {\n            var datasource = self.ctx.datasources[0];\n\n            let observable = saveEntityTimeseries(\n                datasource.entityType,\n                datasource.entityId,\n                [\n                    {\n                        key: $scope.currentKey,\n                        value: $scope.attributeUpdateFormGroup.get('currentValue').value\n                    }\n                ]\n            );\n            if (observable) {\n                observable.subscribe(\n                    function success() {\n                        $scope.originalValue = $scope.attributeUpdateFormGroup.get('currentValue').value;\n                        if (settings.showResultMessage) {\n                            $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\n                        }\n                    },\n                    function fail() {\n                        if (settings.showResultMessage) {\n                            $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\n                        }\n                    }\n                );\n            }\n        }\n    };\n\n    $scope.changeFocus = function () {\n        if ($scope.attributeUpdateFormGroup.get('currentValue').value === $scope.originalValue) {\n            $scope.isFocused = false;\n        }\n    }\n\n    function saveEntityTimeseries(entityType, entityId, telemetries) {\n        var telemetriesData = {};\n        for (var a = 0; a < telemetries.length; a++) {\n            if (typeof telemetries[a].value !== 'undefined' && telemetries[a].value !== null) {\n                telemetriesData[telemetries[a].key] = telemetries[a].value;\n            }\n        }\n        if (Object.keys(telemetriesData).length) {\n            var url = '/api/plugins/telemetry/' + entityType + '/' + entityId + '/timeseries/scope';\n            return http.post(url, telemetriesData);\n        }\n        return null;\n    }\n}\n\nself.onDataUpdated = function() {\n\n    try {\n        if ($scope.dataKeyDetected) {\n            if (!$scope.isFocused) {\n                $scope.originalValue = self.ctx.data[0].data[0][1];\n                $scope.attributeUpdateFormGroup.get('currentValue').patchValue(correctValue($scope.originalValue));\n                self.ctx.detectChanges();\n            }\n        }\n    } catch (e) {\n        console.log(e);\n    }\n}\n\nfunction correctValue(value) {\n    if (typeof value !== \"number\") {\n        return 0;\n    }\n    return value;\n}\n\nself.onResize = function() {\n\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        dataKeyOptional: true\n    }\n}\n\nself.onDestroy = function() {\n\n}",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_integer_timeseries.json b/application/src/main/data/json/system/widget_types/update_integer_timeseries.json
index 52039b96e9..c2d352069d 100644
--- a/application/src/main/data/json/system/widget_types/update_integer_timeseries.json
+++ b/application/src/main/data/json/system/widget_types/update_integer_timeseries.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n<form *ngIf=\"attributeUpdateFormGroup\"\n      class=\"attribute-update-form\"\n      [formGroup]=\"attributeUpdateFormGroup\"\n      (ngSubmit)=\"updateAttribute()\">\n    <div style=\"padding: 0 8px; margin: auto 0;\">\n        <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n            <div class=\"grid__element\">\n                <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                [hideRequiredMarker]=\"!settings.showLabel\">\n                    <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                    <input matInput\n                           formControlName=\"currentValue\"\n                           required\n                           type=\"number\"\n                           step=\"1\"\n                           pattern=\"^-?[0-9]+$\"\n                           (focus)=\"isFocused = true\"\n                           (blur)=\"changeFocus()\"\n                           max=\"{{settings.maxValue}}\"\n                           min=\"{{settings.minValue}}\"/>\n                    <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required')\">\n                        {{requiredErrorMessage}}\n                    </mat-error>\n                </mat-form-field>    \n            </div>\n\n            <div class=\"grid__element\">\n                <button mat-icon-button class=\"applyChanges\"\n                           type=\"submit\"\n                           [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty\"\n                           matTooltip=\"{{ 'widgets.input-widgets.update-timeseries' | translate }}\"\n                           matTooltipPosition=\"above\">\n                    <mat-icon>check</mat-icon>\n                </button>\n                <button mat-icon-button class=\"discardChanges\"\n                           type=\"button\"\n                           [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                           (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                           matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                           matTooltipPosition=\"above\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            </div>\n        </div>\n\n        <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\">\n            {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n        </div>\n        <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxShow]=\"entityDetected && !dataKeyDetected\">\n            {{ 'widgets.input-widgets.no-timeseries-selected' | translate }}\n        </div>\n        <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxShow]=\"entityDetected && !isValidParameter\">\n            {{ 'widgets.input-widgets.attribute-not-allowed' | translate }}\n        </div>\n    </div>\n</form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n<form *ngIf=\"attributeUpdateFormGroup\"\n      class=\"attribute-update-form\"\n      [formGroup]=\"attributeUpdateFormGroup\"\n      (ngSubmit)=\"updateAttribute()\">\n    <div style=\"padding: 0 8px; margin: auto 0;\">\n        <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n            <div class=\"grid__element\">\n                <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                [hideRequiredMarker]=\"!settings.showLabel\">\n                    <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                    <input matInput\n                           formControlName=\"currentValue\"\n                           required\n                           type=\"number\"\n                           step=\"1\"\n                           pattern=\"^-?[0-9]+$\"\n                           (focus)=\"isFocused = true\"\n                           (blur)=\"changeFocus()\"\n                           max=\"{{settings.maxValue}}\"\n                           min=\"{{settings.minValue}}\"/>\n                    <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required')\">\n                        {{requiredErrorMessage}}\n                    </mat-error>\n                </mat-form-field>    \n            </div>\n\n            <div class=\"grid__element\">\n                <button mat-icon-button class=\"applyChanges\"\n                           type=\"submit\"\n                           [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty\"\n                           matTooltip=\"{{ 'widgets.input-widgets.update-timeseries' | translate }}\"\n                           matTooltipPosition=\"above\">\n                    <mat-icon>check</mat-icon>\n                </button>\n                <button mat-icon-button class=\"discardChanges\"\n                           type=\"button\"\n                           [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                           (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                           matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                           matTooltipPosition=\"above\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            </div>\n        </div>\n\n        <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\">\n            {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n        </div>\n        <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n            {{ 'widgets.input-widgets.no-timeseries-selected' | translate }}\n        </div>\n        <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"!entityDetected || isValidParameter\">\n            {{ 'widgets.input-widgets.attribute-not-allowed' | translate }}\n        </div>\n    </div>\n</form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex: 1;\n}\n.grid__element:last-child {\n    margin-top: 19px;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0 !important;\n    line-height: 20px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}\n",
     "controllerScript": "let $scope;\nlet settings;\nlet utils;\nlet translate;\nlet http;\n\nself.onInit = function() {\n    self.ctx.ngZone.run(function() {\n       init(); \n       self.ctx.detectChanges(true);\n    });\n};\n\n\nfunction init() {\n\n    $scope = self.ctx.$scope;\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\n    http = $scope.$injector.get(self.ctx.servicesMap.get('http'));\n    $scope.toastTargetId = 'input-widget' + utils.guid();\n    settings = utils.deepClone(self.ctx.settings) || {};\n    settings.showLabel = utils.defaultValue(settings.showLabel, true);\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\n    $scope.settings = settings;\n    $scope.isValidParameter = true;\n    $scope.dataKeyDetected = false;\n    $scope.requiredErrorMessage = utils.customTranslation(settings.requiredErrorMessage, settings.requiredErrorMessage) || translate.instant('widgets.input-widgets.entity-timeseries-required');\n    $scope.labelValue = utils.customTranslation(settings.labelValue, settings.labelValue) || translate.instant('widgets.input-widgets.value');\n\n    $scope.attributeUpdateFormGroup = $scope.fb.group(\n        {currentValue: [undefined, [$scope.validators.required,\n                                    $scope.validators.min(settings.minValue),\n                                    $scope.validators.max(settings.maxValue),\n                                    $scope.validators.pattern(/^-?[0-9]+$/)]]}\n    );\n\n    if (self.ctx.datasources && self.ctx.datasources.length) {\n        var datasource = self.ctx.datasources[0];\n        if (datasource.type === 'entity') {\n            if (datasource.entityType && datasource.entityId) {\n                $scope.entityName = datasource.entityName;\n                if (settings.widgetTitle && settings.widgetTitle.length) {\n                    $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\n                } else {\n                    $scope.titleTemplate = self.ctx.widgetConfig.title;\n                }\n\n                $scope.entityDetected = true;\n            }\n        }\n        if (datasource.dataKeys.length) {\n            if (datasource.dataKeys[0].type !== \"timeseries\") {\n                $scope.isValidParameter = false;\n            } else {\n                $scope.currentKey = datasource.dataKeys[0].name;\n                $scope.dataKeyType = datasource.dataKeys[0].type;\n                $scope.dataKeyDetected = true;\n            }\n        }\n    }\n\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\n\n    $scope.updateAttribute = function () {\n        $scope.isFocused = false;\n        if ($scope.entityDetected) {\n            var datasource = self.ctx.datasources[0];\n\n            let observable = saveEntityTimeseries(\n                datasource.entityType,\n                datasource.entityId,\n                [\n                    {\n                        key: $scope.currentKey,\n                        value: $scope.attributeUpdateFormGroup.get('currentValue').value\n                    }\n                ]\n            );\n            if (observable) {\n                observable.subscribe(\n                    function success() {\n                        $scope.originalValue = $scope.attributeUpdateFormGroup.get('currentValue').value;\n                        if (settings.showResultMessage) {\n                            $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\n                        }\n                    },\n                    function fail() {\n                        if (settings.showResultMessage) {\n                            $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\n                        }\n                    }\n                );\n            }\n        }\n    };\n\n    $scope.changeFocus = function () {\n        if ($scope.attributeUpdateFormGroup.get('currentValue').value === $scope.originalValue) {\n            $scope.isFocused = false;\n        }\n    }\n\n    function saveEntityTimeseries(entityType, entityId, telemetries) {\n        var telemetriesData = {};\n        for (var a = 0; a < telemetries.length; a++) {\n            if (typeof telemetries[a].value !== 'undefined' && telemetries[a].value !== null) {\n                telemetriesData[telemetries[a].key] = telemetries[a].value;\n            }\n        }\n        if (Object.keys(telemetriesData).length) {\n            var url = '/api/plugins/telemetry/' + entityType + '/' + entityId + '/timeseries/scope';\n            return http.post(url, telemetriesData);\n        }\n        return null;\n    }\n}\n\nself.onDataUpdated = function() {\n\n    try {\n        if ($scope.dataKeyDetected) {\n            if (!$scope.isFocused) {\n                $scope.originalValue = self.ctx.data[0].data[0][1];\n                $scope.attributeUpdateFormGroup.get('currentValue').patchValue(correctValue($scope.originalValue));\n                self.ctx.detectChanges();\n            }\n        }\n    } catch (e) {\n        console.log(e);\n    }\n}\n\nfunction correctValue(value) {\n    if (typeof value !== \"number\") {\n        return 0;\n    }\n    return value;\n}\n\nself.onResize = function() {\n\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        dataKeyOptional: true\n    }\n}\n\nself.onDestroy = function() {\n\n}\n",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_location_timeseries.json b/application/src/main/data/json/system/widget_types/update_location_timeseries.json
index 3444c77c6c..33d4009415 100644
--- a/application/src/main/data/json/system/widget_types/update_location_timeseries.json
+++ b/application/src/main/data/json/system/widget_types/update_location_timeseries.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n  <form *ngIf=\"attributeUpdateFormGroup\"\n        class=\"attribute-update-form\"\n        [formGroup]=\"attributeUpdateFormGroup\"\n        [ngClass]=\"{'small-width': smallWidthContainer}\"\n        (ngSubmit)=\"updateAttribute()\">\n    <div style=\"padding: 0 8px; margin: auto 0;\">\n      <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n        <div class=\"grid__element\"\n             [class.horizontal-alignment]=\"isHorizontal && !changeAlignment\">\n          <mat-form-field class=\"mat-block\"\n                          floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                          [hideRequiredMarker]=\"!settings.showLabel\">\n            <mat-label>{{ settings.showLabel ? latLabel : '' }}</mat-label>\n            <input matInput\n                   formControlName=\"currentLat\"\n                   required\n                   type=\"number\"\n                   (focus)=\"isFocused = true\"\n                   (blur)=\"changeFocus()\"\n                   max=\"90\"\n                   min=\"-90\"/>\n            <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentLat').hasError('required')\">\n              {{requiredErrorMessage}}\n            </mat-error>\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-block\"\n                          floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                          [hideRequiredMarker]=\"!settings.showLabel\">\n            <mat-label>{{ settings.showLabel ? lngLabel : '' }}</mat-label>\n            <input matInput\n                   formControlName=\"currentLng\"\n                   required\n                   type=\"number\"\n                   (focus)=\"isFocused = true\"\n                   (blur)=\"changeFocus()\"\n                   max=\"180\"\n                   min=\"-180\"/>\n            <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentLng').hasError('required')\">\n              {{requiredErrorMessage}}\n            </mat-error>\n          </mat-form-field>\n        </div>\n\n        <div class=\"grid__element\">\n          <button mat-icon-button class=\"getLocation\"\n                  type=\"button\"\n                  (click)=\"getCoordinate()\"\n                  *ngIf=\"settings.showGetLocation\"\n                  matTooltip=\"{{ 'widgets.input-widgets.get-location' | translate }}\"\n                  matTooltipPosition=\"above\">\n            <mat-icon>my_location</mat-icon>\n          </button>\n          <button mat-icon-button class=\"applyChanges\"\n                  type=\"submit\"\n                  [disabled]=\"disableButton() || attributeUpdateFormGroup.invalid || attributeUpdateFormGroup.pristine\"\n                  matTooltip=\"{{ 'widgets.input-widgets.update-timeseries' | translate }}\"\n                  matTooltipPosition=\"above\">\n            <mat-icon>check</mat-icon>\n          </button>\n          <button mat-icon-button class=\"discardChanges\"\n                  type=\"button\"\n                  [disabled]=\"disableButton()\"\n                  (click)=\"discardChange()\"\n                  matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                  matTooltipPosition=\"above\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </div>\n      </div>\n\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\">\n        {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n      </div>\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n           [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n        {{ 'widgets.input-widgets.no-timeseries-selected' | translate }}\n      </div>\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n           [class.!hidden]=\"!entityDetected || isValidParameter\">\n        {{ 'widgets.input-widgets.no-coordinate-specified' | translate }}\n      </div>\n    </div>\n  </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n  <form *ngIf=\"attributeUpdateFormGroup\"\n        class=\"attribute-update-form\"\n        [formGroup]=\"attributeUpdateFormGroup\"\n        [class.small-width]=\"smallWidthContainer\"\"\n        (ngSubmit)=\"updateAttribute()\">\n    <div style=\"padding: 0 8px; margin: auto 0;\">\n      <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n        <div class=\"grid__element\"\n             [class.horizontal-alignment]=\"isHorizontal && !changeAlignment\">\n          <mat-form-field class=\"mat-block\"\n                          floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                          [hideRequiredMarker]=\"!settings.showLabel\">\n            <mat-label>{{ settings.showLabel ? latLabel : '' }}</mat-label>\n            <input matInput\n                   formControlName=\"currentLat\"\n                   required\n                   type=\"number\"\n                   (focus)=\"isFocused = true\"\n                   (blur)=\"changeFocus()\"\n                   max=\"90\"\n                   min=\"-90\"/>\n            <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentLat').hasError('required')\">\n              {{requiredErrorMessage}}\n            </mat-error>\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-block\"\n                          floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                          [hideRequiredMarker]=\"!settings.showLabel\">\n            <mat-label>{{ settings.showLabel ? lngLabel : '' }}</mat-label>\n            <input matInput\n                   formControlName=\"currentLng\"\n                   required\n                   type=\"number\"\n                   (focus)=\"isFocused = true\"\n                   (blur)=\"changeFocus()\"\n                   max=\"180\"\n                   min=\"-180\"/>\n            <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentLng').hasError('required')\">\n              {{requiredErrorMessage}}\n            </mat-error>\n          </mat-form-field>\n        </div>\n\n        <div class=\"grid__element\">\n          <button mat-icon-button class=\"getLocation\"\n                  type=\"button\"\n                  (click)=\"getCoordinate()\"\n                  *ngIf=\"settings.showGetLocation\"\n                  matTooltip=\"{{ 'widgets.input-widgets.get-location' | translate }}\"\n                  matTooltipPosition=\"above\">\n            <mat-icon>my_location</mat-icon>\n          </button>\n          <button mat-icon-button class=\"applyChanges\"\n                  type=\"submit\"\n                  [disabled]=\"disableButton() || attributeUpdateFormGroup.invalid || attributeUpdateFormGroup.pristine\"\n                  matTooltip=\"{{ 'widgets.input-widgets.update-timeseries' | translate }}\"\n                  matTooltipPosition=\"above\">\n            <mat-icon>check</mat-icon>\n          </button>\n          <button mat-icon-button class=\"discardChanges\"\n                  type=\"button\"\n                  [disabled]=\"disableButton()\"\n                  (click)=\"discardChange()\"\n                  matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                  matTooltipPosition=\"above\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </div>\n      </div>\n\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\">\n        {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n      </div>\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n           [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n        {{ 'widgets.input-widgets.no-timeseries-selected' | translate }}\n      </div>\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n           [class.!hidden]=\"!entityDetected || isValidParameter\">\n        {{ 'widgets.input-widgets.no-coordinate-specified' | translate }}\n      </div>\n    </div>\n  </form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex-direction: column;\n    flex: 1;\n}\n\n.grid__element.horizontal-alignment {\n    flex-direction: row;\n}\n\n.grid__element:last-child {\n    align-items: center;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    margin: 0;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0;\n    line-height: 20px;\n}\n\n.attribute-update-form .mat-button.getLocation {\n    margin-right: 10px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.attribute-update-form mat-form-field{\n    width: 100%;\n    padding-right: 5px;\n}\n\n.attribute-update-form.small-width mat-form-field{\n    width: 150px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let $scope;\r\nlet settings;\r\nlet attributeService;\r\nlet utils;\r\nlet translate;\r\n\r\nself.onInit = function() {\r\n    self.ctx.ngZone.run(function() {\r\n       init(); \r\n       self.ctx.detectChanges(true);\r\n    });\r\n};\r\n\r\n\r\nfunction init() {\r\n    $scope = self.ctx.$scope;\r\n    attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\r\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\r\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\r\n    $scope.toastTargetId = 'input-widget' + utils.guid();\r\n    settings = utils.deepClone(self.ctx.settings) || {};\r\n    \r\n    settings.showLabel = utils.defaultValue(settings.showLabel, true);\r\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\r\n    settings.showGetLocation = utils.defaultValue(settings.showGetLocation, true);\r\n    settings.enableHighAccuracy = utils.defaultValue(settings.enableHighAccuracy, false);\r\n    $scope.settings = settings;\r\n    $scope.isValidParameter = true;\r\n    $scope.dataKeyDetected = false; \r\n\r\n    $scope.isHorizontal = (settings.inputFieldsAlignment === 'row');\r\n    $scope.requiredErrorMessage = utils.customTranslation(settings.requiredErrorMessage, settings.requiredErrorMessage) || translate.instant('widgets.input-widgets.entity-coordinate-required');\r\n    $scope.latLabel = utils.customTranslation(settings.latLabel, settings.latLabel) || translate.instant('widgets.input-widgets.latitude');\r\n    $scope.lngLabel = utils.customTranslation(settings.lngLabel, settings.lngLabel) || translate.instant('widgets.input-widgets.longitude');\r\n\r\n    $scope.attributeUpdateFormGroup = $scope.fb.group(\r\n        {currentLat: [undefined, [$scope.validators.required,\r\n                                    $scope.validators.min(-90),\r\n                                    $scope.validators.max(90)]],\r\n        currentLng: [undefined, [$scope.validators.required,\r\n                                    $scope.validators.min(-180),\r\n                                    $scope.validators.max(180)]]}\r\n    );\r\n\r\n    if (self.ctx.datasources && self.ctx.datasources.length) {\r\n        var datasource = self.ctx.datasources[0];\r\n        if (datasource.type === 'entity') {\r\n            if (datasource.entityType && datasource.entityId) {\r\n                $scope.entityName = datasource.entityName;\r\n                if (settings.widgetTitle && settings.widgetTitle.length) {\r\n                    $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\r\n                } else {\r\n                    $scope.titleTemplate = self.ctx.widgetConfig.title;\r\n                }\r\n\r\n                $scope.entityDetected = true;\r\n            }\r\n        }\r\n        if (datasource.dataKeys.length > 1) {\r\n            $scope.dataKeyDetected = true;\r\n            for (let i = 0; i < datasource.dataKeys.length; i++) {\r\n                if (datasource.dataKeys[i].type != \"timeseries\"){\r\n                    $scope.isValidParameter = false;\r\n                }\r\n                if (datasource.dataKeys[i].name !== settings.latKeyName && datasource.dataKeys[i].name !== settings.lngKeyName){\r\n                    $scope.dataKeyDetected = false;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\r\n\r\n    $scope.updateAttribute = function () {\r\n        $scope.isFocused = false;\r\n        if ($scope.entityDetected) {\r\n            var datasource = self.ctx.datasources[0];\r\n\r\n            attributeService.saveEntityTimeseries(\r\n                datasource.entity.id,\r\n                'scope',\r\n                [\r\n                    {\r\n                        key: settings.latKeyName,\r\n                        value: $scope.attributeUpdateFormGroup.get('currentLat').value\r\n                    },{\r\n                        key: settings.lngKeyName,\r\n                        value: $scope.attributeUpdateFormGroup.get('currentLng').value\r\n                    }\r\n                ]\r\n            ).subscribe(\r\n                function success() {\r\n                    $scope.originalLat = $scope.attributeUpdateFormGroup.get('currentLat').value;\r\n                    $scope.originalLng = $scope.attributeUpdateFormGroup.get('currentLng').value;\r\n                    if (settings.showResultMessage) {\r\n                        $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\r\n                    }\r\n                },\r\n                function fail() {\r\n                    if (settings.showResultMessage) {\r\n                        $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\r\n                    }\r\n                }\r\n            );\r\n        }\r\n    };\r\n\r\n    $scope.changeFocus = function () {\r\n        if ($scope.attributeUpdateFormGroup.get('currentLat').value === $scope.originalLat && $scope.attributeUpdateFormGroup.get('currentLng').value === $scope.originalLng) {\r\n            $scope.isFocused = false;\r\n        }\r\n    };\r\n    \r\n    $scope.discardChange = function() {\r\n        $scope.attributeUpdateFormGroup.setValue({\r\n            'currentLat': $scope.originalLat,\r\n            'currentLng': $scope.originalLng\r\n        });\r\n        $scope.isFocused = false;\r\n        $scope.attributeUpdateFormGroup.markAsPristine();\r\n        self.onDataUpdated();\r\n    };\r\n    \r\n    $scope.disableButton = function () {\r\n        return $scope.attributeUpdateFormGroup.get('currentLat').value === $scope.originalLat && $scope.attributeUpdateFormGroup.get('currentLng').value === $scope.originalLng || $scope.currentLng === null || $scope.currentLat === null;\r\n    };\r\n    \r\n    $scope.getCoordinate = function() {\r\n        if (navigator.geolocation) {\r\n            navigator.geolocation.getCurrentPosition(showPosition, function (){\r\n                $scope.showErrorToast(translate.instant('widgets.input-widgets.blocked-location'), \r\n                                    'bottom', 'left', $scope.toastTargetId);\r\n            }, {\r\n                enableHighAccuracy: settings.enableHighAccuracy\r\n            });\r\n        } else {\r\n            $scope.showErrorToast(translate.instant('widgets.input-widgets.no-support-geolocation'), 'bottom', 'left', $scope.toastTargetId);\r\n        }\r\n    };\r\n    \r\n    function showPosition(position) {\r\n        $scope.attributeUpdateFormGroup.setValue({\r\n            currentLat: correctValue(position.coords.latitude),\r\n            currentLng: correctValue(position.coords.longitude)\r\n        });\r\n        $scope.attributeUpdateFormGroup.markAsDirty();\r\n        $scope.isFocused = true;\r\n    }\r\n    \r\n    self.onResize();\r\n}\r\n\r\nself.onDataUpdated = function() {\r\n    try {\r\n        if ($scope.dataKeyDetected) {\r\n            if (!$scope.isFocused) {\r\n                for(let i = 0; i < self.typeParameters().maxDataKeys; i++){\r\n                    if(self.ctx.data[i].dataKey.name === self.ctx.settings.latKeyName && $scope.attributeUpdateFormGroup.get('currentLat').pristine){\r\n                        $scope.originalLat = self.ctx.data[i].data[0][1];\r\n                        $scope.attributeUpdateFormGroup.get('currentLat').patchValue(correctValue($scope.originalLat));\r\n                    } else if(self.ctx.data[i].dataKey.name === self.ctx.settings.lngKeyName && $scope.attributeUpdateFormGroup.get('currentLng').pristine){\r\n                        $scope.originalLng = self.ctx.data[i].data[0][1];\r\n                        $scope.attributeUpdateFormGroup.get('currentLng').patchValue(correctValue($scope.originalLng));\r\n                    }\r\n                }\r\n                self.ctx.detectChanges();\r\n            }\r\n        }\r\n    } catch (e) {\r\n        console.log(e);\r\n    }\r\n};\r\n\r\nfunction correctValue(value) {\r\n    if (typeof value !== \"number\") {\r\n        return 0;\r\n    }\r\n    return value;\r\n}\r\n\r\nself.onResize = function() {\r\n    $scope.smallWidthContainer = (self.ctx.$container && self.ctx.$container[0].offsetWidth < 320);\r\n    $scope.changeAlignment = ($scope.isHorizontal && self.ctx.$container && self.ctx.$container[0].offsetWidth < 480);\r\n    self.ctx.detectChanges();\r\n};\r\n\r\nself.typeParameters = function() {\r\n    return {\r\n        maxDatasources: 1,\r\n        maxDataKeys: 2,\r\n        singleEntity: true\r\n    };\r\n};\r\n\r\nself.onDestroy = function() {\r\n\r\n};",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_server_boolean_attribute.json b/application/src/main/data/json/system/widget_types/update_server_boolean_attribute.json
index cf5d300751..7f914f8443 100644
--- a/application/src/main/data/json/system/widget_types/update_server_boolean_attribute.json
+++ b/application/src/main/data/json/system/widget_types/update_server_boolean_attribute.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\r\n    <form *ngIf=\"attributeUpdateFormGroup\"\r\n          class=\"attribute-update-form\"\r\n          [formGroup]=\"attributeUpdateFormGroup\"\r\n          (ngSubmit)=\"updateAttribute()\">\r\n        <div style=\"padding: 0 8px; margin: auto 0;\">\r\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\r\n                <div class=\"grid__element\">\r\n                    <mat-checkbox formControlName=\"checkboxValue\"\r\n                                  (change)=\"changed()\"\r\n                                  aria-label=\"{{'widgets.input-widgets.switch-timeseries-value' | translate}}\">\r\n                        {{currentValue}}\r\n                    </mat-checkbox>\r\n                </div>\r\n            </div>\r\n\r\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\">\r\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\r\n            </div>\r\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\r\n                 [fxShow]=\"entityDetected && !dataKeyDetected\">\r\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\r\n            </div>\r\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\r\n                 [fxShow]=\"entityDetected && !isValidParameter\">\r\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\r\n            </div>\r\n        </div>\r\n    </form>\r\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\r\n    <form *ngIf=\"attributeUpdateFormGroup\"\r\n          class=\"attribute-update-form\"\r\n          [formGroup]=\"attributeUpdateFormGroup\"\r\n          (ngSubmit)=\"updateAttribute()\">\r\n        <div style=\"padding: 0 8px; margin: auto 0;\">\r\n            <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\r\n                <div class=\"grid__element\">\r\n                    <mat-checkbox formControlName=\"checkboxValue\"\r\n                                  (change)=\"changed()\"\r\n                                  aria-label=\"{{'widgets.input-widgets.switch-timeseries-value' | translate}}\">\r\n                        {{currentValue}}\r\n                    </mat-checkbox>\r\n                </div>\r\n            </div>\r\n\r\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\">\r\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\r\n            </div>\r\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\r\n                 [class.!hidden]=\"!entityDetected || dataKeyDetected\">\r\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\r\n            </div>\r\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\r\n                 [class.!hidden]=\"!entityDetected || isValidParameter\">\r\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\r\n            </div>\r\n        </div>\r\n    </form>\r\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex: 1;\n}\n.grid__element:last-child {\n    margin-top: 19px;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0 !important;\n    line-height: 20px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let settings;\nlet attributeService;\nlet utils;\nlet translate;\nlet $scope;\nlet map;\n\nself.onInit = function() {\n    self.ctx.ngZone.run(function() {\n        init();\n        self.ctx.detectChanges(true);\n    });\n};\n\n\nfunction init() {\n    $scope = self.ctx.$scope;\n    attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\n    $scope.toastTargetId = 'input-widget' + utils.guid();\n    settings = utils.deepClone(self.ctx.settings) || {};\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\n\n    $scope.isValidParameter = true;\n    $scope.dataKeyDetected = false;\n\n    settings.trueValue = utils.defaultValue(utils.customTranslation(settings.trueValue, settings.trueValue), true);\n    settings.falseValue = utils.defaultValue(utils.customTranslation(settings.falseValue, settings.falseValue), false);\n\n    map = {\n        true: settings.trueValue,\n        false: settings.falseValue\n    };\n    \n    $scope.checkboxValue = false;\n    $scope.currentValue = map[$scope.checkboxValue];\n\n    $scope.attributeUpdateFormGroup = $scope.fb.group({checkboxValue: [$scope.checkboxValue]});\n\n    $scope.changed = function() {\n        $scope.checkboxValue = $scope.attributeUpdateFormGroup.get('checkboxValue').value;\n        $scope.currentValue = map[$scope.checkboxValue];\n        $scope.updateAttribute();\n    };\n\n    if (self.ctx.datasources && self.ctx.datasources.length) {\n        var datasource = self.ctx.datasources[0];\n        if (datasource.type === 'entity') {\n            if (datasource.entityType && datasource.entityId) {\n                $scope.entityName = datasource.entityName;\n                if (settings.widgetTitle && settings.widgetTitle.length) {\n                    $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\n                } else {\n                    $scope.titleTemplate = self.ctx.widgetConfig.title;\n                }\n\n                $scope.entityDetected = true;\n            }\n        }\n        if (datasource.dataKeys.length) {\n            if (datasource.dataKeys[0].type !== \"attribute\") {\n                $scope.isValidParameter = false;\n            } else {\n                $scope.currentKey = datasource.dataKeys[0].name;\n                $scope.dataKeyType = datasource.dataKeys[0].type;\n                $scope.dataKeyDetected = true;\n            }\n        }\n    }\n\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\n\n    $scope.updateAttribute = function() {\n        if ($scope.entityDetected) {\n            var datasource = self.ctx.datasources[0];\n\n            attributeService.saveEntityAttributes(\n                datasource.entity.id,\n                'SERVER_SCOPE',\n                [\n                    {\n                        key: $scope.currentKey,\n                        value: $scope.checkboxValue\n                    }\n                ]\n            ).subscribe(\n                function success() {\n                   $scope.originalValue = $scope.attributeUpdateFormGroup.get('checkboxValue').value;\n                    if (settings.showResultMessage) {\n                        $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\n                    }\n                },\n                function fail() {\n                    if (settings.showResultMessage) {\n                        $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\n                    }\n                }\n            );\n        }\n    };\n}\n\nself.onDataUpdated = function() {\n    try {\n        if ($scope.dataKeyDetected) {\n            $scope.checkboxValue = self.ctx.data[0].data[0][1] === 'true';\n            $scope.currentValue = map[$scope.checkboxValue];\n            $scope.attributeUpdateFormGroup.get('checkboxValue').patchValue($scope.checkboxValue);\n            self.ctx.detectChanges();\n        }\n    } catch (e) {\n        console.log(e);\n    }\n}\n\nself.onResize = function() {}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    }\n}\n\nself.onDestroy = function() {}",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_server_date_attribute.json b/application/src/main/data/json/system/widget_types/update_server_date_attribute.json
index 3a1cdabc86..d460cc235c 100644
--- a/application/src/main/data/json/system/widget_types/update_server_date_attribute.json
+++ b/application/src/main/data/json/system/widget_types/update_server_date_attribute.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3.5,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\">\n                        <mat-label *ngIf=\"settings.showLabel\">{{ labelValue }}</mat-label>\n                        <mat-datetimepicker-toggle [for]=\"datePicker\" matPrefix></mat-datetimepicker-toggle>\n                        <mat-datetimepicker #datePicker type=\"{{datePickerType}}\"\n                                            openOnFocus=\"true\"></mat-datetimepicker>\n                        <input matInput formControlName=\"currentValue\"\n                               [required]=\"settings.isRequired\"\n                               [matDatetimepicker]=\"datePicker\"\n                               (focus)=\"isFocused = true;\"\n                               (blur)=\"isFocused = false;\">\n                        <button *ngIf=\"!settings.isRequired && (attributeUpdateFormGroup.get('currentValue').value)\"\n                                type=\"button\"\n                                mat-icon-button matSuffix\n                                (click)=\"clear($event)\">\n                            <mat-icon>{{'clear'}}</mat-icon>\n                        </button>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required') && settings.isRequired\">\n                          {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"(originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty) && (originalValue === attributeUpdateFormGroup.get('currentValue').value || settings.isRequired)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\" >\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\">\n                        <mat-label *ngIf=\"settings.showLabel\">{{ labelValue }}</mat-label>\n                        <mat-datetimepicker-toggle [for]=\"datePicker\" matPrefix></mat-datetimepicker-toggle>\n                        <mat-datetimepicker #datePicker type=\"{{datePickerType}}\"\n                                            openOnFocus=\"true\"></mat-datetimepicker>\n                        <input matInput formControlName=\"currentValue\"\n                               [required]=\"settings.isRequired\"\n                               [matDatetimepicker]=\"datePicker\"\n                               (focus)=\"isFocused = true;\"\n                               (blur)=\"isFocused = false;\">\n                        <button *ngIf=\"!settings.isRequired && (attributeUpdateFormGroup.get('currentValue').value)\"\n                                type=\"button\"\n                                mat-icon-button matSuffix\n                                (click)=\"clear($event)\">\n                            <mat-icon>{{'clear'}}</mat-icon>\n                        </button>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required') && settings.isRequired\">\n                          {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"(originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty) && (originalValue === attributeUpdateFormGroup.get('currentValue').value || settings.isRequired)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\" >\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex: 1;\n}\n.grid__element:last-child {\n    margin-top: 19px;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0 !important;\n    line-height: 20px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let $scope;\r\nlet settings;\r\nlet attributeService;\r\nlet utils;\r\nlet translate;\r\n\r\nself.onInit = function() {\r\n    self.ctx.ngZone.run(function() {\r\n       init(); \r\n       self.ctx.detectChanges(true);\r\n    });\r\n};\r\n\r\nfunction init() {\r\n\r\n    $scope = self.ctx.$scope;\r\n    attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\r\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\r\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\r\n    $scope.toastTargetId = 'input-widget' + utils.guid();\r\n    settings = utils.deepClone(self.ctx.settings) || {};\r\n    settings.showLabel = utils.defaultValue(settings.showLabel, true);\r\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\r\n    settings.isRequired = utils.defaultValue(settings.isRequired, true);\r\n    $scope.settings = settings;\r\n    $scope.isValidParameter = true;\r\n    $scope.dataKeyDetected = false;\r\n    $scope.entityDetected = false;\r\n\r\n    $scope.datePickerType = settings.showTimeInput ? 'datetime' : 'date'; \r\n    \r\n    $scope.requiredErrorMessage = utils.customTranslation(settings.requiredErrorMessage, settings.requiredErrorMessage) || translate.instant('widgets.input-widgets.entity-attribute-required');\r\n    $scope.labelValue = translate.instant('widgets.input-widgets.date');\r\n    \r\n    if (settings.showTimeInput) {\r\n        $scope.labelValue += \" & \" + translate.instant('widgets.input-widgets.time');\r\n    }\r\n    \r\n    var validators = [];\r\n    \r\n    if (settings.isRequired) {\r\n        validators.push($scope.validators.required);\r\n    }\r\n    \r\n    $scope.attributeUpdateFormGroup = $scope.fb.group(\r\n        {currentValue: [undefined, validators]}\r\n    );\r\n\r\n    if (self.ctx.datasources && self.ctx.datasources.length) {\r\n        var datasource = self.ctx.datasources[0];\r\n        \r\n        if (datasource.type === 'entity') {\r\n            if (datasource.entityType && datasource.entityId) {\r\n                $scope.entityName = datasource.entityName;\r\n                if (settings.widgetTitle && settings.widgetTitle.length) {\r\n                    $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\r\n                } else {\r\n                    $scope.titleTemplate = self.ctx.widgetConfig.title;\r\n                }\r\n\r\n                $scope.entityDetected = true;\r\n            }\r\n        }\r\n        if (datasource.dataKeys.length) {\r\n            if (datasource.dataKeys[0].type !== \"attribute\") {\r\n                $scope.isValidParameter = false;\r\n            } else {\r\n                $scope.currentKey = datasource.dataKeys[0].name;\r\n                $scope.dataKeyType = datasource.dataKeys[0].type;\r\n                $scope.dataKeyDetected = true;\r\n            }\r\n        }\r\n    }\r\n\r\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\r\n    \r\n    $scope.clear = function(event) {\r\n        event.stopPropagation();\r\n        $scope.attributeUpdateFormGroup.get('currentValue').patchValue(undefined);\r\n    }\r\n    \r\n    $scope.updateAttribute = function () {\r\n        if ($scope.entityDetected) {\r\n            var datasource = self.ctx.datasources[0];\r\n            var currentValueInMilliseconds;\r\n            \r\n            if (!$scope.attributeUpdateFormGroup.get('currentValue').value) {\r\n                currentValueInMilliseconds = undefined;\r\n            } else {\r\n                currentValueInMilliseconds = $scope.attributeUpdateFormGroup.get('currentValue').value.getTime();\r\n            }\r\n            \r\n            attributeService.saveEntityAttributes(\r\n                datasource.entity.id,\r\n                'SERVER_SCOPE',\r\n                [\r\n                    {\r\n                        key: $scope.currentKey,\r\n                        value: currentValueInMilliseconds\r\n                    }\r\n                ]\r\n            ).subscribe(\r\n                function success() {\r\n                    $scope.originalValue = $scope.attributeUpdateFormGroup.get('currentValue').value;\r\n                    if (settings.showResultMessage) {\r\n                        $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\r\n                    }\r\n                },\r\n                function fail() {\r\n                    if (settings.showResultMessage) {\r\n                        $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\r\n                    }\r\n                }\r\n            );\r\n        }\r\n    };\r\n    \r\n    $scope.isValidDate = function(date) {\r\n      return date instanceof Date && !isNaN(date);\r\n    }\r\n}\r\n\r\nself.onDataUpdated = function() {\r\n    try {\r\n        if ($scope.dataKeyDetected) {\r\n            if (!$scope.isFocused) {\r\n                $scope.originalValue = moment(self.ctx.data[0].data[0][1]).toDate();\r\n\r\n                if (!$scope.isValidDate($scope.originalValue)) {\r\n                    $scope.originalValue = undefined;\r\n                }\r\n                \r\n                $scope.attributeUpdateFormGroup.get('currentValue').patchValue($scope.originalValue);\r\n                self.ctx.detectChanges();\r\n            }\r\n        }\r\n    } catch (e) {\r\n        console.log(e);\r\n    }\r\n};\r\n\r\nself.onResize = function() {\r\n};\r\n\r\nself.typeParameters = function() {\r\n    return {\r\n        maxDatasources: 1,\r\n        maxDataKeys: 1,\r\n        singleEntity: true\r\n    };\r\n};\r\n\r\nself.onDestroy = function() {\r\n}\r\n",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_server_double_attribute.json b/application/src/main/data/json/system/widget_types/update_server_double_attribute.json
index ddfe7b36d1..b7dab2b2a6 100644
--- a/application/src/main/data/json/system/widget_types/update_server_double_attribute.json
+++ b/application/src/main/data/json/system/widget_types/update_server_double_attribute.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentValue\"\n                               [required]=\"settings.isRequired\"\n                               type=\"number\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               max=\"{{settings.maxValue}}\"\n                               min=\"{{settings.minValue}}\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required') && settings.isRequired\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"(originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty) && (originalValue === attributeUpdateFormGroup.get('currentValue').value || settings.isRequired)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\" >\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentValue\"\n                               [required]=\"settings.isRequired\"\n                               type=\"number\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               max=\"{{settings.maxValue}}\"\n                               min=\"{{settings.minValue}}\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required') && settings.isRequired\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"(originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty) && (originalValue === attributeUpdateFormGroup.get('currentValue').value || settings.isRequired)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\" >\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex: 1;\n}\n.grid__element:last-child {\n    margin-top: 19px;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0 !important;\n    line-height: 20px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let $scope;\nlet settings;\nlet attributeService;\nlet utils;\nlet translate;\n\nself.onInit = function() {\n    self.ctx.ngZone.run(function() {\n       init(); \n       self.ctx.detectChanges(true);\n    });\n};\n\n\nfunction init() {\n\n    $scope = self.ctx.$scope;\n    attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\n    $scope.toastTargetId = 'input-widget' + utils.guid();\n    settings = utils.deepClone(self.ctx.settings) || {};\n    settings.showLabel = utils.defaultValue(settings.showLabel, true);\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\n    settings.isRequired = utils.defaultValue(settings.isRequired, true);\n    $scope.settings = settings;\n    $scope.isValidParameter = true;\n    $scope.dataKeyDetected = false; \n\n    $scope.requiredErrorMessage = utils.customTranslation(settings.requiredErrorMessage, settings.requiredErrorMessage) || translate.instant('widgets.input-widgets.entity-attribute-required');\n    $scope.labelValue = utils.customTranslation(settings.labelValue, settings.labelValue) || translate.instant('widgets.input-widgets.value');\n    \n    var validators = [$scope.validators.min(settings.minValue),\n        $scope.validators.max(settings.maxValue)];\n    \n    if (settings.isRequired) {\n        validators.push($scope.validators.required);\n    }\n    \n    $scope.attributeUpdateFormGroup = $scope.fb.group({\n        currentValue: [undefined, validators]\n    });\n\n    if (self.ctx.datasources && self.ctx.datasources.length) {\n        var datasource = self.ctx.datasources[0];\n        if (datasource.type === 'entity') {\n            if (datasource.entityType && datasource.entityId) {\n                $scope.entityName = datasource.entityName;\n                if (settings.widgetTitle && settings.widgetTitle.length) {\n                    $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\n                } else {\n                    $scope.titleTemplate = self.ctx.widgetConfig.title;\n                }\n\n                $scope.entityDetected = true;\n            }\n        }\n        if (datasource.dataKeys.length) {\n            if (datasource.dataKeys[0].type !== \"attribute\") {\n                $scope.isValidParameter = false;\n            } else {\n                $scope.currentKey = datasource.dataKeys[0].name;\n                $scope.dataKeyType = datasource.dataKeys[0].type;\n                $scope.dataKeyDetected = true;\n            }\n        }\n    }\n\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\n\n    $scope.updateAttribute = function () {\n        $scope.isFocused = false;\n        if ($scope.entityDetected) {\n            var datasource = self.ctx.datasources[0];\n\n            attributeService.saveEntityAttributes(\n                datasource.entity.id,\n                'SERVER_SCOPE',\n                [\n                    {\n                        key: $scope.currentKey,\n                        value: $scope.attributeUpdateFormGroup.get('currentValue').value\n                    }\n                ]\n            ).subscribe(\n                function success() {\n                    $scope.originalValue = $scope.attributeUpdateFormGroup.get('currentValue').value;\n                    if (settings.showResultMessage) {\n                        $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\n                    }\n                },\n                function fail() {\n                    if (settings.showResultMessage) {\n                        $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\n                    }\n                }\n            );\n        }\n    };\n\n    $scope.changeFocus = function () {\n        if ($scope.attributeUpdateFormGroup.get('currentValue').value === $scope.originalValue) {\n            $scope.isFocused = false;\n        }\n    }\n}\n\nself.onDataUpdated = function() {\n\n    try {\n        if ($scope.dataKeyDetected) {\n            if (!$scope.isFocused) {\n                $scope.originalValue = self.ctx.data[0].data[0][1];\n                $scope.attributeUpdateFormGroup.get('currentValue').patchValue(correctValue($scope.originalValue));\n                self.ctx.detectChanges();\n            }\n        }\n    } catch (e) {\n        console.log(e);\n    }\n}\n\nfunction correctValue(value) {\n    if (typeof value !== \"number\") {\n        return 0;\n    }\n    return value;\n}\n\nself.onResize = function() {\n\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    }\n}\n\nself.onDestroy = function() {\n\n}",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_server_integer_attribute.json b/application/src/main/data/json/system/widget_types/update_server_integer_attribute.json
index ea4fecdb42..066d3487ef 100644
--- a/application/src/main/data/json/system/widget_types/update_server_integer_attribute.json
+++ b/application/src/main/data/json/system/widget_types/update_server_integer_attribute.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentValue\"\n                               [required]=\"settings.isRequired\"\n                               type=\"number\"\n                               step=\"1\"\n                               pattern=\"^-?[0-9]+$\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               max=\"{{settings.maxValue}}\"\n                               min=\"{{settings.minValue}}\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required') && settings.isRequired\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"(originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty) && (originalValue === attributeUpdateFormGroup.get('currentValue').value || settings.isRequired)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\" >\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentValue\"\n                               [required]=\"settings.isRequired\"\n                               type=\"number\"\n                               step=\"1\"\n                               pattern=\"^-?[0-9]+$\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               max=\"{{settings.maxValue}}\"\n                               min=\"{{settings.minValue}}\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required') && settings.isRequired\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"(originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty) && (originalValue === attributeUpdateFormGroup.get('currentValue').value || settings.isRequired)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\" >\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex: 1;\n}\n.grid__element:last-child {\n    margin-top: 19px;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0 !important;\n    line-height: 20px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let $scope;\nlet settings;\nlet attributeService;\nlet utils;\nlet translate;\n\nself.onInit = function() {\n    self.ctx.ngZone.run(function() {\n       init(); \n       self.ctx.detectChanges(true);\n    });\n};\n\n\nfunction init() {\n    $scope = self.ctx.$scope;\n    attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\n    $scope.toastTargetId = 'input-widget' + utils.guid();\n    settings = utils.deepClone(self.ctx.settings) || {};\n    settings.showLabel = utils.defaultValue(settings.showLabel, true);\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\n    settings.isRequired = utils.defaultValue(settings.isRequired, true);\n    $scope.settings = settings;\n    $scope.isValidParameter = true;\n    $scope.dataKeyDetected = false; \n\n    $scope.requiredErrorMessage = utils.customTranslation(settings.requiredErrorMessage, settings.requiredErrorMessage) || translate.instant('widgets.input-widgets.entity-attribute-required');\n    $scope.labelValue = utils.customTranslation(settings.labelValue, settings.labelValue) || translate.instant('widgets.input-widgets.value');\n    \n    var validators = [\n        $scope.validators.min(settings.minValue),\n        $scope.validators.max(settings.maxValue),\n        $scope.validators.pattern(/^-?[0-9]+$/)\n    ];\n    \n    if (settings.isRequired) {\n        validators.push($scope.validators.required);\n    }\n\n    $scope.attributeUpdateFormGroup = $scope.fb.group({\n        currentValue: [undefined, validators]\n    });\n\n    if (self.ctx.datasources && self.ctx.datasources.length) {\n        var datasource = self.ctx.datasources[0];\n        if (datasource.type === 'entity') {\n            if (datasource.entityType && datasource.entityId) {\n                $scope.entityName = datasource.entityName;\n                if (settings.widgetTitle && settings.widgetTitle.length) {\n                    $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\n                } else {\n                    $scope.titleTemplate = self.ctx.widgetConfig.title;\n                }\n\n                $scope.entityDetected = true;\n            }\n            \n        }\n        if (datasource.dataKeys.length) {\n            if (datasource.dataKeys[0].type !== \"attribute\") {\n                $scope.isValidParameter = false;\n            } else {\n                $scope.currentKey = datasource.dataKeys[0].name;\n                $scope.dataKeyType = datasource.dataKeys[0].type;\n                $scope.dataKeyDetected = true;\n            }\n        }\n    }\n\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\n\n    $scope.updateAttribute = function () {\n        $scope.isFocused = false;\n        if ($scope.entityDetected) {\n            var datasource = self.ctx.datasources[0];\n\n            attributeService.saveEntityAttributes(\n                datasource.entity.id,\n                'SERVER_SCOPE',\n                [\n                    {\n                        key: $scope.currentKey,\n                        value: $scope.attributeUpdateFormGroup.get('currentValue').value\n                    }\n                ]\n            ).subscribe(\n                function success() {\n                    $scope.originalValue = $scope.attributeUpdateFormGroup.get('currentValue').value;\n                    if (settings.showResultMessage) {\n                        $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\n                    }\n                },\n                function fail() {\n                    if (settings.showResultMessage) {\n                        $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\n                    }\n                }\n            );\n        }\n    };\n\n    $scope.changeFocus = function () {\n        if ($scope.attributeUpdateFormGroup.get('currentValue').value === $scope.originalValue) {\n            $scope.isFocused = false;\n        }\n    }\n}\n\nself.onDataUpdated = function() {\n    try {\n        if ($scope.dataKeyDetected) {\n            if (!$scope.isFocused) {\n                $scope.originalValue = self.ctx.data[0].data[0][1];\n                $scope.attributeUpdateFormGroup.get('currentValue').patchValue(correctValue($scope.originalValue));\n                self.ctx.detectChanges();\n            }\n        }\n    } catch (e) {\n        console.log(e);\n    }\n}\n\nfunction correctValue(value) {\n    if (typeof value !== \"number\") {\n        return 0;\n    }\n    return value;\n}\n\nself.onResize = function() {\n\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    }\n}\n\nself.onDestroy = function() {\n\n}",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_server_location_attribute.json b/application/src/main/data/json/system/widget_types/update_server_location_attribute.json
index 0d007ca955..281de28846 100644
--- a/application/src/main/data/json/system/widget_types/update_server_location_attribute.json
+++ b/application/src/main/data/json/system/widget_types/update_server_location_attribute.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          [ngClass]=\"{'small-width': smallWidthContainer}\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n                <div class=\"grid__element\" \n                    [ngClass]=\"{'horizontal-alignment': isHorizontal && !changeAlignment}\">\n                    <mat-form-field class=\"mat-block\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? latLabel : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentLat\"\n                               [required]=\"settings.isLatRequired\"\n                               type=\"number\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               max=\"90\"\n                               min=\"-90\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentLat').hasError('required') && settings.isLatRequired\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>\n                    \n                    <mat-form-field class=\"mat-block\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? lngLabel : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentLng\"\n                               [required]=\"settings.isLngRequired\"\n                               type=\"number\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               max=\"180\"\n                               min=\"-180\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentLng').hasError('required') && settings.isLngRequired\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"getLocation\"\n                            type=\"button\"\n                            (click)=\"getCoordinate()\"\n                            *ngIf=\"settings.showGetLocation\"\n                            matTooltip=\"{{ 'widgets.input-widgets.get-location' | translate }}\"\n                            matTooltipPosition=\"above\">\n                        <mat-icon>my_location</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"applyChanges\"\n                            type=\"submit\"\n                            [disabled]=\"disableButton() || attributeUpdateFormGroup.invalid || attributeUpdateFormGroup.pristine\"\n                            matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                            matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                            type=\"button\"\n                            [disabled]=\"disableButton()\"\n                            (click)=\"discardChange()\"\n                            matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                            matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\" >\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !isValidParameter\">\n                {{ 'widgets.input-widgets.no-coordinate-specified' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n  <form *ngIf=\"attributeUpdateFormGroup\"\n        class=\"attribute-update-form\"\n        [formGroup]=\"attributeUpdateFormGroup\"\n        [class.small-width]=\"smallWidthContainer\"\n        (ngSubmit)=\"updateAttribute()\">\n    <div style=\"padding: 0 8px; margin: auto 0;\">\n      <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n        <div class=\"grid__element\"\n             [class.horizontal-alignment]=\"isHorizontal && !changeAlignment\">\n          <mat-form-field class=\"mat-block\"\n                          floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                          [hideRequiredMarker]=\"!settings.showLabel\">\n            <mat-label>{{ settings.showLabel ? latLabel : '' }}</mat-label>\n            <input matInput\n                   formControlName=\"currentLat\"\n                   [required]=\"settings.isLatRequired\"\n                   type=\"number\"\n                   (focus)=\"isFocused = true\"\n                   (blur)=\"changeFocus()\"\n                   max=\"90\"\n                   min=\"-90\"/>\n            <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentLat').hasError('required') && settings.isLatRequired\">\n              {{requiredErrorMessage}}\n            </mat-error>\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-block\"\n                          floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                          [hideRequiredMarker]=\"!settings.showLabel\">\n            <mat-label>{{ settings.showLabel ? lngLabel : '' }}</mat-label>\n            <input matInput\n                   formControlName=\"currentLng\"\n                   [required]=\"settings.isLngRequired\"\n                   type=\"number\"\n                   (focus)=\"isFocused = true\"\n                   (blur)=\"changeFocus()\"\n                   max=\"180\"\n                   min=\"-180\"/>\n            <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentLng').hasError('required') && settings.isLngRequired\">\n              {{requiredErrorMessage}}\n            </mat-error>\n          </mat-form-field>\n        </div>\n\n        <div class=\"grid__element\">\n          <button mat-icon-button class=\"getLocation\"\n                  type=\"button\"\n                  (click)=\"getCoordinate()\"\n                  *ngIf=\"settings.showGetLocation\"\n                  matTooltip=\"{{ 'widgets.input-widgets.get-location' | translate }}\"\n                  matTooltipPosition=\"above\">\n            <mat-icon>my_location</mat-icon>\n          </button>\n          <button mat-icon-button class=\"applyChanges\"\n                  type=\"submit\"\n                  [disabled]=\"disableButton() || attributeUpdateFormGroup.invalid || attributeUpdateFormGroup.pristine\"\n                  matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                  matTooltipPosition=\"above\">\n            <mat-icon>check</mat-icon>\n          </button>\n          <button mat-icon-button class=\"discardChanges\"\n                  type=\"button\"\n                  [disabled]=\"disableButton()\"\n                  (click)=\"discardChange()\"\n                  matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                  matTooltipPosition=\"above\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </div>\n      </div>\n\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\">\n        {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n      </div>\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n           [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n        {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n      </div>\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n           [class.!hidden]=\"!entityDetected || isValidParameter\">\n        {{ 'widgets.input-widgets.no-coordinate-specified' | translate }}\n      </div>\n    </div>\n  </form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex-direction: column;\n    flex: 1;\n}\n\n.grid__element.horizontal-alignment {\n    flex-direction: row;\n}\n\n.grid__element:last-child {\n    align-items: center;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0;\n    line-height: 20px;\n}\n\n.attribute-update-form .mat-button.getLocation {\n    margin-right: 10px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.attribute-update-form mat-form-field{\n    width: 100%;\n    padding-right: 5px;\n}\n\n.attribute-update-form.small-width mat-form-field{\n    width: 150px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let $scope;\r\nlet settings;\r\nlet attributeService;\r\nlet utils;\r\nlet translate;\r\n\r\nself.onInit = function() {\r\n    self.ctx.ngZone.run(function() {\r\n       init(); \r\n       self.ctx.detectChanges(true);\r\n    });\r\n};\r\n\r\nfunction init() {\r\n    $scope = self.ctx.$scope;\r\n    attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\r\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\r\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\r\n    $scope.toastTargetId = 'input-widget' + utils.guid();\r\n    settings = utils.deepClone(self.ctx.settings) || {};\r\n    \r\n    settings.showLabel = utils.defaultValue(settings.showLabel, true);\r\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\r\n    settings.showGetLocation = utils.defaultValue(settings.showGetLocation, true);\r\n    settings.enableHighAccuracy = utils.defaultValue(settings.enableHighAccuracy, false);\r\n    settings.isLatRequired = utils.defaultValue(settings.isLatRequired, true);\r\n    settings.isLngRequired = utils.defaultValue(settings.isLngRequired, true);\r\n    $scope.settings = settings;\r\n    $scope.isValidParameter = true;\r\n    $scope.dataKeyDetected = false; \r\n\r\n    $scope.isHorizontal = (settings.inputFieldsAlignment === 'row');\r\n    $scope.requiredErrorMessage = utils.customTranslation(settings.requiredErrorMessage, settings.requiredErrorMessage) || translate.instant('widgets.input-widgets.entity-coordinate-required');\r\n    $scope.latLabel = utils.customTranslation(settings.latLabel, settings.latLabel) || translate.instant('widgets.input-widgets.latitude');\r\n    $scope.lngLabel = utils.customTranslation(settings.lngLabel, settings.lngLabel) || translate.instant('widgets.input-widgets.longitude');\r\n    \r\n    var validatorsLat = [$scope.validators.min(-90), $scope.validators.max(90)];\r\n    var validatorsLng = [$scope.validators.min(-180), $scope.validators.max(180)];\r\n    \r\n    if (settings.isLatRequired) {\r\n        validatorsLat.push($scope.validators.required);\r\n    }\r\n    \r\n    if (settings.isLngRequired) {\r\n        validatorsLng.push($scope.validators.required);\r\n    }\r\n\r\n    $scope.attributeUpdateFormGroup = $scope.fb.group({\r\n        currentLat: [undefined, validatorsLat],\r\n        currentLng: [undefined, validatorsLng]\r\n    });\r\n\r\n    if (self.ctx.datasources && self.ctx.datasources.length) {\r\n        var datasource = self.ctx.datasources[0];\r\n        if (datasource.type === 'entity') {\r\n            if (datasource.entityType && datasource.entityId) {\r\n                $scope.entityName = datasource.entityName;\r\n                if (settings.widgetTitle && settings.widgetTitle.length) {\r\n                    $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\r\n                } else {\r\n                    $scope.titleTemplate = self.ctx.widgetConfig.title;\r\n                }\r\n\r\n                $scope.entityDetected = true;\r\n            }\r\n        }\r\n        if (datasource.dataKeys.length > 1) {\r\n            $scope.dataKeyDetected = true;\r\n            for (let i = 0; i < datasource.dataKeys.length; i++) {\r\n                if (datasource.dataKeys[i].type != \"attribute\") {\r\n                    $scope.isValidParameter = false;\r\n                }\r\n                if (datasource.dataKeys[i].name !== settings.latKeyName && datasource.dataKeys[i].name !== settings.lngKeyName){\r\n                    $scope.dataKeyDetected = false;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\r\n\r\n    $scope.updateAttribute = function () {\r\n        $scope.isFocused = false;\r\n        if ($scope.entityDetected) {\r\n            var datasource = self.ctx.datasources[0];\r\n\r\n            attributeService.saveEntityAttributes(\r\n                datasource.entity.id,\r\n                'SERVER_SCOPE',\r\n                [\r\n                    {\r\n                        key: settings.latKeyName,\r\n                        value: $scope.attributeUpdateFormGroup.get('currentLat').value\r\n                    },{\r\n                        key: settings.lngKeyName,\r\n                        value: $scope.attributeUpdateFormGroup.get('currentLng').value\r\n                    }\r\n                ]\r\n            ).subscribe(\r\n                function success() {\r\n                    $scope.originalLat = $scope.attributeUpdateFormGroup.get('currentLat').value;\r\n                    $scope.originalLng = $scope.attributeUpdateFormGroup.get('currentLng').value;\r\n                    if (settings.showResultMessage) {\r\n                        $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\r\n                    }\r\n                },\r\n                function fail() {\r\n                    if (settings.showResultMessage) {\r\n                        $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\r\n                    }\r\n                }\r\n            );\r\n        }\r\n    };\r\n\r\n    $scope.changeFocus = function () {\r\n        if ($scope.attributeUpdateFormGroup.get('currentLat').value === $scope.originalLat && $scope.attributeUpdateFormGroup.get('currentLng').value === $scope.originalLng) {\r\n            $scope.isFocused = false;\r\n        }\r\n    };\r\n    \r\n    $scope.discardChange = function() {\r\n        $scope.attributeUpdateFormGroup.setValue({\r\n            'currentLat': $scope.originalLat,\r\n            'currentLng': $scope.originalLng\r\n        });\r\n        $scope.isFocused = false;\r\n        $scope.attributeUpdateFormGroup.markAsPristine();\r\n        self.onDataUpdated();\r\n    };\r\n    \r\n    $scope.disableButton = function () {\r\n        return $scope.attributeUpdateFormGroup.get('currentLat').value === $scope.originalLat && $scope.attributeUpdateFormGroup.get('currentLng').value === $scope.originalLng || $scope.currentLng === null || $scope.currentLat === null;\r\n    };\r\n    \r\n    $scope.getCoordinate = function() {\r\n        if (navigator.geolocation) {\r\n            navigator.geolocation.getCurrentPosition(showPosition, function (){\r\n                $scope.showErrorToast(translate.instant('widgets.input-widgets.blocked-location'), \r\n                                    'bottom', 'left', $scope.toastTargetId);\r\n            }, {\r\n                enableHighAccuracy: settings.enableHighAccuracy\r\n            });\r\n        } else {\r\n            $scope.showErrorToast(translate.instant('widgets.input-widgets.no-support-geolocation'), 'bottom', 'left', $scope.toastTargetId);\r\n        }\r\n    };\r\n    \r\n    function showPosition(position) {\r\n        $scope.attributeUpdateFormGroup.setValue({\r\n            currentLat: correctValue(position.coords.latitude),\r\n            currentLng: correctValue(position.coords.longitude)\r\n        });\r\n        $scope.attributeUpdateFormGroup.markAsDirty();\r\n        $scope.isFocused = true;\r\n    }\r\n    \r\n    self.onResize();\r\n}\r\n\r\nself.onDataUpdated = function() {\r\n    try {\r\n        if ($scope.dataKeyDetected) {\r\n            if (!$scope.isFocused) {\r\n                for(let i = 0; i < self.typeParameters().maxDataKeys; i++){\r\n                    if(self.ctx.data[i].dataKey.name === self.ctx.settings.latKeyName && $scope.attributeUpdateFormGroup.get('currentLat').pristine){\r\n                        $scope.originalLat = self.ctx.data[i].data[0][1];\r\n                        $scope.attributeUpdateFormGroup.get('currentLat').patchValue(correctValue($scope.originalLat));\r\n                    } else if(self.ctx.data[i].dataKey.name === self.ctx.settings.lngKeyName && $scope.attributeUpdateFormGroup.get('currentLng').pristine){\r\n                        $scope.originalLng = self.ctx.data[i].data[0][1];\r\n                        $scope.attributeUpdateFormGroup.get('currentLng').patchValue(correctValue($scope.originalLng));\r\n                    }\r\n                }\r\n                self.ctx.detectChanges();\r\n            }\r\n        }\r\n    } catch (e) {\r\n        console.log(e);\r\n    }\r\n};\r\n\r\nfunction correctValue(value) {\r\n    if (typeof value !== \"number\") {\r\n        return 0;\r\n    }\r\n    return value;\r\n}\r\n\r\nself.onResize = function() {\r\n    $scope.smallWidthContainer = (self.ctx.$container && self.ctx.$container[0].offsetWidth < 320);\r\n    $scope.changeAlignment = ($scope.isHorizontal && self.ctx.$container && self.ctx.$container[0].offsetWidth < 480);\r\n    self.ctx.detectChanges();\r\n};\r\n\r\nself.typeParameters = function() {\r\n    return {\r\n        maxDatasources: 1,\r\n        maxDataKeys: 2,\r\n        singleEntity: true\r\n    };\r\n};\r\n\r\nself.onDestroy = function() {\r\n\r\n};",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_server_string_attribute.json b/application/src/main/data/json/system/widget_types/update_server_string_attribute.json
index d8c33bffcc..ed4f8038e1 100644
--- a/application/src/main/data/json/system/widget_types/update_server_string_attribute.json
+++ b/application/src/main/data/json/system/widget_types/update_server_string_attribute.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentValue\"\n                               [required]=\"settings.isRequired\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               maxlength=\"{{settings.maxLength}}\"\n                               minlength=\"{{settings.minLength}}\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required') && settings.isRequired\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"(originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty) && (originalValue === attributeUpdateFormGroup.get('currentValue').value || settings.isRequired)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\">\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentValue\"\n                               [required]=\"settings.isRequired\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               maxlength=\"{{settings.maxLength}}\"\n                               minlength=\"{{settings.minLength}}\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required') && settings.isRequired\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"(originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty) && (originalValue === attributeUpdateFormGroup.get('currentValue').value || settings.isRequired)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\">\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex: 1;\n}\n.grid__element:last-child {\n    margin-top: 19px;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0 !important;\n    line-height: 20px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let $scope;\nlet settings;\nlet attributeService;\nlet utils;\nlet translate;\n\nself.onInit = function() {\n    self.ctx.ngZone.run(function() {\n       init(); \n       self.ctx.detectChanges(true);\n    });\n};\n\n\nfunction init() {\n    $scope = self.ctx.$scope;\n    attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\n    $scope.toastTargetId = 'input-widget' + utils.guid();\n    settings = utils.deepClone(self.ctx.settings) || {};\n    settings.showLabel = utils.defaultValue(settings.showLabel, true);\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\n    settings.isRequired = utils.defaultValue(settings.isRequired, true);\n    $scope.settings = settings;\n    $scope.isValidParameter = true;\n    $scope.dataKeyDetected = false;\n\n    $scope.requiredErrorMessage = utils.customTranslation(settings.requiredErrorMessage, settings.requiredErrorMessage) || translate.instant('widgets.input-widgets.entity-attribute-required');\n    $scope.labelValue = utils.customTranslation(settings.labelValue, settings.labelValue) || translate.instant('widgets.input-widgets.value');\n    \n    var validators = [];\n    if (utils.isDefinedAndNotNull(settings.minLength)) {\n        validators.push($scope.validators.minLength(settings.minLength));\n    }\n    if (utils.isDefinedAndNotNull(settings.maxLength)) {\n        validators.push($scope.validators.maxLength(settings.maxLength));\n    }\n    if (settings.isRequired) {\n        validators.push($scope.validators.required);\n    }\n    \n    $scope.attributeUpdateFormGroup = $scope.fb.group({\n        currentValue: [undefined, validators]\n    });\n\n    if (self.ctx.datasources && self.ctx.datasources.length) {\n        var datasource = self.ctx.datasources[0];\n        if (datasource.type === 'entity') {\n            if (datasource.entityType && datasource.entityId) {\n                $scope.entityName = datasource.entityName;\n                if (settings.widgetTitle && settings.widgetTitle.length) {\n                    $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\n                } else {\n                    $scope.titleTemplate = self.ctx.widgetConfig.title;\n                }\n\n                $scope.entityDetected = true;\n            }\n        }\n        if (datasource.dataKeys.length) {\n            if (datasource.dataKeys[0].type !== \"attribute\") {\n                $scope.isValidParameter = false;\n            } else {\n                $scope.currentKey = datasource.dataKeys[0].name;\n                $scope.dataKeyType = datasource.dataKeys[0].type;\n                $scope.dataKeyDetected = true;\n            }\n        }\n    }\n\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\n\n    $scope.updateAttribute = function () {\n        $scope.isFocused = false;\n        if ($scope.entityDetected) {\n            var datasource = self.ctx.datasources[0];\n            \n            var value = $scope.attributeUpdateFormGroup.get('currentValue').value;\n            \n            if (!$scope.attributeUpdateFormGroup.get('currentValue').value.length) {\n                value = null;\n            }\n\n            attributeService.saveEntityAttributes(\n                datasource.entity.id,\n                'SERVER_SCOPE',\n                [\n                    {\n                        key: $scope.currentKey,\n                        value\n                    }\n                ]\n            ).subscribe(\n                function success() {\n                    $scope.originalValue = $scope.attributeUpdateFormGroup.get('currentValue').value;\n                    if (settings.showResultMessage) {\n                        $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\n                    }\n                },\n                function fail() {\n                    if (settings.showResultMessage) {\n                        $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\n                    }\n                }\n            );\n        }\n    };\n\n    $scope.changeFocus = function () {\n        if ($scope.attributeUpdateFormGroup.get('currentValue').value === $scope.originalValue) {\n            $scope.isFocused = false;\n        }\n    }\n}\n\nself.onDataUpdated = function() {\n    try {\n        if ($scope.dataKeyDetected) {\n            if (!$scope.isFocused) {\n                $scope.originalValue = self.ctx.data[0].data[0][1];\n                $scope.attributeUpdateFormGroup.get('currentValue').patchValue($scope.originalValue);\n                self.ctx.detectChanges();\n            }\n        }\n    } catch (e) {\n        console.log(e);\n    }\n}\n\nself.onResize = function() {\n\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    }\n}\n\nself.onDestroy = function() {\n\n}",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_shared_boolean_attribute.json b/application/src/main/data/json/system/widget_types/update_shared_boolean_attribute.json
index 765c6381f2..232d09195f 100644
--- a/application/src/main/data/json/system/widget_types/update_shared_boolean_attribute.json
+++ b/application/src/main/data/json/system/widget_types/update_shared_boolean_attribute.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\r\n    <form *ngIf=\"attributeUpdateFormGroup\"\r\n          class=\"attribute-update-form\"\r\n          [formGroup]=\"attributeUpdateFormGroup\"\r\n          (ngSubmit)=\"updateAttribute()\">\r\n        <div style=\"padding: 0 8px; margin: auto 0;\">\r\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\r\n                <div class=\"grid__element\">\r\n                    <mat-checkbox formControlName=\"checkboxValue\"\r\n                                  (change)=\"changed()\"\r\n                                  aria-label=\"{{'widgets.input-widgets.switch-timeseries-value' | translate}}\">\r\n                        {{currentValue}}\r\n                    </mat-checkbox>\r\n                </div>\r\n            </div>\r\n\r\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\" [innerHtml]=\"message\"></div>\r\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\r\n                 [fxShow]=\"entityDetected && !dataKeyDetected\">\r\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\r\n            </div>\r\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\r\n                 [fxShow]=\"entityDetected && !isValidParameter\">\r\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\r\n            </div>\r\n        </div>\r\n    </form>\r\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\r\n    <form *ngIf=\"attributeUpdateFormGroup\"\r\n          class=\"attribute-update-form\"\r\n          [formGroup]=\"attributeUpdateFormGroup\"\r\n          (ngSubmit)=\"updateAttribute()\">\r\n        <div style=\"padding: 0 8px; margin: auto 0;\">\r\n            <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\r\n                <div class=\"grid__element\">\r\n                    <mat-checkbox formControlName=\"checkboxValue\"\r\n                                  (change)=\"changed()\"\r\n                                  aria-label=\"{{'widgets.input-widgets.switch-timeseries-value' | translate}}\">\r\n                        {{currentValue}}\r\n                    </mat-checkbox>\r\n                </div>\r\n            </div>\r\n\r\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\" [innerHtml]=\"message\"></div>\r\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\r\n                 [class.!hidden]=\"!entityDetected || dataKeyDetected\">\r\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\r\n            </div>\r\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\r\n                 [class.!hidden]=\"!entityDetected || isValidParameter\">\r\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\r\n            </div>\r\n        </div>\r\n    </form>\r\n</div>",
     "templateCss": ".attribute-update-form {\r\n    overflow: hidden;\r\n    height: 100%;\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n\r\n.attribute-update-form__grid {\r\n    display: flex;\r\n}\r\n.grid__element:first-child {\r\n    flex: 1;\r\n}\r\n\r\n.grid__element {\r\n    display: flex;\r\n}\r\n\r\n.attribute-update-form .mat-button.mat-icon-button {\r\n    width: 32px;\r\n    min-width: 32px;\r\n    height: 32px;\r\n    min-height: 32px;\r\n    padding: 0 !important;\r\n    margin: 0 !important;\r\n    line-height: 20px;\r\n}\r\n\r\n.attribute-update-form .mat-icon-button mat-icon {\r\n    width: 20px;\r\n    min-width: 20px;\r\n    height: 20px;\r\n    min-height: 20px;\r\n    font-size: 20px;\r\n}\r\n\r\n.tb-toast {\r\n    font-size: 14px!important;\r\n}",
     "controllerScript": "let settings;\nlet attributeService;\nlet utils;\nlet translate;\nlet $scope;\nlet map;\n\nself.onInit = function() {\n    self.ctx.ngZone.run(function() {\n        init();\n        self.ctx.detectChanges(true);\n    });\n};\n\n\nfunction init() {\n    $scope = self.ctx.$scope;\n    attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\n    $scope.toastTargetId = 'input-widget' + utils.guid();\n    settings = utils.deepClone(self.ctx.settings) || {};\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\n\n    $scope.isValidParameter = true;\n    $scope.dataKeyDetected = false;\n    $scope.message = translate.instant('widgets.input-widgets.no-entity-selected');\n\n    settings.trueValue = utils.defaultValue(utils.customTranslation(settings.trueValue, settings.trueValue), true);\n    settings.falseValue = utils.defaultValue(utils.customTranslation(settings.falseValue, settings.falseValue), false);\n\n    map = {\n        true: settings.trueValue,\n        false: settings.falseValue\n    };\n    \n    $scope.checkboxValue = false;\n    $scope.currentValue = map[$scope.checkboxValue];\n\n    $scope.attributeUpdateFormGroup = $scope.fb.group({checkboxValue: [$scope.checkboxValue]});\n\n    $scope.changed = function() {\n        $scope.checkboxValue = $scope.attributeUpdateFormGroup.get('checkboxValue').value;\n        $scope.currentValue = map[$scope.checkboxValue];\n        $scope.updateAttribute();\n    };\n\n    if (self.ctx.datasources && self.ctx.datasources.length) {\n        var datasource = self.ctx.datasources[0];\n        if (datasource.type === 'entity') {\n            if (datasource.entityType === 'DEVICE') {\n                if (datasource.entityType && datasource.entityId) {\n                    $scope.entityName = datasource.entityName;\n                    if (settings.widgetTitle && settings.widgetTitle.length) {\n                        $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\n                    } else {\n                        $scope.titleTemplate = self.ctx.widgetConfig.title;\n                    }\n    \n                    $scope.entityDetected = true;\n                }\n            } else {\n                $scope.message = translate.instant('widgets.input-widgets.not-allowed-entity');\n            }\n        }\n        if (datasource.dataKeys.length) {\n            if (datasource.dataKeys[0].type !== \"attribute\") {\n                $scope.isValidParameter = false;\n            } else {\n                $scope.currentKey = datasource.dataKeys[0].name;\n                $scope.dataKeyType = datasource.dataKeys[0].type;\n                $scope.dataKeyDetected = true;\n            }\n        }\n    }\n\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\n\n    $scope.updateAttribute = function() {\n        if ($scope.entityDetected) {\n            var datasource = self.ctx.datasources[0];\n            attributeService.saveEntityAttributes(\n                datasource.entity.id,\n                'SHARED_SCOPE',\n                [\n                    {\n                        key: $scope.currentKey,\n                        value: $scope.checkboxValue || false\n                    }\n                ]\n            ).subscribe(\n                function success() {\n                    if (settings.showResultMessage) {\n                        $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\n                    }\n                },\n                function fail() {\n                    if (settings.showResultMessage) {\n                        $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\n                    }\n                }\n            );\n        }\n    };\n}\n\nself.onDataUpdated = function() {\n    try {\n        if ($scope.dataKeyDetected) {\n            $scope.checkboxValue = self.ctx.data[0].data[0][1] === 'true';\n            $scope.currentValue = map[$scope.checkboxValue];\n            $scope.attributeUpdateFormGroup.get('checkboxValue').patchValue($scope.checkboxValue);\n            self.ctx.detectChanges();\n        }\n    } catch (e) {\n        console.log(e);\n    }\n}\n\nself.onResize = function() {}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    }\n}\n\nself.onDestroy = function() {}",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_shared_date_attribute.json b/application/src/main/data/json/system/widget_types/update_shared_date_attribute.json
index 2225111ff7..8d775ba24a 100644
--- a/application/src/main/data/json/system/widget_types/update_shared_date_attribute.json
+++ b/application/src/main/data/json/system/widget_types/update_shared_date_attribute.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3.5,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\">\n                        <mat-label *ngIf=\"settings.showLabel\">{{ labelValue }}</mat-label>\n                        <mat-datetimepicker-toggle [for]=\"datePicker\" matPrefix></mat-datetimepicker-toggle>\n                        <mat-datetimepicker #datePicker type=\"{{datePickerType}}\"\n                                            openOnFocus=\"true\"></mat-datetimepicker>\n                        <input matInput formControlName=\"currentValue\"\n                               [required]=\"settings.isRequired\"\n                               [matDatetimepicker]=\"datePicker\"\n                               (focus)=\"isFocused = true;\"\n                               (blur)=\"isFocused = false;\">\n                        <button *ngIf=\"!settings.isRequired\n                                    && (attributeUpdateFormGroup.get('currentValue').value\n                                    || originalValue)\"\n                                type=\"button\"\n                                mat-icon-button matSuffix\n                                (click)=\"clear($event)\">\n                            <mat-icon>{{'clear'}}</mat-icon>\n                        </button>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required') && settings.isRequired\">\n                          {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"(originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty) && (originalValue === attributeUpdateFormGroup.get('currentValue').value || settings.isRequired)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\" [innerHtml]=\"message\"></div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\">\n                        <mat-label *ngIf=\"settings.showLabel\">{{ labelValue }}</mat-label>\n                        <mat-datetimepicker-toggle [for]=\"datePicker\" matPrefix></mat-datetimepicker-toggle>\n                        <mat-datetimepicker #datePicker type=\"{{datePickerType}}\"\n                                            openOnFocus=\"true\"></mat-datetimepicker>\n                        <input matInput formControlName=\"currentValue\"\n                               [required]=\"settings.isRequired\"\n                               [matDatetimepicker]=\"datePicker\"\n                               (focus)=\"isFocused = true;\"\n                               (blur)=\"isFocused = false;\">\n                        <button *ngIf=\"!settings.isRequired\n                                    && (attributeUpdateFormGroup.get('currentValue').value\n                                    || originalValue)\"\n                                type=\"button\"\n                                mat-icon-button matSuffix\n                                (click)=\"clear($event)\">\n                            <mat-icon>{{'clear'}}</mat-icon>\n                        </button>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required') && settings.isRequired\">\n                          {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"(originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty) && (originalValue === attributeUpdateFormGroup.get('currentValue').value || settings.isRequired)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\" [innerHtml]=\"message\"></div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex: 1;\n}\n.grid__element:last-child {\n    margin-top: 19px;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0 !important;\n    line-height: 20px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let $scope;\r\nlet settings;\r\nlet attributeService;\r\nlet utils;\r\nlet translate;\r\n\r\nself.onInit = function() {\r\n    self.ctx.ngZone.run(function() {\r\n       init(); \r\n       self.ctx.detectChanges(true);\r\n    });\r\n};\r\n\r\nfunction init() {\r\n\r\n    $scope = self.ctx.$scope;\r\n    attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\r\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\r\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\r\n    $scope.toastTargetId = 'input-widget' + utils.guid();\r\n    settings = utils.deepClone(self.ctx.settings) || {};\r\n    settings.showLabel = utils.defaultValue(settings.showLabel, true);\r\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\r\n    settings.isRequired = utils.defaultValue(settings.isRequired, true);\r\n    $scope.settings = settings;\r\n    $scope.isValidParameter = true;\r\n    $scope.dataKeyDetected = false;\r\n    $scope.entityDetected = false;\r\n\r\n    $scope.datePickerType = settings.showTimeInput ? 'datetime' : 'date'; \r\n    \r\n    $scope.message = translate.instant('widgets.input-widgets.no-entity-selected');\r\n    $scope.requiredErrorMessage = utils.customTranslation(settings.requiredErrorMessage, settings.requiredErrorMessage) || translate.instant('widgets.input-widgets.entity-attribute-required');\r\n    $scope.labelValue = translate.instant('widgets.input-widgets.date');\r\n    \r\n    \r\n    if (settings.showTimeInput) {\r\n        $scope.labelValue += \" & \" + translate.instant('widgets.input-widgets.time');\r\n    }\r\n    \r\n    var validators = [];\r\n    \r\n    if (settings.isRequired) {\r\n        validators.push($scope.validators.required);\r\n    }\r\n    \r\n    $scope.attributeUpdateFormGroup = $scope.fb.group(\r\n        {currentValue: [undefined, validators]}\r\n    );\r\n\r\n    if (self.ctx.datasources && self.ctx.datasources.length) {\r\n        var datasource = self.ctx.datasources[0];\r\n        \r\n        if (datasource.type === 'entity') {\r\n            if (datasource.entityType === 'DEVICE') {\r\n                if (datasource.entityType && datasource.entityId) {\r\n                    $scope.entityName = datasource.entityName;\r\n                    if (settings.widgetTitle && settings.widgetTitle.length) {\r\n                        $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\r\n                    } else {\r\n                        $scope.titleTemplate = self.ctx.widgetConfig.title;\r\n                    }\r\n    \r\n                    $scope.entityDetected = true;\r\n                }\r\n            } else {\r\n                $scope.message = translate.instant('widgets.input-widgets.not-allowed-entity');\r\n            }\r\n        }\r\n        if (datasource.dataKeys.length) {\r\n            if (datasource.dataKeys[0].type !== \"attribute\") {\r\n                $scope.isValidParameter = false;\r\n            } else {\r\n                $scope.currentKey = datasource.dataKeys[0].name;\r\n                $scope.dataKeyType = datasource.dataKeys[0].type;\r\n                $scope.dataKeyDetected = true;\r\n            }\r\n        }\r\n    }\r\n\r\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\r\n    \r\n    $scope.clear = function(event) {\r\n        event.stopPropagation();\r\n        $scope.attributeUpdateFormGroup.get('currentValue').patchValue(undefined);\r\n    }\r\n    \r\n    $scope.updateAttribute = function () {\r\n        if ($scope.entityDetected) {\r\n            var datasource = self.ctx.datasources[0];\r\n            var currentValueInMilliseconds;\r\n            \r\n            if (!$scope.attributeUpdateFormGroup.get('currentValue').value) {\r\n                currentValueInMilliseconds = undefined;\r\n            } else {\r\n                currentValueInMilliseconds = $scope.attributeUpdateFormGroup.get('currentValue').value.getTime();\r\n            }\r\n\r\n            attributeService.saveEntityAttributes(\r\n                datasource.entity.id,\r\n                'SHARED_SCOPE',\r\n                [\r\n                    {\r\n                        key: $scope.currentKey,\r\n                        value: currentValueInMilliseconds\r\n                    }\r\n                ]\r\n            ).subscribe(\r\n                function success() {\r\n                    $scope.originalValue = $scope.attributeUpdateFormGroup.get('currentValue').value;\r\n                    if (settings.showResultMessage) {\r\n                        $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\r\n                    }\r\n                },\r\n                function fail() {\r\n                    if (settings.showResultMessage) {\r\n                        $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\r\n                    }\r\n                }\r\n            );\r\n        }\r\n    };\r\n    \r\n    $scope.isValidDate = function(date) {\r\n      return date instanceof Date && !isNaN(date);\r\n    }\r\n}\r\n\r\nself.onDataUpdated = function() {\r\n    try {\r\n        if ($scope.dataKeyDetected) {\r\n            if (!$scope.isFocused) {\r\n                $scope.originalValue = moment(self.ctx.data[0].data[0][1]).toDate();\r\n                \r\n                if (!$scope.isValidDate($scope.originalValue)) {\r\n                    $scope.originalValue = undefined;\r\n                }\r\n                \r\n                $scope.attributeUpdateFormGroup.get('currentValue').patchValue($scope.originalValue);\r\n                self.ctx.detectChanges();\r\n            }\r\n        }\r\n    } catch (e) {\r\n        console.log(e);\r\n    }\r\n};\r\n\r\nself.onResize = function() {\r\n\r\n};\r\n\r\nself.typeParameters = function() {\r\n    return {\r\n        maxDatasources: 1,\r\n        maxDataKeys: 1,\r\n        singleEntity: true\r\n    };\r\n};\r\n\r\nself.onDestroy = function() {\r\n\r\n}\r\n",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_shared_double_attribute.json b/application/src/main/data/json/system/widget_types/update_shared_double_attribute.json
index 29c96f71b4..e2cd304a54 100644
--- a/application/src/main/data/json/system/widget_types/update_shared_double_attribute.json
+++ b/application/src/main/data/json/system/widget_types/update_shared_double_attribute.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentValue\"\n                               [required]=\"settings.isRequired\"\n                               type=\"number\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               max=\"{{settings.maxValue}}\"\n                               min=\"{{settings.minValue}}\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required') && settings.isRequired\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"(originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty) && (originalValue === attributeUpdateFormGroup.get('currentValue').value || settings.isRequired)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\" [innerHtml]=\"message\"></div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentValue\"\n                               [required]=\"settings.isRequired\"\n                               type=\"number\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               max=\"{{settings.maxValue}}\"\n                               min=\"{{settings.minValue}}\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required') && settings.isRequired\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"(originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty) && (originalValue === attributeUpdateFormGroup.get('currentValue').value || settings.isRequired)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\" [innerHtml]=\"message\"></div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex: 1;\n}\n.grid__element:last-child {\n    margin-top: 19px;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0 !important;\n    line-height: 20px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let $scope;\nlet settings;\nlet attributeService;\nlet utils;\nlet translate;\n\nself.onInit = function() {\n    self.ctx.ngZone.run(function() {\n       init(); \n       self.ctx.detectChanges(true);\n    });\n};\n\n\nfunction init() {\n\n    $scope = self.ctx.$scope;\n    attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\n    $scope.toastTargetId = 'input-widget' + utils.guid();\n    settings = utils.deepClone(self.ctx.settings) || {};\n    settings.showLabel = utils.defaultValue(settings.showLabel, true);\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\n    settings.isRequired = utils.defaultValue(settings.isRequired, true);\n    $scope.settings = settings;\n    $scope.isValidParameter = true;\n    $scope.dataKeyDetected = false; \n    $scope.message = translate.instant('widgets.input-widgets.no-entity-selected');\n    \n    $scope.requiredErrorMessage = utils.customTranslation(settings.requiredErrorMessage, settings.requiredErrorMessage) || translate.instant('widgets.input-widgets.entity-attribute-required');\n    $scope.labelValue = utils.customTranslation(settings.labelValue, settings.labelValue) || translate.instant('widgets.input-widgets.value');\n    \n    var validators = [\n        $scope.validators.min(settings.minValue),\n        $scope.validators.max(settings.maxValue)\n    ];\n    \n    if (settings.isRequired) {\n        validators.push($scope.validators.required);\n    }\n\n    $scope.attributeUpdateFormGroup = $scope.fb.group({\n        currentValue: [undefined, validators]\n        \n    });\n\n    if (self.ctx.datasources && self.ctx.datasources.length) {\n        var datasource = self.ctx.datasources[0];\n        if (datasource.type === 'entity') {\n            if (datasource.entityType === 'DEVICE') {\n                if (datasource.entityType && datasource.entityId) {\n                    $scope.entityName = datasource.entityName;\n                    if (settings.widgetTitle && settings.widgetTitle.length) {\n                        $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\n                    } else {\n                        $scope.titleTemplate = self.ctx.widgetConfig.title;\n                    }\n    \n                    $scope.entityDetected = true;\n                }\n            } else {\n                $scope.message = translate.instant('widgets.input-widgets.not-allowed-entity');\n            }\n        }\n        if (datasource.dataKeys.length) {\n            if (datasource.dataKeys[0].type !== \"attribute\") {\n                $scope.isValidParameter = false;\n            } else {\n                $scope.currentKey = datasource.dataKeys[0].name;\n                $scope.dataKeyType = datasource.dataKeys[0].type;\n                $scope.dataKeyDetected = true;\n            }\n        }\n    }\n\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\n\n    $scope.updateAttribute = function () {\n        $scope.isFocused = false;\n        if ($scope.entityDetected) {\n            var datasource = self.ctx.datasources[0];\n\n            attributeService.saveEntityAttributes(\n                datasource.entity.id,\n                'SHARED_SCOPE',\n                [\n                    {\n                        key: $scope.currentKey,\n                        value: $scope.attributeUpdateFormGroup.get('currentValue').value\n                    }\n                ]\n            ).subscribe(\n                function success() {\n                    $scope.originalValue = $scope.attributeUpdateFormGroup.get('currentValue').value;\n                    if (settings.showResultMessage) {\n                        $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\n                    }\n                },\n                function fail() {\n                    if (settings.showResultMessage) {\n                        $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\n                    }\n                }\n            );\n        }\n    };\n\n    $scope.changeFocus = function () {\n        if ($scope.attributeUpdateFormGroup.get('currentValue').value === $scope.originalValue) {\n            $scope.isFocused = false;\n        }\n    }\n}\n\nself.onDataUpdated = function() {\n\n    try {\n        if ($scope.dataKeyDetected) {\n            if (!$scope.isFocused) {\n                $scope.originalValue = self.ctx.data[0].data[0][1];\n                $scope.attributeUpdateFormGroup.get('currentValue').patchValue(correctValue($scope.originalValue));\n                self.ctx.detectChanges();\n            }\n        }\n    } catch (e) {\n        console.log(e);\n    }\n}\n\nfunction correctValue(value) {\n    if (typeof value !== \"number\") {\n        return 0;\n    }\n    return value;\n}\n\nself.onResize = function() {\n\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    }\n}\n\nself.onDestroy = function() {\n\n}",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_shared_integer_attribute.json b/application/src/main/data/json/system/widget_types/update_shared_integer_attribute.json
index c4dd5b2dba..4235127d7a 100644
--- a/application/src/main/data/json/system/widget_types/update_shared_integer_attribute.json
+++ b/application/src/main/data/json/system/widget_types/update_shared_integer_attribute.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentValue\"\n                               [required]=\"settings.isRequired\"\n                               type=\"number\"\n                               step=\"1\"\n                               pattern=\"^-?[0-9]+$\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               max=\"{{settings.maxValue}}\"\n                               min=\"{{settings.minValue}}\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required') && settings.isRequired\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"(originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty) && (originalValue === attributeUpdateFormGroup.get('currentValue').value || settings.isRequired)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\" [innerHtml]=\"message\"></div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentValue\"\n                               [required]=\"settings.isRequired\"\n                               type=\"number\"\n                               step=\"1\"\n                               pattern=\"^-?[0-9]+$\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               max=\"{{settings.maxValue}}\"\n                               min=\"{{settings.minValue}}\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required') && settings.isRequired\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"(originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty) && (originalValue === attributeUpdateFormGroup.get('currentValue').value || settings.isRequired)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\" [innerHtml]=\"message\"></div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex: 1;\n}\n.grid__element:last-child {\n    margin-top: 19px;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0 !important;\n    line-height: 20px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let $scope;\nlet settings;\nlet attributeService;\nlet utils;\nlet translate;\n\nself.onInit = function() {\n    self.ctx.ngZone.run(function() {\n       init(); \n       self.ctx.detectChanges(true);\n    });\n};\n\n\nfunction init() {\n\n    $scope = self.ctx.$scope;\n    attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\n    $scope.toastTargetId = 'input-widget' + utils.guid();\n    settings = utils.deepClone(self.ctx.settings) || {};\n    settings.showLabel = utils.defaultValue(settings.showLabel, true);\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\n    settings.isRequired = utils.defaultValue(settings.isRequired, true);\n    $scope.settings = settings;\n    $scope.isValidParameter = true;\n    $scope.dataKeyDetected = false; \n    $scope.message = translate.instant('widgets.input-widgets.no-entity-selected');\n    \n    $scope.requiredErrorMessage = utils.customTranslation(settings.requiredErrorMessage, settings.requiredErrorMessage) || translate.instant('widgets.input-widgets.entity-attribute-required');\n    $scope.labelValue = utils.customTranslation(settings.labelValue, settings.labelValue) || translate.instant('widgets.input-widgets.value');\n    \n    var validators = [\n        $scope.validators.min(settings.minValue),\n        $scope.validators.max(settings.maxValue),\n        $scope.validators.pattern(/^-?[0-9]+$/)\n    ];\n    \n    if (settings.isRequired) {\n        validators.push($scope.validators.required);\n    }\n\n    $scope.attributeUpdateFormGroup = $scope.fb.group({\n        currentValue: [undefined, validators]\n    });\n\n    if (self.ctx.datasources && self.ctx.datasources.length) {\n        var datasource = self.ctx.datasources[0];\n        if (datasource.type === 'entity') {\n            if (datasource.entityType === 'DEVICE') {\n                if (datasource.entityType && datasource.entityId) {\n                    $scope.entityName = datasource.entityName;\n                    if (settings.widgetTitle && settings.widgetTitle.length) {\n                        $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\n                    } else {\n                        $scope.titleTemplate = self.ctx.widgetConfig.title;\n                    }\n    \n                    $scope.entityDetected = true;\n                }\n            } else {\n                $scope.message = translate.instant('widgets.input-widgets.not-allowed-entity');\n            }\n        }\n        if (datasource.dataKeys.length) {\n            if (datasource.dataKeys[0].type !== \"attribute\") {\n                $scope.isValidParameter = false;\n            } else {\n                $scope.currentKey = datasource.dataKeys[0].name;\n                $scope.dataKeyType = datasource.dataKeys[0].type;\n                $scope.dataKeyDetected = true;\n            }\n        }\n    }\n\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\n\n    $scope.updateAttribute = function () {\n        $scope.isFocused = false;\n        if ($scope.entityDetected) {\n            var datasource = self.ctx.datasources[0];\n\n            attributeService.saveEntityAttributes(\n                datasource.entity.id,\n                'SHARED_SCOPE',\n                [\n                    {\n                        key: $scope.currentKey,\n                        value: $scope.attributeUpdateFormGroup.get('currentValue').value\n                    }\n                ]\n            ).subscribe(\n                function success() {\n                    $scope.originalValue = $scope.attributeUpdateFormGroup.get('currentValue').value;\n                    if (settings.showResultMessage) {\n                        $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\n                    }\n                },\n                function fail() {\n                    if (settings.showResultMessage) {\n                        $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\n                    }\n                }\n            );\n        }\n    };\n\n    $scope.changeFocus = function () {\n        if ($scope.attributeUpdateFormGroup.get('currentValue').value === $scope.originalValue) {\n            $scope.isFocused = false;\n        }\n    }\n}\n\nself.onDataUpdated = function() {\n\n    try {\n        if ($scope.dataKeyDetected) {\n            if (!$scope.isFocused) {\n                $scope.originalValue = self.ctx.data[0].data[0][1];\n                $scope.attributeUpdateFormGroup.get('currentValue').patchValue(correctValue($scope.originalValue));\n                self.ctx.detectChanges();\n            }\n        }\n    } catch (e) {\n        console.log(e);\n    }\n}\n\nfunction correctValue(value) {\n    if (typeof value !== \"number\") {\n        return 0;\n    }\n    return value;\n}\n\nself.onResize = function() {\n\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    }\n}\n\nself.onDestroy = function() {\n\n}",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_shared_location_attribute.json b/application/src/main/data/json/system/widget_types/update_shared_location_attribute.json
index fa053fed72..6f2067dec0 100644
--- a/application/src/main/data/json/system/widget_types/update_shared_location_attribute.json
+++ b/application/src/main/data/json/system/widget_types/update_shared_location_attribute.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          [ngClass]=\"{'small-width': smallWidthContainer}\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n                <div class=\"grid__element\" \n                    [ngClass]=\"{'horizontal-alignment': isHorizontal && !changeAlignment}\">\n                    <mat-form-field class=\"mat-block\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? latLabel : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentLat\"\n                               [required]=\"settings.isLatRequired\"\n                               type=\"number\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               max=\"90\"\n                               min=\"-90\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentLat').hasError('required') && settings.isLatRequired\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>\n                    \n                    <mat-form-field class=\"mat-block\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? lngLabel : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentLng\"\n                               [required]=\"settings.isLngRequired\"\n                               type=\"number\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               max=\"180\"\n                               min=\"-180\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentLng').hasError('required') && settings.isLngRequired\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"getLocation\"\n                            type=\"button\"\n                            (click)=\"getCoordinate()\"\n                            *ngIf=\"settings.showGetLocation\"\n                            matTooltip=\"{{ 'widgets.input-widgets.get-location' | translate }}\"\n                            matTooltipPosition=\"above\">\n                        <mat-icon>my_location</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"applyChanges\"\n                            type=\"submit\"\n                            [disabled]=\"disableButton() || attributeUpdateFormGroup.invalid || attributeUpdateFormGroup.pristine\"\n                            matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                            matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                            type=\"button\"\n                            [disabled]=\"disableButton()\"\n                            (click)=\"discardChange()\"\n                            matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                            matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\" [innerHtml]=\"message\"></div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !isValidParameter\">\n                {{ 'widgets.input-widgets.no-coordinate-specified' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n  <form *ngIf=\"attributeUpdateFormGroup\"\n        class=\"attribute-update-form\"\n        [formGroup]=\"attributeUpdateFormGroup\"\n        [class.small-width]=\"smallWidthContainer\"\n        (ngSubmit)=\"updateAttribute()\">\n    <div style=\"padding: 0 8px; margin: auto 0;\">\n      <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n        <div class=\"grid__element\"\n             [class.horizontal-alignment]=\"isHorizontal && !changeAlignment\">\n          <mat-form-field class=\"mat-block\"\n                          floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                          [hideRequiredMarker]=\"!settings.showLabel\">\n            <mat-label>{{ settings.showLabel ? latLabel : '' }}</mat-label>\n            <input matInput\n                   formControlName=\"currentLat\"\n                   [required]=\"settings.isLatRequired\"\n                   type=\"number\"\n                   (focus)=\"isFocused = true\"\n                   (blur)=\"changeFocus()\"\n                   max=\"90\"\n                   min=\"-90\"/>\n            <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentLat').hasError('required') && settings.isLatRequired\">\n              {{requiredErrorMessage}}\n            </mat-error>\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-block\"\n                          floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                          [hideRequiredMarker]=\"!settings.showLabel\">\n            <mat-label>{{ settings.showLabel ? lngLabel : '' }}</mat-label>\n            <input matInput\n                   formControlName=\"currentLng\"\n                   [required]=\"settings.isLngRequired\"\n                   type=\"number\"\n                   (focus)=\"isFocused = true\"\n                   (blur)=\"changeFocus()\"\n                   max=\"180\"\n                   min=\"-180\"/>\n            <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentLng').hasError('required') && settings.isLngRequired\">\n              {{requiredErrorMessage}}\n            </mat-error>\n          </mat-form-field>\n        </div>\n\n        <div class=\"grid__element\">\n          <button mat-icon-button class=\"getLocation\"\n                  type=\"button\"\n                  (click)=\"getCoordinate()\"\n                  *ngIf=\"settings.showGetLocation\"\n                  matTooltip=\"{{ 'widgets.input-widgets.get-location' | translate }}\"\n                  matTooltipPosition=\"above\">\n            <mat-icon>my_location</mat-icon>\n          </button>\n          <button mat-icon-button class=\"applyChanges\"\n                  type=\"submit\"\n                  [disabled]=\"disableButton() || attributeUpdateFormGroup.invalid || attributeUpdateFormGroup.pristine\"\n                  matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                  matTooltipPosition=\"above\">\n            <mat-icon>check</mat-icon>\n          </button>\n          <button mat-icon-button class=\"discardChanges\"\n                  type=\"button\"\n                  [disabled]=\"disableButton()\"\n                  (click)=\"discardChange()\"\n                  matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                  matTooltipPosition=\"above\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </div>\n      </div>\n\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\" [innerHtml]=\"message\"></div>\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n           [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n        {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n      </div>\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n           [class.!hidden]=\"!entityDetected || isValidParameter\">\n        {{ 'widgets.input-widgets.no-coordinate-specified' | translate }}\n      </div>\n    </div>\n  </form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex-direction: column;\n    flex: 1;\n}\n\n.grid__element.horizontal-alignment {\n    flex-direction: row;\n}\n\n.grid__element:last-child {\n    align-items: center;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    margin: 0;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0;\n    line-height: 20px;\n}\n\n.attribute-update-form .mat-button.getLocation {\n    margin-right: 10px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.attribute-update-form mat-form-field{\n    width: 100%;\n    padding-right: 5px;\n}\n\n.attribute-update-form.small-width mat-form-field{\n    width: 150px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let $scope;\r\nlet settings;\r\nlet attributeService;\r\nlet utils;\r\nlet translate;\r\n\r\nself.onInit = function() {\r\n    self.ctx.ngZone.run(function() {\r\n       init(); \r\n       self.ctx.detectChanges(true);\r\n    });\r\n};\r\n\r\n\r\nfunction init() {\r\n    $scope = self.ctx.$scope;\r\n    attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\r\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\r\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\r\n    $scope.toastTargetId = 'input-widget' + utils.guid();\r\n    settings = utils.deepClone(self.ctx.settings) || {};\r\n    \r\n    settings.showLabel = utils.defaultValue(settings.showLabel, true);\r\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\r\n    settings.showGetLocation = utils.defaultValue(settings.showGetLocation, true);\r\n    settings.enableHighAccuracy = utils.defaultValue(settings.enableHighAccuracy, false);\r\n    settings.isLatRequired = utils.defaultValue(settings.isLatRequired, true);\r\n    settings.isLngRequired = utils.defaultValue(settings.isLngRequired, true);\r\n    $scope.settings = settings;\r\n    $scope.isValidParameter = true;\r\n    $scope.dataKeyDetected = false; \r\n    $scope.message = translate.instant('widgets.input-widgets.no-entity-selected');\r\n\r\n    $scope.isHorizontal = (settings.inputFieldsAlignment === 'row');\r\n    $scope.requiredErrorMessage = utils.customTranslation(settings.requiredErrorMessage, settings.requiredErrorMessage) || translate.instant('widgets.input-widgets.entity-coordinate-required');\r\n    $scope.latLabel = utils.customTranslation(settings.latLabel, settings.latLabel) || translate.instant('widgets.input-widgets.latitude');\r\n    $scope.lngLabel = utils.customTranslation(settings.lngLabel, settings.lngLabel) || translate.instant('widgets.input-widgets.longitude');\r\n\r\n    var validatorsLat = [$scope.validators.min(-90), $scope.validators.max(90)];\r\n    var validatorsLng = [$scope.validators.min(-180), $scope.validators.max(180)];\r\n    \r\n    if (settings.isLatRequired) {\r\n        validatorsLat.push($scope.validators.required);\r\n    }\r\n    \r\n    if (settings.isLngRequired) {\r\n        validatorsLng.push($scope.validators.required);\r\n    }\r\n\r\n    $scope.attributeUpdateFormGroup = $scope.fb.group({\r\n        currentLat: [undefined, validatorsLat],\r\n        currentLng: [undefined, validatorsLng],\r\n    });\r\n\r\n    if (self.ctx.datasources && self.ctx.datasources.length) {\r\n        var datasource = self.ctx.datasources[0];\r\n        if (datasource.type === 'entity') {\r\n            if (datasource.entityType === 'DEVICE') {\r\n                if (datasource.entityType && datasource.entityId) {\r\n                    $scope.entityName = datasource.entityName;\r\n                    if (settings.widgetTitle && settings.widgetTitle.length) {\r\n                        $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\r\n                    } else {\r\n                        $scope.titleTemplate = self.ctx.widgetConfig.title;\r\n                    }\r\n    \r\n                    $scope.entityDetected = true;\r\n                }\r\n            } else {\r\n                $scope.message = translate.instant('widgets.input-widgets.not-allowed-entity');\r\n            }\r\n        }\r\n        if (datasource.dataKeys.length > 1) {\r\n            $scope.dataKeyDetected = true;\r\n            for (let i = 0; i < datasource.dataKeys.length; i++) {\r\n                if (datasource.dataKeys[i].type != \"attribute\"){\r\n                    $scope.isValidParameter = false;\r\n                }\r\n                if (datasource.dataKeys[i].name !== settings.latKeyName && datasource.dataKeys[i].name !== settings.lngKeyName){\r\n                    $scope.dataKeyDetected = false;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\r\n\r\n    $scope.updateAttribute = function () {\r\n        $scope.isFocused = false;\r\n        if ($scope.entityDetected) {\r\n            var datasource = self.ctx.datasources[0];\r\n\r\n            attributeService.saveEntityAttributes(\r\n                datasource.entity.id,\r\n                'SHARED_SCOPE',\r\n                [\r\n                    {\r\n                        key: settings.latKeyName,\r\n                        value: $scope.attributeUpdateFormGroup.get('currentLat').value\r\n                    },{\r\n                        key: settings.lngKeyName,\r\n                        value: $scope.attributeUpdateFormGroup.get('currentLng').value\r\n                    }\r\n                ]\r\n            ).subscribe(\r\n                function success() {\r\n                    $scope.originalLat = $scope.attributeUpdateFormGroup.get('currentLat').value;\r\n                    $scope.originalLng = $scope.attributeUpdateFormGroup.get('currentLng').value;\r\n                    if (settings.showResultMessage) {\r\n                        $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\r\n                    }\r\n                },\r\n                function fail() {\r\n                    if (settings.showResultMessage) {\r\n                        $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\r\n                    }\r\n                }\r\n            );\r\n        }\r\n    };\r\n\r\n    $scope.changeFocus = function () {\r\n        if ($scope.attributeUpdateFormGroup.get('currentLat').value === $scope.originalLat && $scope.attributeUpdateFormGroup.get('currentLng').value === $scope.originalLng) {\r\n            $scope.isFocused = false;\r\n        }\r\n    };\r\n    \r\n    $scope.discardChange = function() {\r\n        $scope.attributeUpdateFormGroup.setValue({\r\n            'currentLat': $scope.originalLat,\r\n            'currentLng': $scope.originalLng\r\n        });\r\n        $scope.isFocused = false;\r\n        $scope.attributeUpdateFormGroup.markAsPristine();\r\n        self.onDataUpdated();\r\n    };\r\n    \r\n    $scope.disableButton = function () {\r\n        return $scope.attributeUpdateFormGroup.get('currentLat').value === $scope.originalLat && $scope.attributeUpdateFormGroup.get('currentLng').value === $scope.originalLng || $scope.currentLng === null || $scope.currentLat === null;\r\n    };\r\n    \r\n    $scope.getCoordinate = function() {\r\n        if (navigator.geolocation) {\r\n            navigator.geolocation.getCurrentPosition(showPosition, function (){\r\n                $scope.showErrorToast(translate.instant('widgets.input-widgets.blocked-location'), \r\n                                    'bottom', 'left', $scope.toastTargetId);\r\n            }, {\r\n                enableHighAccuracy: settings.enableHighAccuracy\r\n            });\r\n        } else {\r\n            $scope.showErrorToast(translate.instant('widgets.input-widgets.no-support-geolocation'), 'bottom', 'left', $scope.toastTargetId);\r\n        }\r\n    };\r\n    \r\n    function showPosition(position) {\r\n        $scope.attributeUpdateFormGroup.setValue({\r\n            currentLat: correctValue(position.coords.latitude),\r\n            currentLng: correctValue(position.coords.longitude)\r\n        });\r\n        $scope.attributeUpdateFormGroup.markAsDirty();\r\n        $scope.isFocused = true;\r\n    }\r\n    \r\n    self.onResize();\r\n}\r\n\r\nself.onDataUpdated = function() {\r\n    try {\r\n        if ($scope.dataKeyDetected) {\r\n            if (!$scope.isFocused) {\r\n                for(let i = 0; i < self.typeParameters().maxDataKeys; i++){\r\n                    if(self.ctx.data[i].dataKey.name === self.ctx.settings.latKeyName && $scope.attributeUpdateFormGroup.get('currentLat').pristine){\r\n                        $scope.originalLat = self.ctx.data[i].data[0][1];\r\n                        $scope.attributeUpdateFormGroup.get('currentLat').patchValue(correctValue($scope.originalLat));\r\n                    } else if(self.ctx.data[i].dataKey.name === self.ctx.settings.lngKeyName && $scope.attributeUpdateFormGroup.get('currentLng').pristine){\r\n                        $scope.originalLng = self.ctx.data[i].data[0][1];\r\n                        $scope.attributeUpdateFormGroup.get('currentLng').patchValue(correctValue($scope.originalLng));\r\n                    }\r\n                }\r\n                self.ctx.detectChanges();\r\n            }\r\n        }\r\n    } catch (e) {\r\n        console.log(e);\r\n    }\r\n};\r\n\r\nfunction correctValue(value) {\r\n    if (typeof value !== \"number\") {\r\n        return 0;\r\n    }\r\n    return value;\r\n}\r\n\r\nself.onResize = function() {\r\n    $scope.smallWidthContainer = (self.ctx.$container && self.ctx.$container[0].offsetWidth < 320);\r\n    $scope.changeAlignment = ($scope.isHorizontal && self.ctx.$container && self.ctx.$container[0].offsetWidth < 480);\r\n    self.ctx.detectChanges();\r\n};\r\n\r\nself.typeParameters = function() {\r\n    return {\r\n        maxDatasources: 1,\r\n        maxDataKeys: 2,\r\n        singleEntity: true\r\n    };\r\n};\r\n\r\nself.onDestroy = function() {\r\n\r\n};",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_shared_string_attribute.json b/application/src/main/data/json/system/widget_types/update_shared_string_attribute.json
index 7578838066..e9a00672bd 100644
--- a/application/src/main/data/json/system/widget_types/update_shared_string_attribute.json
+++ b/application/src/main/data/json/system/widget_types/update_shared_string_attribute.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentValue\"\n                               [required]=\"settings.isRequired\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               maxlength=\"{{settings.maxLength}}\"\n                               minlength=\"{{settings.minLength}}\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required') && settings.isRequired\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"(originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty) && (originalValue === attributeUpdateFormGroup.get('currentValue').value || settings.isRequired)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\" [innerHtml]=\"message\"></div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentValue\"\n                               [required]=\"settings.isRequired\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               maxlength=\"{{settings.maxLength}}\"\n                               minlength=\"{{settings.minLength}}\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required') && settings.isRequired\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"(originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty) && (originalValue === attributeUpdateFormGroup.get('currentValue').value || settings.isRequired)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\" [innerHtml]=\"message\"></div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex: 1;\n}\n.grid__element:last-child {\n    margin-top: 19px;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0 !important;\n    line-height: 20px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let $scope;\nlet settings;\nlet attributeService;\nlet utils;\nlet translate;\n\nself.onInit = function() {\n    self.ctx.ngZone.run(function() {\n       init(); \n       self.ctx.detectChanges(true);\n    });\n};\n\n\nfunction init() {\n\n    $scope = self.ctx.$scope;\n    attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\n    $scope.toastTargetId = 'input-widget' + utils.guid();\n    settings = utils.deepClone(self.ctx.settings) || {};\n    settings.showLabel = utils.defaultValue(settings.showLabel, true);\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\n    settings.isRequired = utils.defaultValue(settings.isRequired, true);\n    $scope.settings = settings;\n    $scope.isValidParameter = true;\n    $scope.dataKeyDetected = false; \n    $scope.message = translate.instant('widgets.input-widgets.no-entity-selected');\n    \n    $scope.requiredErrorMessage = utils.customTranslation(settings.requiredErrorMessage, settings.requiredErrorMessage) || translate.instant('widgets.input-widgets.entity-attribute-required');\n    $scope.labelValue = utils.customTranslation(settings.labelValue, settings.labelValue) || translate.instant('widgets.input-widgets.value');\n    \n    var validators = [];\n    if (utils.isDefinedAndNotNull(settings.minLength)) {\n        validators.push($scope.validators.minLength(settings.minLength));\n    }\n    if (utils.isDefinedAndNotNull(settings.maxLength)) {\n        validators.push($scope.validators.maxLength(settings.maxLength));\n    }\n    if (settings.isRequired) {\n        validators.push($scope.validators.required);\n    }\n    \n    $scope.attributeUpdateFormGroup = $scope.fb.group({\n        currentValue: [undefined, validators]\n    });\n\n    if (self.ctx.datasources && self.ctx.datasources.length) {\n        var datasource = self.ctx.datasources[0];\n        if (datasource.type === 'entity') {\n            if (datasource.entityType === 'DEVICE') {\n                if (datasource.entityType && datasource.entityId) {\n                    $scope.entityName = datasource.entityName;\n                    if (settings.widgetTitle && settings.widgetTitle.length) {\n                        $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\n                    } else {\n                        $scope.titleTemplate = self.ctx.widgetConfig.title;\n                    }\n    \n                    $scope.entityDetected = true;\n                }\n            } else {\n                $scope.message = translate.instant('widgets.input-widgets.not-allowed-entity');\n            }\n        }\n        if (datasource.dataKeys.length) {\n            if (datasource.dataKeys[0].type !== \"attribute\") {\n                $scope.isValidParameter = false;\n            } else {\n                $scope.currentKey = datasource.dataKeys[0].name;\n                $scope.dataKeyType = datasource.dataKeys[0].type;\n                $scope.dataKeyDetected = true;\n            }\n        }\n    }\n\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\n\n    $scope.updateAttribute = function () {\n        $scope.isFocused = false;\n        if ($scope.entityDetected) {\n            var datasource = self.ctx.datasources[0];\n            var value = $scope.attributeUpdateFormGroup.get('currentValue').value;\n            \n            if (!$scope.attributeUpdateFormGroup.get('currentValue').value.length) {\n                value = null;\n            }\n\n            attributeService.saveEntityAttributes(\n                datasource.entity.id,\n                'SHARED_SCOPE',\n                [\n                    {\n                        key: $scope.currentKey,\n                        value\n                    }\n                ]\n            ).subscribe(\n                function success() {\n                    $scope.originalValue = $scope.attributeUpdateFormGroup.get('currentValue').value;\n                    if (settings.showResultMessage) {\n                        $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\n                    }\n                },\n                function fail() {\n                    if (settings.showResultMessage) {\n                        $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\n                    }\n                }\n            );\n        }\n    };\n\n    $scope.changeFocus = function () {\n        if ($scope.attributeUpdateFormGroup.get('currentValue').value === $scope.originalValue) {\n            $scope.isFocused = false;\n        }\n    }\n}\n\nself.onDataUpdated = function() {\n    try {\n        if ($scope.dataKeyDetected) {\n            if (!$scope.isFocused) {\n                $scope.originalValue = self.ctx.data[0].data[0][1];\n                $scope.attributeUpdateFormGroup.get('currentValue').patchValue($scope.originalValue);\n                self.ctx.detectChanges();\n            }\n        }\n    } catch (e) {\n        console.log(e);\n    }\n}\n\nself.onResize = function() {\n\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    }\n}\n\nself.onDestroy = function() {\n\n}",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_string_timeseries.json b/application/src/main/data/json/system/widget_types/update_string_timeseries.json
index d54224ef36..e6fc91f316 100644
--- a/application/src/main/data/json/system/widget_types/update_string_timeseries.json
+++ b/application/src/main/data/json/system/widget_types/update_string_timeseries.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentValue\"\n                               required\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               maxlength=\"{{settings.maxLength}}\"\n                               minlength=\"{{settings.minLength}}\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required')\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-timeseries' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\">\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxShow]=\"entityDetected && !dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-timeseries-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxShow]=\"entityDetected && !isValidParameter\">\n                {{ 'widgets.input-widgets.attribute-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentValue\"\n                               required\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               maxlength=\"{{settings.maxLength}}\"\n                               minlength=\"{{settings.minLength}}\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required')\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-timeseries' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\">\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-timeseries-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"!entityDetected || isValidParameter\">\n                {{ 'widgets.input-widgets.attribute-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex: 1;\n}\n.grid__element:last-child {\n    margin-top: 19px;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0 !important;\n    line-height: 20px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let $scope;\nlet settings;\nlet utils;\nlet translate;\nlet http;\n\nself.onInit = function() {\n    self.ctx.ngZone.run(function() {\n       init(); \n       self.ctx.detectChanges(true);\n    });\n};\n\n\nfunction init() {\n\n    $scope = self.ctx.$scope;\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\n    http = $scope.$injector.get(self.ctx.servicesMap.get('http'));\n    $scope.toastTargetId = 'input-widget' + utils.guid();\n    settings = utils.deepClone(self.ctx.settings) || {};\n    settings.showLabel = utils.defaultValue(settings.showLabel, true);\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\n    $scope.settings = settings;\n    $scope.isValidParameter = true;\n    $scope.dataKeyDetected = false;\n    $scope.requiredErrorMessage = utils.customTranslation(settings.requiredErrorMessage, settings.requiredErrorMessage) || translate.instant('widgets.input-widgets.entity-timeseries-required');\n    $scope.labelValue = utils.customTranslation(settings.labelValue, settings.labelValue) || translate.instant('widgets.input-widgets.value');\n    \n    var validators = [];\n    if (utils.isDefinedAndNotNull(settings.minLength)) {\n        validators.push($scope.validators.minLength(settings.minLength));\n    }\n    if (utils.isDefinedAndNotNull(settings.maxLength)) {\n        validators.push($scope.validators.maxLength(settings.maxLength));\n    }\n    if (settings.isRequired) {\n        validators.push($scope.validators.required);\n    }\n\n    $scope.attributeUpdateFormGroup = $scope.fb.group(\n        {currentValue: [undefined, validators]}\n    );\n\n    if (self.ctx.datasources && self.ctx.datasources.length) {\n        var datasource = self.ctx.datasources[0];\n        if (datasource.type === 'entity') {\n            if (datasource.entityType && datasource.entityId) {\n                $scope.entityName = datasource.entityName;\n                if (settings.widgetTitle && settings.widgetTitle.length) {\n                    $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\n                } else {\n                    $scope.titleTemplate = self.ctx.widgetConfig.title;\n                }\n\n                $scope.entityDetected = true;\n            }\n        }\n        if (datasource.dataKeys.length) {\n            if (datasource.dataKeys[0].type !== \"timeseries\") {\n                $scope.isValidParameter = false;\n            } else {\n                $scope.currentKey = datasource.dataKeys[0].name;\n                $scope.dataKeyType = datasource.dataKeys[0].type;\n                $scope.dataKeyDetected = true;\n            }\n        }\n    }\n\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\n\n    $scope.updateAttribute = function () {\n        $scope.isFocused = false;\n        if ($scope.entityDetected) {\n            var datasource = self.ctx.datasources[0];\n\n            let observable = saveEntityTimeseries(\n                datasource.entityType,\n                datasource.entityId,\n                [\n                    {\n                        key: $scope.currentKey,\n                        value: $scope.attributeUpdateFormGroup.get('currentValue').value\n                    }\n                ]\n            );\n            if (observable) {\n                observable.subscribe(\n                    function success() {\n                        $scope.originalValue = $scope.attributeUpdateFormGroup.get('currentValue').value;\n                        if (settings.showResultMessage) {\n                            $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\n                        }\n                    },\n                    function fail() {\n                        if (settings.showResultMessage) {\n                            $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\n                        }\n                    }\n                );\n            }\n        }\n    };\n\n    $scope.changeFocus = function () {\n        if ($scope.attributeUpdateFormGroup.get('currentValue').value === $scope.originalValue) {\n            $scope.isFocused = false;\n        }\n    }\n\n    function saveEntityTimeseries(entityType, entityId, telemetries) {\n        var telemetriesData = {};\n        for (var a = 0; a < telemetries.length; a++) {\n            if (typeof telemetries[a].value !== 'undefined' && telemetries[a].value !== null) {\n                telemetriesData[telemetries[a].key] = telemetries[a].value;\n            }\n        }\n        if (Object.keys(telemetriesData).length) {\n            var url = '/api/plugins/telemetry/' + entityType + '/' + entityId + '/timeseries/scope';\n            return http.post(url, telemetriesData);\n        }\n        return null;\n    }\n}\n\nself.onDataUpdated = function() {\n\n    try {\n        if ($scope.dataKeyDetected) {\n            if (!$scope.isFocused) {\n                $scope.originalValue = self.ctx.data[0].data[0][1];\n                $scope.attributeUpdateFormGroup.get('currentValue').patchValue($scope.originalValue);\n                self.ctx.detectChanges();\n            }\n        }\n    } catch (e) {\n        console.log(e);\n    }\n}\n\nself.onResize = function() {\n\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    }\n}\n\nself.onDestroy = function() {\n\n}\n",
     "settingsSchema": "",

From 14b0f47b953e3a325dcb7f84837c9dc3e88609a8 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Fri, 18 Oct 2024 13:41:22 +0300
Subject: [PATCH 32/34] Flex layout replacements. Switch to tailwind.css.

---
 .../src/main/data/json/demo/dashboards/firmware.json | 10 +++++-----
 .../src/main/data/json/demo/dashboards/software.json | 10 +++++-----
 .../main/data/json/demo/dashboards/thermostats.json  |  4 ++--
 .../main/data/json/tenant/dashboards/gateways.json   | 12 ++++++------
 4 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/application/src/main/data/json/demo/dashboards/firmware.json b/application/src/main/data/json/demo/dashboards/firmware.json
index 7a21e86761..a268823f36 100644
--- a/application/src/main/data/json/demo/dashboards/firmware.json
+++ b/application/src/main/data/json/demo/dashboards/firmware.json
@@ -279,7 +279,7 @@
                 "name": "Edit firmware",
                 "icon": "edit",
                 "type": "customPretty",
-                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n    <mat-toolbar fxLayout=\"row\" color=\"primary\">\n        <h2>Edit firmware {{entityName}}</h2>\n        <span fxFlex></span>\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n            <mat-icon class=\"material-icons\">close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n    </mat-progress-bar>\n    <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n    <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content fxLayout=\"column\">\n        <tb-ota-package-autocomplete\n            [useFullEntityId]=\"true\"\n            [deviceProfileId]=\"entity.deviceProfileId.id\"\n            formControlName=\"firmwareId\">\n        </tb-ota-package-autocomplete>\n    </div>\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-button color=\"primary\"\n                type=\"button\"\n                [disabled]=\"(isLoading$ | async)\"\n                (click)=\"cancel()\" cdkFocusInitial>\n            Cancel\n        </button>\n        <button mat-button mat-raised-button color=\"primary\"\n                type=\"submit\"\n                [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n            Save\n        </button>\n    </div>\n</form>",
+                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n  <mat-toolbar class=\"flex flex-row\" color=\"primary\">\n    <h2>Edit firmware {{entityName}}</h2>\n    <span class=\"flex-1\"></span>\n    <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n      <mat-icon class=\"material-icons\">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n  </mat-progress-bar>\n  <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n  <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content class=\"flex flex-col\">\n    <tb-ota-package-autocomplete\n        [useFullEntityId]=\"true\"\n        [deviceProfileId]=\"entity.deviceProfileId.id\"\n        formControlName=\"firmwareId\">\n    </tb-ota-package-autocomplete>\n  </div>\n  <div mat-dialog-actions class=\"flex flex-row items-center justify-end\">\n    <button mat-button color=\"primary\"\n            type=\"button\"\n            [disabled]=\"(isLoading$ | async)\"\n            (click)=\"cancel()\" cdkFocusInitial>\n      Cancel\n    </button>\n    <button mat-button mat-raised-button color=\"primary\"\n            type=\"submit\"\n            [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n      Save\n    </button>\n  </div>\n</form>",
                 "customCss": "form {\n    min-width: 300px !important;\n}",
                 "customFunction": "let $injector = widgetContext.$scope.$injector;\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\nlet entityService = $injector.get(widgetContext.servicesMap.get('entityService'));\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\n\nopenEditEntityDialog();\n\nfunction openEditEntityDialog() {\n    customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe();\n}\n\nfunction EditEntityDialogController(instance) {\n    let vm = instance;\n\n    vm.entityName = entityName;\n    vm.entity = {};\n\n    vm.editEntityFormGroup = vm.fb.group({\n        firmwareId: [null]\n    });\n\n    getEntityInfo();\n\n    vm.cancel = function() {\n        vm.dialogRef.close(null);\n    };\n\n    vm.save = function() {\n        vm.editEntityFormGroup.markAsPristine();\n        saveEntity().subscribe(\n            function () {\n                // widgetContext.updateAliases();\n                vm.dialogRef.close(null);\n            }\n        );\n    };\n\n\n    function getEntityInfo() {\n        entityService.getEntity(entityId.entityType, entityId.id).subscribe(\n            function (data) {\n                vm.entity = data;\n                vm.editEntityFormGroup.patchValue({\n                    firmwareId: vm.entity.firmwareId\n                }, {emitEvent: false});\n            }\n        );\n    }\n\n    function saveEntity() {\n        const formValues = vm.editEntityFormGroup.value;\n        vm.entity.firmwareId = formValues.firmwareId;\n        return deviceService.saveDevice(vm.entity);\n    }\n}",
                 "customResources": [],
@@ -1142,7 +1142,7 @@
                 "name": "Edit firmware",
                 "icon": "edit",
                 "type": "customPretty",
-                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n    <mat-toolbar fxLayout=\"row\" color=\"primary\">\n        <h2>Edit firmware {{entityName}}</h2>\n        <span fxFlex></span>\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n            <mat-icon class=\"material-icons\">close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n    </mat-progress-bar>\n    <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n    <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content fxLayout=\"column\">\n        <tb-ota-package-autocomplete\n            [useFullEntityId]=\"true\"\n            [deviceProfileId]=\"entity.deviceProfileId.id\"\n            formControlName=\"firmwareId\">\n        </tb-ota-package-autocomplete>\n    </div>\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-button color=\"primary\"\n                type=\"button\"\n                [disabled]=\"(isLoading$ | async)\"\n                (click)=\"cancel()\" cdkFocusInitial>\n            Cancel\n        </button>\n        <button mat-button mat-raised-button color=\"primary\"\n                type=\"submit\"\n                [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n            Save\n        </button>\n    </div>\n</form>",
+                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n  <mat-toolbar class=\"flex flex-row\" color=\"primary\">\n    <h2>Edit firmware {{entityName}}</h2>\n    <span class=\"flex-1\"></span>\n    <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n      <mat-icon class=\"material-icons\">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n  </mat-progress-bar>\n  <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n  <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content class=\"flex flex-col\">\n    <tb-ota-package-autocomplete\n        [useFullEntityId]=\"true\"\n        [deviceProfileId]=\"entity.deviceProfileId.id\"\n        formControlName=\"firmwareId\">\n    </tb-ota-package-autocomplete>\n  </div>\n  <div mat-dialog-actions class=\"flex flex-row items-center justify-end\">\n    <button mat-button color=\"primary\"\n            type=\"button\"\n            [disabled]=\"(isLoading$ | async)\"\n            (click)=\"cancel()\" cdkFocusInitial>\n      Cancel\n    </button>\n    <button mat-button mat-raised-button color=\"primary\"\n            type=\"submit\"\n            [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n      Save\n    </button>\n  </div>\n</form>",
                 "customCss": "form {\n    min-width: 300px !important;\n}",
                 "customFunction": "let $injector = widgetContext.$scope.$injector;\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\nlet entityService = $injector.get(widgetContext.servicesMap.get('entityService'));\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\n\nopenEditEntityDialog();\n\nfunction openEditEntityDialog() {\n    customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe();\n}\n\nfunction EditEntityDialogController(instance) {\n    let vm = instance;\n\n    vm.entityName = entityName;\n    vm.entity = {};\n\n    vm.editEntityFormGroup = vm.fb.group({\n        firmwareId: [null]\n    });\n\n    getEntityInfo();\n\n    vm.cancel = function() {\n        vm.dialogRef.close(null);\n    };\n\n    vm.save = function() {\n        vm.editEntityFormGroup.markAsPristine();\n        saveEntity().subscribe(\n            function () {\n                // widgetContext.updateAliases();\n                vm.dialogRef.close(null);\n            }\n        );\n    };\n\n\n    function getEntityInfo() {\n        entityService.getEntity(entityId.entityType, entityId.id).subscribe(\n            function (data) {\n                vm.entity = data;\n                vm.editEntityFormGroup.patchValue({\n                    firmwareId: vm.entity.firmwareId\n                }, {emitEvent: false});\n            }\n        );\n    }\n\n    function saveEntity() {\n        const formValues = vm.editEntityFormGroup.value;\n        vm.entity.firmwareId = formValues.firmwareId;\n        return deviceService.saveDevice(vm.entity);\n    }\n}",
                 "customResources": [],
@@ -1448,7 +1448,7 @@
                 "name": "Edit firmware",
                 "icon": "edit",
                 "type": "customPretty",
-                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n    <mat-toolbar fxLayout=\"row\" color=\"primary\">\n        <h2>Edit firmware {{entityName}}</h2>\n        <span fxFlex></span>\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n            <mat-icon class=\"material-icons\">close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n    </mat-progress-bar>\n    <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n    <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content fxLayout=\"column\">\n        <tb-ota-package-autocomplete\n            [useFullEntityId]=\"true\"\n            [deviceProfileId]=\"entity.deviceProfileId.id\"\n            formControlName=\"firmwareId\">\n        </tb-ota-package-autocomplete>\n    </div>\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-button color=\"primary\"\n                type=\"button\"\n                [disabled]=\"(isLoading$ | async)\"\n                (click)=\"cancel()\" cdkFocusInitial>\n            Cancel\n        </button>\n        <button mat-button mat-raised-button color=\"primary\"\n                type=\"submit\"\n                [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n            Save\n        </button>\n    </div>\n</form>",
+                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n  <mat-toolbar class=\"flex flex-row\" color=\"primary\">\n    <h2>Edit firmware {{entityName}}</h2>\n    <span class=\"flex-1\"></span>\n    <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n      <mat-icon class=\"material-icons\">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n  </mat-progress-bar>\n  <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n  <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content class=\"flex flex-col\">\n    <tb-ota-package-autocomplete\n        [useFullEntityId]=\"true\"\n        [deviceProfileId]=\"entity.deviceProfileId.id\"\n        formControlName=\"firmwareId\">\n    </tb-ota-package-autocomplete>\n  </div>\n  <div mat-dialog-actions class=\"flex flex-row items-center justify-end\">\n    <button mat-button color=\"primary\"\n            type=\"button\"\n            [disabled]=\"(isLoading$ | async)\"\n            (click)=\"cancel()\" cdkFocusInitial>\n      Cancel\n    </button>\n    <button mat-button mat-raised-button color=\"primary\"\n            type=\"submit\"\n            [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n      Save\n    </button>\n  </div>\n</form>",
                 "customCss": "form {\n    min-width: 300px !important;\n}",
                 "customFunction": "let $injector = widgetContext.$scope.$injector;\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\nlet entityService = $injector.get(widgetContext.servicesMap.get('entityService'));\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\n\nopenEditEntityDialog();\n\nfunction openEditEntityDialog() {\n    customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe();\n}\n\nfunction EditEntityDialogController(instance) {\n    let vm = instance;\n\n    vm.entityName = entityName;\n    vm.entity = {};\n\n    vm.editEntityFormGroup = vm.fb.group({\n        firmwareId: [null]\n    });\n\n    getEntityInfo();\n\n    vm.cancel = function() {\n        vm.dialogRef.close(null);\n    };\n\n    vm.save = function() {\n        vm.editEntityFormGroup.markAsPristine();\n        saveEntity().subscribe(\n            function () {\n                // widgetContext.updateAliases();\n                vm.dialogRef.close(null);\n            }\n        );\n    };\n\n\n    function getEntityInfo() {\n        entityService.getEntity(entityId.entityType, entityId.id).subscribe(\n            function (data) {\n                vm.entity = data;\n                vm.editEntityFormGroup.patchValue({\n                    firmwareId: vm.entity.firmwareId\n                }, {emitEvent: false});\n            }\n        );\n    }\n\n    function saveEntity() {\n        const formValues = vm.editEntityFormGroup.value;\n        vm.entity.firmwareId = formValues.firmwareId;\n        return deviceService.saveDevice(vm.entity);\n    }\n}",
                 "customResources": [],
@@ -1754,7 +1754,7 @@
                 "name": "Edit firmware",
                 "icon": "edit",
                 "type": "customPretty",
-                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n    <mat-toolbar fxLayout=\"row\" color=\"primary\">\n        <h2>Edit firmware {{entityName}}</h2>\n        <span fxFlex></span>\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n            <mat-icon class=\"material-icons\">close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n    </mat-progress-bar>\n    <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n    <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content fxLayout=\"column\">\n        <tb-ota-package-autocomplete\n            [useFullEntityId]=\"true\"\n            [deviceProfileId]=\"entity.deviceProfileId.id\"\n            formControlName=\"firmwareId\">\n        </tb-ota-package-autocomplete>\n    </div>\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-button color=\"primary\"\n                type=\"button\"\n                [disabled]=\"(isLoading$ | async)\"\n                (click)=\"cancel()\" cdkFocusInitial>\n            Cancel\n        </button>\n        <button mat-button mat-raised-button color=\"primary\"\n                type=\"submit\"\n                [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n            Save\n        </button>\n    </div>\n</form>",
+                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n  <mat-toolbar class=\"flex flex-row\" color=\"primary\">\n    <h2>Edit firmware {{entityName}}</h2>\n    <span class=\"flex-1\"></span>\n    <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n      <mat-icon class=\"material-icons\">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n  </mat-progress-bar>\n  <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n  <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content class=\"flex flex-col\">\n    <tb-ota-package-autocomplete\n        [useFullEntityId]=\"true\"\n        [deviceProfileId]=\"entity.deviceProfileId.id\"\n        formControlName=\"firmwareId\">\n    </tb-ota-package-autocomplete>\n  </div>\n  <div mat-dialog-actions class=\"flex flex-row items-center justify-end\">\n    <button mat-button color=\"primary\"\n            type=\"button\"\n            [disabled]=\"(isLoading$ | async)\"\n            (click)=\"cancel()\" cdkFocusInitial>\n      Cancel\n    </button>\n    <button mat-button mat-raised-button color=\"primary\"\n            type=\"submit\"\n            [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n      Save\n    </button>\n  </div>\n</form>",
                 "customCss": "form {\n    min-width: 300px !important;\n}",
                 "customFunction": "let $injector = widgetContext.$scope.$injector;\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\nlet entityService = $injector.get(widgetContext.servicesMap.get('entityService'));\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\n\nopenEditEntityDialog();\n\nfunction openEditEntityDialog() {\n    customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe();\n}\n\nfunction EditEntityDialogController(instance) {\n    let vm = instance;\n\n    vm.entityName = entityName;\n    vm.entity = {};\n\n    vm.editEntityFormGroup = vm.fb.group({\n        firmwareId: [null]\n    });\n\n    getEntityInfo();\n\n    vm.cancel = function() {\n        vm.dialogRef.close(null);\n    };\n\n    vm.save = function() {\n        vm.editEntityFormGroup.markAsPristine();\n        saveEntity().subscribe(\n            function () {\n                // widgetContext.updateAliases();\n                vm.dialogRef.close(null);\n            }\n        );\n    };\n\n\n    function getEntityInfo() {\n        entityService.getEntity(entityId.entityType, entityId.id).subscribe(\n            function (data) {\n                vm.entity = data;\n                vm.editEntityFormGroup.patchValue({\n                    firmwareId: vm.entity.firmwareId\n                }, {emitEvent: false});\n            }\n        );\n    }\n\n    function saveEntity() {\n        const formValues = vm.editEntityFormGroup.value;\n        vm.entity.firmwareId = formValues.firmwareId;\n        return deviceService.saveDevice(vm.entity);\n    }\n}",
                 "customResources": [],
@@ -2060,7 +2060,7 @@
                 "name": "Edit firmware",
                 "icon": "edit",
                 "type": "customPretty",
-                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n    <mat-toolbar fxLayout=\"row\" color=\"primary\">\n        <h2>Edit firmware {{entityName}}</h2>\n        <span fxFlex></span>\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n            <mat-icon class=\"material-icons\">close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n    </mat-progress-bar>\n    <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n    <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content fxLayout=\"column\">\n        <tb-ota-package-autocomplete\n            [useFullEntityId]=\"true\"\n            [deviceProfileId]=\"entity.deviceProfileId.id\"\n            formControlName=\"firmwareId\">\n        </tb-ota-package-autocomplete>\n    </div>\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-button color=\"primary\"\n                type=\"button\"\n                [disabled]=\"(isLoading$ | async)\"\n                (click)=\"cancel()\" cdkFocusInitial>\n            Cancel\n        </button>\n        <button mat-button mat-raised-button color=\"primary\"\n                type=\"submit\"\n                [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n            Save\n        </button>\n    </div>\n</form>",
+                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n  <mat-toolbar class=\"flex flex-row\" color=\"primary\">\n    <h2>Edit firmware {{entityName}}</h2>\n    <span class=\"flex-1\"></span>\n    <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n      <mat-icon class=\"material-icons\">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n  </mat-progress-bar>\n  <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n  <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content class=\"flex flex-col\">\n    <tb-ota-package-autocomplete\n        [useFullEntityId]=\"true\"\n        [deviceProfileId]=\"entity.deviceProfileId.id\"\n        formControlName=\"firmwareId\">\n    </tb-ota-package-autocomplete>\n  </div>\n  <div mat-dialog-actions class=\"flex flex-row items-center justify-end\">\n    <button mat-button color=\"primary\"\n            type=\"button\"\n            [disabled]=\"(isLoading$ | async)\"\n            (click)=\"cancel()\" cdkFocusInitial>\n      Cancel\n    </button>\n    <button mat-button mat-raised-button color=\"primary\"\n            type=\"submit\"\n            [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n      Save\n    </button>\n  </div>\n</form>",
                 "customCss": "form {\n    min-width: 300px !important;\n}",
                 "customFunction": "let $injector = widgetContext.$scope.$injector;\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\nlet entityService = $injector.get(widgetContext.servicesMap.get('entityService'));\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\n\nopenEditEntityDialog();\n\nfunction openEditEntityDialog() {\n    customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe();\n}\n\nfunction EditEntityDialogController(instance) {\n    let vm = instance;\n\n    vm.entityName = entityName;\n    vm.entity = {};\n\n    vm.editEntityFormGroup = vm.fb.group({\n        firmwareId: [null]\n    });\n\n    getEntityInfo();\n\n    vm.cancel = function() {\n        vm.dialogRef.close(null);\n    };\n\n    vm.save = function() {\n        vm.editEntityFormGroup.markAsPristine();\n        saveEntity().subscribe(\n            function () {\n                // widgetContext.updateAliases();\n                vm.dialogRef.close(null);\n            }\n        );\n    };\n\n\n    function getEntityInfo() {\n        entityService.getEntity(entityId.entityType, entityId.id).subscribe(\n            function (data) {\n                vm.entity = data;\n                vm.editEntityFormGroup.patchValue({\n                    firmwareId: vm.entity.firmwareId\n                }, {emitEvent: false});\n            }\n        );\n    }\n\n    function saveEntity() {\n        const formValues = vm.editEntityFormGroup.value;\n        vm.entity.firmwareId = formValues.firmwareId;\n        return deviceService.saveDevice(vm.entity);\n    }\n}",
                 "customResources": [],
diff --git a/application/src/main/data/json/demo/dashboards/software.json b/application/src/main/data/json/demo/dashboards/software.json
index eea81e5368..ebc4e6cd7d 100644
--- a/application/src/main/data/json/demo/dashboards/software.json
+++ b/application/src/main/data/json/demo/dashboards/software.json
@@ -279,7 +279,7 @@
                 "name": "Edit software",
                 "icon": "edit",
                 "type": "customPretty",
-                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n    <mat-toolbar fxLayout=\"row\" color=\"primary\">\n        <h2>Edit software {{entityName}}</h2>\n        <span fxFlex></span>\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n            <mat-icon class=\"material-icons\">close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n    </mat-progress-bar>\n    <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n    <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content fxLayout=\"column\">\n        <tb-ota-package-autocomplete\n            [useFullEntityId]=\"true\"\n            type=\"SOFTWARE\"\n            [deviceProfileId]=\"entity.deviceProfileId.id\"\n            formControlName=\"softwareId\">\n        </tb-ota-package-autocomplete>\n    </div>\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-button color=\"primary\"\n                type=\"button\"\n                [disabled]=\"(isLoading$ | async)\"\n                (click)=\"cancel()\" cdkFocusInitial>\n            Cancel\n        </button>\n        <button mat-button mat-raised-button color=\"primary\"\n                type=\"submit\"\n                [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n            Save\n        </button>\n    </div>\n</form>",
+                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n  <mat-toolbar class=\"flex flex-row\" color=\"primary\">\n    <h2>Edit software {{entityName}}</h2>\n    <span class=\"flex-1\"></span>\n    <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n      <mat-icon class=\"material-icons\">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n  </mat-progress-bar>\n  <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n  <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content class=\"flex flex-col\">\n    <tb-ota-package-autocomplete\n        [useFullEntityId]=\"true\"\n        type=\"SOFTWARE\"\n        [deviceProfileId]=\"entity.deviceProfileId.id\"\n        formControlName=\"softwareId\">\n    </tb-ota-package-autocomplete>\n  </div>\n  <div mat-dialog-actions class=\"flex flex-row items-center justify-end\">\n    <button mat-button color=\"primary\"\n            type=\"button\"\n            [disabled]=\"(isLoading$ | async)\"\n            (click)=\"cancel()\" cdkFocusInitial>\n      Cancel\n    </button>\n    <button mat-button mat-raised-button color=\"primary\"\n            type=\"submit\"\n            [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n      Save\n    </button>\n  </div>\n</form>",
                 "customCss": "form {\n    min-width: 300px !important;\n}",
                 "customFunction": "let $injector = widgetContext.$scope.$injector;\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\nlet entityService = $injector.get(widgetContext.servicesMap.get('entityService'));\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\n\nopenEditEntityDialog();\n\nfunction openEditEntityDialog() {\n    customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe();\n}\n\nfunction EditEntityDialogController(instance) {\n    let vm = instance;\n\n    vm.entityName = entityName;\n    vm.entity = {};\n\n    vm.editEntityFormGroup = vm.fb.group({\n        softwareId: [null]\n    });\n\n    getEntityInfo();\n\n    vm.cancel = function() {\n        vm.dialogRef.close(null);\n    };\n\n    vm.save = function() {\n        vm.editEntityFormGroup.markAsPristine();\n        saveEntity().subscribe(\n            function () {\n                // widgetContext.updateAliases();\n                vm.dialogRef.close(null);\n            }\n        );\n    };\n\n\n    function getEntityInfo() {\n        entityService.getEntity(entityId.entityType, entityId.id).subscribe(\n            function (data) {\n                vm.entity = data;\n                vm.editEntityFormGroup.patchValue({\n                    softwareId: vm.entity.softwareId\n                }, {emitEvent: false});\n            }\n        );\n    }\n\n    function saveEntity() {\n        const formValues = vm.editEntityFormGroup.value;\n        vm.entity.softwareId = formValues.softwareId;\n        return deviceService.saveDevice(vm.entity);\n    }\n}",
                 "customResources": [],
@@ -1142,7 +1142,7 @@
                 "name": "Edit software",
                 "icon": "edit",
                 "type": "customPretty",
-                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n    <mat-toolbar fxLayout=\"row\" color=\"primary\">\n        <h2>Edit software {{entityName}}</h2>\n        <span fxFlex></span>\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n            <mat-icon class=\"material-icons\">close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n    </mat-progress-bar>\n    <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n    <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content fxLayout=\"column\">\n        <tb-ota-package-autocomplete\n            [useFullEntityId]=\"true\"\n            type=\"SOFTWARE\"\n            [deviceProfileId]=\"entity.deviceProfileId.id\"\n            formControlName=\"softwareId\">\n        </tb-ota-package-autocomplete>\n    </div>\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-button color=\"primary\"\n                type=\"button\"\n                [disabled]=\"(isLoading$ | async)\"\n                (click)=\"cancel()\" cdkFocusInitial>\n            Cancel\n        </button>\n        <button mat-button mat-raised-button color=\"primary\"\n                type=\"submit\"\n                [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n            Save\n        </button>\n    </div>\n</form>",
+                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n  <mat-toolbar class=\"flex flex-row\" color=\"primary\">\n    <h2>Edit software {{entityName}}</h2>\n    <span class=\"flex-1\"></span>\n    <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n      <mat-icon class=\"material-icons\">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n  </mat-progress-bar>\n  <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n  <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content class=\"flex flex-col\">\n    <tb-ota-package-autocomplete\n        [useFullEntityId]=\"true\"\n        type=\"SOFTWARE\"\n        [deviceProfileId]=\"entity.deviceProfileId.id\"\n        formControlName=\"softwareId\">\n    </tb-ota-package-autocomplete>\n  </div>\n  <div mat-dialog-actions class=\"flex flex-row items-center justify-end\">\n    <button mat-button color=\"primary\"\n            type=\"button\"\n            [disabled]=\"(isLoading$ | async)\"\n            (click)=\"cancel()\" cdkFocusInitial>\n      Cancel\n    </button>\n    <button mat-button mat-raised-button color=\"primary\"\n            type=\"submit\"\n            [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n      Save\n    </button>\n  </div>\n</form>",
                 "customCss": "form {\n    min-width: 300px !important;\n}",
                 "customFunction": "let $injector = widgetContext.$scope.$injector;\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\nlet entityService = $injector.get(widgetContext.servicesMap.get('entityService'));\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\n\nopenEditEntityDialog();\n\nfunction openEditEntityDialog() {\n    customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe();\n}\n\nfunction EditEntityDialogController(instance) {\n    let vm = instance;\n\n    vm.entityName = entityName;\n    vm.entity = {};\n\n    vm.editEntityFormGroup = vm.fb.group({\n        softwareId: [null]\n    });\n\n    getEntityInfo();\n\n    vm.cancel = function() {\n        vm.dialogRef.close(null);\n    };\n\n    vm.save = function() {\n        vm.editEntityFormGroup.markAsPristine();\n        saveEntity().subscribe(\n            function () {\n                // widgetContext.updateAliases();\n                vm.dialogRef.close(null);\n            }\n        );\n    };\n\n\n    function getEntityInfo() {\n        entityService.getEntity(entityId.entityType, entityId.id).subscribe(\n            function (data) {\n                vm.entity = data;\n                vm.editEntityFormGroup.patchValue({\n                    softwareId: vm.entity.softwareId\n                }, {emitEvent: false});\n            }\n        );\n    }\n\n    function saveEntity() {\n        const formValues = vm.editEntityFormGroup.value;\n        vm.entity.softwareId = formValues.softwareId;\n        return deviceService.saveDevice(vm.entity);\n    }\n}",
                 "customResources": [],
@@ -1448,7 +1448,7 @@
                 "name": "Edit software",
                 "icon": "edit",
                 "type": "customPretty",
-                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n    <mat-toolbar fxLayout=\"row\" color=\"primary\">\n        <h2>Edit software {{entityName}}</h2>\n        <span fxFlex></span>\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n            <mat-icon class=\"material-icons\">close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n    </mat-progress-bar>\n    <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n    <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content fxLayout=\"column\">\n        <tb-ota-package-autocomplete\n            [useFullEntityId]=\"true\"\n            type=\"SOFTWARE\"\n            [deviceProfileId]=\"entity.deviceProfileId.id\"\n            formControlName=\"softwareId\">\n        </tb-ota-package-autocomplete>\n    </div>\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-button color=\"primary\"\n                type=\"button\"\n                [disabled]=\"(isLoading$ | async)\"\n                (click)=\"cancel()\" cdkFocusInitial>\n            Cancel\n        </button>\n        <button mat-button mat-raised-button color=\"primary\"\n                type=\"submit\"\n                [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n            Save\n        </button>\n    </div>\n</form>",
+                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n  <mat-toolbar class=\"flex flex-row\" color=\"primary\">\n    <h2>Edit software {{entityName}}</h2>\n    <span class=\"flex-1\"></span>\n    <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n      <mat-icon class=\"material-icons\">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n  </mat-progress-bar>\n  <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n  <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content class=\"flex flex-col\">\n    <tb-ota-package-autocomplete\n        [useFullEntityId]=\"true\"\n        type=\"SOFTWARE\"\n        [deviceProfileId]=\"entity.deviceProfileId.id\"\n        formControlName=\"softwareId\">\n    </tb-ota-package-autocomplete>\n  </div>\n  <div mat-dialog-actions class=\"flex flex-row items-center justify-end\">\n    <button mat-button color=\"primary\"\n            type=\"button\"\n            [disabled]=\"(isLoading$ | async)\"\n            (click)=\"cancel()\" cdkFocusInitial>\n      Cancel\n    </button>\n    <button mat-button mat-raised-button color=\"primary\"\n            type=\"submit\"\n            [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n      Save\n    </button>\n  </div>\n</form>",
                 "customCss": "form {\n    min-width: 300px !important;\n}",
                 "customFunction": "let $injector = widgetContext.$scope.$injector;\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\nlet entityService = $injector.get(widgetContext.servicesMap.get('entityService'));\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\n\nopenEditEntityDialog();\n\nfunction openEditEntityDialog() {\n    customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe();\n}\n\nfunction EditEntityDialogController(instance) {\n    let vm = instance;\n\n    vm.entityName = entityName;\n    vm.entity = {};\n\n    vm.editEntityFormGroup = vm.fb.group({\n        softwareId: [null]\n    });\n\n    getEntityInfo();\n\n    vm.cancel = function() {\n        vm.dialogRef.close(null);\n    };\n\n    vm.save = function() {\n        vm.editEntityFormGroup.markAsPristine();\n        saveEntity().subscribe(\n            function () {\n                // widgetContext.updateAliases();\n                vm.dialogRef.close(null);\n            }\n        );\n    };\n\n\n    function getEntityInfo() {\n        entityService.getEntity(entityId.entityType, entityId.id).subscribe(\n            function (data) {\n                vm.entity = data;\n                vm.editEntityFormGroup.patchValue({\n                    softwareId: vm.entity.softwareId\n                }, {emitEvent: false});\n            }\n        );\n    }\n\n    function saveEntity() {\n        const formValues = vm.editEntityFormGroup.value;\n        vm.entity.softwareId = formValues.softwareId;\n        return deviceService.saveDevice(vm.entity);\n    }\n}",
                 "customResources": [],
@@ -1754,7 +1754,7 @@
                 "name": "Edit software",
                 "icon": "edit",
                 "type": "customPretty",
-                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n    <mat-toolbar fxLayout=\"row\" color=\"primary\">\n        <h2>Edit software {{entityName}}</h2>\n        <span fxFlex></span>\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n            <mat-icon class=\"material-icons\">close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n    </mat-progress-bar>\n    <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n    <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content fxLayout=\"column\">\n        <tb-ota-package-autocomplete\n            [useFullEntityId]=\"true\"\n            type=\"SOFTWARE\"\n            [deviceProfileId]=\"entity.deviceProfileId.id\"\n            formControlName=\"softwareId\">\n        </tb-ota-package-autocomplete>\n    </div>\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-button color=\"primary\"\n                type=\"button\"\n                [disabled]=\"(isLoading$ | async)\"\n                (click)=\"cancel()\" cdkFocusInitial>\n            Cancel\n        </button>\n        <button mat-button mat-raised-button color=\"primary\"\n                type=\"submit\"\n                [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n            Save\n        </button>\n    </div>\n</form>",
+                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n  <mat-toolbar class=\"flex flex-row\" color=\"primary\">\n    <h2>Edit software {{entityName}}</h2>\n    <span class=\"flex-1\"></span>\n    <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n      <mat-icon class=\"material-icons\">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n  </mat-progress-bar>\n  <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n  <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content class=\"flex flex-col\">\n    <tb-ota-package-autocomplete\n        [useFullEntityId]=\"true\"\n        type=\"SOFTWARE\"\n        [deviceProfileId]=\"entity.deviceProfileId.id\"\n        formControlName=\"softwareId\">\n    </tb-ota-package-autocomplete>\n  </div>\n  <div mat-dialog-actions class=\"flex flex-row items-center justify-end\">\n    <button mat-button color=\"primary\"\n            type=\"button\"\n            [disabled]=\"(isLoading$ | async)\"\n            (click)=\"cancel()\" cdkFocusInitial>\n      Cancel\n    </button>\n    <button mat-button mat-raised-button color=\"primary\"\n            type=\"submit\"\n            [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n      Save\n    </button>\n  </div>\n</form>",
                 "customCss": "form {\n    min-width: 300px !important;\n}",
                 "customFunction": "let $injector = widgetContext.$scope.$injector;\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\nlet entityService = $injector.get(widgetContext.servicesMap.get('entityService'));\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\n\nopenEditEntityDialog();\n\nfunction openEditEntityDialog() {\n    customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe();\n}\n\nfunction EditEntityDialogController(instance) {\n    let vm = instance;\n\n    vm.entityName = entityName;\n    vm.entity = {};\n\n    vm.editEntityFormGroup = vm.fb.group({\n        softwareId: [null]\n    });\n\n    getEntityInfo();\n\n    vm.cancel = function() {\n        vm.dialogRef.close(null);\n    };\n\n    vm.save = function() {\n        vm.editEntityFormGroup.markAsPristine();\n        saveEntity().subscribe(\n            function () {\n                // widgetContext.updateAliases();\n                vm.dialogRef.close(null);\n            }\n        );\n    };\n\n\n    function getEntityInfo() {\n        entityService.getEntity(entityId.entityType, entityId.id).subscribe(\n            function (data) {\n                vm.entity = data;\n                vm.editEntityFormGroup.patchValue({\n                    softwareId: vm.entity.softwareId\n                }, {emitEvent: false});\n            }\n        );\n    }\n\n    function saveEntity() {\n        const formValues = vm.editEntityFormGroup.value;\n        vm.entity.softwareId = formValues.softwareId;\n        return deviceService.saveDevice(vm.entity);\n    }\n}",
                 "customResources": [],
@@ -2060,7 +2060,7 @@
                 "name": "Edit software",
                 "icon": "edit",
                 "type": "customPretty",
-                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n    <mat-toolbar fxLayout=\"row\" color=\"primary\">\n        <h2>Edit software {{entityName}}</h2>\n        <span fxFlex></span>\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n            <mat-icon class=\"material-icons\">close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n    </mat-progress-bar>\n    <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n    <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content fxLayout=\"column\">\n        <tb-ota-package-autocomplete\n            [useFullEntityId]=\"true\"\n            type=\"SOFTWARE\"\n            [deviceProfileId]=\"entity.deviceProfileId.id\"\n            formControlName=\"softwareId\">\n        </tb-ota-package-autocomplete>\n    </div>\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-button color=\"primary\"\n                type=\"button\"\n                [disabled]=\"(isLoading$ | async)\"\n                (click)=\"cancel()\" cdkFocusInitial>\n            Cancel\n        </button>\n        <button mat-button mat-raised-button color=\"primary\"\n                type=\"submit\"\n                [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n            Save\n        </button>\n    </div>\n</form>",
+                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n  <mat-toolbar class=\"flex flex-row\" color=\"primary\">\n    <h2>Edit software {{entityName}}</h2>\n    <span class=\"flex-1\"></span>\n    <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n      <mat-icon class=\"material-icons\">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n  </mat-progress-bar>\n  <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n  <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content class=\"flex flex-col\">\n    <tb-ota-package-autocomplete\n        [useFullEntityId]=\"true\"\n        type=\"SOFTWARE\"\n        [deviceProfileId]=\"entity.deviceProfileId.id\"\n        formControlName=\"softwareId\">\n    </tb-ota-package-autocomplete>\n  </div>\n  <div mat-dialog-actions class=\"flex flex-row items-center justify-end\">\n    <button mat-button color=\"primary\"\n            type=\"button\"\n            [disabled]=\"(isLoading$ | async)\"\n            (click)=\"cancel()\" cdkFocusInitial>\n      Cancel\n    </button>\n    <button mat-button mat-raised-button color=\"primary\"\n            type=\"submit\"\n            [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n      Save\n    </button>\n  </div>\n</form>",
                 "customCss": "form {\n    min-width: 300px !important;\n}",
                 "customFunction": "let $injector = widgetContext.$scope.$injector;\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\nlet entityService = $injector.get(widgetContext.servicesMap.get('entityService'));\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\n\nopenEditEntityDialog();\n\nfunction openEditEntityDialog() {\n    customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe();\n}\n\nfunction EditEntityDialogController(instance) {\n    let vm = instance;\n\n    vm.entityName = entityName;\n    vm.entity = {};\n\n    vm.editEntityFormGroup = vm.fb.group({\n        softwareId: [null]\n    });\n\n    getEntityInfo();\n\n    vm.cancel = function() {\n        vm.dialogRef.close(null);\n    };\n\n    vm.save = function() {\n        vm.editEntityFormGroup.markAsPristine();\n        saveEntity().subscribe(\n            function () {\n                // widgetContext.updateAliases();\n                vm.dialogRef.close(null);\n            }\n        );\n    };\n\n\n    function getEntityInfo() {\n        entityService.getEntity(entityId.entityType, entityId.id).subscribe(\n            function (data) {\n                vm.entity = data;\n                vm.editEntityFormGroup.patchValue({\n                    softwareId: vm.entity.softwareId\n                }, {emitEvent: false});\n            }\n        );\n    }\n\n    function saveEntity() {\n        const formValues = vm.editEntityFormGroup.value;\n        vm.entity.softwareId = formValues.softwareId;\n        return deviceService.saveDevice(vm.entity);\n    }\n}",
                 "customResources": [],
diff --git a/application/src/main/data/json/demo/dashboards/thermostats.json b/application/src/main/data/json/demo/dashboards/thermostats.json
index 223722fee1..94f80322ae 100644
--- a/application/src/main/data/json/demo/dashboards/thermostats.json
+++ b/application/src/main/data/json/demo/dashboards/thermostats.json
@@ -160,7 +160,7 @@
                 "name": "Add",
                 "icon": "add",
                 "type": "customPretty",
-                "customHtml": "<form #addEntityForm=\"ngForm\" [formGroup]=\"addEntityFormGroup\"\n        (ngSubmit)=\"save()\" class=\"add-entity-form\">\n    <mat-toolbar color=\"primary\">\n        <h2>Add thermostat</h2>\n        <span fxFlex></span>\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n            <mat-icon class=\"material-icons\">close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n    </mat-progress-bar>\n    <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n    <div mat-dialog-content fxLayout=\"column\">\n        <mat-form-field fxFlex class=\"mat-block\">\n            <mat-label>Thermostat name</mat-label>\n            <input matInput formControlName=\"entityName\" required>\n            <mat-error *ngIf=\"addEntityFormGroup.get('entityName').hasError('required')\">\n                Thermostat name is required.\n            </mat-error>\n        </mat-form-field>\n        <div formGroupName=\"attributes\" fxLayout=\"column\">\n            <mat-slide-toggle formControlName=\"temperatureAlarmFlag\">\n                High temperature alarm\n            </mat-slide-toggle>\n            <mat-form-field fxFlex class=\"mat-block\">\n                <mat-label>High temperature threshold, °C</mat-label>\n                <input type=\"number\" step=\"any\" matInput\n                    [required] = \"addEntityFormGroup.get('attributes').get('temperatureAlarmFlag').value\"\n                    formControlName=\"temperatureAlarmThreshold\">\n                <mat-error *ngIf=\"addEntityFormGroup.get('attributes').get('temperatureAlarmThreshold').hasError('required')\">\n                    High temperature threshold is required.\n                </mat-error>\n            </mat-form-field>\n        \n            <mat-slide-toggle formControlName=\"humidityAlarmFlag\">\n                Low humidity alarm\n            </mat-slide-toggle>\n                \n            <mat-form-field fxFlex class=\"mat-block\">\n                <mat-label>Low humidity threshold, %</mat-label>\n                <input type=\"number\" step=\"any\" matInput\n                    [required] = \"addEntityFormGroup.get('attributes').get('humidityAlarmFlag').value\"\n                    formControlName=\"humidityAlarmThreshold\">\n                <mat-error *ngIf=\"addEntityFormGroup.get('attributes').get('humidityAlarmThreshold').hasError('required')\">\n                    Low humidity threshold is required.\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </div>\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-button mat-raised-button color=\"primary\"\n                type=\"submit\"\n                [disabled]=\"(isLoading$ | async) || addEntityForm.invalid || !addEntityForm.dirty\">\n            Create\n        </button>\n        <button mat-button color=\"primary\"\n                type=\"button\"\n                [disabled]=\"(isLoading$ | async)\"\n                (click)=\"cancel()\" cdkFocusInitial>\n            Cancel\n        </button>\n    </div>\n</form>",
+                "customHtml": "<form #addEntityForm=\"ngForm\" [formGroup]=\"addEntityFormGroup\"\n      (ngSubmit)=\"save()\" class=\"add-entity-form\">\n  <mat-toolbar color=\"primary\">\n    <h2>Add thermostat</h2>\n    <span class=\"flex-1\"></span>\n    <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n      <mat-icon class=\"material-icons\">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n  </mat-progress-bar>\n  <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n  <div mat-dialog-content class=\"flex flex-col\">\n    <mat-form-field class=\"mat-block flex-1\">\n      <mat-label>Thermostat name</mat-label>\n      <input matInput formControlName=\"entityName\" required>\n      <mat-error *ngIf=\"addEntityFormGroup.get('entityName').hasError('required')\">\n        Thermostat name is required.\n      </mat-error>\n    </mat-form-field>\n    <div formGroupName=\"attributes\" class=\"flex flex-col\">\n      <mat-slide-toggle formControlName=\"temperatureAlarmFlag\">\n        High temperature alarm\n      </mat-slide-toggle>\n      <mat-form-field class=\"mat-block flex-1\">\n        <mat-label>High temperature threshold, °C</mat-label>\n        <input type=\"number\" step=\"any\" matInput\n               [required] = \"addEntityFormGroup.get('attributes').get('temperatureAlarmFlag').value\"\n               formControlName=\"temperatureAlarmThreshold\">\n        <mat-error *ngIf=\"addEntityFormGroup.get('attributes').get('temperatureAlarmThreshold').hasError('required')\">\n          High temperature threshold is required.\n        </mat-error>\n      </mat-form-field>\n\n      <mat-slide-toggle formControlName=\"humidityAlarmFlag\">\n        Low humidity alarm\n      </mat-slide-toggle>\n\n      <mat-form-field class=\"mat-block flex-1\">\n        <mat-label>Low humidity threshold, %</mat-label>\n        <input type=\"number\" step=\"any\" matInput\n               [required] = \"addEntityFormGroup.get('attributes').get('humidityAlarmFlag').value\"\n               formControlName=\"humidityAlarmThreshold\">\n        <mat-error *ngIf=\"addEntityFormGroup.get('attributes').get('humidityAlarmThreshold').hasError('required')\">\n          Low humidity threshold is required.\n        </mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n  <div mat-dialog-actions class=\"flex flex-row items-center justify-end\">\n    <button mat-button mat-raised-button color=\"primary\"\n            type=\"submit\"\n            [disabled]=\"(isLoading$ | async) || addEntityForm.invalid || !addEntityForm.dirty\">\n      Create\n    </button>\n    <button mat-button color=\"primary\"\n            type=\"button\"\n            [disabled]=\"(isLoading$ | async)\"\n            (click)=\"cancel()\" cdkFocusInitial>\n      Cancel\n    </button>\n  </div>\n</form>",
                 "customCss": ".add-entity-form{\n    width: 300px;\n}\n",
                 "customFunction": "let $injector = widgetContext.$scope.$injector;\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\nlet attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));\n\nopenAddEntityDialog();\n\nfunction openAddEntityDialog() {\n    customDialog.customDialog(htmlTemplate, AddEntityDialogController).subscribe();\n}\n\nfunction AddEntityDialogController(instance) {\n    let vm = instance;\n    \n    vm.addEntityFormGroup = vm.fb.group({\n        entityName: ['', [vm.validators.required]],\n        attributes: vm.fb.group({\n            temperatureAlarmFlag: [false],\n            temperatureAlarmThreshold: [{value: null, disabled: true}],\n            humidityAlarmFlag: [false],\n            humidityAlarmThreshold: [{value: null, disabled: true}]\n        })\n    });\n    \n    vm.addEntityFormGroup.get('attributes').get('temperatureAlarmFlag').valueChanges\n    .subscribe(activate => {\n        if (activate) {\n            vm.addEntityFormGroup.get('attributes').get('temperatureAlarmThreshold').enable();\n        } else {\n            vm.addEntityFormGroup.get('attributes').get('temperatureAlarmThreshold').disable();\n        }\n    });\n    \n    vm.addEntityFormGroup.get('attributes').get('humidityAlarmFlag').valueChanges\n    .subscribe(activate => {\n        if (activate) {\n            vm.addEntityFormGroup.get('attributes').get('humidityAlarmThreshold').enable();\n        } else {\n            vm.addEntityFormGroup.get('attributes').get('humidityAlarmThreshold').disable();\n        }\n    });\n\n    vm.save = function() {\n        vm.addEntityFormGroup.markAsPristine();\n        saveEntityObservable().subscribe(\n            function (entity) {\n                saveAttributes(entity.id).subscribe(\n                    function () {\n                        widgetContext.updateAliases();\n                        vm.dialogRef.close(null);\n                    }\n                );\n            }\n        );\n    };\n    \n    vm.cancel = function() {\n        vm.dialogRef.close(null);\n    };\n    \n    function saveEntityObservable() {\n        const formValues = vm.addEntityFormGroup.value;\n        let entity = {\n            name: formValues.entityName,\n            type: \"thermostat\"\n        };\n        return deviceService.saveDevice(entity);\n    }\n    \n    function saveAttributes(entityId) {\n        let attributes = vm.addEntityFormGroup.get('attributes').value;\n        let attributesArray = [];\n        for (let key in attributes) {\n            if(attributes[key] !== null) {\n                attributesArray.push({key: key, value: attributes[key]});\n            }\n        }\n        if (attributesArray.length > 0) {\n            return attributeService.saveEntityAttributes(entityId, \"SERVER_SCOPE\", attributesArray);\n        } else {\n            return widgetContext.rxjs.of([]);\n        }\n    }\n}",
                 "customResources": [],
@@ -180,7 +180,7 @@
                 "name": "Edit",
                 "icon": "edit",
                 "type": "customPretty",
-                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\" class=\"edit-entity-form\">\n    <mat-toolbar color=\"primary\">\n        <h2>Edit thermostat {{entityName}}</h2>\n        <span fxFlex></span>\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n            <mat-icon class=\"material-icons\">close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n    </mat-progress-bar>\n    <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n    <div mat-dialog-content fxLayout=\"column\">\n        <mat-form-field fxFlex class=\"mat-block\">\n            <mat-label>Thermostat name</mat-label>\n            <input matInput formControlName=\"entityName\" readonly>\n        </mat-form-field>\n        <div formGroupName=\"attributes\" fxLayout=\"column\">\n            <mat-slide-toggle formControlName=\"temperatureAlarmFlag\">\n                High temperature alarm\n            </mat-slide-toggle>\n            <mat-form-field fxFlex class=\"mat-block\">\n                <mat-label>High temperature threshold, °C</mat-label>\n                <input type=\"number\" step=\"any\" matInput\n                        [required] = \"editEntityFormGroup.get('attributes').get('temperatureAlarmFlag').value\"\n                        formControlName=\"temperatureAlarmThreshold\">\n                <mat-error *ngIf=\"editEntityFormGroup.get('attributes').get('temperatureAlarmThreshold').hasError('required')\">\n                    High temperature threshold is required.\n                </mat-error>\n            </mat-form-field>\n\n            <mat-slide-toggle formControlName=\"humidityAlarmFlag\">\n                Low humidity alarm\n            </mat-slide-toggle>\n\n            <mat-form-field fxFlex class=\"mat-block\">\n                <mat-label>Low humidity threshold, %</mat-label>\n                <input type=\"number\" step=\"any\" matInput\n                       [required] = \"editEntityFormGroup.get('attributes').get('humidityAlarmFlag').value\"\n                       formControlName=\"humidityAlarmThreshold\">\n                <mat-error *ngIf=\"editEntityFormGroup.get('attributes').get('humidityAlarmThreshold').hasError('required')\">\n                    Low humidity threshold is required.\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </div>\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-raised-button color=\"primary\"\n                type=\"submit\"\n                [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n            Save\n        </button>\n        <button mat-button color=\"primary\"\n                type=\"button\"\n                [disabled]=\"(isLoading$ | async)\"\n                (click)=\"cancel()\" cdkFocusInitial>\n            Cancel\n        </button>\n    </div>\n</form>",
+                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\" class=\"edit-entity-form\">\n  <mat-toolbar color=\"primary\">\n    <h2>Edit thermostat {{entityName}}</h2>\n    <span class=\"flex-1\"></span>\n    <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n      <mat-icon class=\"material-icons\">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n  </mat-progress-bar>\n  <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n  <div mat-dialog-content class=\"flex flex-col\">\n    <mat-form-field class=\"mat-block flex-1\">\n      <mat-label>Thermostat name</mat-label>\n      <input matInput formControlName=\"entityName\" readonly>\n    </mat-form-field>\n    <div formGroupName=\"attributes\" class=\"flex flex-col\">\n      <mat-slide-toggle formControlName=\"temperatureAlarmFlag\">\n        High temperature alarm\n      </mat-slide-toggle>\n      <mat-form-field class=\"mat-block flex-1\">\n        <mat-label>High temperature threshold, °C</mat-label>\n        <input type=\"number\" step=\"any\" matInput\n               [required] = \"editEntityFormGroup.get('attributes').get('temperatureAlarmFlag').value\"\n               formControlName=\"temperatureAlarmThreshold\">\n        <mat-error *ngIf=\"editEntityFormGroup.get('attributes').get('temperatureAlarmThreshold').hasError('required')\">\n          High temperature threshold is required.\n        </mat-error>\n      </mat-form-field>\n\n      <mat-slide-toggle formControlName=\"humidityAlarmFlag\">\n        Low humidity alarm\n      </mat-slide-toggle>\n\n      <mat-form-field class=\"mat-block flex-1\">\n        <mat-label>Low humidity threshold, %</mat-label>\n        <input type=\"number\" step=\"any\" matInput\n               [required] = \"editEntityFormGroup.get('attributes').get('humidityAlarmFlag').value\"\n               formControlName=\"humidityAlarmThreshold\">\n        <mat-error *ngIf=\"editEntityFormGroup.get('attributes').get('humidityAlarmThreshold').hasError('required')\">\n          Low humidity threshold is required.\n        </mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n  <div mat-dialog-actions class=\"flex flex-row items-center justify-end\">\n    <button mat-raised-button color=\"primary\"\n            type=\"submit\"\n            [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n      Save\n    </button>\n    <button mat-button color=\"primary\"\n            type=\"button\"\n            [disabled]=\"(isLoading$ | async)\"\n            (click)=\"cancel()\" cdkFocusInitial>\n      Cancel\n    </button>\n  </div>\n</form>",
                 "customCss": ".edit-entity-form{\n    width: 300px;\n}",
                 "customFunction": "let $injector = widgetContext.$scope.$injector;\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\nlet attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));\n\nopenEditEntityDialog();\n\nfunction openEditEntityDialog() {\n    customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe();\n}\n\nfunction EditEntityDialogController(instance) {\n    let vm = instance;\n    \n    vm.entityId = entityId;\n    vm.entityName = entityName;\n    vm.attributes = {};\n    \n    vm.editEntityFormGroup = vm.fb.group({\n        entityName: [''],\n        attributes: vm.fb.group({\n            temperatureAlarmFlag: [false],\n            temperatureAlarmThreshold: [{value: null, disabled: true}],\n            humidityAlarmFlag: [false],\n            humidityAlarmThreshold: [{value: null, disabled: true}]\n        })\n    });\n    \n    vm.editEntityFormGroup.get('attributes').get('temperatureAlarmFlag').valueChanges\n    .subscribe(activate => {\n        if (activate) {\n            vm.editEntityFormGroup.get('attributes').get('temperatureAlarmThreshold').enable();\n        } else {\n            vm.editEntityFormGroup.get('attributes').get('temperatureAlarmThreshold').disable();\n        }\n    });\n    \n    vm.editEntityFormGroup.get('attributes').get('humidityAlarmFlag').valueChanges\n    .subscribe(activate => {\n        if (activate) {\n            vm.editEntityFormGroup.get('attributes').get('humidityAlarmThreshold').enable();\n        } else {\n            vm.editEntityFormGroup.get('attributes').get('humidityAlarmThreshold').disable();\n        }\n    });\n    \n    \n    getEntityInfo();\n    \n    \n    vm.save = function() {\n        vm.editEntityFormGroup.markAsPristine();\n        saveAttributes(entityId).subscribe(\n            function () {\n                vm.dialogRef.close(null);\n            }\n        );\n    };\n    \n    vm.cancel = function() {\n        vm.dialogRef.close(null);\n    };\n    \n    function getEntityAttributes(attributes) {\n        for (var i = 0; i < attributes.length; i++) {\n            vm.attributes[attributes[i].key] = attributes[i].value;\n        }\n    }\n    \n    function getEntityInfo() {\n        attributeService.getEntityAttributes(entityId, 'SERVER_SCOPE').subscribe(\n            function (attributes) {\n                getEntityAttributes(attributes);\n                vm.editEntityFormGroup.patchValue({\n                    entityName: vm.entityName,\n                    attributes: vm.attributes\n                });\n                // if(vm.attributes.temperatureAlarmFlag) {\n                //     vm.editEntityFormGroup.get('attributes').get('temperatureAlarmThreshold').enable();\n                // }\n                // if(vm.attributes.humidityAlarmFlag) {\n                //     vm.editEntityFormGroup.get('attributes').get('humidityAlarmThreshold').enable();\n                // }\n            }\n        );\n    }\n    \n    function saveAttributes(entityId) {\n        let attributes = vm.editEntityFormGroup.get('attributes').value;\n        let attributesArray = [];\n        for (let key in attributes) {\n            if (attributes[key] !== vm.attributes[key]) {\n                attributesArray.push({key: key, value: attributes[key]});\n            }\n        }\n        if (attributesArray.length > 0) {\n            return attributeService.saveEntityAttributes(entityId, \"SERVER_SCOPE\", attributesArray);\n        } else {\n            return widgetContext.rxjs.of([]);\n        }\n    }\n}",
                 "customResources": [],
diff --git a/application/src/main/data/json/tenant/dashboards/gateways.json b/application/src/main/data/json/tenant/dashboards/gateways.json
index 668b92b7b2..1f32024d7f 100644
--- a/application/src/main/data/json/tenant/dashboards/gateways.json
+++ b/application/src/main/data/json/tenant/dashboards/gateways.json
@@ -186,7 +186,7 @@
                 "useShowWidgetActionFunction": null,
                 "showWidgetActionFunction": "return true;",
                 "type": "customPretty",
-                "customHtml": "<div class=\"container\">\n    <mat-toolbar fxLayout=\"row\" color=\"primary\">\n        <h2>{{ 'gateway.launch-command' | translate }}</h2>\n        <span fxFlex></span>\n        <div [tb-help]=\"'gatewayInstall'\"></div>\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n            <mat-icon class=\"material-icons\">close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <tb-gateway-command [deviceId]=\"entityId\"></tb-gateway-command>\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-button color=\"primary\"\n            type=\"button\"\n            (click)=\"cancel()\" cdkFocusInitial>\n            {{ 'action.close' | translate }}\n        </button>\n    </div>\n</div>\n",
+                "customHtml": "<div class=\"container\">\n  <mat-toolbar class=\"flex flex-row\" color=\"primary\">\n    <h2>{{ 'gateway.launch-command' | translate }}</h2>\n    <span class=\"flex-1\"></span>\n    <div [tb-help]=\"'gatewayInstall'\"></div>\n    <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n      <mat-icon class=\"material-icons\">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <tb-gateway-command [deviceId]=\"entityId\"></tb-gateway-command>\n  <div mat-dialog-actions class=\"flex flex-row items-center justify-end\">\n    <button mat-button color=\"primary\"\n            type=\"button\"\n            (click)=\"cancel()\" cdkFocusInitial>\n      {{ 'action.close' | translate }}\n    </button>\n  </div>\n</div>\n",
                 "customCss": ".container {\n    display: grid;\n    grid-template-rows: min-content minmax(auto, 1fr) min-content;\n    height: 100%;\n    max-height: 100vh;\n    width: 600px;\n    max-width: 100%;\n}",
                 "customFunction": "let $injector = widgetContext.$scope.$injector;\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\n\nopenCommands();\n\nfunction openCommands() {\n    customDialog.customDialog(htmlTemplate, CommandsDialogController, {panelClass: \"test\"}).subscribe();\n}\n\nfunction CommandsDialogController(instance) {\n    let vm = instance;\n    \n    vm.entityId = entityId.id;\n\n    vm.cancel = function() {\n        vm.dialogRef.close(null);\n    };\n}\n",
                 "customResources": [],
@@ -246,7 +246,7 @@
                 "useShowWidgetActionFunction": null,
                 "showWidgetActionFunction": "return true;",
                 "type": "customPretty",
-                "customHtml": "<form #addEntityForm=\"ngForm\" [formGroup]=\"addEntityFormGroup\"\r\n      (ngSubmit)=\"save($event)\" class=\"add-entity-form\">\r\n    <mat-toolbar fxLayout=\"row\" color=\"primary\">\r\n        <h2>Add gateway</h2>\r\n        <span fxFlex></span>\r\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\r\n            <mat-icon class=\"material-icons\">close</mat-icon>\r\n        </button>\r\n    </mat-toolbar>\r\n    <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\r\n    </mat-progress-bar>\r\n    <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\r\n    <div mat-dialog-content fxLayout=\"column\">\r\n        <div fxLayout=\"row\" fxLayoutGap=\"8px\" fxLayout.xs=\"column\"  fxLayoutGap.xs=\"0\">\r\n            <mat-form-field fxFlex class=\"mat-block\">\r\n                <mat-label>Name</mat-label>\r\n                <input matInput formControlName=\"entityName\" required>\r\n                <mat-error *ngIf=\"addEntityFormGroup.get('entityName').hasError('required')\">\r\n                    Gateway name is required.\r\n                </mat-error>\r\n            </mat-form-field>\r\n        </div>\r\n        <div fxLayout=\"row\" fxLayoutGap=\"8px\" fxLayout.xs=\"column\"  fxLayoutGap.xs=\"0\">\r\n            <tb-entity-subtype-autocomplete\r\n                    fxFlex\r\n                    class=\"mat-block\"\r\n                    formControlName=\"type\"\r\n                    [required]=\"true\"\r\n                    [entityType]=\"'DEVICE'\"\r\n            ></tb-entity-subtype-autocomplete>\r\n        </div>\r\n    </div>\r\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\r\n        <button mat-button color=\"primary\"\r\n                type=\"button\"\r\n                [disabled]=\"(isLoading$ | async)\"\r\n                (click)=\"cancel()\" cdkFocusInitial>\r\n            Cancel\r\n        </button>\r\n        <button mat-button mat-raised-button color=\"primary\"\r\n                type=\"submit\"\r\n                [disabled]=\"(isLoading$ | async) || addEntityForm.invalid || !addEntityForm.dirty\">\r\n            Create\r\n        </button>\r\n    </div>\r\n</form>\r\n",
+                "customHtml": "<form #addEntityForm=\"ngForm\" [formGroup]=\"addEntityFormGroup\"\n      (ngSubmit)=\"save($event)\" class=\"add-entity-form\">\n  <mat-toolbar class=\"flex flex-row\" color=\"primary\">\n    <h2>Add gateway</h2>\n    <span class=\"flex-1\"></span>\n    <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n      <mat-icon class=\"material-icons\">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n  </mat-progress-bar>\n  <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n  <div mat-dialog-content class=\"flex flex-col\">\n    <div class=\"flex flex-row gap-2 xs:flex-col xs:gap-0\">\n      <mat-form-field class=\"mat-block flex-1\">\n        <mat-label>Name</mat-label>\n        <input matInput formControlName=\"entityName\" required>\n        <mat-error *ngIf=\"addEntityFormGroup.get('entityName').hasError('required')\">\n          Gateway name is required.\n        </mat-error>\n      </mat-form-field>\n    </div>\n    <div class=\"flex flex-row gap-2 xs:flex-col xs:gap-0\">\n      <tb-entity-subtype-autocomplete\n          class=\"mat-block flex-1\"\n          formControlName=\"type\"\n          [required]=\"true\"\n          [entityType]=\"'DEVICE'\"\n      ></tb-entity-subtype-autocomplete>\n    </div>\n  </div>\n  <div mat-dialog-actions class=\"flex flex-row items-center justify-end\">\n    <button mat-button color=\"primary\"\n            type=\"button\"\n            [disabled]=\"(isLoading$ | async)\"\n            (click)=\"cancel()\" cdkFocusInitial>\n      Cancel\n    </button>\n    <button mat-button mat-raised-button color=\"primary\"\n            type=\"submit\"\n            [disabled]=\"(isLoading$ | async) || addEntityForm.invalid || !addEntityForm.dirty\">\n      Create\n    </button>\n  </div>\n</form>\n",
                 "customCss": ".add-entity-form {\r\n    min-width: 400px !important;\r\n}\r\n\r\n.add-entity-form .boolean-value-input {\r\n    padding-left: 5px;\r\n}\r\n\r\n.add-entity-form .boolean-value-input .checkbox-label {\r\n    margin-bottom: 8px;\r\n    color: rgba(0,0,0,0.54);\r\n    font-size: 12px;\r\n}\r\n\r\n.relations-list .header {\r\n    padding-right: 5px;\r\n    padding-bottom: 5px;\r\n    padding-left: 5px;\r\n}\r\n\r\n.relations-list .header .cell {\r\n    padding-right: 5px;\r\n    padding-left: 5px;\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    color: rgba(0, 0, 0, .54);\r\n    white-space: nowrap;\r\n}\r\n\r\n.relations-list .mat-form-field-infix {\r\n    width: auto !important;\r\n}\r\n\r\n.relations-list .body {\r\n    padding-right: 5px;\r\n    padding-bottom: 15px;\r\n    padding-left: 5px;\r\n}\r\n\r\n.relations-list .body .row {\r\n    padding-top: 5px;\r\n}\r\n\r\n.relations-list .body .cell {\r\n    padding-right: 5px;\r\n    padding-left: 5px;\r\n}\r\n\r\n.relations-list .body .md-button {\r\n    margin: 0;\r\n}\r\n\r\n",
                 "customFunction": "let $injector = widgetContext.$scope.$injector;\r\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\r\nlet assetService = $injector.get(widgetContext.servicesMap.get('assetService'));\r\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\r\nlet attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));\r\nlet entityRelationService = $injector.get(widgetContext.servicesMap.get('entityRelationService'));\r\nlet userSettingsService = $injector.get(widgetContext.servicesMap.get('userSettingsService'));\r\n\r\nopenAddEntityDialog();\r\n\r\nfunction openAddEntityDialog() {\r\n    customDialog.customDialog(htmlTemplate, AddEntityDialogController).subscribe();\r\n}\r\n\r\nfunction AddEntityDialogController(instance) {\r\n    let vm = instance;\r\n    let userSettings;\r\n    userSettingsService.loadUserSettings().subscribe(settings=> {\r\n        userSettings = settings;\r\n        if (!userSettings.createdGatewaysCount) userSettings.createdGatewaysCount = 0;\r\n    });\r\n    \r\n\r\n    vm.addEntityFormGroup = vm.fb.group({\r\n     entityName: ['', [vm.validators.required]],\r\n     entityType: ['DEVICE'],\r\n     entityLabel: [''],\r\n     type: ['', [vm.validators.required]],\r\n    });\r\n\r\n    vm.cancel = function() {\r\n        vm.dialogRef.close(null);\r\n    };\r\n\r\n\r\n    vm.save = function($event) {\r\n        vm.addEntityFormGroup.markAsPristine();\r\n        saveEntityObservable().subscribe(\r\n            function (device) {\r\n                widgetContext.updateAliases();\r\n                userSettingsService.putUserSettings({ createdGatewaysCount: ++userSettings.createdGatewaysCount }).subscribe(_=>{\r\n                });\r\n                vm.dialogRef.close(null);\r\n                openCommandDialog(device, $event);\r\n            }\r\n        );\r\n    };\r\n    \r\n    function openCommandDialog(device, $event) {\r\n        vm.device = device;\r\n        let openCommandAction = widgetContext.actionsApi.getActionDescriptors(\"actionCellButton\").find(action => action.name == \"Launch command\");\r\n        widgetContext.actionsApi.handleWidgetAction($event, openCommandAction, device.id, device.name, {newDevice: true});\r\n        goToConfigState();\r\n    }\r\n\r\n    \r\n    function goToConfigState() {\r\n        const stateParams = {};\r\n        stateParams.entityId = vm.device.id;\r\n        stateParams.entityName = vm.device.name;\r\n        const newStateParams = {\r\n            targetEntityParamName: 'default',\r\n            new_gateway: {\r\n                entityId: vm.device.id,\r\n                entityName: vm.device.name\r\n            }\r\n        }\r\n        const params = {...stateParams, ...newStateParams};\r\n        widgetContext.stateController.openState('gateway_details', params, false);\r\n    }\r\n\r\n    function saveEntityObservable() {\r\n        const formValues = vm.addEntityFormGroup.value;\r\n        let entity = {\r\n            name: formValues.entityName,\r\n            type: formValues.type,\r\n            label: formValues.entityLabel,\r\n            additionalInfo: {\r\n                gateway: true\r\n            }\r\n        };\r\n        return deviceService.saveDevice(entity);\r\n    }\r\n}\r\n",
                 "customResources": [],
@@ -592,7 +592,7 @@
           "settings": {
             "useMarkdownTextFunction": true,
             "markdownTextPattern": "# Markdown/HTML card \\n - **Current entity**: **${entityName}**. \\n - **Current value**: **${Random}**.",
-            "markdownTextFunction": "var blockData = '';\nvar connectorsIndex = ctx.actionsApi.getActionDescriptors('elementClick').findIndex(action=>action.name==\"Connectors\");\nvar logsIndex = ctx.actionsApi.getActionDescriptors('elementClick').findIndex(action=>action.name==\"Logs\");\nfunction generateMatHeader(index) {\n    if( index !== undefined && index > -1) {\n         return `<mat-card-header class='tb-home-widget-link'  (click)=\"ctx.actionsApi.handleWidgetAction($event, ctx.actionsApi.getActionDescriptors('elementClick')[${index}], ctx.datasources[0].entity.id)\">`\n    } else {\n       return \"<mat-card-header >\" \n    }\n}\nfunction createDataBlock(value, label, dividerStyle, mobile, index) {\n    blockData += `\n        <mat-card style=\"flex-grow: 1; width: ${mobile? '100%': 'auto'}; min-height: ${mobile? 'auto': '57px'}\" class=\" ${dividerStyle}\">\n            <div class=\"divider\"></div>\n            <mat-divider vertical style=\"height:100%\"></mat-divider>\n            ${generateMatHeader(index)}\n                <mat-card-subtitle>${label}</mat-card-subtitle>\n            </mat-card-header>\n            <mat-card-content> ${value}</mat-card-content>\n        </mat-card>`;\n}\ncreateDataBlock(data[0].Status, \"Status\", data[0].Status === \"Active\"? 'divider-green' : 'divider-red');\ncreateDataBlock(data[0].Name, \"Gateway Name\", '', ctx.isMobile);\ncreateDataBlock(data[0].Type, \"Gateway Type\", '');\ncreateDataBlock(\n    `<span style=\"color:rgb(25,128,56)\">${(data[1]?data[1].count:0)} </span>`\n    + \" | \" + \n    `<span style=\"color:rgb(203,37,48)\">${(data[2]?data[2][\"count 2\"]:0)} </span>`\n    , \"Devices <span class='tb-hint' style='padding-left: 0'>(Active | Inactive)</span>\", '');\ncreateDataBlock(\n    `<span style=\"color:rgb(25,128,56)\">${(data[0].active_connectors?JSON.parse(data[0].active_connectors).length:0)} </span>`\n    + \" | \" + \n    `<span style=\"color:rgb(203,37,48)\">${(data[0].inactive_connectors?JSON.parse(data[0].inactive_connectors).length:0)} </span>`\n    , \"Connectors <span class='tb-hint' style='padding-left: 0'>(Enabled | Disabled)</span>\", '', '',  connectorsIndex);\ncreateDataBlock(data[0].ALL_ERRORS_COUNT || 0, \"Errors\", (data[0].ALL_ERRORS_COUNT || 0) === 0 ? 'divider-green' : 'divider-red', '', logsIndex);\nreturn `<div fxLayout=\"row wrap\" fxLayoutGap=\"8px\" class=\"cards-container\">${blockData}</div>`;",
+            "markdownTextFunction": "var blockData = '';\nvar connectorsIndex = ctx.actionsApi.getActionDescriptors('elementClick').findIndex(action=>action.name==\"Connectors\");\nvar logsIndex = ctx.actionsApi.getActionDescriptors('elementClick').findIndex(action=>action.name==\"Logs\");\nfunction generateMatHeader(index) {\n    if( index !== undefined && index > -1) {\n         return `<mat-card-header class='tb-home-widget-link'  (click)=\"ctx.actionsApi.handleWidgetAction($event, ctx.actionsApi.getActionDescriptors('elementClick')[${index}], ctx.datasources[0].entity.id)\">`\n    } else {\n       return \"<mat-card-header >\" \n    }\n}\nfunction createDataBlock(value, label, dividerStyle, mobile, index) {\n    blockData += `\n        <mat-card style=\"flex-grow: 1; width: ${mobile? '100%': 'auto'}; min-height: ${mobile? 'auto': '57px'}\" class=\" ${dividerStyle}\">\n            <div class=\"divider\"></div>\n            <mat-divider vertical style=\"height:100%\"></mat-divider>\n            ${generateMatHeader(index)}\n                <mat-card-subtitle>${label}</mat-card-subtitle>\n            </mat-card-header>\n            <mat-card-content> ${value}</mat-card-content>\n        </mat-card>`;\n}\ncreateDataBlock(data[0].Status, \"Status\", data[0].Status === \"Active\"? 'divider-green' : 'divider-red');\ncreateDataBlock(data[0].Name, \"Gateway Name\", '', ctx.isMobile);\ncreateDataBlock(data[0].Type, \"Gateway Type\", '');\ncreateDataBlock(\n    `<span style=\"color:rgb(25,128,56)\">${(data[1]?data[1].count:0)} </span>`\n    + \" | \" + \n    `<span style=\"color:rgb(203,37,48)\">${(data[2]?data[2][\"count 2\"]:0)} </span>`\n    , \"Devices <span class='tb-hint' style='padding-left: 0'>(Active | Inactive)</span>\", '');\ncreateDataBlock(\n    `<span style=\"color:rgb(25,128,56)\">${(data[0].active_connectors?JSON.parse(data[0].active_connectors).length:0)} </span>`\n    + \" | \" + \n    `<span style=\"color:rgb(203,37,48)\">${(data[0].inactive_connectors?JSON.parse(data[0].inactive_connectors).length:0)} </span>`\n    , \"Connectors <span class='tb-hint' style='padding-left: 0'>(Enabled | Disabled)</span>\", '', '',  connectorsIndex);\ncreateDataBlock(data[0].ALL_ERRORS_COUNT || 0, \"Errors\", (data[0].ALL_ERRORS_COUNT || 0) === 0 ? 'divider-green' : 'divider-red', '', logsIndex);\nreturn `<div class=\"cards-container flex flex-row flex-wrap gap-2\">${blockData}</div>`;",
             "applyDefaultMarkdownStyle": false,
             "markdownCss": ".divider {\n    position: absolute;\n    width: 3px;\n    top: 8px;\n    border-radius: 2px;\n    bottom: 8px;\n    border: 1px solid rgba(31, 70, 144, 1);\n    background-color: rgba(31, 70, 144, 1);\n    left: 10px;\n}\n.divider-green .divider {\n    border: 1px solid rgb(25,128,56);\n    background-color: rgb(25,128,56);\n}\n\n.divider-green .mat-mdc-card-content {\n    color: rgb(25,128,56);\n}\n\n.divider-red .divider {\n    border: 1px solid rgb(203,37,48);\n    background-color: rgb(203,37,48);\n}\n\n.divider-red .mat-mdc-card-content {\n    color: rgb(203,37,48);\n}\n\n.mdc-card {\n    position: relative;\n    padding-left: 10px;\n    margin-bottom: 1px;\n}\n\n.mat-mdc-card-subtitle {\n    font-weight: 400;\n    font-size: 12px;\n}\n\n.mat-mdc-card-header {\n    padding: 8px 16px 0;\n}\n\n.mat-mdc-card-content:last-child {\n    padding-bottom: 8px;\n    font-size: 16px;\n}\n\n.cards-container {\n    height: calc(100% - 1px);\n    justify-content: stretch;\n    align-items: center;\n    margin-bottom: 1px;\n}\n\n::ng-deep.tb-home-widget-link > div {\n    flex-grow: 1;\n    cursor: pointer;\n}\n\n .tb-home-widget-link {\n     width: 100%;\n }\n\n .tb-home-widget-link:hover::after{\n     color: inherit;\n }\n \n .tb-home-widget-link::after{\n    content: 'arrow_forward';\n    display: inline-block;\n    transform: rotate(315deg);\n    font-family: 'Material Icons';\n    font-weight: normal;\n    font-style: normal;\n    font-size: 18px;\n    color: rgba(0, 0, 0, 0.12);\n    vertical-align: bottom;\n    margin-left: 6px;\n}"
           },
@@ -1916,7 +1916,7 @@
                 "useShowWidgetActionFunction": null,
                 "showWidgetActionFunction": "return true;",
                 "type": "customPretty",
-                "customHtml": "<div class=\"container\">\n    <mat-toolbar fxLayout=\"row\" color=\"primary\">\n        <h2>{{ 'gateway.launch-command' | translate }}</h2>\n        <span fxFlex></span>\n        <div [tb-help]=\"'gatewayInstall'\"></div>\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n            <mat-icon class=\"material-icons\">close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <tb-gateway-command [deviceId]=\"entityId\"></tb-gateway-command>\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-button color=\"primary\"\n            type=\"button\"\n            (click)=\"cancel()\" cdkFocusInitial>\n            {{ 'action.close' | translate }}\n        </button>\n    </div>\n</div>\n",
+                "customHtml": "<div class=\"container\">\n  <mat-toolbar class=\"flex flex-row\" color=\"primary\">\n    <h2>{{ 'gateway.launch-command' | translate }}</h2>\n    <span class=\"flex-1\"></span>\n    <div [tb-help]=\"'gatewayInstall'\"></div>\n    <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n      <mat-icon class=\"material-icons\">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <tb-gateway-command [deviceId]=\"entityId\"></tb-gateway-command>\n  <div mat-dialog-actions class=\"flex flex-row items-center justify-end\">\n    <button mat-button color=\"primary\"\n            type=\"button\"\n            (click)=\"cancel()\" cdkFocusInitial>\n      {{ 'action.close' | translate }}\n    </button>\n  </div>\n</div>\n",
                 "customCss": ".container {\n    display: grid;\n    grid-template-rows: min-content minmax(auto, 1fr) min-content;\n    height: 100%;\n    max-height: 100vh;\n    width: 600px;\n    max-width: 100%;\n}",
                 "customFunction": "let $injector = widgetContext.$scope.$injector;\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\n\nopenCommands();\n\nfunction openCommands() {\n    customDialog.customDialog(htmlTemplate, CommandsDialogController, {panelClass: \"test\"}).subscribe();\n}\n\nfunction CommandsDialogController(instance) {\n    let vm = instance;\n    \n    vm.entityId = entityId.id;\n\n    vm.cancel = function() {\n        vm.dialogRef.close(null);\n    };\n}\n",
                 "customResources": [],
@@ -1998,7 +1998,7 @@
           "padding": "8px",
           "settings": {
             "useMarkdownTextFunction": true,
-            "markdownTextFunction": "let buttonsHtml = \"\" \nctx.actionsApi.getActionDescriptors('elementClick').forEach((btn, index)=>{\n    let disabled =false;\n    if (index == 2) {\n        disabled = data[0] && data[0].RemoteLoggingLevel ? data[0].RemoteLoggingLevel == \"NONE\" : true;\n    } else if (index == 4) {\n        const conf = data[0].general_configuration? JSON.parse(data[0].general_configuration): {};\n        disabled = !conf.remoteShell;\n    }\n    buttonsHtml += `<button mat-raised-button disabled=${disabled} color=\"primary\"(click)=\"ctx.actionsApi.handleWidgetAction($event, ctx.actionsApi.getActionDescriptors('elementClick')[${index}], ctx.datasources[0].entity.id)\" fxFlex fxflex.md=\"50\">${btn.displayName}</button>`\n});\n\nreturn `<div class=\"action-buttons-container\" fxLayout=\"columnd\" fxLayout.md=\"row wrap\" fxLayoutGap=\"5px\" >${buttonsHtml}</div>`;",
+            "markdownTextFunction": "let buttonsHtml = \"\" \nctx.actionsApi.getActionDescriptors('elementClick').forEach((btn, index)=>{\n    let disabled =false;\n    if (index == 2) {\n        disabled = data[0] && data[0].RemoteLoggingLevel ? data[0].RemoteLoggingLevel == \"NONE\" : true;\n    } else if (index == 4) {\n        const conf = data[0].general_configuration? JSON.parse(data[0].general_configuration): {};\n        disabled = !conf.remoteShell;\n    }\n    buttonsHtml += `<button mat-raised-button disabled=${disabled} color=\"primary\"(click)=\"ctx.actionsApi.handleWidgetAction($event, ctx.actionsApi.getActionDescriptors('elementClick')[${index}], ctx.datasources[0].entity.id)\" class=\"flex-1 md:max-w-50% md:flex-full\">${btn.displayName}</button>`\n});\n\nreturn `<div class=\"action-buttons-container flex flex-col gap-1.25 md:flex-row md:flex-wrap\">${buttonsHtml}</div>`;",
             "applyDefaultMarkdownStyle": false,
             "markdownCss": ".action-buttons-container {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    flex-direction: row;\r\n    height: 100%;\r\n    width: 100%;\r\n    align-content: start;\r\n}\r\n\r\nbutton {\r\n    flex-grow: 1;\r\n    margin: 10px;\r\n    min-width: 150px;\r\n    height: auto;\r\n}"
           },
@@ -2605,7 +2605,7 @@
           "padding": "0px",
           "settings": {
             "useMarkdownTextFunction": false,
-            "markdownTextPattern": "<div style=\"width: 100%; height: 100%; padding: 0;\" fxFlex fxLayout=\"column\">\n  <mat-tab-group class=devices-tabs>\n    <mat-tab label=\"All\" value=\"gateway_devices_0\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_0\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${mqttCount}\" label=\"MQTT\" value=\"gateway_devices_1\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_1\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${modbusCount}\" label=\"MODBUS\" value=\"gateway_devices_2\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_2\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${grpcCount}\" label=\"GRPC\" value=\"gateway_devices_3\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_3\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${opcuaCount}\" label=\"OPCUA\" value=\"gateway_devices_4\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_4\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${bleCount}\" label=\"BLE\" value=\"gateway_devices_6\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_6\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${requestCount}\" label=\"REQUEST\" value=\"gateway_devices_7\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_7\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${canCount}\" label=\"CAN\" value=\"gateway_devices_8\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_8\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${bacnetCount}\" label=\"BACNET\" value=\"gateway_devices_9\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_9\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${odbcCount}\" label=\"ODBC\" value=\"gateway_devices_10\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_10\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${restCount}\" label=\"REST\" value=\"gateway_devices_11\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_11\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${snmpCount}\" label=\"SNMP\" value=\"gateway_devices_12\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_12\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${ftpCount}\" label=\"FTP\" value=\"gateway_devices_13\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_13\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${socketCount}\" label=\"SOCKET\" value=\"gateway_devices_14\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_14\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${xmppCount}\" label=\"XMPP\" value=\"gateway_devices_15\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_15\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${ocppCount}\" label=\"OCPP\" value=\"gateway_devices_16\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_16\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${customCount}\" label=\"CUSTOM\" value=\"gateway_devices_17\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_17\"></tb-dashboard-state>\n    </mat-tab>\n  </mat-tab-group>\n</div>\n",
+            "markdownTextPattern": "<div style=\"padding: 0;\" class=\"flex size-full flex-1 flex-col\">\n  <mat-tab-group class=devices-tabs>\n    <mat-tab label=\"All\" value=\"gateway_devices_0\">\n      <tb-dashboard-state [ctx]=\"ctx\" class=\"flex-1\" syncParentStateParams=\"true\" stateId=\"gateway_devices_0\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${mqttCount}\" label=\"MQTT\" value=\"gateway_devices_1\">\n      <tb-dashboard-state [ctx]=\"ctx\" class=\"flex-1\" syncParentStateParams=\"true\" stateId=\"gateway_devices_1\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${modbusCount}\" label=\"MODBUS\" value=\"gateway_devices_2\">\n      <tb-dashboard-state [ctx]=\"ctx\" class=\"flex-1\" syncParentStateParams=\"true\" stateId=\"gateway_devices_2\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${grpcCount}\" label=\"GRPC\" value=\"gateway_devices_3\">\n      <tb-dashboard-state [ctx]=\"ctx\" class=\"flex-1\" syncParentStateParams=\"true\" stateId=\"gateway_devices_3\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${opcuaCount}\" label=\"OPCUA\" value=\"gateway_devices_4\">\n      <tb-dashboard-state [ctx]=\"ctx\" class=\"flex-1\" syncParentStateParams=\"true\" stateId=\"gateway_devices_4\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${bleCount}\" label=\"BLE\" value=\"gateway_devices_6\">\n      <tb-dashboard-state [ctx]=\"ctx\" class=\"flex-1\" syncParentStateParams=\"true\" stateId=\"gateway_devices_6\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${requestCount}\" label=\"REQUEST\" value=\"gateway_devices_7\">\n      <tb-dashboard-state [ctx]=\"ctx\" class=\"flex-1\" syncParentStateParams=\"true\" stateId=\"gateway_devices_7\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${canCount}\" label=\"CAN\" value=\"gateway_devices_8\">\n      <tb-dashboard-state [ctx]=\"ctx\" class=\"flex-1\" syncParentStateParams=\"true\" stateId=\"gateway_devices_8\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${bacnetCount}\" label=\"BACNET\" value=\"gateway_devices_9\">\n      <tb-dashboard-state [ctx]=\"ctx\" class=\"flex-1\" syncParentStateParams=\"true\" stateId=\"gateway_devices_9\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${odbcCount}\" label=\"ODBC\" value=\"gateway_devices_10\">\n      <tb-dashboard-state [ctx]=\"ctx\" class=\"flex-1\" syncParentStateParams=\"true\" stateId=\"gateway_devices_10\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${restCount}\" label=\"REST\" value=\"gateway_devices_11\">\n      <tb-dashboard-state [ctx]=\"ctx\" class=\"flex-1\" syncParentStateParams=\"true\" stateId=\"gateway_devices_11\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${snmpCount}\" label=\"SNMP\" value=\"gateway_devices_12\">\n      <tb-dashboard-state [ctx]=\"ctx\" class=\"flex-1\" syncParentStateParams=\"true\" stateId=\"gateway_devices_12\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${ftpCount}\" label=\"FTP\" value=\"gateway_devices_13\">\n      <tb-dashboard-state [ctx]=\"ctx\" class=\"flex-1\" syncParentStateParams=\"true\" stateId=\"gateway_devices_13\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${socketCount}\" label=\"SOCKET\" value=\"gateway_devices_14\">\n      <tb-dashboard-state [ctx]=\"ctx\" class=\"flex-1\" syncParentStateParams=\"true\" stateId=\"gateway_devices_14\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${xmppCount}\" label=\"XMPP\" value=\"gateway_devices_15\">\n      <tb-dashboard-state [ctx]=\"ctx\" class=\"flex-1\" syncParentStateParams=\"true\" stateId=\"gateway_devices_15\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${ocppCount}\" label=\"OCPP\" value=\"gateway_devices_16\">\n      <tb-dashboard-state [ctx]=\"ctx\" class=\"flex-1\" syncParentStateParams=\"true\" stateId=\"gateway_devices_16\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${customCount}\" label=\"CUSTOM\" value=\"gateway_devices_17\">\n      <tb-dashboard-state [ctx]=\"ctx\" class=\"flex-1\" syncParentStateParams=\"true\" stateId=\"gateway_devices_17\"></tb-dashboard-state>\n    </mat-tab>\n  </mat-tab-group>\n</div>\n",
             "applyDefaultMarkdownStyle": false,
             "markdownCss": ".mat-mdc-form-field-subscript-wrapper {\n    display: none !important;\n}\n\n.devices-tabs {\n    height: 100%;\n}\n\n::ng-deep .mat-mdc-tab-body-wrapper {\n  height: 100%;\n}"
           },

From eea8fd325bf2dd1a4564091469bda0ac213b2984 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Fri, 18 Oct 2024 14:55:56 +0300
Subject: [PATCH 33/34] UI: Minor fixes

---
 ui-ngx/src/styles.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss
index d56d446f65..d379d4fd9f 100644
--- a/ui-ngx/src/styles.scss
+++ b/ui-ngx/src/styles.scss
@@ -573,7 +573,7 @@ pre.tb-highlight {
 
   button.mat-mdc-menu-item {
     overflow: hidden;
-    .mdc-list-item__primary-text {
+    .mat-mdc-menu-item-text {
       flex: 1;
       .tb-alt-text {
         float: right;

From c6a9646d111823328b0c221e9cd73f531ef241b6 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Fri, 18 Oct 2024 16:33:19 +0300
Subject: [PATCH 34/34] UI: Dashboard widget copy/paste and scada symbol
 animation for chrome fixes.

---
 .../src/app/core/services/dashboard-utils.service.ts   | 10 ++++++----
 .../layout/dashboard-layout.component.ts               |  5 +++--
 .../components/dashboard-page/layout/layout.models.ts  |  6 ++++--
 .../home/components/dashboard/dashboard.component.ts   |  4 ++--
 .../components/widget/lib/scada/scada-symbol.models.ts |  6 +++---
 .../modules/home/models/dashboard-component.models.ts  |  7 ++++---
 ui-ngx/src/app/shared/models/jquery-event.models.ts    |  6 ++++++
 ui-ngx/src/app/shared/models/widget.models.ts          |  2 ++
 8 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/ui-ngx/src/app/core/services/dashboard-utils.service.ts b/ui-ngx/src/app/core/services/dashboard-utils.service.ts
index f0341410bc..235924f98f 100644
--- a/ui-ngx/src/app/core/services/dashboard-utils.service.ts
+++ b/ui-ngx/src/app/core/services/dashboard-utils.service.ts
@@ -636,7 +636,7 @@ export class DashboardUtilsService {
                            targetLayout: DashboardLayoutId,
                            widget: Widget,
                            originalColumns?: number,
-                           originalSize?: {sizeX: number; sizeY: number},
+                           originalSize?: WidgetSize,
                            row?: number,
                            column?: number,
                            breakpoint = 'default'): void {
@@ -661,8 +661,8 @@ export class DashboardUtilsService {
       mobileHeight: widget.config.mobileHeight,
       mobileHide: widget.config.mobileHide,
       desktopHide: widget.config.desktopHide,
-      preserveAspectRatio: widget.config.preserveAspectRatio,
-      resizable: widget.config.resizable
+      preserveAspectRatio: originalSize ? originalSize.preserveAspectRatio : widget.config.preserveAspectRatio,
+      resizable: originalSize ? originalSize.resizable : widget.config.resizable
     };
     if (isUndefined(originalColumns)) {
       originalColumns = 24;
@@ -1065,7 +1065,9 @@ export class DashboardUtilsService {
     const widgetLayout = layout.widgets[widget.id];
     return {
       sizeX: widgetLayout.sizeX,
-      sizeY: widgetLayout.sizeY
+      sizeY: widgetLayout.sizeY,
+      preserveAspectRatio: widgetLayout.preserveAspectRatio,
+      resizable: widgetLayout.resizable
     };
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.ts
index c04a2af3df..52742c54c4 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.ts
@@ -39,6 +39,7 @@ import { map } from 'rxjs/operators';
 import { displayGrids } from 'angular-gridster2/lib/gridsterConfig.interface';
 import { BreakpointId, LayoutType, ViewFormatType } from '@shared/models/dashboard.models';
 import { isNotEmptyStr } from '@core/utils';
+import { TbContextMenuEvent } from '@shared/models/jquery-event.models';
 
 @Component({
   selector: 'tb-dashboard-layout',
@@ -319,12 +320,12 @@ export class DashboardLayoutComponent extends PageComponent implements ILayoutCo
     this.layoutCtx.dashboardCtrl.copyWidgetReference($event, this.layoutCtx, widget);
   }
 
-  pasteWidget($event: Event) {
+  pasteWidget($event: TbContextMenuEvent | KeyboardEvent) {
     const pos = this.dashboard.getEventGridPosition($event);
     this.layoutCtx.dashboardCtrl.pasteWidget($event, this.layoutCtx, pos);
   }
 
-  pasteWidgetReference($event: Event) {
+  pasteWidgetReference($event: TbContextMenuEvent | KeyboardEvent) {
     const pos = this.dashboard.getEventGridPosition($event);
     this.layoutCtx.dashboardCtrl.pasteWidgetReference($event, this.layoutCtx, pos);
   }
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts
index 3ea9f553a8..7b54261945 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts
@@ -14,13 +14,15 @@
 /// limitations under the License.
 ///
 
+import { TbContextMenuEvent } from '@shared/models/jquery-event.models';
+
 export interface ILayoutController {
   reload();
   resetHighlight();
   highlightWidget(widgetId: string, delay?: number);
   selectWidget(widgetId: string, delay?: number);
-  pasteWidget($event: MouseEvent);
-  pasteWidgetReference($event: MouseEvent);
+  pasteWidget($event: TbContextMenuEvent | KeyboardEvent);
+  pasteWidgetReference($event: TbContextMenuEvent | KeyboardEvent);
 }
 
 export enum LayoutWidthType {
diff --git a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts
index fd031fa90f..7169e4a20b 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts
@@ -529,7 +529,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
     return dashboardWidget ? dashboardWidget.widget : null;
   }
 
-  getEventGridPosition(event: Event): WidgetPosition {
+  getEventGridPosition(event: TbContextMenuEvent | KeyboardEvent): WidgetPosition {
     const pos: WidgetPosition = {
       row: 0,
       column: 0
@@ -537,7 +537,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
     const parentElement = $(this.gridster.el);
     let pageX = 0;
     let pageY = 0;
-    if (event instanceof MouseEvent) {
+    if ('pageX' in event && 'pageY' in event) {
       pageX = event.pageX;
       pageY = event.pageY;
     }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts
index 41611d3f6e..6d3e9fde82 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts
@@ -1168,13 +1168,13 @@ class CssScadaSymbolAnimation implements ScadaSymbolAnimation {
               private element: Element,
               duration = 1000)  {
     this._duration = duration;
-    this.fixPatternAnimationForChromeBelow128();
+    this.fixPatternAnimationForChrome();
   }
 
-  private fixPatternAnimationForChromeBelow128(): void {
+  private fixPatternAnimationForChrome(): void {
     try {
       const userAgent = window.navigator.userAgent;
-      if (+(/Chrome\/(\d+)/i.exec(userAgent)[1]) <= 127) {
+      if (+(/Chrome\/(\d+)/i.exec(userAgent)[1]) > 0) {
         if (this.svgShape.defs().findOne('pattern')  && !this.svgShape.defs().findOne('pattern.empty-animation')) {
           this.svgShape.defs().add(SVG('<pattern class="empty-animation"></pattern>'));
           this.svgShape.style()
diff --git a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts b/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts
index 65c6c23004..b4132bf882 100644
--- a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts
+++ b/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts
@@ -42,6 +42,7 @@ import { enumerable } from '@shared/decorators/enumerable';
 import { UtilsService } from '@core/services/utils.service';
 import { TbPopoverComponent } from '@shared/components/popover.component';
 import { ComponentStyle, iconStyle, textStyle } from '@shared/models/widget-settings.models';
+import { TbContextMenuEvent } from '@shared/models/jquery-event.models';
 
 export interface WidgetsData {
   widgets: Array<Widget>;
@@ -56,11 +57,11 @@ export interface ContextMenuItem {
 }
 
 export interface DashboardContextMenuItem extends ContextMenuItem {
-  action: (contextMenuEvent: MouseEvent) => void;
+  action: (contextMenuEvent: TbContextMenuEvent) => void;
 }
 
 export interface WidgetContextMenuItem extends ContextMenuItem {
-  action: (contextMenuEvent: MouseEvent, widget: Widget) => void;
+  action: (contextMenuEvent: TbContextMenuEvent, widget: Widget) => void;
 }
 
 export interface DashboardCallbacks {
@@ -94,7 +95,7 @@ export interface IDashboardComponent {
   highlightWidget(widgetId: string, delay?: number);
   selectWidget(widgetId: string, delay?: number);
   getSelectedWidget(): Widget;
-  getEventGridPosition(event: Event): WidgetPosition;
+  getEventGridPosition(event: TbContextMenuEvent | KeyboardEvent): WidgetPosition;
   notifyGridsterOptionsChanged();
   pauseChangeNotifications();
   resumeChangeNotifications();
diff --git a/ui-ngx/src/app/shared/models/jquery-event.models.ts b/ui-ngx/src/app/shared/models/jquery-event.models.ts
index b893da758c..a054210672 100644
--- a/ui-ngx/src/app/shared/models/jquery-event.models.ts
+++ b/ui-ngx/src/app/shared/models/jquery-event.models.ts
@@ -19,6 +19,8 @@ import Timeout = NodeJS.Timeout;
 export interface TbContextMenuEvent extends Event {
   clientX: number;
   clientY: number;
+  pageX: number;
+  pageY: number;
   ctrlKey: boolean;
   metaKey: boolean;
 }
@@ -41,6 +43,8 @@ export const initCustomJQueryEvents = () => {
             const event = $.Event('tbcontextmenu', {
               clientX: touch.clientX,
               clientY: touch.clientY,
+              pageX: touch.pageX,
+              pageY: touch.pageY,
               ctrlKey: false,
               metaKey: false,
               originalEvent: e
@@ -59,6 +63,8 @@ export const initCustomJQueryEvents = () => {
           const event = $.Event('tbcontextmenu', {
             clientX: e.originalEvent.clientX,
             clientY: e.originalEvent.clientY,
+            pageX: e.originalEvent.pageX,
+            pageY: e.originalEvent.pageY,
             ctrlKey: e.originalEvent.ctrlKey,
             metaKey: e.originalEvent.metaKey,
             originalEvent: e
diff --git a/ui-ngx/src/app/shared/models/widget.models.ts b/ui-ngx/src/app/shared/models/widget.models.ts
index 65c09a52e1..e8b00ebab4 100644
--- a/ui-ngx/src/app/shared/models/widget.models.ts
+++ b/ui-ngx/src/app/shared/models/widget.models.ts
@@ -836,6 +836,8 @@ export interface WidgetPosition {
 export interface WidgetSize {
   sizeX: number;
   sizeY: number;
+  preserveAspectRatio: boolean;
+  resizable: boolean;
 }
 
 export interface IWidgetSettingsComponent {