diff --git a/projects/common-map/src/fm-map/components/aol/layer-list/layer-list.component.html b/projects/common-map/src/fm-map/components/aol/layer-list/layer-list.component.html
index 9b6ddd1..cf3955d 100644
--- a/projects/common-map/src/fm-map/components/aol/layer-list/layer-list.component.html
+++ b/projects/common-map/src/fm-map/components/aol/layer-list/layer-list.component.html
@@ -13,7 +13,7 @@
             </span>
             <a href="#" title="Zoom to extent" class="btn btn-light btn-sm" (click)="handleZoomToExtent($event,itemLayer)"><i class="far fa-search-plus" aria-hidden="true"></i></a>
             <span *ngIf="firstLayer(itemLayer)"><a href="#" title="Toggle legend" class="btn btn-light btn-sm" (click)="itemLayer.legendVisible=toggleLegend($event,itemLayer.legendVisible)"><i class="far fa-chart-bar" aria-hidden="true"></i></a></span>
-            <span *ngIf="!dataLayers" class="float-right"><a href="#" title="Remove overlay" class="btn btn-light btn-sm" (click)="handleDelete($event,itemLayer)"><i class="fas fa-layer-minus" aria-hidden="true"></i></a></span>
+            <span *ngIf="!dataLayers" class="float-end"><a href="#" title="Remove overlay" class="btn btn-light btn-sm" (click)="handleDelete($event,itemLayer)"><i class="fas fa-layer-minus" aria-hidden="true"></i></a></span>
           </div>
           <div *ngIf="itemLayer.legendVisible">
             <div class="card legend">
diff --git a/projects/common-map/src/fm-map/components/aol/layer-values/layer-values.component.html b/projects/common-map/src/fm-map/components/aol/layer-values/layer-values.component.html
index 726d7e7..2fc8b81 100644
--- a/projects/common-map/src/fm-map/components/aol/layer-values/layer-values.component.html
+++ b/projects/common-map/src/fm-map/components/aol/layer-values/layer-values.component.html
@@ -2,12 +2,12 @@
    <div class="cross"  *ngIf="enabled$ | async">
        <div class="pointer"></div>
        <div class="values-container border border-dark rounded p-2" *ngIf="(layerValues$ | async ) as layers">
-           <div class="lonlat pb-2 "><span class="font-weight-bold">{{lonlat$}}</span><i class="ml-2 fal fa-copy" (click)="copyToClipboard()"></i> </div>
+           <div class="lonlat pb-2 "><span class="font-weight-bold">{{lonlat$}}</span><i class="ms-2 fal fa-copy" (click)="copyToClipboard()"></i> </div>
            <ul class="value-list p-0 mb-0" *ngIf="layers.length>0 ;else no_data">
                <li class="border-top pt-1 pb-1 value" *ngFor="let layerValue of layers">
                    <div>{{layerValue.layerName}}</div>
                    <div>{{layerValue.date|date}}</div>
-                   <div><span *ngIf="layerValue.quantity"><span class="mr-1">{{layerValue.quantity}}</span> </span><span class="mr-1 font-weight-bold">{{layerValue.value}}</span><span>{{layerValue.unit}}</span></div>
+                   <div><span *ngIf="layerValue.quantity"><span class="me-1">{{layerValue.quantity}}</span> </span><span class="me-1 font-weight-bold">{{layerValue.value}}</span><span>{{layerValue.unit}}</span></div>
                </li>
            </ul>
            <ng-template #no_data>
diff --git a/projects/common-map/src/fm-map/components/feature-list-cropfield/feature-list-cropfield.component.html b/projects/common-map/src/fm-map/components/feature-list-cropfield/feature-list-cropfield.component.html
index 194df94..d5f6532 100644
--- a/projects/common-map/src/fm-map/components/feature-list-cropfield/feature-list-cropfield.component.html
+++ b/projects/common-map/src/fm-map/components/feature-list-cropfield/feature-list-cropfield.component.html
@@ -5,7 +5,7 @@
     <h3>{{schemeItem.name}}</h3>
     <div *ngIf="features;let features">
         <div class="cropfields">
