From 1060dcc94f38ef7ab03b92514945f23401f7290b Mon Sep 17 00:00:00 2001
From: Uriel Sautron <uriel.sautron@gmail.com>
Date: Mon, 4 Nov 2024 12:37:37 +0100
Subject: [PATCH] front: replace rem with px in the scenario scss file

Signed-off-by: Uriel Sautron <uriel.sautron@gmail.com>
---
 .../operationalStudies/_scenario.scss         | 386 +++++++++---------
 1 file changed, 193 insertions(+), 193 deletions(-)

diff --git a/front/src/styles/scss/applications/operationalStudies/_scenario.scss b/front/src/styles/scss/applications/operationalStudies/_scenario.scss
index 401aa4c4a0c..47ac81e08e5 100644
--- a/front/src/styles/scss/applications/operationalStudies/_scenario.scss
+++ b/front/src/styles/scss/applications/operationalStudies/_scenario.scss
@@ -1,5 +1,5 @@
 .scenario {
-  --navbar-height: 4.0625rem;
+  --navbar-height: 65px;
   --content-height: calc(100vh - var(--navbar-height));
   position: relative;
   background-color: var(--ambiantB10);
@@ -21,7 +21,7 @@
   .micro-macro-buttons {
     button {
       color: var(--grey60);
-      width: 3.625rem;
+      width: 58px;
       &:hover {
         color: var(--grey80);
       }
@@ -32,21 +32,21 @@
 
     display: inline-flex;
     align-self: flex-start;
-    height: 2rem;
-    font-size: 0.875rem;
-    letter-spacing: 0.1019rem;
-    line-height: 1.125rem;
-    margin-block: 1.813rem 2.063rem;
+    height: 32px;
+    font-size: 14px;
+    letter-spacing: 1.6304px;
+    line-height: 18px;
+    margin-block: 29.008px 33.008px;
     background-color: var(--ambiantB10);
-    border-radius: 0.375rem;
-    padding: 0.25rem 1rem;
+    border-radius: 6px;
+    padding: 4px 16px;
     box-shadow:
-      0 0.125rem 0.125rem -0.0625rem rgba(255, 171, 88, 0.27),
-      0 0.0625rem 0.125rem rgba(0, 0, 0, 0.16);
+      0 2px 2px -1px rgba(255, 171, 88, 0.27),
+      0 1px 2px rgba(0, 0, 0, 0.16);
 
     .micro-macro-separator {
-      width: 0.0625rem;
-      margin-inline: 0.625rem;
+      width: 1px;
+      margin-inline: 10px;
       background-color: var(--grey20);
     }
   }
@@ -65,7 +65,7 @@
     display: flex;
     align-items: center;
     top: 0;
-    padding-bottom: 0.5rem;
+    padding-bottom: 8px;
     z-index: 1;
     background-color: var(--coolgray1);
     .timetable-collapse-button {
@@ -77,8 +77,8 @@
       background-color: var(--secondary);
       color: var(--white100);
       border: unset;
-      border-radius: 0.25rem;
-      padding: 0.5rem;
+      border-radius: 4px;
+      padding: 8px;
       z-index: 2;
     }
   }
@@ -92,18 +92,18 @@
     overflow: hidden;
     z-index: 3;
     background-color: #d7d7d7aa;
-    border-radius: 0.25rem;
+    border-radius: 4px;
     animation: fadein 1s;
-    backdrop-filter: blur(0.25rem);
+    backdrop-filter: blur(4px);
 
     .scenario-timetable-managetrainschedule-header {
       display: flex;
       flex-direction: column;
-      padding: 0.5rem 0.5rem 0;
+      padding: 8px 8px 0;
     }
 
     .scenario-timetable-managetrainschedule-body {
-      padding: 0.5rem;
+      padding: 8px;
       height: 100%;
     }
   }
@@ -116,10 +116,10 @@
     flex-direction: column;
     height: var(--content-height);
     background-color: var(--black5);
