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] 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: [],
 }