-          <div class="row m-0 pl-3 pr-3" *ngFor="let feature of features" [ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
+          <div class="row m-0 ps-3 pe-3" *ngFor="let feature of features" [ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
           <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
         </div>
       </div>
diff --git a/projects/common-map/src/fm-map/components/feature-list-croppingscheme/feature-list-croppingscheme.component.html b/projects/common-map/src/fm-map/components/feature-list-croppingscheme/feature-list-croppingscheme.component.html
index 1d6d49e..046d92e 100644
--- a/projects/common-map/src/fm-map/components/feature-list-croppingscheme/feature-list-croppingscheme.component.html
+++ b/projects/common-map/src/fm-map/components/feature-list-croppingscheme/feature-list-croppingscheme.component.html
@@ -4,7 +4,7 @@
       <h3><i class="far fa-farm"></i>&nbsp;<span i18n>Farms</span></h3>
       <div *ngIf="features;let features">
       <div class="farms">
-        <div class="row m-0 pl-3 pr-3" *ngFor="let feature of features"[ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
+        <div class="row m-0 ps-3 pe-3" *ngFor="let feature of features"[ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
           <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
         </div>
       </div>      
diff --git a/projects/common-map/src/fm-map/components/feature-list/feature-list.component.html b/projects/common-map/src/fm-map/components/feature-list/feature-list.component.html
index 3e396a0..59bd0b9 100644
--- a/projects/common-map/src/fm-map/components/feature-list/feature-list.component.html
+++ b/projects/common-map/src/fm-map/components/feature-list/feature-list.component.html
@@ -1,6 +1,6 @@
 <div *ngIf="features;let features">
   <fm-back-button></fm-back-button>
-  <div class="row m-0 pl-3 pr-3" *ngFor="let feature of features" [ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
+  <div class="row m-0 ps-3 pe-3" *ngFor="let feature of features" [ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
     <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
   </div>
 </div>
diff --git a/projects/common-map/src/fm-map/components/layer-switcher/layer-switcher.component.html b/projects/common-map/src/fm-map/components/layer-switcher/layer-switcher.component.html
index d518983..9eb9fc6 100644
--- a/projects/common-map/src/fm-map/components/layer-switcher/layer-switcher.component.html
+++ b/projects/common-map/src/fm-map/components/layer-switcher/layer-switcher.component.html
@@ -4,7 +4,7 @@
     <div class="card layers-card m-1">
       <div class="card-header">
         <span i18n>Layers</span>
-        <i class="float-right fas fa-times" (click)="close($event)"></i>
+        <i class="float-end fas fa-times" (click)="close($event)"></i>
       </div>
       <ul class="navbar-nav">
         <li class="nav-item py-0">
diff --git a/projects/common-map/src/fm-map/components/legend/histogram-details/histogram-details.component.html b/projects/common-map/src/fm-map/components/legend/histogram-details/histogram-details.component.html
index f90fd6f..210a026 100644
--- a/projects/common-map/src/fm-map/components/legend/histogram-details/histogram-details.component.html
+++ b/projects/common-map/src/fm-map/components/legend/histogram-details/histogram-details.component.html
@@ -1,4 +1,4 @@
-<div class="row pl-3">
+<div class="row ps-3">
   <div class="col-8 nopadding"><span i18n>Average</span>:</div>
   <div class="col-4 pull-left nopadding">{{histogram.mean| number:'1.0-2'}}</div>
   <div class="col-8 nopadding"><span i18n>Standard deviation</span>:</div>
diff --git a/projects/common-map/src/fm-map/components/legend/statistics-details/statistics-details.component.html b/projects/common-map/src/fm-map/components/legend/statistics-details/statistics-details.component.html
index 4fecbaa..c757b90 100644
--- a/projects/common-map/src/fm-map/components/legend/statistics-details/statistics-details.component.html
+++ b/projects/common-map/src/fm-map/components/legend/statistics-details/statistics-details.component.html
@@ -1,4 +1,4 @@
-<div class="row pl-3">
+<div class="row ps-3">
   <div class="col-8 nopadding"><span i18n>Data points</span>:</div>
   <div class="col-4 pull-left nopadding">{{statistics.populationCount}}</div>
   <div class="col-8 nopadding"><span i18n>Min</span>:</div>
diff --git a/projects/common-map/src/fm-map/components/selected-item-geotiff/selected-item-geotiff.component.html b/projects/common-map/src/fm-map/components/selected-item-geotiff/selected-item-geotiff.component.html
index a698ecc..bcf2d66 100644
--- a/projects/common-map/src/fm-map/components/selected-item-geotiff/selected-item-geotiff.component.html
+++ b/projects/common-map/src/fm-map/components/selected-item-geotiff/selected-item-geotiff.component.html
@@ -20,7 +20,7 @@
       </div>
       <div class="card menu-card">
         <ul class="p-0 mt-2">
-          <li *ngIf="item.isEditable"><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)"><i class="fal fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li>
+          <li *ngIf="item.isEditable"><a href="#" class="ms-1 me-1" (click)="handleOnEdit(item)"><i class="fal fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li>
           <ng-container *ngIf="itemTypeService.isLayer(item)">
             <li *ngIf="!getItemLayer(item,itemLayer.layerIndex)"><a   href="#" (click)="handleAddAsLayer(item,itemLayer.layerIndex)"><i class="fas fa-layer-plus" aria-hidden="true" i18n-title title="Add as layer"></i>&nbsp;<span i18n>Add as overlay</span></a></li>
             <li *ngIf="getItemLayer(item,itemLayer.layerIndex)"><a  href="#" (click)="handleRemoveLayer(item,itemLayer.layerIndex)"><i class="fas fa-layer-minus" aria-hidden="true" i18n-title title="Remove overlay"></i>&nbsp;<span i18n>Remove overlay</span></a></li>
diff --git a/projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.html b/projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.html
index 5f2b05c..6475704 100644
--- a/projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.html
+++ b/projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.html
@@ -19,7 +19,7 @@
       </div>
       <div class="card menu-card">
         <ul class="p-0 mt-2">
-          <li *ngIf="item.isEditable"><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)" ><i class="fal fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li>
+          <li *ngIf="item.isEditable"><a href="#" class="mt-1 me-1" (click)="handleOnEdit(item)" ><i class="fal fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li>
           <ng-container *ngIf="itemTypeService.isLayer(item)">
             <li *ngIf="!getItemLayer(item,itemLayer.layerIndex)"><a   href="#" (click)="handleAddAsLayer(item,itemLayer.layerIndex)" ><i class="fas fa-layer-olus" aria-hidden="true" i18n-title title="Add as layer"></i>&nbsp;<span i18n>Add as overlay</span></a></li>
             <li *ngIf="getItemLayer(item,itemLayer.layerIndex)"><a  href="#" (click)="handleRemoveLayer(item,itemLayer.layerIndex)" ><i class="fas fa-layer-minus" aria-hidden="true" i18n-title title="Remove overlay"></i>&nbsp;<span i18n>Remove overlay</span></a></li>
diff --git a/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html b/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html
index e7609a6..6aaa0c4 100644
--- a/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html
+++ b/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html
@@ -36,7 +36,7 @@
       </div>
       <div class="card menu-card">
         <ul class="p-0 mt-2">
-          <li *ngIf="item.isEditable"><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)"><i class="fal fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li>
+          <li *ngIf="item.isEditable"><a href="#" class="mt-1 me-1" (click)="handleOnEdit(item)"><i class="fal fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li>
           <ng-container *ngIf="itemTypeService.isLayer(item)">
             <li *ngIf="!getItemLayer(item,itemLayer.layerIndex)"><a   href="#" (click)="handleAddAsLayer(item,itemLayer.layerIndex)"><i class="fas fa-layer-plus" aria-hidden="true" i18n-title title="Add as layer"></i>&nbsp;<span i18n>Add as overlay</span></a></li>
             <li *ngIf="getItemLayer(item,itemLayer.layerIndex)"><a  href="#" (click)="handleRemoveLayer(item,itemLayer.layerIndex)"><i class="fas fa-layer-minus" aria-hidden="true" i18n-title title="Remove overlay"></i>&nbsp;<span i18n>Remove overlay</span></a></li>
diff --git a/projects/common/src/fm/components/app/app.component.html b/projects/common/src/fm/components/app/app.component.html
index 8370bb3..c3e050e 100644
--- a/projects/common/src/fm/components/app/app.component.html
+++ b/projects/common/src/fm/components/app/app.component.html
@@ -3,9 +3,9 @@
     <div class="container-fluid">
       <div class="header-logo pageonly"><router-outlet name="header-logo"></router-outlet></div> 
       <button type="button" class="btn btn-outline-secondary apponly" (click)="handleToggleMenu($event)"><i class="fal fa-bars" aria-hidden="true"></i></button>
-      <router-outlet name="menu" class="ml-4"></router-outlet>
+      <router-outlet name="menu" class="ms-4"></router-outlet>
       <div class="collapse navbar-collapse pageonly">      
-        <a class="btn btn-primary ml-auto" role="button" [routerLink]="[ startPage == null?'/map':startPage]">
+        <a class="btn btn-primary ms-auto" role="button" [routerLink]="[ startPage == null?'/map':startPage]">
           <span *ngIf="(user|async)==null" i18n>Sign in</span>
           <span *ngIf="(user|async)!=null" i18n>To app</span>
         </a>
@@ -21,7 +21,7 @@
       <div class="body">
         <div class="d-flex flex-row">
           <div class="mt-2 mb-2 flex-grow-1 logo" (click)="handleHome($event)"><router-outlet name="side-panel-logo"></router-outlet></div>
-          <div class="mt-2 mb-2 ml-2"><button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fal fa-times" aria-hidden="true"></i></button></div>
+          <div class="mt-2 mb-2 ms-2"><button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fal fa-times" aria-hidden="true"></i></button></div>
         </div>
         <div class="d-flex flex-column cards"> 
             <router-outlet name="side-panel-menu"></router-outlet>          
diff --git a/projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.component.html b/projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.component.html
index f7c24cc..1bcdace 100644
--- a/projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.component.html
+++ b/projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.component.html
@@ -4,7 +4,7 @@
       <div class="card-header  p-3 bg-primary text-white">
         <span *ngIf="uploadService.isUploading">Uploading files (<span>{{uploadService.totalProgress | number:'1.1-1'}}</span> %)</span>
         <span *ngIf="uploadService.isUploading == false">Uploaded <span>{{uploadService.files.length}}</span> files</span>
-        <span title="Cancel" class="fal fa-times float-right" (click)="uploadService.close()"></span><span title="Minimize" class="fal fa-chevron-down float-right mr-2" (click)="uploadService.toggleMinimize()" [ngClass]="{'fa-chevron-down': uploadService.isMinimized == false, 'fa-chevron-up':uploadService.isMinimized}"></span>
+        <span title="Cancel" class="fal fa-times float-end" (click)="uploadService.close()"></span><span title="Minimize" class="fal fa-chevron-down float-end me-2" (click)="uploadService.toggleMinimize()" [ngClass]="{'fa-chevron-down': uploadService.isMinimized == false, 'fa-chevron-up':uploadService.isMinimized}"></span>
       </div>
       <div [ngClass]="{'minimized': uploadService.isMinimized }">
         <div class="card-block p-3">
diff --git a/projects/common/src/fm/components/side-panel/side-panel.component.html b/projects/common/src/fm/components/side-panel/side-panel.component.html
index 9cbfbf8..0abb358 100644
--- a/projects/common/src/fm/components/side-panel/side-panel.component.html
+++ b/projects/common/src/fm/components/side-panel/side-panel.component.html
@@ -1,5 +1,5 @@
 <div class="side-panel hidden" [ngClass]="{'hidden':!visible,'collapsed':collapsed,'resizeable':(resizeable && mobile),'resizing':resizing,'left':left}" [ngStyle]="{'top':top}">
-  <div *ngIf="collapsable" class="arrow rounded-right p-2" (click)="handleToggleClick($event)">
+  <div *ngIf="collapsable" class="arrow rounded-end p-2" (click)="handleToggleClick($event)">
     <i class="fal fa-chevron-left" aria-hidden="true"></i>
   </div>
   <div  draggable="true" class="resizegrip" (dragstart)="handleStartGripDrag($event)" (touchstart)="handleStartGripDrag($event)" (dragend)="handleEndGripDrag()" (touchend)="handleEndGripDrag()" (drag)="handleGripDrag($event)" (touchmove)="handleGripDrag($event)">
diff --git a/projects/common/src/fm/components/timespan/timespan.component.html b/projects/common/src/fm/components/timespan/timespan.component.html
index 4255ac0..58c69ba 100644
--- a/projects/common/src/fm/components/timespan/timespan.component.html
+++ b/projects/common/src/fm/components/timespan/timespan.component.html
@@ -5,7 +5,7 @@
    <div class="popover-anchor" [style.left.px] = "endPopoverLeft" [ngbPopover]="popoverContent" #popoverEnd="ngbPopover">&nbsp;</div>
    <div class="collapsed clearfix" [ngClass]="{'collapsed':collapsed}">
      <!-- <div class="clearfix">
-        <select class="form-control float-right" [value]="unitScale">
+        <select class="form-control float-end" [value]="unitScale">
             <option value="0">Millisecond</option>
             <option value="1">Second</option>
             <option value="2">Minute</option>
@@ -21,9 +21,9 @@
         <canvas #timeLine (mousedown)="handleViewPanMouseDown($event)" (touchstart)="handleViewPanMouseDown($event)" (mousemove)="handleCanvasMouseMove($event)" (mouseleave)="handleCanvasMouseLeave($event)">
         </canvas>
         <div class="control-container"  [style.margin-left.px]="marginLeft" [style.height.px]="lineHeight" >
-            <div class="leftGrip rounded-left" (mousedown)="handleLeftGripMouseDown($event)" (touchstart)="handleLeftGripMouseDown($event)"   (mouseenter)="handleLeftGripMouseEnter($event)" (mouseleave)="handleLeftGripMouseLeave($event)"><i class="fal fa-ellipsis-v" aria-hidden="true"></i></div>
+            <div class="leftGrip rounded-start" (mousedown)="handleLeftGripMouseDown($event)" (touchstart)="handleLeftGripMouseDown($event)"   (mouseenter)="handleLeftGripMouseEnter($event)" (mouseleave)="handleLeftGripMouseLeave($event)"><i class="fal fa-ellipsis-v" aria-hidden="true"></i></div>
             <div class="range" [style.width.px]="rangeWidth" (mousedown)="handleRangeGripMouseDown($event)" (touchstart)="handleRangeGripMouseDown($event)" (mouseenter)="handleRangeGripMouseEnter($event)"></div>
-            <div class="rightGrip rounded-right" (mousedown)="handleRightGripMouseDown($event)" (touchstart)="handleRightGripMouseDown($event)" (mouseenter)="handleRightGripMouseEnter($event)" (mouseleave)="handleRightGripMouseLeave($event)"><i class="fal fa-ellipsis-v" aria-hidden="true"></i></div>
+            <div class="rightGrip rounded-end (mousedown)="handleRightGripMouseDown($event)" (touchstart)="handleRightGripMouseDown($event)" (mouseenter)="handleRightGripMouseEnter($event)" (mouseleave)="handleRightGripMouseLeave($event)"><i class="fal fa-ellipsis-v" aria-hidden="true"></i></div>
         </div>
      </div>
      <!-- <div>