-    min-width: 24.5rem;
-    max-width: 29.5rem;
-    padding: 0.875rem 1.5rem 0 1.5rem;
-    box-shadow: inset -0.0625rem 0 var(--black5);
+    min-width: 392px;
+    max-width: 472px;
+    padding: 14px 24px 0 24px;
+    box-shadow: inset -1px 0 var(--black5);
 
     .scenario-sidemenu :first-child:hover {
       .update-scenario {
@@ -132,11 +132,11 @@
       align-items: center;
       justify-content: space-between;
       font-weight: 600;
-      font-size: 1.5rem;
+      font-size: 24px;
       color: var(--black100);
-      font-size: 1.125rem;
+      font-size: 18px;
       text-align: left;
-      line-height: 1.5rem;
+      line-height: 24px;
     }
 
     .scenario-description {
@@ -145,19 +145,19 @@
       .scenario-details-description {
         position: relative;
         color: var(--grey50);
-        font-size: 0.875rem;
+        font-size: 14px;
         font-weight: 400;
-        line-height: 1.25rem;
-        margin: 0.25rem 1rem 0 0;
+        line-height: 20px;
+        margin: 4px 16px 0 0;
         word-break: break-all;
       }
 
       .not-opened {
         overflow: hidden;
-        max-height: 3.75rem;
+        max-height: 60px;
         max-width: 100%;
         span {
-          padding-inline: 0.2188rem;
+          padding-inline: 3.5008px;
           position: absolute;
           bottom: 0;
           right: 0;
@@ -169,54 +169,54 @@
       .opened {
         position: absolute;
         top: 0;
-        left: -0.5rem;
+        left: -8px;
         background-color: var(--white100);
         color: var(--grey80);
-        padding: 3.375rem 3.5rem 3.125rem 3.5rem;
-        font-size: 1rem;
+        padding: 54px 56px 50px 56px;
+        font-size: 16px;
         font-weight: 400;
-        line-height: 1.5rem;
+        line-height: 24px;
         z-index: 3;
-        border-radius: 0.375rem;
+        border-radius: 6px;
         box-shadow:
-          0rem 0.375rem 1.3125rem -0.3125rem rgba(255, 171, 88, 0.31),
-          0rem 1rem 1.875rem -0.3125rem rgba(0, 0, 0, 0.19),
-          0rem 0.1875rem 0.3125rem -0.125rem rgba(0, 0, 0, 0.16);
-        width: calc(100% + 7.5rem);
+          0px 6px 21px -5px rgba(255, 171, 88, 0.31),
+          0px 16px 30px -5px rgba(0, 0, 0, 0.19),
+          0px 3px 5px -2px rgba(0, 0, 0, 0.16);
+        width: calc(100% + 120px);
         .displayed-description {
           position: absolute;
-          top: 1rem - 0.3125rem;
-          right: 1rem;
+          top: 16px - 5px;
+          right: 16px;
         }
       }
 
       .scenario-collapse-button {
         position: absolute;
-        padding-bottom: 0.188rem;
-        padding-inline: 0.4375rem 0.125rem;
-        height: 2.125rem;
-        width: 1.5rem;
+        padding-bottom: 3.008px;
+        padding-inline: 7px 2px;
+        height: 34px;
+        width: 24px;
         color: var(--grey40);
         background-color: var(--ambiantB10);
-        border-radius: 0.313rem 0 0 0.313rem;
+        border-radius: 5.008px 0 0 5.008px;
         top: 0;
-        transform: translateX(1.5rem);
-        box-shadow: 0 0 0 0.0625rem var(--black10);
-        clip-path: inset(-0.0625rem 0 -0.0625rem -0.0625rem);
+        transform: translateX(24px);
+        box-shadow: 0 0 0 1px var(--black10);
+        clip-path: inset(-1px 0 -1px -1px);
       }
 
       .update-scenario {
         // button has to be positioned regarding the description
         position: absolute;
         display: none;
-        right: 1rem;
-        bottom: -3rem;
-        padding: 0.188rem 0.5rem;
+        right: 16px;
+        bottom: -48px;
+        padding: 3.008px 8px;
         transition: 0.2s;
-        height: 2rem;
-        width: 2rem;
-        border-radius: 0.25rem;
-        box-shadow: 0 0 0 0.094rem rgba(255, 255, 255, 1) inset;
+        height: 32px;
+        width: 32px;
+        border-radius: 4px;
+        box-shadow: 0 0 0 1.504px rgba(255, 255, 255, 1) inset;
         background-color: var(--ambiantB10);
         color: var(--primary60);
         &:hover {
@@ -226,45 +226,45 @@
       }
     }
     .scenario-details-electrical-profile-set {
-      font-size: 0.75rem;
+      font-size: 12px;
       font-weight: 400;
-      line-height: 1rem;
-      margin-top: 0.375rem;
+      line-height: 16px;
+      margin-top: 6px;
       color: var(--black100);
     }
     .scenario-details-infra-name {
-      font-size: 0.75rem;
+      font-size: 12px;
       font-weight: 400;
-      line-height: 1rem;
+      line-height: 16px;
       color: var(--black100);
-      margin-top: 0.25rem;
+      margin-top: 4px;
       display: flex;
       align-items: center;
       img {
-        height: 1rem;
+        height: 16px;
       }
     }
 
     .infra-loaded {
-      width: 0.5rem;
-      height: 0.5rem;
+      width: 8px;
+      height: 8px;
       background-color: var(--success30);
       border-radius: 50%;
-      margin-block: 0.3125rem 0.1875rem;
+      margin-block: 5px 3px;
     }
 
     .scenario-details-infra-error {
       color: var(--error60);
       background-color: var(--error5);
-      margin: 1.3125rem -1.4375rem 0 -1.5rem;
-      padding: 0.5625rem 3.5rem 0.6875rem 1.5rem;
+      margin: 21px -23px 0 -24px;
+      padding: 9px 56px 11px 24px;
       display: flex;
 
       .error-description {
-        margin-left: 1rem;
-        font-size: 0.875rem;
+        margin-left: 16px;
+        font-size: 14px;
         font-weight: 400;
-        line-height: 1.25rem;
+        line-height: 20px;
       }
     }
 
@@ -277,10 +277,10 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        height: 2.375rem;
-        margin-bottom: 1.25rem;
-        padding: 0.875rem 0.5rem 0 0.5rem;
-        border-top: 0.25rem rgba(0, 0, 0, 0.05) solid;
+        height: 38px;
+        margin-bottom: 20px;
+        padding: 14px 8px 0 8px;
+        border-top: 4px rgba(0, 0, 0, 0.05) solid;
         color: var(--primary60);
         font-weight: 600;
         button:hover {
@@ -296,8 +296,8 @@
         border: none;
         color: var(--secondary);
         transition: 0.2s;
-        padding: 0.25rem 0.5rem;
-        border-radius: 0.25rem;
+        padding: 4px 8px;
+        border-radius: 4px;
         &.on {
           color: var(--white100);
           background-color: var(--secondary);
@@ -312,12 +312,12 @@
       }
       .multiselect-delete {
         border: none;
-        padding: 0.25rem 0.5rem;
-        border-radius: 0.25rem;
+        padding: 4px 8px;
+        border-radius: 4px;
         border-color: transparent;
         background-color: rgba(var(--red-rgb), 0.75);
         color: var(--white100);
-        height: 2rem;
+        height: 32px;
         &.disabled {
           background-color: rgba(var(--secondary-rgb), 0.5);
         }
@@ -333,26 +333,26 @@
         background: var(--ambiantB15);
         overflow: auto;
         min-height: 0;
-        margin-bottom: 1.5rem;
-        border-radius: 0.625rem;
+        margin-bottom: 24px;
+        border-radius: 10px;
         box-shadow:
-          0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.22),
-          0 0.25rem 0.438rem -0.188rem rgba(255, 171, 88, 0.17),
-          inset 0 0.063rem 0 0 #ffffff;
+          0 2px 4px 0 rgba(0, 0, 0, 0.22),
+          0 4px 7.008px -3.008px rgba(255, 171, 88, 0.17),
+          inset 0 1.008px 0 0 #ffffff;
 
         .checkbox-title {
           display: flex;
-          margin-left: 0.5rem;
+          margin-left: 8px;
           position: relative;
-          line-height: 1.5rem;
+          line-height: 24px;
 
           &::after {
             content: '';
             position: absolute;
             top: 0;
-            right: -1.5rem;
-            width: 1.5rem;
-            height: 1.375rem;
+            right: -24px;
+            width: 24px;
+            height: 22px;
             background: linear-gradient(270deg, rgba(247, 246, 238, 0), rgba(247, 246, 238, 1));
             z-index: 1;
           }
@@ -363,33 +363,33 @@
         }
 
         .checkbox-label {
-          margin: 0 0.5rem;
-          font-size: 1rem;
+          margin: 0 8px;
+          font-size: 16px;
           font-weight: 600;
-          max-width: 10rem;
+          max-width: 160px;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
           display: flex;
           align-items: center;
           .train-projected {
-            height: 1.25rem;
-            width: 1.25rem;
-            margin-right: 0.375rem;
+            height: 20px;
+            width: 20px;
+            margin-right: 6px;
             background-color: var(--info30);
-            border-radius: 0.25rem;
+            border-radius: 4px;
             position: relative;
             svg {
               position: absolute;
               top: 0;
               left: 0;
-              transform: translate(0.125rem, 0.125rem);
+              transform: translate(2px, 2px);
             }
           }
         }
 
         .scenario-timetable-toolbar {
-          padding: 0 1rem 0 0.625rem;
+          padding: 0 16px 0 10px;
           position: sticky;
           top: 0;
           z-index: 2;
@@ -397,16 +397,16 @@
 
           .toolbar-header {
             display: flex;
-            gap: 0.5rem;
-            padding-block: 0.6875rem 1.0625rem;
+            gap: 8px;
+            padding-block: 11px 17px;
             align-items: center;
 
             &.with-details {
-              padding-bottom: 0.75rem;
+              padding-bottom: 12px;
             }
 
             .label {
-              margin-left: 0.25rem;
+              margin-left: 4px;
               color: var(--grey80);
             }
 
@@ -422,47 +422,47 @@
           .action-buttons {
             display: flex;
             justify-content: space-between;
-            padding: 0 0.6563rem 1.5rem 1.094rem;
+            padding: 0 10.5008px 24px 17.504px;
           }
         }
 
         .scenario-timetable-departure-date {
-          height: 2rem;
-          line-height: 1.8rem;
+          height: 32px;
+          line-height: 28.8px;
           text-align: center;
           background-color: var(--black5);
-          border-top: 0.0625rem solid var(--white75);
-          border-bottom: 0.0625rem solid var(--black25);
+          border-top: 1px solid var(--white75);
+          border-bottom: 1px solid var(--black25);
           color: var(--grey50);
-          font-size: 14px;
+          font-size: 0.875rem;
         }
 
         .invalid-trains {
           display: flex;
           background: var(--warning5);
-          box-shadow: inset 0 0.0625rem var(--white100);
-          height: 3rem;
-          font-size: 1rem;
+          box-shadow: inset 0 1px var(--white100);
+          height: 48px;
+          font-size: 16px;
           font-weight: 600;
-          line-height: 1.5rem;
+          line-height: 24px;
           color: var(--warning60);
-          border-top: solid 0.0625rem var(--warning30);
-          border-bottom: solid 0.0625rem var(--warning30);
+          border-top: solid 1px var(--warning30);
+          border-bottom: solid 1px var(--warning30);
           svg {
-            margin: 1rem;
+            margin: 16px;
             color: var(--warning30);
           }
           .invalid-trains-message {
-            height: 1.5rem;
-            margin-top: 0.6875rem;
+            height: 24px;
+            margin-top: 11px;
           }
         }
 
         .filter {
           background-color: var(--ambiantB5);
-          height: 1.938rem;
-          border-top: solid 0.063rem rgba(0, 0, 0, 0.1);
-          border-bottom: solid 0.063rem rgba(0, 0, 0, 0.25);
+          height: 31.008px;
+          border-top: solid 1.008px rgba(0, 0, 0, 0.1);
+          border-bottom: solid 1.008px rgba(0, 0, 0, 0.25);
           display: flex;
           justify-content: center;
 
@@ -486,20 +486,20 @@
           display: flex;
           position: relative;
           background-color: var(--ambiantB10);
-          box-shadow: inset 0 -0.063rem 0 0 rgba(0, 0, 0, 0.25);
+          box-shadow: inset 0 -1.008px 0 0 rgba(0, 0, 0, 0.25);
 
           .clickable-button {
             width: 100%;
-            padding: 0.75rem 0;
+            padding: 12px 0;
           }
 
           &::after {
             content: '';
             position: absolute;
             left: 0;
-            top: 0.063rem;
+            top: 1.008px;
             width: 100%;
-            height: 0.063rem;
+            height: 1.008px;
             background-color: white;
           }
 
@@ -520,26 +520,26 @@
                 overflow: hidden;
 
                 .status-invalid {
-                  width: 0.25rem;
-                  height: 1rem;
+                  width: 4px;
+                  height: 16px;
                   background-color: var(--error60);
-                  border-radius: 0.313rem;
-                  margin: 0 0.438rem 0 0.313rem;
+                  border-radius: 5.008px;
+                  margin: 0 7.008px 0 5.008px;
                 }
 
                 /* Trick to hide the image if too narrow */
                 .rolling-stock-img {
                   overflow: hidden;
-                  height: 1.375rem;
+                  height: 22px;
 
                   &::before {
                     content: '';
                     display: inline-block;
-                    height: 0.7rem;
+                    height: 11.2px;
                   }
                   img {
-                    min-width: 2.5rem;
-                    height: 0.7rem;
+                    min-width: 40px;
+                    height: 11.2px;
                     object-fit: cover;
                     object-position: left;
                     transform: scaleX(-1);
@@ -549,22 +549,22 @@
             }
             .train-time {
               display: flex;
-              flex-basis: 10rem;
+              flex-basis: 160px;
               flex-grow: 0;
               flex-shrink: 0;
               align-items: center;
               justify-content: right;
 
               .status-icon {
-                width: 1.5rem;
-                height: 1.5rem;
+                width: 24px;
+                height: 24px;
                 color: var(--info60);
                 display: flex;
                 justify-content: center;
                 align-items: center;
-                margin: 0 0.25rem;
+                margin: 0 4px;
                 span {
-                  padding-bottom: 0.25rem;
+                  padding-bottom: 4px;
                 }
                 &.not-honored-or-too-fast {
                   color: var(--warning60);
@@ -573,20 +573,20 @@
 
               .scenario-timetable-train-departure {
                 font-weight: 400;
-                font-size: 1rem;
+                font-size: 16px;
               }
 
               .scenario-timetable-train-arrival {
                 font-weight: 400;
-                font-size: 1rem;
+                font-size: 16px;
               }
 
               .status-dot {
-                width: 0.25rem;
-                height: 1rem;
+                width: 4px;
+                height: 16px;
                 background-color: transparent;
-                border-radius: 0.313rem;
-                margin: 0 0.438rem 0 0.313rem;
+                border-radius: 5.008px;
+                margin: 0 7.008px 0 5.008px;
 
                 &.not-honored-or-too-fast {
                   background-color: var(--warning30);
@@ -599,44 +599,44 @@
             width: 100%;
             display: flex;
             align-items: center;
-            font-size: 0.8rem;
-            height: 1.75rem;
+            font-size: 12.8px;
+            height: 28px;
             flex-wrap: wrap;
             justify-content: space-between;
             .more-info-left {
-              padding-left: 2.5rem;
+              padding-left: 40px;
               .more-info-item {
                 display: inline-block;
-                margin-right: 1rem;
+                margin-right: 16px;
               }
             }
             .duration-time {
               text-align: end;
-              margin-right: 3.4375rem;
+              margin-right: 55px;
             }
           }
 
           .action-buttons {
             display: none;
             position: absolute;
-            right: 11rem;
-            top: 0.25rem;
-            height: 2.5rem;
+            right: 176px;
+            top: 4px;
+            height: 40px;
             justify-content: center;
             align-items: center;
-            padding-left: 0.5rem;
-            backdrop-filter: blur(0.125rem);
+            padding-left: 8px;
+            backdrop-filter: blur(2px);
 
             button {
-              padding: 0.188rem 0.5rem;
+              padding: 3.008px 8px;
               transition: 0.2s;
-              height: 2rem;
-              width: 2rem;
-              border-radius: 0.25rem;
-              box-shadow: 0 0 0 0.094rem rgba(255, 255, 255, 1) inset;
+              height: 32px;
+              width: 32px;
+              border-radius: 4px;
+              box-shadow: 0 0 0 1.504px rgba(255, 255, 255, 1) inset;
               background-color: var(--ambiantB10);
               color: var(--primary60);
-              margin-right: 0.5rem;
+              margin-right: 8px;
               &:hover {
                 background-color: var(--white100);
                 color: var(--primary80);
@@ -649,12 +649,12 @@
 
           &:not(.selected) {
             background-color: var(--ambiantB10);
-            box-shadow: inset 0 -0.063rem 0 0 rgba(0, 0, 0, 0.25);
+            box-shadow: inset 0 -1.008px 0 0 rgba(0, 0, 0, 0.25);
           }
 
           &.selected:not(.invalid) {
             background-color: var(--selection20);
-            box-shadow: inset 0 -0.063rem 0 0 rgba(0, 0, 0, 0.25);
+            box-shadow: inset 0 -1.008px 0 0 rgba(0, 0, 0, 0.25);
             .checkbox-title::after {
               background: linear-gradient(
                 270deg,
@@ -667,7 +667,7 @@
           &.invalid {
             background-image: url('data:image/svg+xml,%3Csvg version="1.1" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"%3E%3Ctitle%3EAssets/TrainList/InvalidTrain%3C/title%3E%3Cg fill-rule="evenodd"%3E%3Crect width="48" height="48" fill="%23FFEEED"/%3E%3Cpath d="m48 26v22h-22l22-22zm0-26-48 48v-22l26-26h22z" fill="%23FF6868" opacity=".1"/%3E%3C/g%3E%3C/svg%3E');
             background-repeat: repeat;
-            box-shadow: inset 0 -0.063rem 0 0 rgba(0, 0, 0, 0.25);
+            box-shadow: inset 0 -1.008px 0 0 rgba(0, 0, 0, 0.25);
             .checkbox-title {
               min-width: 0;
             }
@@ -708,19 +708,19 @@
 
         .sticky-filter {
           position: sticky;
-          top: 3.275rem;
+          top: 52.4px;
           z-index: 2;
 
           &.selection-mode-open {
-            top: 5.9375rem;
+            top: 95px;
           }
         }
 
         .filter-panel {
-          padding: 0.4375rem 1.25rem 1.4375rem 0.4375rem;
+          padding: 7px 20px 23px 7px;
           background-color: var(--ambiantB5);
-          border-top: solid 0.063rem var(--white100);
-          border-bottom: solid 0.063rem rgba(0, 0, 0, 0.25);
+          border-top: solid 1.008px var(--white100);
+          border-bottom: solid 1.008px rgba(0, 0, 0, 0.25);
           display: flex;
           flex-direction: column;
           position: relative;
@@ -732,27 +732,27 @@
 
           .close-filter {
             position: absolute;
-            right: 0.75rem;
-            top: 0.5rem;
+            right: 12px;
+            top: 8px;
             z-index: 1;
           }
 
           .validity-filter {
             display: flex;
-            margin-bottom: 1rem;
-            font-size: 0.8rem;
+            margin-bottom: 16px;
+            font-size: 12.8px;
 
             .options-btn {
-              padding: 0.375rem 0.625rem;
+              padding: 6px 10px;
             }
           }
 
           .compositions-code {
             align-self: start;
-            padding: 0.625rem 0 0rem 1rem;
+            padding: 10px 0 0px 16px;
             label {
-              height: 1.5rem;
-              line-height: 1.5rem;
+              height: 24px;
+              line-height: 24px;
               letter-spacing: 0;
               text-align: left;
               vertical-align: top;
@@ -761,43 +761,43 @@
             .composition-tag-filter {
               display: flex;
               flex-wrap: wrap;
-              gap: 0.75rem;
+              gap: 12px;
 
               button {
-                border-radius: 0.25rem;
-                border: 0.063rem solid rgba(182, 178, 175, 1);
+                border-radius: 4px;
+                border: 1.008px solid rgba(182, 178, 175, 1);
                 background-color: rgba(250, 249, 245, 1);
-                font-size: 0.875rem;
+                font-size: 14px;
                 font-weight: 400;
                 text-align: left;
-                line-height: 1.25rem;
-                padding: 0.125rem 0.5rem;
+                line-height: 20px;
+                padding: 2px 8px;
               }
 
               button:hover {
                 background-color: var(--white100);
                 color: var(--black100);
-                border: 0.063rem solid var(--black100);
+                border: 1.008px solid var(--black100);
               }
 
               .selectedTag {
                 background-color: var(--grey60);
                 color: var(--white100);
-                border: 0.063rem solid var(--black100);
+                border: 1.008px solid var(--black100);
               }
             }
           }
         }
         .bottom-timetables-trains {
           background-color: var(--ambiantB15);
-          padding-bottom: 1rem;
-          box-shadow: inset 0 0.0625rem rgba(0, 0, 0, 0.25);
+          padding-bottom: 16px;
+          box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
           position: sticky;
           bottom: 0;
           z-index: 1;
         }
         .empty-list {
-          height: 7rem;
+          height: 112px;
         }
       }
     }
@@ -813,17 +813,17 @@
     z-index: 3;
     height: 100%;
     width: 100%;
-    padding-left: 0.5rem;
+    padding-left: 8px;
     animation: fadein 1s;
     overflow: auto;
 
     .invalid-feedback {
-      font-size: 0.7rem;
+      font-size: 11.2px;
     }
   }
 
   .scenario-results {
-    padding-top: 0.5rem;
+    padding-top: 8px;
     position: relative;
     overflow: auto;
     width: 100%;
@@ -832,6 +832,6 @@
 
   .macro-container {
     // the value subtracted is egal to the height of scenario-timetable-collapsed + micro-macro-buttons + scenario-results padding
-    height: calc(var(--content-height) - 9.751rem);
+    height: calc(var(--content-height) - 156.016px);
   }
 }