diff --git a/.vscode/settings.json b/.vscode/settings.json
index c856832..270eaeb 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,6 @@
 {
     "idf.flashType": "UART",
-    "idf.portWin": "COM3",
+    "idf.portWin": "COM72",
     "idf.adapterTargetName": "esp32s3",
     "idf.openOcdConfigs": [
         "interface/ftdi/esp32_devkitj_v1.cfg",
diff --git a/main/http_server/axe-os/only-gzip.js b/main/http_server/axe-os/only-gzip.js
index 707e34c..bd78cec 100644
--- a/main/http_server/axe-os/only-gzip.js
+++ b/main/http_server/axe-os/only-gzip.js
@@ -4,13 +4,27 @@ const path = require('path');
 const directory = './dist/axe-os';
 
 fs.readdir(directory, (err, files) => {
-  if (err) throw err;
+    if (err) throw err;
 
-  for (const file of files) {
-    if (!file.endsWith('.gz')) {
-      fs.unlink(path.join(directory, file), err => {
-        if (err) throw err;
-      });
+    for (const file of files) {
+        const filePath = path.join(directory, file);
+
+        fs.stat(filePath, (err, stats) => {
+            if (err) throw err;
+
+            if (stats.isDirectory()) {
+                // If it's a directory, call rmdir after deleting its contents
+                fs.rmdir(filePath, { recursive: true }, (err) => {
+                    if (err) throw err;
+                    console.log(`Removed directory: ${filePath}`);
+                });
+            } else if (!file.endsWith('.gz')) {
+                // If it's a file and doesn't end with .gz, unlink it
+                fs.unlink(filePath, (err) => {
+                    if (err) throw err;
+                    console.log(`Removed file: ${filePath}`);
+                });
+            }
+        });
     }
-  }
-});
\ No newline at end of file
+});
diff --git a/main/http_server/axe-os/src/app/components/home/home.component.html b/main/http_server/axe-os/src/app/components/home/home.component.html
index 604700b..f3c7d7d 100644
--- a/main/http_server/axe-os/src/app/components/home/home.component.html
+++ b/main/http_server/axe-os/src/app/components/home/home.component.html
@@ -3,206 +3,172 @@
 </ng-template>
 <ng-container *ngIf="info$ | async as info; else loading">
     <!-- Temp warning alert -->
-    <p-message *ngIf="info.overheat_mode" 
-        severity="error" 
-        styleClass="w-full mb-4 py-4 border-round-xl"
+    <p-message *ngIf="info.overheat_mode" severity="error" styleClass="w-full mb-4 py-4 border-round-xl"
         text="Bitaxe has overheated - See settings">
     </p-message>
 
     <div class="grid" *ngIf="info$ | async as info; else loading">
         <div class="col-12">
-            <div class="card">
-                <div class="grid mb-4">
-                    <div class="col-12 md:col-6 xl:col-3">
-                        <div class="card mb-0">
-                            <div class="flex justify-content-between mb-3">
-                                <div>
-                                    <span class="block text-500 font-medium mb-3">Hash Rate</span>
-                                    <div class="text-900 font-medium text-xl">{{info.hashRate * 1000000000 | hashSuffix}}
-                                    </div>
-                                </div>
-                                <div class="flex align-items-center justify-content-center bg-orange-100 border-round"
-                                    [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
-                                    <i class="pi pi-bolt text-orange-500 text-xl"></i>
+            <div class="grid">
+                <div class="col-12 md:col-6 xl:col-3">
+                    <div class="card mb-0">
+                        <div class="flex justify-content-between mb-3">
+                            <div>
+                                <span class="block text-500 font-medium mb-3">Hash Rate</span>
+                                <div class="text-900 font-medium text-xl">{{info.hashRate * 1000000000 | hashSuffix}}
                                 </div>
                             </div>
-                            <ng-container *ngIf="expectedHashRate$ | async as expectedHashRate">
-                                <span class="text-green-500 font-medium">{{expectedHashRate * 1000000000 | hashSuffix}}</span>
-                                <span class="text-500"> expected</span>
-                            </ng-container>
                         </div>
+                        <ng-container *ngIf="expectedHashRate$ | async as expectedHashRate">
+                            <span class="text-green-500 font-medium">{{expectedHashRate * 1000000000 |
+                                hashSuffix}}</span>
+                            <span class="text-500"> expected</span>
+                        </ng-container>
                     </div>
-                    <div class="col-12 md:col-6 xl:col-3">
-                        <div class="card mb-0">
-                            <div class="flex justify-content-between mb-3">
-                                <div>
-                                    <span class="block text-500 font-medium mb-3">Shares</span>
-                                    <div class="text-900 font-medium text-xl">{{info.sharesAccepted | number: '1.0-0'}}</div>
-                                </div>
-                                <div class="flex align-items-center justify-content-center bg-blue-100 border-round"
-                                    [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
-                                    <i class="pi pi-send text-blue-500 text-xl"></i>
+                </div>
+                <div class="col-12 md:col-6 xl:col-3">
+                    <div class="card mb-0">
+                        <div class="flex justify-content-between mb-3">
+                            <div>
+                                <span class="block text-500 font-medium mb-3">Efficiency</span>
+                                <div class="text-900 font-medium text-xl">
+                                    <td>{{info.power / (info.hashRate/1000) | number: '1.2-2'}} <small>J/TH</small>
+                                    </td>
                                 </div>
                             </div>
-                            <span class="text-red-500 font-medium">{{info.sharesRejected | number: '1.0-0'}} </span>
-                            <span class="text-500">rejected</span>
                         </div>
+                        <ng-container *ngIf="expectedHashRate$ | async as expectedHashRate">
+                            <span class="text-green-500 font-medium">{{info.power / (expectedHashRate/1000) | number:
+                                '1.2-2'}} <small>J/TH</small>
+                            </span>
+                            <span class="text-500"> expected</span>
+                        </ng-container>
+                        <!-- <span class="text-green-500 font-medium">%52+ </span>
+                        <span class="text-500">since last week</span> -->
                     </div>
-                    <div class="col-12 md:col-6 xl:col-3">
-                        <div class="card mb-0">
-                            <div class="flex justify-content-between mb-3">
-                                <div>
-                                    <span class="block text-500 font-medium mb-3">Efficiency</span>
-                                    <div class="text-900 font-medium text-xl">
-                                        <td>{{info.power / (info.hashRate/1000) | number: '1.2-2'}} <small>J/TH</small>
-                                        </td>
-                                    </div>
-                                </div>
-                                <div class="flex align-items-center justify-content-center bg-orange-100 border-round"
-                                    [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
-                                    <i class="pi pi-thumbs-up text-orange-500 text-xl"></i>
+                </div>
+                <div class="col-12 md:col-6 xl:col-3">
+                    <div class="card mb-0">
+                        <div class="flex justify-content-between mb-3">
+                            <div>
+                                <span class="block text-500 font-medium mb-3">Shares</span>
+                                <div class="text-900 font-medium text-xl">{{info.sharesAccepted | number: '1.0-0'}}
                                 </div>
                             </div>
-                            <ng-container *ngIf="expectedHashRate$ | async as expectedHashRate">
-                                <span class="text-green-500 font-medium">{{info.power / (expectedHashRate/1000) | number: '1.2-2'}} <small>J/TH</small>
-                                </span>
-                                <span class="text-500"> expected</span>
-                            </ng-container>
-                            <!-- <span class="text-green-500 font-medium">%52+ </span>
-                            <span class="text-500">since last week</span> -->
                         </div>
+                        <span class="text-red-500 font-medium">{{info.sharesRejected | number: '1.0-0'}} </span>
+                        <span class="text-500">rejected</span>
                     </div>
-                    <div class="col-12 md:col-6 xl:col-3">
-                        <div class="card mb-0">
-                            <div class="flex justify-content-between mb-3">
-                                <div>
-                                    <span class="block text-500 font-medium mb-3">Best Difficulty</span>
-                                    <div class="text-900 font-medium text-xl">{{info.bestDiff}}
-                                        <span class="text-500">all-time best</span>
-                                    </div>
-                                </div>
-                                <div class="flex align-items-center justify-content-center bg-yellow-100 border-round"
-                                    [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
-                                    <i class="pi pi-star-fill text-yellow-500 text-xl"></i>
-                                </div>
-                            </div>
-                            <span class="text-900 font-medium">{{info.bestSessionDiff}} </span>
-                            <span class="text-500">since system boot</span>
-                            <!-- <span class="text-green-500 font-medium">520 </span>
-                            <span class="text-500">newly registered</span> -->
-                        </div>
-                    </div>
-
                 </div>
 
+                <div class="col-12 md:col-6 xl:col-3">
+                    <div class="card mb-0">
+                        <div class="flex justify-content-between mb-3">
+                            <div>
+                                <span class="block text-500 font-medium mb-3">Best Difficulty</span>
+                                <div class="text-900 font-medium text-xl">{{info.bestDiff}}
+                                    <span class="text-500">all-time best</span>
+                                </div>
+                            </div>
+                        </div>
+                        <span class="text-900 font-medium">{{info.bestSessionDiff}} </span>
+                        <span class="text-500">since system boot</span>
+                        <!-- <span class="text-green-500 font-medium">520 </span>
+                        <span class="text-500">newly registered</span> -->
+                    </div>
+                </div>
 
+            </div>
+        </div>
+        <div class="col-12  mb-4">
+            <div class="card">
                 <p-chart [data]="chartData" [options]="chartOptions"></p-chart>
             </div>
         </div>
-        <div class="col-12 lg:col-12 xl:col-6">
+        <div class="col-12 lg:col-6 xl:col-6">
             <div class="card">
-                <h5>Power</h5>
-                <div class="grid text-center">
-                    <div class="col-6 sm:col-4">
-                        <p-knob [min]="3" [max]="maxPower" [readonly]="true" [(ngModel)]="info.power"
-                            valueTemplate="{value}W"></p-knob>
-                        Power
+               <h4 style="text-align: center;">Power</h4>
+                <div class="grid">
+                    <div class="col-12">
+                        <h6>Power <span style="float: right;">{{info.power}} W</span></h6>
+                        <p-progressBar [value]="(info.power / maxPower) * 100" [style]="{ height: '6px' }" >
+                            <ng-template pTemplate="content" let-value></ng-template>
+                        </p-progressBar>
                     </div>
 
-                    <div class="col-6 sm:col-4">
-                        <p-knob [min]="4.5" [max]="5.5" [readonly]="true" [(ngModel)]="info.voltage"
-                            valueTemplate="{value}V"
-                            [valueColor]="info.voltage < 4.8 ? '#ff0000' : 'var(--primary-color, Black)'"></p-knob>
-                        Input Voltage
+                    <div class="col-12">
+
+                        <h6>Input Voltage <span style="float: right;">{{info.voltage}} V</span></h6>
+                        <p-progressBar [value]="(info.voltage / 5.5) * 100" [style]="{ height: '6px' }" >
+                            <ng-template pTemplate="content" let-value>
+                            </ng-template>
+                        </p-progressBar>
                         <span class="danger" *ngIf="info.voltage < 4.8">&nbsp; Danger: Low voltage</span>
                     </div>
 
-                    <div class="col-6 sm:col-4">
-                        <p-knob [min]="0.9" [max]="1.8" [readonly]="true" [(ngModel)]="info.coreVoltage"
-                            valueTemplate="{value}V"></p-knob>
-                        ASIC Voltage Requested
+                    <div class="col-12">
+                        <!-- <p-knob [min]="100" [max]="maxFrequency" [readonly]="true" [(ngModel)]="info.frequency"
+                            valueTemplate="{value}"></p-knob>
+                        ASIC Frequency (MHz) -->
+
+                        <h6>ASIC Frequency <span style="float: right;">{{info.frequency}} Mhz</span></h6>
+                        <p-progressBar [value]="(info.frequency / maxFrequency) * 100" [style]="{ height: '6px' }" >
+                            <ng-template pTemplate="content" let-value></ng-template>
+                        </p-progressBar>
                     </div>
+                    <div class="col-12">
+                        <!-- <p-knob [min]="0.9" [max]="1.8" [readonly]="true" [(ngModel)]="info.coreVoltageActual"
+                            valueTemplate="{value}V"></p-knob>
+                        ASIC Voltage Measured -->
+                        <h6>Measured ASIC Voltage <span style="float: right;">{{info.coreVoltageActual}} V</span></h6>
+                        <p-progressBar [value]="(info.coreVoltageActual / 1.8) * 100" [style]="{ height: '6px' }" >
+                            <ng-template pTemplate="content" let-value></ng-template>
+                        </p-progressBar>
+                    </div>
+
                 </div>
 
             </div>
         </div>
 
-        <div class="col-12 lg:col-6 xl:col-3">
+        <div class="col-12 lg:col-6 xl:col-6">
             <div class="card">
-                <h5>Heat</h5>
-                <div class="grid text-center">
-                    <div class="col-6">
-                        <p-knob [min]="20" [max]="maxTemp" [readonly]="true" [(ngModel)]="info.temp"
-                            valueTemplate="{value}°C"
-                            [valueColor]="info.temp >= 70 ? '#ff0000' : 'var(--primary-color, Black)'">
-                        </p-knob>
-                        ASIC Temperature
+                <h4 style="text-align: center;">Heat</h4>
+                <div class="grid">
+                    <div class="col-12">
+
+                        <h6>ASIC Temperature <span style="float: right;">{{info.temp}}&deg;C</span></h6>
+                        <p-progressBar [value]="(info.temp / maxTemp) * 100" [style]="{ height: '6px' }" >
+                            <ng-template pTemplate="content" let-value></ng-template>
+                        </p-progressBar>
 
                         <span class="danger" *ngIf="info.temp >= 70">&nbsp;
                             Danger:
                             High Temperature</span>
                     </div>
-                    <div class="col-6" *ngIf="info.vrTemp > 0">
-                        <p-knob  [min]="20" [max]="145" [readonly]="true" [(ngModel)]="info.vrTemp"
-                            valueTemplate="{value}C"
-                            [valueColor]="info.vrTemp >= 105 ? '#ff0000' : 'var(--primary-color, Black)'"></p-knob>
-                        Voltage Regulator Temperature
+                    <div class="col-12" *ngIf="info.vrTemp > 0">
+
+                        <h6>Voltage Regulator Temperature <span style="float: right;">{{info.vrTemp}}&deg;C</span></h6>
+                        <p-progressBar [value]="(info.vrTemp / 120) * 100" [style]="{ height: '6px' }" >
+                            <ng-template pTemplate="content" let-value></ng-template>
+                        </p-progressBar>
 
                         <span class="danger" *ngIf="info.vrTemp >= 105">&nbsp;
                             Danger:
                             High Temperature</span>
                     </div>
-                    <div class="col-6">
-                        <p-knob [min]="0" [max]="100" [readonly]="true" [(ngModel)]="info.fanspeed"
-                            valueTemplate="{value}%"></p-knob>
-                        Fan %
+                    <div class="col-12">
+                        <h6>Fan Speed<span style="float: right;">{{info.fanspeed}}%  ({{info.fanrpm}} RPM)</span></h6>
+                        <p-progressBar [value]="info.fanspeed" [style]="{ height: '6px' }" >
+                            <ng-template pTemplate="content" let-value></ng-template>
+                        </p-progressBar>
                     </div>
-                    <div class="col-6">
-                        <p-knob [min]="0" [max]="20000" [readonly]="true" [(ngModel)]="info.fanrpm"
-                            valueTemplate="{value}"></p-knob>
-                        Fan RPM
-                    </div>
-                    <!--
-                    <div class="col-6" *ngIf="info.boardtemp1">
-                        <p-knob [min]="20" [max]="75" [readonly]="true" [(ngModel)]="info.boardtemp1"
-                            valueTemplate="{value}C"></p-knob>
-                        Board Temp 1
-                    </div>
-                    <div class="col-6" *ngIf="info.boardtemp2">
-                        <p-knob [min]="20" [max]="75" [readonly]="true" [(ngModel)]="info.boardtemp2"
-                            valueTemplate="{value}C"></p-knob>
-                        Board Temp 2
-                    </div>
-                    -->
                 </div>
             </div>
         </div>
 
 
 
-        <div class="col-12 lg:col-6 xl:col-3">
-            <div class="card">
-                <h5>Performance</h5>
-                <div class="grid text-center">
-                    <div class="col-6">
-                        <p-knob [min]="100" [max]="maxFrequency" [readonly]="true" [(ngModel)]="info.frequency"
-                            valueTemplate="{value}"></p-knob>
-                        ASIC Frequency (MHz)
-                    </div>
-                    <div class="col-6">
-                        <p-knob [min]="0.9" [max]="1.8" [readonly]="true" [(ngModel)]="info.coreVoltageActual"
-                            valueTemplate="{value}V"></p-knob>
-                        ASIC Voltage Measured
-                    </div>
-
-
-                </div>
-
-            </div>
-        </div>
-
-
-
 
         <div class="col-12 lg:col-6">
             <div class="card" *ngIf="info$ | async as info; else loading">
@@ -212,7 +178,8 @@
                         <tr>
                             <td>URL:</td>
                             <td style="word-break: break-all;">
-                                <a style="text-decoration: underline;" [href]="(quickLink$ | async) || info.stratumURL" target="_blank">{{info.stratumURL}}</a>
+                                <a style="text-decoration: underline;" [href]="(quickLink$ | async) || info.stratumURL"
+                                    target="_blank">{{info.stratumURL}}</a>
                             </td>
                         </tr>
                         <tr>
@@ -228,7 +195,9 @@
                         <tr>
                             <td>URL:</td>
                             <td style="word-break: break-all;">
-                                <a style="text-decoration: underline;" [href]="(fallbackQuickLink$ | async) || info.fallbackStratumURL" target="_blank">{{info.fallbackStratumURL}}</a>
+                                <a style="text-decoration: underline;"
+                                    [href]="(fallbackQuickLink$ | async) || info.fallbackStratumURL"
+                                    target="_blank">{{info.fallbackStratumURL}}</a>
                             </td>
                         </tr>
                         <tr>
@@ -248,4 +217,4 @@
     </div>
 
 
-</ng-container>
+</ng-container>
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/app.footer.component.html b/main/http_server/axe-os/src/app/layout/app.footer.component.html
index 3311946..7b86dc3 100644
--- a/main/http_server/axe-os/src/app/layout/app.footer.component.html
+++ b/main/http_server/axe-os/src/app/layout/app.footer.component.html
@@ -1,3 +1,3 @@
-<div class="layout-footer">
+<!-- <div class="layout-footer">
 
-</div>
\ No newline at end of file
+</div> -->
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/app.menu.component.html b/main/http_server/axe-os/src/app/layout/app.menu.component.html
index 69858eb..ca5e595 100644
--- a/main/http_server/axe-os/src/app/layout/app.menu.component.html
+++ b/main/http_server/axe-os/src/app/layout/app.menu.component.html
@@ -6,7 +6,7 @@
 
 
     <li id="restart-container">
-        <p-button (click)="restart()" id="restart" label="Restart" severity="danger"></p-button>
+        <p-button (click)="restart()" id="restart" label="Restart" severity="primary"></p-button>
     </li>
 
 </ul>
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/app.topbar.component.html b/main/http_server/axe-os/src/app/layout/app.topbar.component.html
index f9bb6f9..fe07c85 100644
--- a/main/http_server/axe-os/src/app/layout/app.topbar.component.html
+++ b/main/http_server/axe-os/src/app/layout/app.topbar.component.html
@@ -1,6 +1,6 @@
 <div class="layout-topbar">
     <a class="layout-topbar-logo" routerLink="">
-        <div [routerLink]="['/']" class="header-text">Axe<span class="os">OS</span></div>
+        <div [routerLink]="['/']" class="header-text"><span style="font-family: Angel Wish; font-size: 4rem;">Axe</span><span class="os" style=" font-size: 3rem;">OS</span></div>
     </a>
 
     <button #menubutton class="p-link layout-menu-button layout-topbar-button" (click)="layoutService.onMenuToggle()">
diff --git a/main/http_server/axe-os/src/app/layout/styles/layout/_topbar.scss b/main/http_server/axe-os/src/app/layout/styles/layout/_topbar.scss
index 08e7d57..eb09f27 100644
--- a/main/http_server/axe-os/src/app/layout/styles/layout/_topbar.scss
+++ b/main/http_server/axe-os/src/app/layout/styles/layout/_topbar.scss
@@ -36,7 +36,7 @@
         justify-content: center;
         align-items: center;
         position: relative;
-        color: var(--text-color-secondary);
+        color: var(--primary-color);
         border-radius: 50%;
         width: 3rem;
         height: 3rem;
diff --git a/main/http_server/axe-os/src/app/layout/styles/layout/_variables.scss b/main/http_server/axe-os/src/app/layout/styles/layout/_variables.scss
index 8e9b025..52990b6 100644
--- a/main/http_server/axe-os/src/app/layout/styles/layout/_variables.scss
+++ b/main/http_server/axe-os/src/app/layout/styles/layout/_variables.scss
@@ -1,4 +1,4 @@
 /* General */
 $scale:14px;                    /* main font size */ 
-$borderRadius:12px;             /* border radius of layout element e.g. card, sidebar */ 
+$borderRadius:0px;             /* border radius of layout element e.g. card, sidebar */ 
 $transitionDuration:.2s;        /* transition duration of layout elements e.g. sidebar, overlay menus */ 
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/_colors.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/_colors.scss
new file mode 100644
index 0000000..2dca1c9
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/_colors.scss
@@ -0,0 +1,18 @@
+:root {
+  @if variable-exists(colors) {
+    @each $name, $color in $colors {
+        @for $i from 0 through 5 {
+            @if ($i == 0) {
+                --#{$name}-50:#{tint($color, (5 - $i) * 19%)};
+            }
+            @else {
+                --#{$name}-#{$i * 100}:#{tint($color, (5 - $i) * 19%)};
+            }
+        }
+
+        @for $i from 1 through 4 {
+            --#{$name}-#{($i + 5) * 100}:#{shade($color, $i * 15%)};
+        }
+    }
+  }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/_common.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/_common.scss
new file mode 100644
index 0000000..7bfaa18
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/_common.scss
@@ -0,0 +1,75 @@
+* {
+	box-sizing: border-box;
+}
+
+.p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: $fontSize;
+    font-weight: $fontWeight;
+}
+
+.p-component-overlay {
+    background-color: $maskBg;
+    transition-duration: $transitionDuration;
+}
+
+.p-disabled, .p-component:disabled {
+    opacity: $disabledOpacity;
+}
+
+.p-error {
+    color: $errorColor;
+}
+
+.p-text-secondary {
+    color: $textSecondaryColor;
+}
+
+.pi {
+    font-size: $primeIconFontSize;
+}
+
+.p-icon {
+    width: $primeIconFontSize;
+    height: $primeIconFontSize;
+}
+
+.p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: $fontSize;
+    border-radius: $borderRadius;
+
+    &:focus-visible {
+        @include focused();
+    }
+}
+
+.p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+.p-component-overlay {
+    @keyframes p-component-overlay-enter-animation {
+        from {
+            background-color: transparent;
+        }
+        to {
+            background-color: var(--maskbg);
+        }
+    }
+
+    @keyframes p-component-overlay-leave-animation {
+        from {
+            background-color: var(--maskbg);
+        }
+        to {
+            background-color: transparent;
+        }
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/_components.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/_components.scss
new file mode 100644
index 0000000..175b32b
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/_components.scss
@@ -0,0 +1,110 @@
+@import "_mixins";
+@import "_colors";
+
+@import "./components/input/_editor";
+
+@layer primeng {
+  @import "_common";
+
+  //Input
+  @import "./components/input/_autocomplete";
+  @import "./components/input/_calendar";
+  @import "./components/input/_cascadeselect";
+  @import "./components/input/_checkbox";
+  @import "./components/input/_chips";
+  @import "./components/input/_colorpicker";
+  @import "./components/input/_dropdown";
+  @import "./components/input/_iconfield";
+  @import "./components/input/_inputgroup";
+  @import "./components/input/_inputicon";
+  @import "./components/input/_inputmask";
+  @import "./components/input/_inputnumber";
+  @import "./components/input/_inputotp";
+  @import "./components/input/_inputswitch";
+  @import "./components/input/_inputtext";
+  @import "./components/input/_listbox";
+  @import "./components/input/_multiselect";
+  @import "./components/input/_password";
+  @import "./components/input/_radiobutton";
+  @import "./components/input/_rating";
+  @import "./components/input/_selectbutton";
+  @import "./components/input/_slider";
+  @import "./components/input/_togglebutton";
+  @import "./components/input/_treeselect";
+
+  //Button
+  @import "./components/button/_button";
+  @import "./components/button/_speeddial";
+  @import "./components/button/_splitbutton";
+
+  //Data
+  @import "./components/data/_carousel";
+  @import "./components/data/_datatable";
+  @import "./components/data/_dataview";
+  @import "./components/data/_filter";
+  @import "./components/data/_orderlist";
+  @import "./components/data/_organizationchart";
+  @import "./components/data/_paginator";
+  @import "./components/data/_picklist";
+  @import "./components/data/_timeline";
+  @import "./components/data/_tree";
+  @import "./components/data/_treetable";
+  @import "./components/data/_virtualscroller";
+
+  //Panel
+  @import "./components/panel/_accordion";
+  @import "./components/panel/_card";
+  @import "./components/panel/_divider";
+  @import "./components/panel/_fieldset";
+  @import "./components/panel/_panel";
+  @import "./components/panel/_scrollpanel";
+  @import "./components/panel/_splitter";
+  @import "./components/panel/_tabview";
+  @import "./components/panel/_toolbar";
+  @import "./components/panel/_stepper";
+
+  //Overlay
+  @import "./components/overlay/_confirmpopup";
+  @import "./components/overlay/_dialog";
+  @import "./components/overlay/_overlaypanel";
+  @import "./components/overlay/_sidebar";
+  @import "./components/overlay/_tooltip";
+
+  //File
+  @import "./components/file/_fileupload";
+
+  //Menu
+  @import "./components/menu/_breadcrumb";
+  @import "./components/menu/_contextmenu";
+  @import "./components/menu/_dock";
+  @import "./components/menu/_megamenu";
+  @import "./components/menu/_menu";
+  @import "./components/menu/_menubar";
+  @import "./components/menu/_panelmenu";
+  @import "./components/menu/_slidemenu";
+  @import "./components/menu/_steps";
+  @import "./components/menu/_tabmenu";
+  @import "./components/menu/_tieredmenu";
+
+  //Messages
+  @import "./components/messages/_inlinemessage";
+  @import "./components/messages/_message";
+  @import "components/messages/toast";
+
+  //MultiMedia
+  @import "./components/multimedia/_galleria";
+  @import "./components/multimedia/_image";
+
+  //Misc
+  @import "./components/misc/_avatar";
+  @import "./components/misc/_badge";
+  @import "./components/misc/_blockui";
+  @import "./components/misc/_chip";
+  @import "./components/misc/_inplace";
+  @import "./components/misc/_metergroup";
+  @import "./components/misc/_progressbar";
+  @import "./components/misc/_scrolltop";
+  @import "./components/misc/_skeleton";
+  @import "./components/misc/_tag";
+  @import "./components/misc/_terminal";
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/_mixins.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/_mixins.scss
new file mode 100644
index 0000000..895c64b
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/_mixins.scss
@@ -0,0 +1,339 @@
+@mixin icon-override($icon) {
+    &:before {
+        content: $icon;
+    }
+}
+
+@mixin focused() {
+    outline: $focusOutline;
+    outline-offset: $focusOutlineOffset;
+    box-shadow: $focusShadow;
+}
+
+@mixin focused-inset() {
+    outline: $focusOutline;
+    outline-offset: -1 * $focusOutlineOffset;
+    box-shadow: inset $focusShadow;
+}
+
+@mixin focused-input() {
+    outline: $focusOutline;
+    outline-offset: $inputFocusOutlineOffset;
+    box-shadow: $focusShadow;
+	border-color: $inputFocusBorderColor;
+}
+
+@mixin focused-listitem() {
+    outline: $focusOutline;
+    outline-offset: $focusOutlineOffset;
+    box-shadow: $inputListItemFocusShadow;
+}
+
+@mixin invalid-input() {
+    border-color: $inputErrorBorderColor;
+}
+
+@mixin menuitem-link {
+    padding: $menuitemPadding;
+    color: $menuitemTextColor;
+    border-radius: $menuitemBorderRadius;
+    transition: $listItemTransition;
+    user-select: none;
+
+    .p-menuitem-text {
+        color: $menuitemTextColor;
+    }
+
+    .p-menuitem-icon {
+        color: $menuitemIconColor;
+        margin-right: $inlineSpacing;
+    }
+
+    .p-submenu-icon {
+        color: $menuitemIconColor;
+    }
+
+    &:not(.p-disabled):hover {
+        background: $menuitemHoverBg;
+
+        .p-menuitem-text {
+            color: $menuitemTextHoverColor;
+        }
+
+        .p-menuitem-icon {
+            color: $menuitemIconHoverColor;
+        }
+
+        .p-submenu-icon {
+            color: $menuitemIconHoverColor;
+        }
+    }
+
+    &:focus {
+        @include focused-listitem();
+    }
+}
+
+@mixin menuitem {
+    > .p-menuitem-content {
+        color: $menuitemTextColor;
+        transition: $listItemTransition;
+        border-radius: $menuitemBorderRadius;
+
+        .p-menuitem-link {
+            color: $menuitemTextColor;
+            padding: $menuitemPadding;
+            user-select: none;
+
+            .p-menuitem-text {
+                color: $menuitemTextColor;
+            }
+
+            .p-menuitem-icon {
+                color: $menuitemIconColor;
+                margin-right: $inlineSpacing;
+            }
+
+            .p-submenu-icon {
+                color: $menuitemIconColor;
+            }
+        }
+    }
+
+    &.p-highlight {
+        > .p-menuitem-content {
+            color: $menuitemTextActiveColor;
+            background: $menuitemActiveBg;
+
+            .p-menuitem-link {
+                .p-menuitem-text {
+                    color: $menuitemTextActiveColor;
+                }
+
+                .p-menuitem-icon,
+                .p-submenu-icon {
+                    color: $menuitemIconActiveColor;
+                }
+            }
+        }
+
+        &.p-focus {
+            > .p-menuitem-content {
+                background: $menuitemActiveFocusBg;
+            }
+        }
+    }
+
+    &:not(.p-highlight):not(.p-disabled) {
+        &.p-focus {
+            > .p-menuitem-content {
+                color: $menuitemTextFocusColor;
+                background: $menuitemFocusBg;
+
+                .p-menuitem-link {
+                    .p-menuitem-text {
+                        color: $menuitemTextFocusColor;
+                    }
+
+                    .p-menuitem-icon,
+                    .p-submenu-icon {
+                        color: $menuitemIconFocusColor;
+                    }
+                }
+            }
+        }
+
+        > .p-menuitem-content {
+            &:hover {
+                color: $menuitemTextHoverColor;
+                background: $menuitemHoverBg;
+
+                .p-menuitem-link {
+                    .p-menuitem-text {
+                        color: $menuitemTextHoverColor;
+                    }
+
+                    .p-menuitem-icon,
+                    .p-submenu-icon {
+                        color: $menuitemIconHoverColor;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@mixin horizontal-rootmenuitem-link {
+    padding: $horizontalMenuRootMenuitemPadding;
+    color: $horizontalMenuRootMenuitemTextColor;
+    border-radius: $horizontalMenuRootMenuitemBorderRadius;
+    transition: $listItemTransition;
+    user-select: none;
+
+    .p-menuitem-text {
+        color: $horizontalMenuRootMenuitemTextColor;
+    }
+
+    .p-menuitem-icon {
+        color: $horizontalMenuRootMenuitemIconColor;
+        margin-right: $inlineSpacing;
+    }
+
+    .p-submenu-icon {
+        color: $horizontalMenuRootMenuitemIconColor;
+        margin-left: $inlineSpacing;
+    }
+
+    &:not(.p-disabled):hover {
+        background: $horizontalMenuRootMenuitemHoverBg;
+
+        .p-menuitem-text {
+            color: $horizontalMenuRootMenuitemTextHoverColor;
+        }
+
+        .p-menuitem-icon {
+            color: $horizontalMenuRootMenuitemIconHoverColor;
+        }
+
+        .p-submenu-icon {
+            color: $horizontalMenuRootMenuitemIconHoverColor;
+        }
+    }
+
+    &:focus {
+        @include focused-listitem();
+    }
+}
+
+@mixin horizontal-rootmenuitem {
+    > .p-menuitem-content {
+        color: $horizontalMenuRootMenuitemTextColor;
+        transition: $listItemTransition;
+        border-radius: $horizontalMenuRootMenuitemBorderRadius;
+
+        .p-menuitem-link {
+            padding: $horizontalMenuRootMenuitemPadding;
+            user-select: none;
+
+            .p-menuitem-text {
+                color: $horizontalMenuRootMenuitemTextColor;
+            }
+
+            .p-menuitem-icon {
+                color: $horizontalMenuRootMenuitemIconColor;
+                margin-right: $inlineSpacing;
+            }
+
+            .p-submenu-icon {
+                color: $horizontalMenuRootMenuitemIconColor;
+                margin-left: $inlineSpacing;
+            }
+        }
+    }
+
+    &:not(.p-highlight):not(.p-disabled) {
+        > .p-menuitem-content {
+            &:hover {
+                color: $horizontalMenuRootMenuitemTextHoverColor;
+                background: $horizontalMenuRootMenuitemHoverBg;
+
+                .p-menuitem-link {
+                    .p-menuitem-text {
+                        color: $horizontalMenuRootMenuitemTextHoverColor;
+                    }
+
+                    .p-menuitem-icon,
+                    .p-submenu-icon {
+                        color: $horizontalMenuRootMenuitemIconHoverColor;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@mixin placeholder {
+    ::-webkit-input-placeholder {
+        @content;
+    }
+    :-moz-placeholder {
+        @content;
+    }
+    ::-moz-placeholder {
+        @content;
+    }
+    :-ms-input-placeholder {
+        @content;
+    }
+}
+
+@mixin scaledPadding($val, $scale) {
+    padding: nth($val, 1) * $scale nth($val, 2) * $scale;
+}
+
+@mixin scaledFontSize($val, $scale) {
+    font-size: $val * $scale;
+}
+
+@mixin nested-submenu-indents($val, $index, $length) {
+    .p-submenu-list {
+        .p-menuitem {
+            .p-menuitem-content {
+                .p-menuitem-link {
+                    padding-left: $val * ($index + 1);
+                }
+            }
+            @if $index < $length {
+                @include nested-submenu-indents($val, $index + 2, $length);
+            }
+        }
+    }
+}
+
+@mixin action-icon($enabled: true) {
+    width: $actionIconWidth;
+    height: $actionIconHeight;
+    color: $actionIconColor;
+    border: $actionIconBorder;
+    background: $actionIconBg;
+    border-radius: $actionIconBorderRadius;
+    transition: $actionIconTransition;
+
+    &:enabled:hover {
+        color: $actionIconHoverColor;
+        border-color: $actionIconHoverBorderColor;
+        background: $actionIconHoverBg;
+    }
+
+    &:focus-visible {
+        @include focused();
+    }
+}
+
+@function tint($color, $percentage) {
+    @return mix(#fff, $color, $percentage);
+}
+
+@function shade($color, $percentage) {
+    @return mix(#000, $color, $percentage);
+}
+
+@mixin focused-inset() {
+    outline: $focusOutline;
+    outline-offset: $focusOutlineOffset;
+    box-shadow: inset $focusShadow;
+}
+
+@mixin menuitem-badge {
+    background: $badgeBg;
+    color: $badgeTextColor;
+    font-size: $badgeFontSize;
+    font-weight: $badgeFontWeight;
+    min-width: $badgeMinWidth;
+    height: $badgeHeight;
+    line-height: $badgeHeight;
+    border-radius: $borderRadius;
+    margin-left: $inlineSpacing;
+    padding-left: $inlineSpacing;
+    padding-right: $inlineSpacing;
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/button/_button.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/button/_button.scss
new file mode 100644
index 0000000..c9a228e
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/button/_button.scss
@@ -0,0 +1,625 @@
+.p-button {
+    color: $buttonTextColor;
+    background: $buttonBg;
+    border: $buttonBorder;
+    padding: $buttonPadding;
+    font-size: $fontSize;
+    transition: $formElementTransition;
+    border-radius: $borderRadius;
+    outline-color: transparent;
+
+    &:not(:disabled):hover {
+        background: $buttonHoverBg;
+        color: $buttonTextHoverColor;
+        border-color: $buttonHoverBorderColor;
+    }
+
+    &:not(:disabled):active {
+        background: $buttonActiveBg;
+        color: $buttonTextActiveColor;
+        border-color: $buttonActiveBorderColor;
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $buttonBg;
+        border: $outlinedButtonBorder;
+
+        &:not(:disabled):hover {
+            background: rgba($buttonBg, $textButtonHoverBgOpacity);
+            color: $buttonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($buttonBg, $textButtonActiveBgOpacity);
+            color: $buttonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &.p-button-plain {
+            color: $plainButtonTextColor;
+            border-color: $plainButtonTextColor;
+
+            &:not(:disabled):hover {
+                background: $plainButtonHoverBgColor;
+                color: $plainButtonTextColor;
+            }
+    
+            &:not(:disabled):active {
+                background: $plainButtonActiveBgColor;
+                color: $plainButtonTextColor;
+            }
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $buttonBg;
+        border-color: transparent;
+
+        &:not(:disabled):hover {
+            background: rgba($buttonBg, $textButtonHoverBgOpacity);
+            color: $buttonBg;
+            border-color: transparent;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($buttonBg, $textButtonActiveBgOpacity);
+            color: $buttonBg;
+            border-color: transparent;
+        }
+
+        &.p-button-plain {
+            color: $plainButtonTextColor;
+
+            &:not(:disabled):hover {
+                background: $plainButtonHoverBgColor;
+                color: $plainButtonTextColor;
+            }
+    
+            &:not(:disabled):active {
+                background: $plainButtonActiveBgColor;
+                color: $plainButtonTextColor;
+            }
+        }
+    }
+
+    &:focus-visible {
+        @include focused();
+    }
+
+    .p-button-label {
+        transition-duration: $transitionDuration;
+    }
+
+    .p-button-icon-left {
+         margin-right: $inlineSpacing;
+    }
+
+    .p-button-icon-right {
+        margin-left: $inlineSpacing;
+    }
+
+    .p-button-icon-bottom {
+        margin-top: $inlineSpacing;
+    }
+
+    .p-button-icon-top {
+       margin-bottom: $inlineSpacing;
+    }
+
+    .p-badge {
+        margin-left: $inlineSpacing;
+        min-width: $fontSize;
+        height: $fontSize;
+        line-height: $fontSize;
+        color: $buttonBg;
+        background-color: $buttonTextColor;
+    }
+
+    &.p-button-raised {
+        box-shadow: $raisedButtonShadow;
+    }
+
+    &.p-button-rounded {
+        border-radius: $roundedButtonBorderRadius;
+    }
+
+    &.p-button-icon-only {
+        width: $buttonIconOnlyWidth;
+        padding: $buttonIconOnlyPadding;
+
+        .p-button-icon-left,
+        .p-button-icon-right {
+            margin: 0;
+        }
+
+        &.p-button-rounded {
+            border-radius: 50%;
+            height: $buttonIconOnlyWidth;
+        }
+    }
+
+    &.p-button-sm {
+        @include scaledFontSize($fontSize, $scaleSM);
+        @include scaledPadding($buttonPadding, $scaleSM);
+
+        .p-button-icon {
+            @include scaledFontSize($primeIconFontSize, $scaleSM);
+        }
+    }
+
+    &.p-button-lg {
+        @include scaledFontSize($fontSize, $scaleLG);
+        @include scaledPadding($buttonPadding, $scaleLG);
+
+        .p-button-icon {
+            @include scaledFontSize($primeIconFontSize, $scaleLG);
+        }
+    }
+
+    &.p-button-loading-label-only {
+        .p-button-label {
+            margin-left: $inlineSpacing;
+        }
+
+        .p-button-loading-icon {
+            margin-right: 0;
+        }
+    }
+}
+
+.p-fluid {
+    .p-button {
+        width: 100%;
+    }
+    
+    .p-button-icon-only {
+        width: $buttonIconOnlyWidth;
+    }
+
+    .p-button-group {
+        display: flex;
+        
+        .p-button {
+            flex: 1;
+        }
+    }
+}
+
+.p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
+    color: $secondaryButtonTextColor;
+    background: $secondaryButtonBg;
+    border: $secondaryButtonBorder;
+
+    &:not(:disabled):hover {
+        background: $secondaryButtonHoverBg;
+        color: $secondaryButtonTextHoverColor;
+        border-color: $secondaryButtonHoverBorderColor;
+    }
+
+    &:not(:disabled):focus {
+        box-shadow: $secondaryButtonFocusShadow;
+    }
+
+    &:not(:disabled):active {
+        background: $secondaryButtonActiveBg;
+        color: $secondaryButtonTextActiveColor;
+        border-color: $secondaryButtonActiveBorderColor;
+    }
+    
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $secondaryButtonBg;
+        border: $outlinedButtonBorder;
+
+        &:not(:disabled):hover {
+            background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
+            color: $secondaryButtonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
+            color: $secondaryButtonBg;
+            border: $outlinedButtonBorder;
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $secondaryButtonBg;
+        border-color: transparent;
+
+        &:not(:disabled):hover {
+            background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
+            border-color: transparent;
+            color: $secondaryButtonBg;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
+            border-color: transparent;
+            color: $secondaryButtonBg;
+        }
+    }
+}
+
+.p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button {
+    color: $infoButtonTextColor;
+    background: $infoButtonBg;
+    border: $infoButtonBorder;
+
+    &:not(:disabled):hover {
+        background: $infoButtonHoverBg;
+        color: $infoButtonTextHoverColor;
+        border-color: $infoButtonHoverBorderColor;
+    }
+
+    &:not(:disabled):focus {
+        box-shadow: $infoButtonFocusShadow;
+    }
+
+    &:not(:disabled):active {
+        background: $infoButtonActiveBg;
+        color: $infoButtonTextActiveColor;
+        border-color: $infoButtonActiveBorderColor;
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $infoButtonBg;
+        border: $outlinedButtonBorder;
+
+        &:not(:disabled):hover {
+            background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
+            color: $infoButtonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
+            color: $infoButtonBg;
+            border: $outlinedButtonBorder;
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $infoButtonBg;
+        border-color: transparent;
+
+        &:not(:disabled):hover {
+            background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
+            border-color: transparent;
+            color: $infoButtonBg;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
+            border-color: transparent;
+            color: $infoButtonBg;
+        }
+    }
+}
+
+.p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button {
+    color: $successButtonTextColor;
+    background: $successButtonBg;
+    border: $successButtonBorder;
+
+    &:not(:disabled):hover {
+        background: $successButtonHoverBg;
+        color: $successButtonTextHoverColor;
+        border-color: $successButtonHoverBorderColor;
+    }
+
+    &:not(:disabled):focus {
+        box-shadow: $successButtonFocusShadow;
+    }
+
+    &:not(:disabled):active {
+        background: $successButtonActiveBg;
+        color: $successButtonTextActiveColor;
+        border-color: $successButtonActiveBorderColor;
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $successButtonBg;
+        border: $outlinedButtonBorder;
+
+        &:not(:disabled):hover {
+            background: rgba($successButtonBg, $textButtonHoverBgOpacity);
+            color: $successButtonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($successButtonBg, $textButtonActiveBgOpacity);
+            color: $successButtonBg;
+            border: $outlinedButtonBorder;
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $successButtonBg;
+        border-color: transparent;
+
+        &:not(:disabled):hover {
+            background: rgba($successButtonBg, $textButtonHoverBgOpacity);
+            border-color: transparent;
+            color: $successButtonBg;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($successButtonBg, $textButtonActiveBgOpacity);
+            border-color: transparent;
+            color: $successButtonBg;
+        }
+    }
+}
+
+.p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button {
+    color: $warningButtonTextColor;
+    background: $warningButtonBg;
+    border: $warningButtonBorder;
+    
+    &:not(:disabled):hover {
+        background: $warningButtonHoverBg;
+        color: $warningButtonTextHoverColor;
+        border-color: $warningButtonHoverBorderColor;
+    }
+
+    &:not(:disabled):focus {
+        box-shadow: $warningButtonFocusShadow;
+    }
+
+    &:not(:disabled):active {
+        background: $warningButtonActiveBg;
+        color: $warningButtonTextActiveColor;
+        border-color: $warningButtonActiveBorderColor;
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $warningButtonBg;
+        border: $outlinedButtonBorder;
+
+        &:not(:disabled):hover {
+            background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
+            color: $warningButtonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
+            color: $warningButtonBg;
+            border: $outlinedButtonBorder;
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $warningButtonBg;
+        border-color: transparent;
+
+        &:not(:disabled):hover {
+            background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
+            border-color: transparent;
+            color: $warningButtonBg;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
+            border-color: transparent;
+            color: $warningButtonBg;
+        }
+    }
+}
+
+.p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button {
+    color: $helpButtonTextColor;
+    background: $helpButtonBg;
+    border: $helpButtonBorder;
+
+    &:not(:disabled):hover {
+        background: $helpButtonHoverBg;
+        color: $helpButtonTextHoverColor;
+        border-color: $helpButtonHoverBorderColor;
+    }
+
+    &:not(:disabled):focus {
+        box-shadow: $helpButtonFocusShadow;
+    }
+
+    &:not(:disabled):active {
+        background: $helpButtonActiveBg;
+        color: $helpButtonTextActiveColor;
+        border-color: $helpButtonActiveBorderColor;
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $helpButtonBg;
+        border: $outlinedButtonBorder;
+
+        &:not(:disabled):hover {
+            background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
+            color: $helpButtonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
+            color: $helpButtonBg;
+            border: $outlinedButtonBorder;
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $helpButtonBg;
+        border-color: transparent;
+
+        &:not(:disabled):hover {
+            background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
+            border-color: transparent;
+            color: $helpButtonBg;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
+            border-color: transparent;
+            color: $helpButtonBg;
+        }
+    }
+}
+
+.p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button {
+    color: $dangerButtonTextColor;
+    background: $dangerButtonBg;
+    border: $dangerButtonBorder;
+
+    &:not(:disabled):hover {
+        background: $dangerButtonHoverBg;
+        color: $dangerButtonTextHoverColor;
+        border-color: $dangerButtonHoverBorderColor;
+    }
+
+    &:not(:disabled):focus {
+        box-shadow: $dangerButtonFocusShadow;
+    }
+
+    &:not(:disabled):active {
+        background: $dangerButtonActiveBg;
+        color: $dangerButtonTextActiveColor;
+        border-color: $dangerButtonActiveBorderColor;
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $dangerButtonBg;
+        border: $outlinedButtonBorder;
+
+        &:not(:disabled):hover {
+            background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
+            color: $dangerButtonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
+            color: $dangerButtonBg;
+            border: $outlinedButtonBorder;
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $dangerButtonBg;
+        border-color: transparent;
+
+        &:not(:disabled):hover {
+            background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
+            border-color: transparent;
+            color: $dangerButtonBg;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
+            border-color: transparent;
+            color: $dangerButtonBg;
+        }
+    }
+}
+
+@if variable-exists(contrastButtonTextColor) {
+    .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+        color: $contrastButtonTextColor;
+        background: $contrastButtonBg;
+        border: $contrastButtonBorder;
+    
+        &:not(:disabled):hover {
+            background: $contrastButtonHoverBg;
+            color: $contrastButtonTextHoverColor;
+            border-color: $contrastButtonHoverBorderColor;
+        }
+    
+        &:not(:disabled):focus {
+            box-shadow: $contrastButtonFocusShadow;
+        }
+    
+        &:not(:disabled):active {
+            background: $contrastButtonActiveBg;
+            color: $contrastButtonTextActiveColor;
+            border-color: $contrastButtonActiveBorderColor;
+        }
+    
+        &.p-button-outlined {
+            background-color: transparent;
+            color: $contrastButtonBg;
+            border: $outlinedButtonBorder;
+    
+            &:not(:disabled):hover {
+                background: rgba($contrastButtonBg, $textButtonHoverBgOpacity);
+                color: $contrastButtonBg;
+                border: $outlinedButtonBorder;
+            }
+    
+            &:not(:disabled):active {
+                background: rgba($contrastButtonBg, $textButtonActiveBgOpacity);
+                color: $contrastButtonBg;
+                border: $outlinedButtonBorder;
+            }
+        }
+    
+        &.p-button-text {
+            background-color: transparent;
+            color: $contrastButtonBg;
+            border-color: transparent;
+    
+            &:not(:disabled):hover {
+                background: rgba($contrastButtonBg, $textButtonHoverBgOpacity);
+                border-color: transparent;
+                color: $contrastButtonBg;
+            }
+    
+            &:not(:disabled):active {
+                background: rgba($contrastButtonBg, $textButtonActiveBgOpacity);
+                border-color: transparent;
+                color: $contrastButtonBg;
+            }
+        }
+    }
+}
+
+.p-button.p-button-link {
+    color: $linkButtonColor;
+    background: transparent;
+    border: transparent;
+
+    &:not(:disabled):hover {
+        background:  transparent;
+        color: $linkButtonHoverColor;
+        border-color:  transparent;
+
+        .p-button-label {
+            text-decoration: $linkButtonTextHoverDecoration;
+        }
+    }
+
+    &:not(:disabled):focus {
+        background: transparent;
+        box-shadow: $linkButtonFocusShadow;
+        border-color:  transparent;
+    }
+
+    &:not(:disabled):active {
+        background:  transparent;
+        color: $linkButtonColor;
+        border-color:  transparent;
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/button/_speeddial.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/button/_speeddial.scss
new file mode 100644
index 0000000..c446c7b
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/button/_speeddial.scss
@@ -0,0 +1,96 @@
+@use 'sass:math';
+
+.p-speeddial-button {
+    &.p-button.p-button-icon-only {
+        width: $speedDialButtonWidth;
+        height: $speedDialButtonHeight;
+
+        .p-button-icon {
+            font-size: $speedDialButtonIconFontSize;
+        }
+
+        .p-icon {
+            width: $speedDialButtonIconFontSize;
+            height: $speedDialButtonIconFontSize;
+        }
+    }
+}
+
+.p-speeddial-list {
+    outline: 0 none;
+}
+
+.p-speeddial-item {
+    &.p-focus > .p-speeddial-action {
+        @include focused();
+    }
+}
+
+.p-speeddial-action {
+    width: $speedDialActionWidth;
+    height: $speedDialActionHeight;
+    background: $speedDialActionBg;
+    color: $speedDialActionTextColor;
+
+    &:hover {
+        background: $speedDialActionHoverBg;
+        color: $speedDialActionTextHoverColor;
+    }
+}
+
+.p-speeddial-direction-up {
+    .p-speeddial-item {
+        margin: math.div($inlineSpacing, 2) 0;
+
+        &:first-child {
+            margin-bottom: $inlineSpacing;
+        }
+    }
+}
+
+.p-speeddial-direction-down {
+    .p-speeddial-item {
+        margin: math.div($inlineSpacing, 2) 0;
+
+        &:first-child {
+            margin-top: $inlineSpacing;
+        }
+    }
+}
+
+.p-speeddial-direction-left {
+    .p-speeddial-item {
+        margin: 0 math.div($inlineSpacing, 2);
+
+        &:first-child {
+            margin-right: $inlineSpacing;
+        }
+    }
+}
+
+.p-speeddial-direction-right {
+    .p-speeddial-item {
+        margin: 0 math.div($inlineSpacing, 2);
+
+        &:first-child {
+            margin-left: $inlineSpacing;
+        }
+    }
+}
+
+.p-speeddial-circle,
+.p-speeddial-semi-circle,
+.p-speeddial-quarter-circle {
+    .p-speeddial-item {
+        margin: 0;
+
+        &:first-child,
+        &:last-child {
+            margin: 0;
+        }
+    }
+}
+
+.p-speeddial-mask {
+    background-color: $maskBg;
+}
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/button/_splitbutton.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/button/_splitbutton.scss
new file mode 100644
index 0000000..72a86cd
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/button/_splitbutton.scss
@@ -0,0 +1,15 @@
+.p-splitbutton {
+    border-radius: $borderRadius;
+
+    &.p-button-rounded {
+        border-radius: $roundedButtonBorderRadius;
+
+        > .p-button {
+            border-radius: $roundedButtonBorderRadius;
+        }
+    }
+
+    &.p-button-raised {
+        box-shadow: $raisedButtonShadow;
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_carousel.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_carousel.scss
new file mode 100644
index 0000000..87c5653
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_carousel.scss
@@ -0,0 +1,37 @@
+.p-carousel {
+    .p-carousel-content {
+        .p-carousel-prev,
+        .p-carousel-next {
+            @include action-icon();
+            margin: $inlineSpacing;
+        }
+    }
+
+    .p-carousel-indicators {
+        padding: $carouselIndicatorsPadding;
+
+        .p-carousel-indicator {
+            margin-right: $inlineSpacing;
+            margin-bottom: $inlineSpacing;
+           
+            button {
+                background-color: $carouselIndicatorBg;
+                width: $carouselIndicatorWidth;
+                height: $carouselIndicatorHeight;
+                transition: $actionIconTransition;
+                border-radius: $carouselIndicatorBorderRadius;
+
+                &:hover {
+                    background: $carouselIndicatorHoverBg;
+                }
+            }
+
+            &.p-highlight {
+                button {
+                    background: $highlightBg;
+                    color: $highlightTextColor;
+                }
+            }
+        }
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_datatable.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_datatable.scss
new file mode 100644
index 0000000..be343f2
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_datatable.scss
@@ -0,0 +1,338 @@
+.p-datatable {
+    .p-paginator-top {
+        border-width: $tableTopPaginatorBorderWidth;
+        border-radius: 0;
+    }
+
+    .p-paginator-bottom {
+        border-width: $tableBottomPaginatorBorderWidth;
+        border-radius: 0;
+    }
+
+    .p-datatable-header {
+        background: $tableHeaderBg;
+        color: $tableHeaderTextColor;
+        border: $tableHeaderBorder;
+        border-width: $tableHeaderBorderWidth;
+        padding: $tableHeaderPadding;
+        font-weight: $tableHeaderFontWeight;
+    }
+
+    .p-datatable-footer {
+        background: $tableFooterBg;
+        color: $tableFooterTextColor;
+        border: $tableFooterBorder;
+        border-width: $tableFooterBorderWidth;
+        padding: $tableFooterPadding;
+        font-weight: $tableFooterFontWeight;
+    }
+
+    .p-datatable-thead > tr > th {
+        text-align: $tableCellContentAlignment;
+        padding: $tableHeaderCellPadding;
+        border: $tableHeaderCellBorder;
+        border-width: $tableHeaderCellBorderWidth;
+        font-weight: $tableHeaderCellFontWeight;
+        color: $tableHeaderCellTextColor;
+        background: $tableHeaderCellBg;
+        transition: $listItemTransition;
+    }
+
+    .p-datatable-tfoot > tr > td {
+        text-align: $tableCellContentAlignment;
+        padding: $tableFooterCellPadding;
+        border: $tableFooterCellBorder;
+        border-width: $tableFooterCellBorderWidth;
+        font-weight: $tableFooterCellFontWeight;
+        color: $tableFooterCellTextColor;
+        background: $tableFooterCellBg;
+    }
+
+    .p-sortable-column {
+        .p-sortable-column-icon {
+            color: $tableHeaderCellIconColor;
+            margin-left: $inlineSpacing;
+        }
+
+        .p-sortable-column-badge {
+            border-radius: 50%;
+            height: $tableSortableColumnBadgeSize;
+            min-width: $tableSortableColumnBadgeSize;
+            line-height: $tableSortableColumnBadgeSize;
+            color: $highlightTextColor;
+            background: $highlightBg;
+            margin-left: $inlineSpacing;
+        }
+
+        &:not(.p-highlight):hover {
+            background: $tableHeaderCellHoverBg;
+            color: $tableHeaderCellTextHoverColor;
+
+            .p-sortable-column-icon {
+                color: $tableHeaderCellIconHoverColor;
+            }
+        }
+
+        &.p-highlight {
+            background: $tableHeaderCellHighlightBg;
+            color: $tableHeaderCellHighlightTextColor;
+
+            .p-sortable-column-icon {
+                color: $tableHeaderCellHighlightTextColor;
+            }
+
+            &:hover {
+                background: $tableHeaderCellHighlightHoverBg;
+                color: $tableHeaderCellHighlightTextColor;
+
+                .p-sortable-column-icon {
+                    color: $tableHeaderCellHighlightTextColor;
+                }
+            }
+        }
+
+        &:focus-visible {
+            box-shadow: $inputListItemFocusShadow;
+            outline: 0 none;
+        }
+    }
+
+    .p-datatable-tbody {
+        > tr {
+            background: $tableBodyRowBg;
+            color: $tableBodyRowTextColor;
+            transition: $listItemTransition;
+
+            > td {
+                text-align: $tableCellContentAlignment;
+                border: $tableBodyCellBorder;
+                border-width: $tableBodyCellBorderWidth;
+                padding: $tableBodyCellPadding;
+
+                .p-row-toggler,
+                .p-row-editor-init,
+                .p-row-editor-save,
+                .p-row-editor-cancel {
+                    @include action-icon();
+                }
+
+                .p-row-editor-save {
+                    margin-right: $inlineSpacing;
+                }
+            }
+
+            &:focus-visible {
+                outline: 0.15rem solid $focusOutlineColor;
+                outline-offset: -0.15rem;
+            }
+
+            &.p-highlight {
+                background: $highlightBg;
+                color: $highlightTextColor;
+            }
+
+            &.p-datatable-dragpoint-top > td {
+                box-shadow: inset 0 2px 0 0 $highlightBg;
+            }
+
+            &.p-datatable-dragpoint-bottom > td {
+                box-shadow: inset 0 -2px 0 0 $highlightBg;
+            }
+        }
+    }
+
+    &.p-datatable-hoverable-rows {
+        .p-datatable-tbody > tr:not(.p-highlight):hover {
+            background: $tableBodyRowHoverBg;
+            color: $tableBodyRowTextHoverColor;
+        }
+    }
+
+    .p-column-resizer-helper {
+        background: $tableResizerHelperBg;
+    }
+
+    .p-datatable-scrollable-header,
+    .p-datatable-scrollable-footer {
+        background: $panelHeaderBg;
+    }
+
+    &.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table,
+    &.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table {
+        > .p-datatable-thead,
+        > .p-datatable-tfoot {
+            background-color: $tableHeaderCellBg;
+        }
+    }
+
+    .p-datatable-loading-icon {
+        font-size: $loadingIconFontSize;
+    }
+
+    &.p-datatable-gridlines {
+        .p-datatable-header {
+            border-width: 1px 1px 0 1px;
+        }
+
+        .p-datatable-footer {
+            border-width: 0 1px 1px 1px;
+        }
+
+        .p-paginator-top {
+            border-width: 0 1px 0 1px;
+        }
+
+        .p-paginator-bottom {
+            border-width: 0 1px 1px 1px;
+        }
+
+        .p-datatable-thead {
+            > tr {
+                > th {
+                    border-width: 1px 0 1px 1px;
+
+                    &:last-child {
+                        border-width: 1px;
+                    }
+                }
+            }
+        }
+
+        .p-datatable-tbody {
+            > tr {
+                > td {
+                    border-width: 1px 0 0 1px;
+
+                    &:last-child {
+                        border-width: 1px 1px 0 1px;
+                    }
+                }
+
+                &:last-child {
+                    > td {
+                        border-width: 1px 0 1px 1px;
+
+                        &:last-child {
+                            border-width: 1px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .p-datatable-tfoot {
+            > tr {
+                > td {
+                    border-width: 1px 0 1px 1px;
+
+                    &:last-child {
+                        border-width: 1px 1px 1px 1px;
+                    }
+                }
+            }
+        }
+
+        .p-datatable-thead + .p-datatable-tfoot {
+            > tr {
+                > td {
+                    border-width: 0 0 1px 1px;
+
+                    &:last-child {
+                        border-width: 0 1px 1px 1px;
+                    }
+                }
+            }
+        }
+
+        &:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody {
+            > tr {
+                > td {
+                    border-width: 0 0 1px 1px;
+
+                    &:last-child {
+                        border-width: 0 1px 1px 1px;
+                    }
+                }
+            }
+        }
+
+        &:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody {
+            > tr {
+                &:last-child {
+                    > td {
+                        border-width: 0 0 0 1px;
+
+                        &:last-child {
+                            border-width: 0 1px 0 1px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    &.p-datatable-striped {
+        .p-datatable-tbody {
+            > tr:nth-child(even) {
+                background: $tableBodyRowEvenBg;
+
+                &.p-highlight {
+                    background: $highlightBg;
+                    color: $highlightTextColor;
+
+                    .p-row-toggler {
+                        color: $highlightTextColor;
+
+                        &:hover {
+                            color: $highlightTextColor;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    &.p-datatable-sm {
+        .p-datatable-header {
+            @include scaledPadding($tableHeaderPadding, $tableScaleSM);
+        }
+
+        .p-datatable-thead > tr > th {
+            @include scaledPadding($tableHeaderCellPadding, $tableScaleSM);
+        }
+
+        .p-datatable-tbody > tr > td {
+            @include scaledPadding($tableBodyCellPadding, $tableScaleSM);
+        }
+
+        .p-datatable-tfoot > tr > td {
+            @include scaledPadding($tableFooterPadding, $tableScaleSM);
+        }
+
+        .p-datatable-footer {
+            @include scaledPadding($tableFooterPadding, $tableScaleSM);
+        }
+    }
+
+    &.p-datatable-lg {
+        .p-datatable-header {
+            @include scaledPadding($tableHeaderPadding, $tableScaleLG);
+        }
+
+        .p-datatable-thead > tr > th {
+            @include scaledPadding($tableHeaderCellPadding, $tableScaleLG);
+        }
+
+        .p-datatable-tbody > tr > td {
+            @include scaledPadding($tableBodyCellPadding, $tableScaleLG);
+        }
+
+        .p-datatable-tfoot > tr > td {
+            @include scaledPadding($tableFooterPadding, $tableScaleLG);
+        }
+
+        .p-datatable-footer {
+            @include scaledPadding($tableFooterPadding, $tableScaleLG);
+        }
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_dataview.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_dataview.scss
new file mode 100644
index 0000000..02c81e7
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_dataview.scss
@@ -0,0 +1,46 @@
+.p-dataview {
+    .p-paginator-top {
+        border-width: $tableTopPaginatorBorderWidth;
+        border-radius: 0;
+    }
+
+    .p-paginator-bottom {
+        border-width: $tableBottomPaginatorBorderWidth;
+        border-radius: 0;
+    }
+
+    .p-dataview-header {
+        background: $tableHeaderBg;
+        color: $tableHeaderTextColor;
+        border: $tableHeaderBorder;
+        border-width: $tableHeaderBorderWidth;
+        padding: $tableHeaderPadding;
+        font-weight: $tableHeaderFontWeight;
+    }
+
+    .p-dataview-content {
+        background: $tableBodyRowBg;
+        color: $tableBodyRowTextColor;
+        border: $dataViewContentBorder;
+        padding: $dataViewContentPadding;
+    }
+
+    .p-dataview-footer {
+        background: $tableFooterBg;
+        color: $tableFooterTextColor;
+        border: $tableFooterBorder;
+        border-width: $tableFooterBorderWidth;
+        padding: $tableFooterPadding;
+        font-weight: $tableFooterFontWeight;
+        border-bottom-left-radius: $borderRadius;
+        border-bottom-right-radius: $borderRadius;
+    }
+
+    .p-dataview-loading-icon {
+        font-size: $loadingIconFontSize;
+    }
+
+    .p-dataview-emptymessage {
+        padding: $panelContentPadding;
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_filter.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_filter.scss
new file mode 100644
index 0000000..4830e06
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_filter.scss
@@ -0,0 +1,142 @@
+.p-column-filter-row {
+    .p-column-filter-menu-button,
+    .p-column-filter-clear-button {
+        margin-left: $inlineSpacing;
+    }
+}
+
+.p-column-filter-menu-button {
+    width: $actionIconWidth;
+    height: $actionIconHeight;
+    color: $actionIconColor;
+    border: $actionIconBorder;
+    background: $actionIconBg;
+    border-radius: $actionIconBorderRadius;
+    transition: $actionIconTransition;
+
+    &:hover {
+        color: $actionIconHoverColor;
+        border-color: $actionIconHoverBorderColor;
+        background: $actionIconHoverBg;
+    }
+
+    &.p-column-filter-menu-button-open,
+    &.p-column-filter-menu-button-open:hover {
+        background: $actionIconHoverBg;
+        color: $actionIconHoverColor;
+    }
+
+    &.p-column-filter-menu-button-active,
+    &.p-column-filter-menu-button-active:hover {
+        background: $highlightBg;
+        color: $highlightTextColor;
+    }
+
+    &:focus-visible {
+        @include focused();
+    }
+
+}
+
+.p-column-filter-clear-button {
+    width: $actionIconWidth;
+    height: $actionIconHeight;
+    color: $actionIconColor;
+    border: $actionIconBorder;
+    background: $actionIconBg;
+    border-radius: $actionIconBorderRadius;
+    transition: $actionIconTransition;
+
+    &:hover {
+        color: $actionIconHoverColor;
+        border-color: $actionIconHoverBorderColor;
+        background: $actionIconHoverBg;
+    }
+
+    &:focus-visible {
+        @include focused();
+    }
+}
+
+.p-column-filter-overlay {
+    background: $inputOverlayBg;
+    color: $inputListTextColor;
+    border: $inputOverlayBorder;
+    border-radius: $borderRadius;
+    box-shadow: $inputOverlayShadow;
+    min-width: $menuWidth;
+
+    .p-column-filter-row-items {
+        padding: $inputListPadding;
+
+        .p-column-filter-row-item {
+            margin: $inputListItemMargin;
+            padding: $inputListItemPadding;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: $listItemTransition;
+            border-radius: $inputListItemBorderRadius;
+
+            &:first-child {
+                margin-top: 0;
+            }
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+            }
+
+            &:not(.p-highlight):not(.p-disabled):hover {
+                color: $inputListItemTextHoverColor;
+                background: $inputListItemHoverBg;
+            }
+
+            &:focus-visible {
+                @include focused-listitem();
+            }
+        }
+
+        .p-column-filter-separator {
+            border-top: $divider;
+            margin: $menuSeparatorMargin;
+        }
+    }
+}
+
+.p-column-filter-overlay-menu {
+    .p-column-filter-operator {
+        padding: $inputListHeaderPadding;
+        border-bottom: $inputListHeaderBorder;
+        color: $inputListHeaderTextColor;
+        background: $inputOverlayHeaderBg;
+        margin: $inputListHeaderMargin;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+    }
+
+    .p-column-filter-constraint {
+        padding: $panelContentPadding;
+        border-bottom: $divider;
+
+        .p-column-filter-matchmode-dropdown {
+            margin-bottom: $inlineSpacing;
+        }
+
+        .p-column-filter-remove-button {
+            margin-top: $inlineSpacing;
+        }
+
+        &:last-child {
+            border-bottom: 0 none;
+        }
+    }
+
+    .p-column-filter-add-rule {
+        padding: $panelFooterPadding;
+    }
+
+    .p-column-filter-buttonbar {
+        padding: $panelContentPadding;
+    } 
+}
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_orderlist.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_orderlist.scss
new file mode 100644
index 0000000..4734442
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_orderlist.scss
@@ -0,0 +1,125 @@
+.p-orderlist {
+	.p-orderlist-controls {
+		padding: $panelContentPadding;
+
+		.p-button {
+			margin-bottom: $inlineSpacing;
+		}
+	}
+	
+	.p-orderlist-list-container {
+        background: $panelContentBg;
+        border: $panelContentBorder;
+        border-radius: $borderRadius;
+        transition: $formElementTransition;
+        outline-color: transparent;
+
+        &.p-focus {
+            @include focused-input();
+        }
+    }
+
+	.p-orderlist-header {
+		color: $panelHeaderTextColor;
+        padding: $panelHeaderPadding;
+        font-weight: $panelHeaderFontWeight;
+		.p-orderlist-title {
+			font-weight: $panelHeaderFontWeight;
+		}
+	}
+
+	.p-orderlist-filter-container {
+		padding: $panelHeaderPadding;
+		background: $panelContentBg;
+		border: $panelHeaderBorder;
+		border-bottom: 0 none;
+
+		.p-orderlist-filter-input {
+			padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+		}
+
+		.p-orderlist-filter-icon {
+			right: nth($inputPadding, 2);
+			color: $inputIconColor;
+		}
+	}
+
+	.p-orderlist-list {
+		color: $panelContentTextColor;
+        padding: $inputListPadding;
+		outline: 0 none;
+
+		&:not(:first-child) {
+            border-top: $panelContentBorder;
+        }
+        
+		.p-orderlist-item {
+			padding: $inputListItemPadding;
+			margin: $inputListItemMargin;
+			border: $inputListItemBorder;
+			color: $inputListItemTextColor;
+			background: $inputListItemBg;
+			transition: $listItemTransition;
+
+            &:first-child {
+                margin-top: 0;
+            }
+            
+			&:not(.p-highlight):hover {
+				background: $inputListItemHoverBg;
+				color: $inputListItemTextHoverColor;
+			}
+
+			&.p-focus {
+				color: $inputListItemTextFocusColor;
+				background: $inputListItemFocusBg;
+			}
+
+			&.p-highlight {
+				color: $highlightTextColor;
+				background: $highlightBg;
+
+				&.p-focus {
+					background: $highlightFocusBg;
+				}
+			}
+		}
+
+		.p-orderlist-empty-message {
+			padding: $inputListItemPadding;
+			color: $inputListItemTextColor;
+		}
+
+		&:not(.cdk-drop-list-dragging) {
+			.p-orderlist-item {
+				&:not(.p-highlight):hover {
+					background: $inputListItemHoverBg;
+					color: $inputListItemTextHoverColor;
+				}
+			}
+		}
+	}
+
+	&.p-orderlist-striped {
+		.p-orderlist-list {
+			.p-orderlist-item:nth-child(even) {
+				background: $panelContentEvenRowBg;
+
+				&:hover {
+					background: $inputListItemHoverBg;
+				}
+			}
+		}
+	}
+}
+
+.p-orderlist-item {
+	&.cdk-drag-preview {
+		padding: $inputListItemPadding;
+		box-shadow: $inputOverlayShadow;
+		border: $inputListItemBorder;
+		color: $inputListItemTextColor;
+		background: $panelContentBg;
+		margin: 0;
+	}
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_organizationchart.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_organizationchart.scss
new file mode 100644
index 0000000..776bbea
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_organizationchart.scss
@@ -0,0 +1,50 @@
+.p-organizationchart {
+    .p-organizationchart-node-content {
+        &.p-organizationchart-selectable-node:not(.p-highlight):hover {
+            background: $inputListItemHoverBg;
+            color: $inputListItemTextHoverColor;
+        }
+
+        &.p-highlight {
+            background: $highlightBg;
+            color: $highlightTextColor;
+
+            .p-node-toggler {
+                i {
+                    color: darken($highlightBg, 25%);
+                }
+            }
+        }
+    }
+
+    .p-organizationchart-line-down {
+        background: $organizationChartConnectorColor;
+    }
+
+    .p-organizationchart-line-left {
+        border-right: $panelContentBorder;
+        border-color: $organizationChartConnectorColor;
+    }
+
+    .p-organizationchart-line-top {
+        border-top: $panelContentBorder;
+        border-color: $organizationChartConnectorColor;
+    }
+
+    .p-organizationchart-node-content {
+        border: $panelContentBorder;
+        background: $panelContentBg;
+        color: $panelContentTextColor;
+        padding: $panelContentPadding;
+    }
+
+    .p-organizationchart-node-content .p-node-toggler {
+        background: inherit;
+        color: inherit;
+        border-radius: 50%;
+
+        &:focus-visible {
+            @include focused();
+        }
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_paginator.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_paginator.scss
new file mode 100644
index 0000000..b4681b7
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_paginator.scss
@@ -0,0 +1,92 @@
+.p-paginator {
+    background: $paginatorBg;
+    color: $paginatorTextColor;
+    border: $paginatorBorder;
+    border-width: $paginatorBorderWidth;
+    padding: $paginatorPadding;
+    border-radius: $borderRadius;
+
+    .p-paginator-first,
+    .p-paginator-prev,
+    .p-paginator-next,
+    .p-paginator-last {
+        background-color: $paginatorElementBg;
+        border: $paginatorElementBorder;
+        color: $paginatorElementIconColor;
+        min-width: $paginatorElementWidth;
+        height: $paginatorElementHeight;
+        margin: $paginatorElementMargin;
+        transition: $listItemTransition;
+        border-radius: $paginatorElementBorderRadius;
+
+        &:not(.p-disabled):not(.p-highlight):hover {
+            background: $paginatorElementHoverBg;
+            border-color: $paginatorElementHoverBorderColor;
+            color: $paginatorElementIconHoverColor;
+        }
+    }
+
+    .p-paginator-first {
+        border-top-left-radius: $paginatorElementBorderRadius;
+        border-bottom-left-radius: $paginatorElementBorderRadius;
+    }
+
+    .p-paginator-last {
+        border-top-right-radius: $paginatorElementBorderRadius;
+        border-bottom-right-radius: $paginatorElementBorderRadius;
+    }
+
+    .p-dropdown {
+        margin-left: $inlineSpacing;
+        margin-right: $inlineSpacing;
+        height: $paginatorElementHeight;
+
+        .p-dropdown-label {
+            padding-right: 0;
+        }
+    }
+
+    .p-paginator-page-input {
+        margin-left: $inlineSpacing;
+        margin-right: $inlineSpacing;
+
+        .p-inputtext {
+            max-width: $paginatorElementWidth;
+        }
+    }
+
+    .p-paginator-current {
+        background-color: $paginatorElementBg;
+        border: $paginatorElementBorder;
+        color: $paginatorElementIconColor;
+        min-width: $paginatorElementWidth;
+        height: $paginatorElementHeight;
+        margin: $paginatorElementMargin;
+        padding: 0 $inlineSpacing;
+    }
+
+    .p-paginator-pages {
+        .p-paginator-page {
+            background-color: $paginatorElementBg;
+            border: $paginatorElementBorder;
+            color: $paginatorElementIconColor;
+            min-width: $paginatorElementWidth;
+            height: $paginatorElementHeight;
+            margin: $paginatorElementMargin;
+            transition: $listItemTransition;
+            border-radius: $paginatorElementBorderRadius;
+
+            &.p-highlight {
+                background: $highlightBg;
+                border-color: $highlightBg;
+                color: $highlightTextColor;
+            }
+
+            &:not(.p-highlight):hover {
+                background: $paginatorElementHoverBg;
+                border-color: $paginatorElementHoverBorderColor;
+                color: $paginatorElementIconHoverColor;
+            }
+        }
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_picklist.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_picklist.scss
new file mode 100644
index 0000000..3b839e9
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_picklist.scss
@@ -0,0 +1,125 @@
+.p-picklist {
+	.p-picklist-buttons {
+		padding: $panelContentPadding;
+
+		.p-button {
+			margin-bottom: $inlineSpacing;
+		}
+	}
+
+	.p-picklist-list-wrapper {
+        background: $panelContentBg;
+        border: $panelContentBorder;
+        border-radius: $borderRadius;
+        transition: $formElementTransition;
+        outline-color: transparent;
+
+        &.p-focus {
+            @include focused-input();
+        }
+    }
+
+	.p-picklist-header {
+	  color: $panelHeaderTextColor;
+        padding: $panelHeaderPadding;
+        font-weight: $panelHeaderFontWeight;
+
+		.p-picklist-title {
+			font-weight: $panelHeaderFontWeight;
+		}
+	}
+
+	.p-picklist-filter-container {
+		padding: $panelHeaderPadding;
+		background: $panelContentBg;
+		border: $panelHeaderBorder;
+		border-bottom: 0 none;
+
+		.p-picklist-filter-input {
+			padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+		}
+
+		.p-picklist-filter-icon {
+			right: nth($inputPadding, 2);
+			color: $inputIconColor;
+		}
+	}
+
+	.p-picklist-list {
+		color: $panelContentTextColor;
+        padding: $inputListPadding;
+        outline: 0 none;
+
+		&:not(:first-child) {
+            border-top: $panelContentBorder;
+        }
+		.p-picklist-item {
+			padding: $inputListItemPadding;
+			margin: $inputListItemMargin;
+			border: $inputListItemBorder;
+			color: $inputListItemTextColor;
+			background: $inputListItemBg;
+			transition: $listItemTransition;
+
+            &:first-child {
+                margin-top: 0;
+            }
+
+			&:not(.p-highlight):hover {
+				background: $inputListItemHoverBg;
+				color: $inputListItemTextHoverColor;
+			}
+
+			&.p-focus {
+				color: $inputListItemTextFocusColor;
+				background: $inputListItemFocusBg;
+			}
+
+			&.p-highlight {
+				color: $highlightTextColor;
+				background: $highlightBg;
+
+				&.p-focus {
+					background: $highlightFocusBg;
+				}
+			}
+		}
+
+		.p-picklist-empty-message {
+			padding: $inputListItemPadding;
+			color: $inputListItemTextColor;
+		}
+
+		&:not(.cdk-drop-list-dragging) {
+			.p-picklist-item {
+				&:not(.p-highlight):hover {
+					background: $inputListItemHoverBg;
+					color: $inputListItemTextHoverColor;
+				}
+			}
+		}
+	}
+
+	&.p-picklist-striped {
+		.p-picklist-list {
+			.p-picklist-item:nth-child(even) {
+				background: $panelContentEvenRowBg;
+
+				&:hover {
+					background: $inputListItemHoverBg;
+				}
+			}
+		}
+	}
+}
+
+.p-picklist-item {
+	&.cdk-drag-preview {
+		padding: $inputListItemPadding;
+		box-shadow: $inputOverlayShadow;
+		border: $inputListItemBorder;
+		color: $inputListItemTextColor;
+		background: $panelContentBg;
+		margin: 0;
+	}
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_timeline.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_timeline.scss
new file mode 100644
index 0000000..5767491
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_timeline.scss
@@ -0,0 +1,38 @@
+.p-timeline {
+    .p-timeline-event-marker {
+        border: $timelineEventMarkerBorder; 
+        border-radius: $timelineEventMarkerBorderRadius;
+        width: $timelineEventMarkerWidth;
+        height: $timelineEventMarkerHeight;
+        background-color: $timelineEventMarkerBackground;
+    }
+
+    .p-timeline-event-connector {
+        background-color: $timelineEventColor;
+    }
+
+    &.p-timeline-vertical {
+        .p-timeline-event-opposite,
+        .p-timeline-event-content  {
+            padding: $timelineVerticalEventContentPadding;
+        }
+
+        .p-timeline-event-connector {
+            width: $timelineEventConnectorSize;
+        }
+    }
+
+    &.p-timeline-horizontal {
+        .p-timeline-event-opposite,
+        .p-timeline-event-content  {
+            padding: $timelineHorizontalEventContentPadding;
+        }
+
+        .p-timeline-event-connector {
+            height: $timelineEventConnectorSize;
+        }
+    }
+}
+
+
+
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_tree.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_tree.scss
new file mode 100644
index 0000000..82591b6
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_tree.scss
@@ -0,0 +1,172 @@
+.p-tree {
+	border: $panelContentBorder;
+	background: $panelContentBg;
+	color: $panelContentTextColor;
+	padding: $panelContentPadding;
+	border-radius: $borderRadius;
+
+	.p-tree-container {
+		.p-treenode {
+			padding: $treeNodePadding;
+			outline: 0 none;
+
+			&:focus > .p-treenode-content {
+				@include focused-listitem();
+			}
+
+			.p-treenode-content {
+				border-radius: $borderRadius;
+				transition: $listItemTransition;
+				padding: $treeNodeContentPadding;
+
+				.p-tree-toggler {
+					margin-right: $inlineSpacing;
+					@include action-icon();
+				}
+
+				.p-treenode-icon {
+					margin-right: $inlineSpacing;
+					color: $treeNodeIconColor;
+				}
+
+				.p-checkbox {
+					margin-right: $inlineSpacing;
+
+					.p-indeterminate {
+						.p-checkbox-icon {
+							color: $textColor;
+						}
+					}
+
+                    &.p-variant-filled {
+                        .p-checkbox-box {
+                            background-color: $inputFilledBg;
+                
+                            &.p-highlight {
+                                background: $checkboxActiveBg;
+                            }
+                        }
+                
+                        &:not(.p-disabled) {
+                            .p-checkbox-box {
+                                &:hover {
+                                    background-color: $inputFilledHoverBg;
+                                }
+                
+                                &.p-highlight:hover {
+                                    background: $checkboxActiveHoverBg;
+                                }
+                            }
+                        }
+                    }
+				}
+
+				&.p-highlight {
+					background: $highlightBg;
+					color: $highlightTextColor;
+
+					.p-tree-toggler,
+					.p-treenode-icon {
+						color: $highlightTextColor;
+
+						&:hover {
+							color: $highlightTextColor;
+						}
+					}
+				}
+
+				&.p-treenode-selectable:not(.p-highlight):hover {
+					background: $inputListItemHoverBg;
+					color: $inputListItemTextHoverColor;
+				}
+
+				&.p-treenode-dragover {
+					background: $inputListItemHoverBg;
+					color: $inputListItemTextHoverColor;
+				}
+			}
+		}
+	}
+
+	.p-tree-filter-container {
+		margin-bottom: $inlineSpacing;
+
+		.p-tree-filter {
+			width: 100%;
+			padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+		}
+
+		.p-tree-filter-icon {
+			right: nth($inputPadding, 2);
+			color: $inputIconColor;
+		}
+	}
+
+	.p-treenode-children {
+		padding: $treeNodeChildrenPadding;
+	}
+
+	.p-tree-loading-icon {
+		font-size: $loadingIconFontSize;
+
+		&.p-icon {
+			width: $loadingIconFontSize;
+			height: $loadingIconFontSize;
+		}
+	}
+
+	.p-treenode-droppoint {
+		&.p-treenode-droppoint-active {
+			background-color: scale-color($highlightBg, $lightness: -20%);
+		}
+	}
+
+	&.p-tree-horizontal {
+		.p-treenode {
+			.p-treenode-content {
+				border-radius: $borderRadius;
+				border: $panelContentBorder;
+				background-color: $panelContentBg;
+				color: $panelContentTextColor;
+				padding: $treeNodeContentPadding;
+				transition: $listItemTransition;
+
+				&.p-highlight {
+					background-color: $highlightBg;
+					color: $highlightTextColor;
+
+					.p-treenode-icon {
+						color: $highlightTextColor;
+					}
+				}
+
+				.p-tree-toggler {
+					margin-right: $inlineSpacing;
+				}
+
+				.p-treenode-icon {
+					color: $treeNodeIconColor;
+					margin-right: $inlineSpacing;
+				}
+
+				.p-checkbox {
+					margin-right: $inlineSpacing;
+				}
+
+				.p-treenode-label:not(.p-highlight):hover {
+					background-color: inherit;
+					color: inherit;
+				}
+
+				&.p-treenode-selectable:not(.p-highlight):hover {
+					background: $inputListItemHoverBg;
+					color: $inputListItemTextHoverColor;
+				}
+
+				&:focus {
+					@include focused();
+				}
+			}
+		}
+	}
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_treetable.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_treetable.scss
new file mode 100644
index 0000000..9ef2887
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_treetable.scss
@@ -0,0 +1,278 @@
+.p-treetable {
+    .p-paginator-top {
+        border-width: $tableTopPaginatorBorderWidth;
+        border-radius: 0;
+    }
+
+    .p-paginator-bottom {
+        border-width: $tableBottomPaginatorBorderWidth;
+        border-radius: 0;
+    }
+
+    .p-treetable-header {
+        background: $tableHeaderBg;
+        color: $tableHeaderTextColor;
+        border: $tableHeaderBorder;
+        border-width: $tableHeaderBorderWidth;
+        padding: $tableHeaderPadding;
+        font-weight: $tableHeaderFontWeight;
+    }
+
+    .p-treetable-footer {
+        background: $tableFooterBg;
+        color: $tableFooterTextColor;
+        border: $tableFooterBorder;
+        border-width: $tableFooterBorderWidth;
+        padding: $tableFooterPadding;
+        font-weight: $tableFooterFontWeight;
+    }
+
+    .p-treetable-thead > tr > th {
+        text-align: $tableCellContentAlignment;
+        padding: $tableHeaderCellPadding;
+        border: $tableHeaderCellBorder;
+        border-width: $tableHeaderCellBorderWidth;
+        font-weight: $tableHeaderCellFontWeight;
+        color: $tableHeaderCellTextColor;
+        background: $tableHeaderCellBg;
+        transition: $listItemTransition;
+    }
+
+    .p-treetable-tfoot > tr > td {
+        text-align: $tableCellContentAlignment;
+        padding: $tableFooterCellPadding;
+        border: $tableFooterCellBorder;
+        border-width: $tableFooterCellBorderWidth;
+        font-weight: $tableFooterCellFontWeight;
+        color: $tableFooterCellTextColor;
+        background: $tableFooterCellBg;
+    }
+
+    .p-sortable-column {
+        outline-color: $focusOutlineColor;
+
+        .p-sortable-column-icon {
+            color: $tableHeaderCellIconColor;
+            margin-left: $inlineSpacing;
+        }
+
+        .p-sortable-column-badge {
+            border-radius: 50%;
+            height: $tableSortableColumnBadgeSize;
+            min-width: $tableSortableColumnBadgeSize;
+            line-height: $tableSortableColumnBadgeSize;
+            color: $highlightTextColor;
+            background: $highlightBg;
+            margin-left: $inlineSpacing;
+        }
+
+        &:not(.p-highlight):hover {
+            background: $tableHeaderCellHoverBg;
+            color: $tableHeaderCellTextHoverColor;
+
+            .p-sortable-column-icon {
+                color: $tableHeaderCellIconHoverColor;
+            }
+        }
+
+        &.p-highlight {
+            background: $tableHeaderCellHighlightBg;
+            color: $tableHeaderCellHighlightTextColor;
+
+            .p-sortable-column-icon {
+                color: $tableHeaderCellHighlightTextColor;
+            }
+        }
+    }
+
+    .p-treetable-tbody {
+        > tr {
+            background: $tableBodyRowBg;
+            color: $tableBodyRowTextColor;
+            transition: $listItemTransition;
+
+            > td {
+                text-align: $tableCellContentAlignment;
+                border: $tableBodyCellBorder;
+                border-width: $tableBodyCellBorderWidth;
+                padding: $tableBodyCellPadding;
+
+                .p-treetable-toggler {
+                    @include action-icon();
+                    margin-right: $inlineSpacing;
+
+                    &.p-icon {
+                        width: $loadingIconFontSize;
+                        height: $loadingIconFontSize;
+                    }
+                }
+
+                p-treetablecheckbox .p-checkbox {
+                    margin-right: $inlineSpacing;
+                    
+                    .p-indeterminate {
+                        .p-checkbox-icon {
+                            color: $textColor;
+                        }
+                    }
+
+                    &.p-variant-filled {
+                        .p-checkbox-box {
+                            background-color: $inputFilledBg;
+                
+                            &.p-highlight {
+                                background: $checkboxActiveBg;
+                            }
+                        }
+                
+                        &:not(.p-disabled) {
+                            .p-checkbox-box {
+                                &:hover {
+                                    background-color: $inputFilledHoverBg;
+                                }
+                
+                                &.p-highlight:hover {
+                                    background: $checkboxActiveHoverBg;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            &:focus-visible {
+                outline: 0.15rem solid $focusOutlineColor;
+                outline-offset: -0.15rem;
+            }
+
+            &.p-highlight {
+                background: $highlightBg;
+                color: $highlightTextColor;
+
+                .p-treetable-toggler {
+                    color: $highlightTextColor;
+
+                    &:hover {
+                        color: $highlightTextColor;
+                    }
+                    
+                }
+            }
+        }
+    }
+
+    &.p-treetable-hoverable-rows {
+        .p-treetable-tbody > tr:not(.p-highlight):hover {
+            background: $tableBodyRowHoverBg;
+            color: $tableBodyRowTextHoverColor;
+
+            .p-treetable-toggler {
+                color: $tableBodyRowTextHoverColor;
+            }
+        }
+    }
+
+    .p-column-resizer-helper {
+        background: $tableResizerHelperBg;
+    }
+
+    .p-treetable-scrollable-header,
+    .p-treetable-scrollable-footer {
+        background: $panelHeaderBg;
+    }
+
+    .p-treetable-loading-icon {
+        font-size: $loadingIconFontSize;
+
+        &.p-icon {
+            width: $loadingIconFontSize;
+            height: $loadingIconFontSize;
+        }
+    }
+
+    &.p-treetable-gridlines {
+        .p-datatable-header {
+            border-width: 1px 1px 0 1px;
+        }
+
+        .p-treetable-footer {
+            border-width: 0 1px 1px 1px;
+        }
+
+        .p-treetable-top {
+            border-width: 0 1px 0 1px;
+        }
+
+        .p-treetable-bottom {
+            border-width: 0 1px 1px 1px;
+        }
+
+        .p-treetable-thead {
+            > tr {
+                > th {
+                    border-width: 1px;
+                }
+            }
+        }
+
+        .p-treetable-tbody {
+            > tr {
+                > td {
+                    border-width: 1px;
+                }
+            }
+        }
+
+        .p-treetable-tfoot {
+            > tr {
+                > td {
+                    border-width: 1px;
+                }
+            }
+        }
+    }
+
+    &.p-treetable-sm {
+        .p-treetable-header {
+            @include scaledPadding($tableHeaderPadding, $scaleSM);
+        }
+
+        .p-treetable-thead > tr > th {
+            @include scaledPadding($tableHeaderCellPadding, $tableScaleSM);
+        }
+
+        .p-treetable-tbody > tr > td {
+            @include scaledPadding($tableBodyCellPadding, $tableScaleSM);
+        }
+
+        .p-treetable-tfoot > tr > td {
+            @include scaledPadding($tableFooterPadding, $tableScaleSM);
+        }
+
+        .p-treetable-footer {
+            @include scaledPadding($tableFooterPadding, $tableScaleSM);
+        }
+    }
+
+    &.p-treetable-lg {
+        .p-treetable-header {
+            @include scaledPadding($tableHeaderPadding, $tableScaleLG);
+        }
+
+        .p-treetable-thead > tr > th {
+            @include scaledPadding($tableHeaderCellPadding, $tableScaleLG);
+        }
+
+        .p-treetable-tbody > tr > td {
+            @include scaledPadding($tableBodyCellPadding, $tableScaleLG);
+        }
+
+        .p-treetable-tfoot > tr > td {
+            @include scaledPadding($tableFooterPadding, $tableScaleLG);
+        }
+
+        .p-treetable-footer {
+            @include scaledPadding($tableFooterPadding, $tableScaleLG);
+        }
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_virtualscroller.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_virtualscroller.scss
new file mode 100644
index 0000000..b1b3d3a
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_virtualscroller.scss
@@ -0,0 +1,28 @@
+.p-virtualscroller {
+    .p-virtualscroller-header {
+        background: $tableHeaderBg;
+        color: $tableHeaderTextColor;
+        border: $tableHeaderBorder;
+        border-width: $tableHeaderBorderWidth;
+        padding: $tableHeaderPadding;
+        font-weight: $tableHeaderFontWeight;
+    }
+
+    .p-virtualscroller-content {
+        background: $tableBodyRowBg;
+        color: $tableBodyRowTextColor;
+        border: $dataViewContentBorder;
+        padding: $dataViewContentPadding;
+    }
+
+    .p-virtualscroller-footer {
+        background: $tableFooterBg;
+        color: $tableFooterTextColor;
+        border: $tableFooterBorder;
+        border-width: $tableFooterBorderWidth;
+        padding: $tableFooterPadding;
+        font-weight: $tableFooterFontWeight;
+        border-bottom-left-radius: $borderRadius;
+        border-bottom-right-radius: $borderRadius;
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/file/_fileupload.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/file/_fileupload.scss
new file mode 100644
index 0000000..0c7155c
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/file/_fileupload.scss
@@ -0,0 +1,64 @@
+.p-fileupload {
+    .p-fileupload-buttonbar {
+        background: $panelHeaderBg;
+        padding: $panelHeaderPadding;
+        border: $panelHeaderBorder;
+        color: $panelHeaderTextColor;
+        border-bottom: 0 none;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-button {
+            margin-right: $inlineSpacing;
+
+            &.p-fileupload-choose.p-focus {
+                @include focused();
+            }
+        }
+    }
+
+    .p-fileupload-content {
+        background: $panelContentBg;
+        padding: $fileUploadContentPadding;
+        border: $panelContentBorder;
+        color: $panelContentTextColor;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+
+        &.p-fileupload-highlight {
+            border-color: $fileUploadContentHoverBorder;
+            border-style: dashed;
+            background-color: $highlightBg;
+        }
+    }
+
+    .p-progressbar {
+        height: $fileUploadProgressBarHeight;
+    }
+
+    .p-fileupload-row {
+        > div {
+            padding: $tableBodyCellPadding;
+        }
+    }
+
+    &.p-fileupload-advanced {
+        .p-message {
+            margin-top: 0;
+        }
+    }
+}
+
+.p-fileupload-choose {
+    &:not(.p-disabled):hover {
+        background: $buttonHoverBg;
+        color: $buttonTextHoverColor;
+        border-color: $buttonHoverBorderColor;
+    }
+
+    &:not(.p-disabled):active {
+        background: $buttonActiveBg;
+        color: $buttonTextActiveColor;
+        border-color: $buttonActiveBorderColor;
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_autocomplete.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_autocomplete.scss
new file mode 100644
index 0000000..c2b5377
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_autocomplete.scss
@@ -0,0 +1,146 @@
+@use 'sass:math';
+
+.p-autocomplete {
+    .p-autocomplete-loader {
+        right: nth($inputPadding, 2); 
+    }
+
+    &.p-autocomplete-dd {
+        .p-autocomplete-loader {
+            right: nth($inputPadding, 2) + $buttonIconOnlyWidth;
+        }
+    }
+
+    &:not(.p-disabled):hover {
+        .p-autocomplete-multiple-container {
+            border-color: $inputHoverBorderColor;
+        }
+    }
+
+    &:not(.p-disabled).p-focus {
+        .p-autocomplete-multiple-container {
+            @include focused-input();
+        }
+    }
+
+    .p-autocomplete-multiple-container {
+        padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+        gap: $inlineSpacing;
+
+        .p-autocomplete-input-token {
+            padding: math.div(nth($inputPadding, 1), 2) 0;
+            
+            input {
+                font-family: var(--font-family);
+                font-feature-settings: var(--font-feature-settings, normal);
+                font-size: $inputTextFontSize;
+                color: $textColor;
+                padding: 0;
+                margin: 0;
+            }
+        }
+
+        .p-autocomplete-token {
+            padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+            background: $chipBg;
+            color: $chipTextColor;
+            border-radius: $chipBorderRadius;
+
+            .p-autocomplete-token-icon {
+                margin-left: $inlineSpacing;
+            }
+
+            &.p-focus {
+                background: $chipFocusBg;
+                color: $chipFocusTextColor;
+            }
+        }
+    }
+
+    &.p-invalid.p-component > .p-inputtext {
+        @include invalid-input();
+    }
+}
+
+.p-autocomplete-panel {
+    background: $inputOverlayBg;
+    color: $inputListTextColor;
+    border: $inputOverlayBorder;
+    border-radius: $borderRadius;
+    box-shadow: $inputOverlayShadow;
+
+    .p-autocomplete-items {
+        padding: $inputListPadding;
+
+        .p-autocomplete-item {
+            margin: $inputListItemMargin;
+            padding: $inputListItemPadding;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: $listItemTransition;
+            border-radius: $inputListItemBorderRadius;
+
+            &:first-child {
+                margin-top: 0;
+            }
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+
+                &.p-focus {
+                    background: $highlightFocusBg;
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled) {
+                &.p-focus {
+                    color: $inputListItemTextFocusColor;
+                    background: $inputListItemFocusBg;
+                }
+
+                &:hover {
+                    color: $inputListItemTextHoverColor;
+                    background: $inputListItemHoverBg;
+                }
+            }
+        }
+
+        .p-autocomplete-item-group {
+            margin: $submenuHeaderMargin;
+            padding: $submenuHeaderPadding;
+            color: $submenuHeaderTextColor;
+            background: $submenuHeaderBg;
+            font-weight: $submenuHeaderFontWeight;
+        }
+
+        .p-autocomplete-empty-message {
+            padding: $inputListItemPadding;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+        }
+    }
+}
+
+p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
+    @include invalid-input();
+}
+
+p-autocomplete.p-autocomplete-clearable {
+    .p-inputtext {
+        padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
+    }
+
+    .p-autocomplete-clear-icon {
+        color: $inputIconColor;
+        right: nth($inputPadding, 2);
+    }
+}
+
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd {
+    .p-autocomplete-clear-icon {
+        color: $inputIconColor;
+        right: $buttonIconOnlyWidth + nth($inputPadding, 2);
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_calendar.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_calendar.scss
new file mode 100644
index 0000000..c6e7701
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_calendar.scss
@@ -0,0 +1,267 @@
+p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
+    @include invalid-input();
+}
+
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    @include focused-input();
+}
+
+.p-datepicker {
+    padding: $calendarPadding;
+    background: $calendarInlineBg;
+    color: $calendarTextColor;
+    border: $calendarBorder;
+    border-radius: $borderRadius;
+
+    &:not(.p-datepicker-inline) {
+        background: $calendarBg;
+        border: $calendarOverlayBorder;
+        box-shadow: $inputOverlayShadow;
+
+        .p-datepicker-header {
+            background: $calendarHeaderBg;
+        }
+    }
+
+    .p-datepicker-header {
+        padding: $calendarHeaderPadding;
+        color: $calendarHeaderTextColor;
+        background: $calendarInlineHeaderBg;
+        font-weight: $calendarHeaderFontWeight;
+        margin: $inputListHeaderMargin;
+        border-bottom: $calendarHeaderBorder;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-datepicker-prev,
+        .p-datepicker-next {
+            @include action-icon();
+        }
+
+        .p-datepicker-title {
+            line-height: $actionIconHeight;
+
+            .p-datepicker-year,
+            .p-datepicker-month {
+                color: $calendarHeaderTextColor;
+                transition: $actionIconTransition;
+                font-weight: $calendarHeaderFontWeight;
+                padding: $calendarHeaderCellPadding;
+
+                &:enabled:hover {
+                    color: $calendarMonthYearHeaderHoverTextColor;
+                }
+            }
+
+            .p-datepicker-month {
+                margin-right: $inlineSpacing;
+            }
+        }
+    }
+
+    table {
+        font-size: $fontSize;
+        margin: $calendarTableMargin;
+
+        th {
+            padding: $calendarHeaderCellPadding;
+
+            > span {
+                width: $calendarCellDateWidth;
+                height: $calendarCellDateHeight;
+            }
+        }
+
+        td {
+            padding: $calendarCellDatePadding;
+
+            > span {
+                width: $calendarCellDateWidth;
+                height: $calendarCellDateHeight;
+                border-radius: $calendarCellDateBorderRadius;
+                transition: $listItemTransition;
+                border: $calendarCellDateBorder;
+
+                &.p-highlight {
+                    color: $highlightTextColor;
+                    background: $highlightBg;
+                }
+
+                &:focus {
+                    @include focused();
+                }
+            }
+
+            &.p-datepicker-today {
+                > span {
+                    background: $calendarCellDateTodayBg;
+                    color: $calendarCellDateTodayTextColor;
+                    border-color: $calendarCellDateTodayBorderColor;
+
+                    &.p-highlight {
+                        color: $highlightTextColor;
+                        background: $highlightBg;
+                    }
+                }
+            }
+        }
+    }
+
+    .p-datepicker-buttonbar {
+        padding: $calendarButtonBarPadding;
+        border-top: $divider;
+
+        .p-button {
+            width: auto;
+        }
+    }
+
+    .p-timepicker {
+        border-top: $divider;
+        padding: $calendarTimePickerPadding;
+
+        button {
+            @include action-icon();
+
+            &:last-child {
+                margin-top: .2em;
+            }
+        }
+
+        span {
+            font-size: $calendarTimePickerTimeFontSize;
+        }
+
+        > div {
+            padding: $calendarTimePickerElementPadding;
+        }
+    }
+
+    &.p-datepicker-timeonly {
+        .p-timepicker {
+            border-top: 0 none;
+        }
+    }
+
+    .p-monthpicker {
+        margin: $calendarTableMargin;
+
+        .p-monthpicker-month {
+            padding: $calendarCellDatePadding;
+            transition: $listItemTransition;
+            border-radius: $borderRadius;
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+            }
+        }
+    }
+
+    .p-yearpicker {
+        margin: $calendarTableMargin;
+
+        .p-yearpicker-year {
+            padding: $calendarCellDatePadding;
+            transition: $listItemTransition;
+            border-radius: $borderRadius;
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+            }
+        }
+    }
+
+    &.p-datepicker-multiple-month {
+        .p-datepicker-group {
+            border-left: $divider;
+            padding-right: $calendarPadding;
+            padding-left: $calendarPadding;
+            padding-top: 0;
+            padding-bottom: 0;
+
+            &:first-child {
+                padding-left: 0;
+                border-left: 0 none;
+            }
+
+            &:last-child {
+                padding-right: 0;
+            }
+        }
+    }
+
+    &:not(.p-disabled) {
+        table {
+            td {
+                span:not(.p-highlight):not(.p-disabled) {
+                    &:hover {
+                        background: $calendarCellDateHoverBg;
+                    }
+
+                    &:focus {
+                        @include focused();
+                    }
+                }
+            }
+        }
+
+        .p-monthpicker {
+            .p-monthpicker-month {
+                &:not(.p-disabled) {
+                    &:not(.p-highlight):hover {
+                        background: $calendarCellDateHoverBg;
+                    }
+
+                    &:focus {
+                        @include focused();
+                    }
+                }
+            }
+        }
+
+        .p-yearpicker {
+            .p-yearpicker-year {
+                &:not(.p-disabled) {
+                    &:not(.p-highlight):hover {
+                        background: $calendarCellDateHoverBg;
+                    }
+
+                    &:focus {
+                        @include focused();
+                    }
+                }
+            }
+        }
+    }
+
+}
+
+p-calendar.p-calendar-clearable {
+    .p-inputtext {
+        padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
+    }
+    
+    .p-calendar-clear-icon {
+        color: $inputIconColor;
+        right: nth($inputPadding, 2);
+    }
+}
+
+p-calendar.p-calendar-clearable .p-calendar-w-btn {
+    .p-calendar-clear-icon {
+        color: $inputIconColor;
+        right: $buttonIconOnlyWidth + nth($inputPadding, 2);
+    }
+}
+
+@media screen and (max-width: $calendarBreakpoint) {
+    .p-datepicker {
+        table {
+            th, td {
+                padding: $calendarCellDatePaddingSM;
+            }
+        }
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_cascadeselect.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_cascadeselect.scss
new file mode 100644
index 0000000..9be9757
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_cascadeselect.scss
@@ -0,0 +1,152 @@
+@use 'sass:math';
+.p-cascadeselect {
+    background: $inputBg;
+    border: $inputBorder;
+    transition: $formElementTransition;
+    border-radius: $borderRadius;
+
+    &:not(.p-disabled):hover {
+        border-color: $inputHoverBorderColor;
+    }
+
+    &:not(.p-disabled).p-focus {
+        @include focused-input();
+    }
+
+    .p-cascadeselect-label {
+        background: transparent;
+        border: 0 none;
+        padding: $inputPadding;
+
+        &.p-placeholder {
+            color: $inputPlaceholderTextColor;
+        }
+
+        &:enabled:focus {
+            outline: 0 none;
+            box-shadow: none;
+        }
+    }
+
+    .p-cascadeselect-trigger {
+        background: transparent;
+        color: $inputIconColor;
+        width: $inputGroupAddOnMinWidth;
+        border-top-right-radius: $borderRadius;
+        border-bottom-right-radius: $borderRadius;
+    }
+
+    &.p-invalid.p-component {
+        @include invalid-input();
+    }
+
+    &.p-variant-filled {
+        background-color: $inputFilledBg;
+
+        &:enabled:hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:enabled:focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+}
+
+.p-cascadeselect-panel {
+    background: $inputOverlayBg;
+    color: $inputListTextColor;
+    border: $inputOverlayBorder;
+    border-radius: $borderRadius;
+    box-shadow: $inputOverlayShadow;
+
+    .p-cascadeselect-items {
+        padding: $inputListPadding;
+
+        .p-cascadeselect-item {
+            margin: $inputListItemMargin;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: $listItemTransition;
+            border-radius: $inputListItemBorderRadius;
+
+            &:first-child {
+                margin-top: 0;
+            }
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+
+                &.p-focus {
+                    background: $highlightFocusBg;
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled) {
+                &.p-focus {
+                    color: $inputListItemTextFocusColor;
+                    background: $inputListItemFocusBg;
+                }
+
+                &:hover {
+                    color: $inputListItemTextHoverColor;
+                    background: $inputListItemHoverBg;
+                }
+            }
+
+
+            .p-cascadeselect-item-content {
+                padding: $inputListItemPadding;
+            }
+
+            .p-cascadeselect-group-icon {
+                font-size: $menuitemSubmenuIconFontSize;
+            }
+        }
+    }
+}
+
+.p-input-filled {
+    .p-cascadeselect {
+        background: $inputFilledBg;
+
+        &:not(.p-disabled):hover {
+            background-color: $inputFilledHoverBg;
+        }
+    
+        &:not(.p-disabled).p-focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+}
+
+p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
+    @include invalid-input();
+}
+
+p-cascadeselect.p-cascadeselect-clearable {
+    .p-cascadeselect-label {
+        padding-right: nth($inputPadding, 2);
+    }
+
+    .p-cascadeselect-clear-icon {
+        color: $inputIconColor;
+        right: $inputGroupAddOnMinWidth;
+    }
+}
+
+.p-overlay-modal {
+    .p-cascadeselect-sublist {
+        .p-cascadeselect-panel {
+            box-shadow: none;
+            border-radius: 0;
+            padding: math.div($inlineSpacing, 2) 0 math.div($inlineSpacing, 2) $inlineSpacing;
+        }
+    }
+
+    .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon {
+        transform: rotate(90deg);
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_checkbox.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_checkbox.scss
new file mode 100644
index 0000000..c050ff1
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_checkbox.scss
@@ -0,0 +1,115 @@
+.p-checkbox {
+    width: $checkboxWidth;
+    height: $checkboxHeight;
+
+    .p-checkbox-box {
+        border: $checkboxBorder;
+        background: $inputBg;
+        width: $checkboxWidth;
+        height: $checkboxHeight;
+        color: $textColor;
+        border-radius: $borderRadius;
+        transition: $formElementTransition;
+        outline-color: transparent;
+
+        .p-checkbox-icon {
+            transition-duration: $transitionDuration;
+            color: $checkboxIconActiveColor;
+            font-size: $checkboxIconFontSize;
+        }
+
+        .p-icon {
+            width: $checkboxIconFontSize;
+            height: $checkboxIconFontSize;
+        }
+
+        &.p-highlight {
+            border-color: $checkboxActiveBorderColor;
+            background: $checkboxActiveBg;
+        }
+    }
+
+    &:not(.p-checkbox-disabled) {
+        .p-checkbox-box {
+            &:hover {
+                border-color: $inputHoverBorderColor;
+            }
+
+            &.p-focus {
+                @include focused-input();
+            }
+
+            &.p-highlight:hover {
+                border-color: $checkboxActiveHoverBorderColor;
+                background: $checkboxActiveHoverBg;
+                color: $checkboxIconActiveHoverColor;
+            }
+        }
+    }
+
+    &.p-variant-filled {
+        .p-checkbox-box {
+            background-color: $inputFilledBg;
+
+            &.p-highlight {
+                background: $checkboxActiveBg;
+            }
+        }
+
+        &:not(.p-checkbox-disabled) {
+            .p-checkbox-box {
+                &:hover {
+                    background-color: $inputFilledHoverBg;
+                }
+
+                &.p-highlight:hover {
+                    background: $checkboxActiveHoverBg;
+                }
+            }
+        }
+    }
+}
+
+p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
+    @include invalid-input();
+}
+
+.p-input-filled {
+    .p-checkbox {
+        .p-checkbox-box {
+            background-color: $inputFilledBg;
+
+            &.p-highlight {
+                background: $checkboxActiveBg;
+            }
+        }
+        &:not(.p-checkbox-disabled) {
+            .p-checkbox-box {
+                &:hover {
+                    background-color: $inputFilledHoverBg;
+                }
+                &.p-highlight:hover {
+                    background: $checkboxActiveHoverBg;
+                }
+            }
+        }
+    }
+}
+
+.p-checkbox-label {
+    margin-left: $inlineSpacing;
+}
+
+@if ($highlightBg == $checkboxActiveBg) {
+    .p-highlight {
+        .p-checkbox {
+            .p-checkbox-box {
+                border-color: $checkboxIconActiveColor;
+            }
+        }
+    }
+}
+
+p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
+    @include invalid-input();
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_chips.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_chips.scss
new file mode 100644
index 0000000..5889094
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_chips.scss
@@ -0,0 +1,65 @@
+@use 'sass:math';
+
+.p-chips {
+    &:not(.p-disabled):hover {
+        .p-chips-multiple-container {
+            border-color: $inputHoverBorderColor;
+        }
+    }
+
+    &:not(.p-disabled).p-focus {
+        .p-chips-multiple-container {
+            @include focused-input();
+        }
+    }
+
+    .p-chips-multiple-container {
+        padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+        gap: $inlineSpacing;
+
+        .p-chips-token {
+            padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+            margin-right: $inlineSpacing;
+            background: $chipBg;
+            color: $chipTextColor;
+            border-radius: $chipBorderRadius;
+
+            &.p-focus {
+                background: $chipFocusBg;
+                color: $chipFocusTextColor;
+            }
+
+            .p-chips-token-icon {
+                margin-left: $inlineSpacing;
+            }
+        }
+
+        .p-chips-input-token {
+            padding: math.div(nth($inputPadding, 1), 2) 0;
+                
+            input {
+                font-family: var(--font-family);
+                font-feature-settings: var(--font-feature-settings, normal);
+                font-size: $inputTextFontSize;
+                color: $textColor;
+                padding: 0;
+                margin: 0;
+            }
+        }
+    }
+}
+
+p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
+    @include invalid-input();
+}
+
+p-chips.p-chips-clearable {
+    .p-inputtext {
+        padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+    }
+
+    .p-chips-clear-icon {
+        color: $inputIconColor;
+        right: nth($inputPadding, 2);
+    } 
+}
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_colorpicker.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_colorpicker.scss
new file mode 100644
index 0000000..b57ef48
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_colorpicker.scss
@@ -0,0 +1,19 @@
+.p-colorpicker-preview,
+.p-fluid .p-colorpicker-preview.p-inputtext  {
+    width: $colorPickerPreviewWidth;
+    height: $colorPickerPreviewHeight;
+}
+
+.p-colorpicker-panel {
+    background: $colorPickerBg;
+    border: $colorPickerBorder;
+
+    .p-colorpicker-color-handle,
+    .p-colorpicker-hue-handle {
+        border-color: $colorPickerHandleColor;
+    }
+}
+
+.p-colorpicker-overlay-panel {
+    box-shadow: $inputOverlayShadow;
+}
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_dropdown.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_dropdown.scss
new file mode 100644
index 0000000..d83a562
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_dropdown.scss
@@ -0,0 +1,167 @@
+.p-dropdown {
+    background: $inputBg;
+    border: $inputBorder;
+    transition: $formElementTransition;
+    border-radius: $borderRadius;
+
+    &:not(.p-disabled):hover {
+        border-color: $inputHoverBorderColor;
+    }
+
+    &:not(.p-disabled).p-focus {
+        @include focused-input();
+    }
+
+    &.p-dropdown-clearable {
+        .p-dropdown-label {
+            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+        }
+    }
+
+    .p-dropdown-label {
+        background: transparent;
+        border: 0 none;
+
+        &.p-placeholder {
+            color: $inputPlaceholderTextColor;
+        }
+
+        &:focus,
+        &:enabled:focus {
+            outline: 0 none;
+            box-shadow: none;
+        }
+    }
+
+    .p-dropdown-trigger {
+        background: transparent;
+        color: $inputIconColor;
+        width: $inputGroupAddOnMinWidth;
+        border-top-right-radius: $borderRadius;
+        border-bottom-right-radius: $borderRadius;
+    }
+
+    .p-dropdown-clear-icon {
+        color: $inputIconColor;
+        right: $inputGroupAddOnMinWidth;
+    }
+
+    &.p-invalid.p-component {
+        @include invalid-input();
+    }
+
+    &.p-variant-filled {
+        background-color: $inputFilledBg;
+
+        &:enabled:hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:enabled:focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+}
+
+.p-dropdown-panel {
+    background: $inputOverlayBg;
+    color: $inputListTextColor;
+    border: $inputOverlayBorder;
+    border-radius: $borderRadius;
+    box-shadow: $inputOverlayShadow;
+
+    .p-dropdown-header {
+        padding: $inputListHeaderPadding;
+        border-bottom: $inputListHeaderBorder;
+        color: $inputListHeaderTextColor;
+        background: $inputOverlayHeaderBg;
+        margin: $inputListHeaderMargin;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-dropdown-filter {
+            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+            margin-right: -1 * (nth($inputPadding, 2) + $primeIconFontSize);
+        }
+
+        .p-dropdown-filter-icon {
+            right: nth($inputPadding, 2);
+            color: $inputIconColor;
+        }
+    }
+
+    .p-dropdown-items {
+        padding: $inputListPadding;
+
+        .p-dropdown-item {
+            margin: $inputListItemMargin;
+            padding: $inputListItemPadding;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: $listItemTransition;
+            border-radius: $inputListItemBorderRadius;
+
+            &:first-child {
+                margin-top: 0;
+            }
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+
+                &.p-focus {
+                    background: $highlightFocusBg;
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled) {
+                &.p-focus {
+                    color: $inputListItemTextFocusColor;
+                    background: $inputListItemFocusBg;
+                }
+
+                &:hover {
+                    color: $inputListItemTextHoverColor;
+                    background: $inputListItemHoverBg;
+                }
+            }
+        }
+
+        .p-dropdown-item-group {
+            margin: $submenuHeaderMargin;
+            padding: $submenuHeaderPadding;
+            color: $submenuHeaderTextColor;
+            background: $submenuHeaderBg;
+            font-weight: $submenuHeaderFontWeight;
+        }
+
+        .p-dropdown-empty-message {
+            padding: $inputListItemPadding;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+        }
+    }
+}
+
+.p-input-filled {
+    .p-dropdown {
+        background: $inputFilledBg;
+
+        &:not(.p-disabled):hover {
+            background-color: $inputFilledHoverBg;
+        }
+    
+        &:not(.p-disabled).p-focus {
+            background-color: $inputFilledFocusBg;
+
+            .p-inputtext {
+                background-color: transparent;
+            }
+        }
+    }
+}
+
+p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
+    @include invalid-input();
+}
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_editor.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_editor.scss
new file mode 100644
index 0000000..b10b2fa
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_editor.scss
@@ -0,0 +1,122 @@
+.p-editor-container {
+    .p-editor-toolbar {
+        background: $editorToolbarBg;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        &.ql-snow {
+            border: $editorToolbarBorder;
+
+            .ql-stroke {
+                stroke: $editorToolbarIconColor;
+            }
+    
+            .ql-fill {
+                fill: $editorToolbarIconColor;
+            }
+    
+            .ql-picker {
+                .ql-picker-label {
+                    border: 0 none;
+                    color: $editorToolbarIconColor;
+
+                    &:hover {
+                        color: $editorToolbarIconHoverColor;
+
+                        .ql-stroke {
+                            stroke: $editorToolbarIconHoverColor;
+                        }
+                
+                        .ql-fill {
+                            fill: $editorToolbarIconHoverColor;
+                        }
+                    }
+                }
+
+                &.ql-expanded {
+                    .ql-picker-label {
+                        color: $editorToolbarIconHoverColor;
+
+                        .ql-stroke {
+                            stroke: $editorToolbarIconHoverColor;
+                        }
+                
+                        .ql-fill {
+                            fill: $editorToolbarIconHoverColor;
+                        }
+                    }
+
+                    .ql-picker-options {
+                        background: $inputOverlayBg;
+                        border:$inputOverlayBorder;
+                        box-shadow:$inputOverlayShadow;
+                        border-radius: $borderRadius;
+                        padding: $inputListPadding;
+
+                        .ql-picker-item {
+                            color: $inputListItemTextColor;
+                            
+                            &:hover {
+                                color: $inputListItemTextHoverColor;
+                                background: $inputListItemHoverBg;
+                            }
+                        }
+                    }
+
+                    &:not(.ql-icon-picker) {
+                        .ql-picker-item {
+                            padding: $inputListItemPadding;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .p-editor-content {
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+
+        &.ql-snow {
+            border: $editorContentBorder;
+        }
+
+        .ql-editor {
+            background: $inputBg;
+            color: $inputTextColor;
+            border-bottom-right-radius: $borderRadius;
+            border-bottom-left-radius: $borderRadius;
+        }
+    }
+
+    .ql-snow.ql-toolbar button:hover,
+    .ql-snow.ql-toolbar button:focus {
+        color: $editorToolbarIconHoverColor;
+
+        .ql-stroke {
+            stroke: $editorToolbarIconHoverColor;
+        }
+
+        .ql-fill {
+            fill: $editorToolbarIconHoverColor;
+        }
+    }
+
+    .ql-snow.ql-toolbar button.ql-active,
+    .ql-snow.ql-toolbar .ql-picker-label.ql-active,
+    .ql-snow.ql-toolbar .ql-picker-item.ql-selected {
+        color: $editorIconActiveColor;
+
+        .ql-stroke {
+            stroke: $editorIconActiveColor;
+        }
+
+        .ql-fill {
+            fill: $editorIconActiveColor;
+        }
+
+        .ql-picker-label {
+            color: $editorIconActiveColor;
+        }
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_iconfield.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_iconfield.scss
new file mode 100644
index 0000000..8f4d9d7
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_iconfield.scss
@@ -0,0 +1,7 @@
+.p-icon-field {
+    .p-input-icon {
+        position: absolute;
+        top: 50%;
+        margin-top: -.5rem;
+    }
+}
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_inputgroup.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_inputgroup.scss
new file mode 100644
index 0000000..e93e7bf
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_inputgroup.scss
@@ -0,0 +1,74 @@
+.p-inputgroup-addon {
+    background: $inputGroupBg;
+    color: $inputGroupTextColor;
+    border-top: $inputBorder;
+    border-left: $inputBorder;
+    border-bottom: $inputBorder;
+    padding: $inputPadding;
+    min-width: $inputGroupAddOnMinWidth;
+
+    &:last-child {
+        border-right: $inputBorder;
+    }
+}
+
+.p-inputgroup {
+    > .p-component,
+    > .p-inputwrapper > .p-inputtext,
+    > .p-float-label > .p-component {
+        border-radius: 0;
+        margin: 0;
+
+        + .p-inputgroup-addon {
+            border-left: 0 none;
+        }
+
+        &:focus {
+            z-index: 1;
+
+            ~ label {
+                z-index: 1;
+            }
+        }
+    }
+}
+
+.p-inputgroup-addon:first-child,
+.p-inputgroup button:first-child,
+.p-inputgroup input:first-child,
+.p-inputgroup > .p-inputwrapper:first-child > .p-component,
+.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext {
+    border-top-left-radius: $borderRadius;
+    border-bottom-left-radius: $borderRadius;
+}
+
+.p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: $borderRadius;
+    border-bottom-left-radius: $borderRadius;
+}
+
+.p-inputgroup-addon:last-child,
+.p-inputgroup button:last-child,
+.p-inputgroup input:last-child,
+.p-inputgroup > .p-inputwrapper:last-child > .p-component,
+.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext {
+    border-top-right-radius: $borderRadius;
+    border-bottom-right-radius: $borderRadius;
+}
+
+.p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: $borderRadius;
+    border-bottom-right-radius: $borderRadius;
+}
+
+.p-fluid {
+    .p-inputgroup {
+        .p-button {
+            width: auto;
+
+            &.p-button-icon-only {
+                width: $buttonIconOnlyWidth;
+            }
+        }
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_inputicon.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_inputicon.scss
new file mode 100644
index 0000000..158eaaa
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_inputicon.scss
@@ -0,0 +1,13 @@
+.p-icon-field-left{
+    .p-input-icon:first-of-type {
+        left: nth($inputPadding, 2);
+        color: $inputIconColor;
+    }
+}
+
+.p-icon-field-right {
+    .p-input-icon:last-of-type  {
+        right: nth($inputPadding, 2);
+        color: $inputIconColor;
+    }
+}
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_inputmask.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_inputmask.scss
new file mode 100644
index 0000000..cfb8a99
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_inputmask.scss
@@ -0,0 +1,30 @@
+@use 'sass:math';
+
+p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
+    @include invalid-input();
+}
+
+p-inputmask.p-inputmask-clearable {
+    .p-inputtext {
+        padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
+    }
+    
+    .p-inputmask-clear-icon {
+        color: $inputIconColor;
+        right: nth($inputPadding, 2);
+    }
+}
+
+.p-inputmask {
+    &.p-variant-filled {
+        background-color: $inputFilledBg;
+
+        &:enabled:hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:enabled:focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+}
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_inputnumber.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_inputnumber.scss
new file mode 100644
index 0000000..45aa1fd
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_inputnumber.scss
@@ -0,0 +1,42 @@
+p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
+    @include invalid-input();
+}
+
+p-inputnumber.p-inputnumber-clearable {
+    .p-inputnumber-input {
+        padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
+    }
+    
+    .p-inputnumber-clear-icon {
+        color: $inputIconColor;
+        right: nth($inputPadding, 2);
+    }
+}
+
+p-inputnumber.p-inputnumber-clearable {
+    .p-inputnumber-buttons-stacked{
+        .p-inputnumber-clear-icon {
+           right: $buttonIconOnlyWidth + nth($inputPadding, 2);
+        }
+    }
+    
+    .p-inputnumber-buttons-horizontal{
+        .p-inputnumber-clear-icon {
+           right: $buttonIconOnlyWidth + nth($inputPadding, 2);
+        }
+    }
+}
+
+p-inputnumber.p-inputnumber {
+    &.p-variant-filled > .p-inputnumber-input {
+        background-color: $inputFilledBg;
+
+        &:enabled:hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:enabled:focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+}
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_inputotp.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_inputotp.scss
new file mode 100644
index 0000000..ec356a2
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_inputotp.scss
@@ -0,0 +1,10 @@
+.p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: $inlineSpacing;
+}
+
+.p-inputotp-input {
+    text-align: center;
+    width: 2 * nth($inputPadding, 2) + 1rem;
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_inputswitch.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_inputswitch.scss
new file mode 100644
index 0000000..510081d
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_inputswitch.scss
@@ -0,0 +1,60 @@
+@use 'sass:math';
+
+.p-inputswitch {
+    width: $inputSwitchWidth;
+    height: $inputSwitchHeight;
+
+    .p-inputswitch-slider {
+        background: $inputSwitchSliderOffBg;
+        transition: $formElementTransition;
+        border-radius: $inputSwitchBorderRadius;
+
+        &:before {
+            background: $inputSwitchHandleOffBg;
+            width: $inputSwitchHandleWidth;
+            height: $inputSwitchHandleHeight;
+            left: $inputSwitchSliderPadding;
+            margin-top: math.div(-1 * $inputSwitchHandleHeight, 2);
+            border-radius: $inputSwitchHandleBorderRadius;
+            transition-duration: $transitionDuration;
+        }
+    }
+
+    &.p-inputswitch-checked {
+        .p-inputswitch-slider:before {
+            transform: translateX($inputSwitchHandleWidth);
+        }
+    }
+
+    &.p-focus {
+        .p-inputswitch-slider {
+            @include focused();
+        }
+    }
+
+    &:not(.p-disabled):hover {
+        .p-inputswitch-slider {
+            background: $inputSwitchSliderOffHoverBg;
+        }
+    }
+
+    &.p-inputswitch-checked {
+        .p-inputswitch-slider {
+            background: $inputSwitchSliderOnBg;
+
+            &:before {
+                background: $inputSwitchHandleOnBg;
+             }
+        }
+
+        &:not(.p-disabled):hover {
+            .p-inputswitch-slider {
+                background: $inputSwitchSliderOnHoverBg;
+            }
+        }
+    }
+}
+
+p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider {
+    @include invalid-input();
+}
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_inputtext.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_inputtext.scss
new file mode 100644
index 0000000..8cc56b9
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_inputtext.scss
@@ -0,0 +1,124 @@
+.p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: $inputTextFontSize;
+    color: $inputTextColor;
+    background: $inputBg;
+    padding: $inputPadding;
+    border: $inputBorder;
+    transition: $formElementTransition;
+    appearance: none;
+    border-radius: $borderRadius;
+
+    &:enabled:hover {
+        border-color: $inputHoverBorderColor;
+    }
+
+    &:enabled:focus {
+        @include focused-input();
+    }
+
+    &.ng-dirty.ng-invalid {
+        @include invalid-input();
+    }
+
+    &.p-variant-filled {
+        background-color: $inputFilledBg;
+
+        &:enabled:hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:enabled:focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+
+    &.p-inputtext-sm {
+        @include scaledFontSize($inputTextFontSize, $scaleSM);
+        @include scaledPadding($inputPadding, $scaleSM);
+    }
+
+    &.p-inputtext-lg {
+        @include scaledFontSize($inputTextFontSize, $scaleLG);
+        @include scaledPadding($inputPadding, $scaleLG);
+    }
+}
+
+.p-float-label > label {
+    left: nth($inputPadding, 2);
+    color: $inputPlaceholderTextColor;
+    transition-duration: $transitionDuration;
+}
+
+.p-float-label > .ng-invalid.ng-dirty + label {
+    color: $inputErrorBorderColor;
+}
+
+.p-input-icon-left > .p-icon-wrapper.p-icon,
+.p-input-icon-left > i:first-of-type {
+    left: nth($inputPadding, 2);
+    color: $inputIconColor;
+}
+
+.p-input-icon-left > .p-inputtext {
+    padding-left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
+}
+
+.p-input-icon-left.p-float-label > label {
+    left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
+}
+
+.p-input-icon-right > .p-icon-wrapper,
+.p-input-icon-right > i:last-of-type {
+    right: nth($inputPadding, 2);
+    color: $inputIconColor;
+}
+
+.p-input-icon-right > .p-inputtext {
+    padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
+}
+
+.p-icon-field-left > .p-inputtext {
+    padding-left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
+}
+
+.p-icon-field-left.p-float-label > label {
+    left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
+}
+
+.p-icon-field-right > .p-inputtext {
+    padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
+}
+
+@include placeholder {
+    color: $inputPlaceholderTextColor
+};
+
+.p-input-filled {
+    .p-inputtext {
+        background-color: $inputFilledBg;
+
+        &:enabled:hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:enabled:focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+}
+
+.p-inputtext-sm {
+    .p-inputtext {
+        @include scaledFontSize($inputTextFontSize, $scaleSM);
+        @include scaledPadding($inputPadding, $scaleSM);
+    }
+}
+
+.p-inputtext-lg {
+    .p-inputtext {
+        @include scaledFontSize($inputTextFontSize, $scaleLG);
+        @include scaledPadding($inputPadding, $scaleLG);
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_listbox.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_listbox.scss
new file mode 100644
index 0000000..a43acf4
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_listbox.scss
@@ -0,0 +1,105 @@
+.p-listbox {
+    background: $inputListBg;
+    color: $inputListTextColor;
+    border: $inputListBorder;
+    border-radius: $borderRadius;
+    transition: $formElementTransition;
+
+    .p-listbox-header {
+        padding: $inputListHeaderPadding;
+        border-bottom: $inputListHeaderBorder;
+        color: $inputListHeaderTextColor;
+        background: $inputListHeaderBg;
+        margin: $inputListHeaderMargin;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-listbox-filter {
+            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+        }
+
+        .p-listbox-filter-icon {
+            right: nth($inputPadding, 2);
+            color: $inputIconColor;
+        }
+        
+        .p-checkbox {
+            margin-right: $inlineSpacing;
+        }
+    }
+
+    .p-listbox-list {
+        padding: $inputListPadding;
+        outline: 0 none;
+
+        .p-listbox-item {
+            margin: $inputListItemMargin;
+            padding: $inputListItemPadding;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            transition: $listItemTransition;
+            border-radius: $inputListItemBorderRadius;
+
+            &:first-child {
+                margin-top: 0;
+            }
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+            }
+
+            .p-checkbox {
+                margin-right: $inlineSpacing;
+            }
+        }
+
+        .p-listbox-item-group {
+            margin: $submenuHeaderMargin;
+            padding: $submenuHeaderPadding;
+            color: $submenuHeaderTextColor;
+            background: $submenuHeaderBg;
+            font-weight: $submenuHeaderFontWeight;
+        }
+
+        .p-listbox-empty-message {
+            padding: $inputListItemPadding;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+        }
+    }
+
+    &:not(.p-disabled) {
+        .p-listbox-item {
+            &.p-highlight {
+                &.p-focus {
+                    background: $highlightFocusBg;
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled) {
+                &.p-focus {
+                    color: $inputListItemTextHoverColor;
+                    background: $inputListItemHoverBg;
+                }
+
+                &:hover {
+                    color: $inputListItemTextHoverColor;
+                    background: $inputListItemHoverBg;
+
+                    &.p-focus {
+                        color: $inputListItemTextHoverColor;
+                        background: $inputListItemHoverBg;
+                    }
+                }
+            }
+        }
+    }
+    &.p-focus {
+        @include focused-input();
+    }
+}
+
+p-listbox.ng-dirty.ng-invalid > .p-listbox {
+    @include invalid-input();
+}
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_multiselect.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_multiselect.scss
new file mode 100644
index 0000000..854cee5
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_multiselect.scss
@@ -0,0 +1,194 @@
+@use 'sass:math';
+
+.p-multiselect {
+    background: $inputBg;
+    border: $inputBorder;
+    transition: $formElementTransition;
+    border-radius: $borderRadius;
+
+    &:not(.p-disabled):hover {
+        border-color: $inputHoverBorderColor;
+    }
+
+    &:not(.p-disabled).p-focus {
+        @include focused-input();
+    }
+
+    .p-multiselect-label {
+        padding: $inputPadding;
+        transition: $formElementTransition;
+
+        &.p-placeholder {
+            color: $inputPlaceholderTextColor;
+        }
+    }
+
+    &.p-multiselect-chip {
+        .p-multiselect-token {
+            padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+            margin-right: $inlineSpacing;
+            background: $chipBg;
+            color: $chipTextColor;
+            border-radius: $chipBorderRadius;
+
+            .p-multiselect-token-icon {
+                margin-left: $inlineSpacing;
+            }
+        }
+    }
+
+    .p-multiselect-trigger {
+        background: transparent;
+        color: $inputIconColor;
+        width: $inputGroupAddOnMinWidth;
+        border-top-right-radius: $borderRadius;
+        border-bottom-right-radius: $borderRadius;
+    }
+
+    &.p-variant-filled {
+        background: $inputFilledBg;
+
+        &:not(.p-disabled):hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:not(.p-disabled).p-focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+}
+
+.p-inputwrapper-filled {
+    .p-multiselect {
+        &.p-multiselect-chip {
+            .p-multiselect-label {
+                padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+            }
+        }
+    }
+}
+    
+.p-multiselect-clearable {
+    .p-multiselect-label-container {
+        padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+    }
+
+    .p-multiselect-clear-icon {
+        color: $inputIconColor;
+        right: $inputGroupAddOnMinWidth;
+    }
+}
+
+.p-multiselect-panel {
+    background: $inputOverlayBg;
+    color: $inputListTextColor;
+    border: $inputOverlayBorder;
+    border-radius: $borderRadius;
+    box-shadow: $inputOverlayShadow;
+
+    .p-multiselect-header {
+        padding: $inputListHeaderPadding;
+        border-bottom: $inputListHeaderBorder;
+        color: $inputListHeaderTextColor;
+        background: $inputOverlayHeaderBg;
+        margin: $inputListHeaderMargin;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-multiselect-filter-container {
+            .p-inputtext {
+                padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+            }
+
+            .p-multiselect-filter-icon {
+                right: nth($inputPadding, 2);
+                color: $inputIconColor;
+            }
+        }
+
+        .p-checkbox {
+            margin-right: $inlineSpacing;
+        }
+
+        .p-multiselect-close {
+            margin-left: $inlineSpacing;
+            @include action-icon();
+        }
+    }
+
+    .p-multiselect-items {
+        padding: $inputListPadding;
+
+        .p-multiselect-item {
+            margin: $inputListItemMargin;
+            padding: $inputListItemPadding;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: $listItemTransition;
+            border-radius: $inputListItemBorderRadius;
+
+            &:first-child {
+                margin-top: 0;
+            }
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+
+                &.p-focus {
+                    background: $highlightFocusBg;
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled) {
+                &.p-focus {
+                    color: $inputListItemTextFocusColor;
+                    background: $inputListItemHoverBg;
+                }
+
+                &:hover {
+                    color: $inputListItemTextHoverColor;
+                    background: $inputListItemHoverBg;
+                }
+            }
+
+            .p-checkbox {
+                margin-right: $inlineSpacing;
+            }
+        }
+
+        .p-multiselect-item-group {
+            margin: $submenuHeaderMargin;
+            padding: $submenuHeaderPadding;
+            color: $submenuHeaderTextColor;
+            background: $submenuHeaderBg;
+            font-weight: $submenuHeaderFontWeight;
+        }
+
+        .p-multiselect-empty-message {
+            padding: $inputListItemPadding;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+        }
+    }
+}
+
+.p-input-filled {
+    .p-multiselect {
+        background: $inputFilledBg;
+
+        &:not(.p-disabled):hover {
+            background-color: $inputFilledHoverBg;
+        }
+    
+        &:not(.p-disabled).p-focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+
+}
+
+p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
+    @include invalid-input();
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_password.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_password.scss
new file mode 100644
index 0000000..95411e1
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_password.scss
@@ -0,0 +1,52 @@
+p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
+    @include invalid-input();
+}
+
+.p-password-panel {
+    padding: $panelContentPadding;
+    background: $panelContentBg;
+    color: $panelContentTextColor;
+    border: $overlayContentBorder;
+    box-shadow: $inputOverlayShadow;
+    border-radius: $borderRadius;
+
+    .p-password-meter {
+        margin-bottom: $inlineSpacing;
+        background: $passwordMeterBg;
+
+        .p-password-strength {
+            &.weak {
+                background: $passwordWeakBg;
+            }
+
+            &.medium {
+                background: $passwordMediumBg;
+            }
+
+            &.strong {
+                background: $passwordStrongBg;
+            }
+        }
+    }
+}
+
+p-password.p-password-clearable {
+    .p-password-input {
+        padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
+    }
+    .p-password-clear-icon {
+        color: $inputIconColor;
+        right: nth($inputPadding, 2);
+    }
+}
+
+p-password.p-password-clearable.p-password-mask{
+    .p-password-input {
+        padding-right: nth($inputPadding, 2) * 3 + $primeIconFontSize * 2;
+    }
+
+    .p-password-clear-icon {
+        color: $inputIconColor;
+        right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
+    }
+}
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_radiobutton.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_radiobutton.scss
new file mode 100644
index 0000000..5bf268f
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_radiobutton.scss
@@ -0,0 +1,97 @@
+.p-radiobutton {
+    width: $radiobuttonWidth;
+    height: $radiobuttonHeight;
+
+    .p-radiobutton-box {
+        border: $radiobuttonBorder;
+        background: $inputBg;
+        width: $radiobuttonWidth;
+        height: $radiobuttonHeight;
+        color: $textColor;
+        border-radius: 50%;
+        transition: $formElementTransition;
+        outline-color: transparent;
+
+        &:not(.p-disabled):not(.p-highlight):hover {
+            border-color: $inputHoverBorderColor;
+        }
+
+        &:not(.p-disabled).p-focus {
+            @include focused-input();
+        }
+
+        .p-radiobutton-icon {
+            width: $radiobuttonIconSize;
+            height: $radiobuttonIconSize;
+            transition-duration: $transitionDuration;
+            background-color: $radiobuttonIconActiveColor;
+        }
+
+        &.p-highlight {
+            border-color: $radiobuttonActiveBorderColor;
+            background: $radiobuttonActiveBg;
+
+            &:not(.p-disabled):hover {
+                border-color: $radiobuttonActiveHoverBorderColor;
+                background: $radiobuttonActiveHoverBg;
+                color: $radiobuttonIconActiveHoverColor;
+            }
+        }
+    }
+
+    &.p-variant-filled {
+        .p-radiobutton-box {
+            background-color: $inputFilledBg;
+
+            &:not(.p-disabled):hover {
+                background-color: $inputFilledHoverBg;
+            }
+
+            &.p-highlight {
+                background: $radiobuttonActiveBg;
+
+                &:not(.p-disabled):hover {
+                    background: $radiobuttonActiveHoverBg;
+                }
+            }
+        }
+    }
+}
+
+p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box {
+    @include invalid-input();
+}
+
+.p-input-filled {
+    .p-radiobutton {
+        .p-radiobutton-box {
+            background-color: $inputFilledBg;
+
+            &:not(.p-disabled):hover {
+                background-color: $inputFilledHoverBg;
+            }
+
+            &.p-highlight {
+                background: $radiobuttonActiveBg;
+
+                &:not(.p-disabled):hover {
+                    background: $radiobuttonActiveHoverBg;
+                }
+            }
+        }
+    }
+}
+
+.p-radiobutton-label {
+    margin-left: $inlineSpacing;
+}
+
+@if ($highlightBg == $radiobuttonActiveBg) {
+    .p-highlight {
+        .p-radiobutton {
+            .p-radiobutton-box {
+                border-color: $radiobuttonIconActiveColor;
+            }
+        }
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_rating.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_rating.scss
new file mode 100644
index 0000000..59fe659
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_rating.scss
@@ -0,0 +1,66 @@
+@use 'sass:math';
+
+.p-rating {
+    gap: $inlineSpacing;
+
+    .p-rating-item {
+        border-radius: 50%;
+        outline-color: transparent;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+
+        .p-rating-icon {
+            color: $ratingStarIconOffColor;
+            transition: $formElementTransition;   
+            font-size: $ratingIconFontSize;
+
+            &.p-icon {
+                width: $ratingIconFontSize;
+                height: $ratingIconFontSize;
+            }
+    
+            &.p-rating-cancel {
+                color: $ratingCancelIconColor;
+            }
+        }
+
+        &.p-focus {
+            @include focused();
+        }
+
+        &.p-rating-item-active {
+            .p-rating-icon {
+                color: $ratingStarIconOnColor;
+            }
+        }
+    }
+
+    &:not(.p-disabled):not(.p-readonly) {
+        .p-rating-item {
+            &:hover {
+                .p-rating-icon {
+                    color: $ratingStarIconHoverColor;
+
+                    &.p-rating-cancel {
+                        color: $ratingCancelIconHoverColor;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@if ($highlightBg == $ratingStarIconOnColor) {
+    .p-highlight {
+        .p-rating {
+            .p-rating-item {
+                &.p-rating-item-active {
+                    .p-rating-icon {
+                        color: $highlightTextColor;
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_selectbutton.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_selectbutton.scss
new file mode 100644
index 0000000..7ef80de
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_selectbutton.scss
@@ -0,0 +1,50 @@
+.p-selectbutton {
+    .p-button {
+        background: $toggleButtonBg;
+        border: $toggleButtonBorder;
+        color: $toggleButtonTextColor;
+        transition: $formElementTransition;
+
+        .p-button-icon-left,
+        .p-button-icon-right {
+            color: $toggleButtonIconColor;
+        }
+
+        &:not(.p-disabled):not(.p-highlight):hover {
+            background: $toggleButtonHoverBg;
+            border-color: $toggleButtonHoverBorderColor;
+            color: $toggleButtonTextHoverColor;
+
+            .p-button-icon-left,
+            .p-button-icon-right {
+                color: $toggleButtonIconHoverColor;
+            }
+        }
+
+        &.p-highlight {
+            background: $toggleButtonActiveBg;
+            border-color: $toggleButtonActiveBorderColor;
+            color: $toggleButtonTextActiveColor;
+
+            .p-button-icon-left,
+            .p-button-icon-right {
+                color: $toggleButtonIconActiveColor;
+            }
+
+            &:hover {
+                background: $toggleButtonActiveHoverBg;
+                border-color: $toggleButtonActiveHoverBorderColor;
+                color: $toggleButtonTextActiveHoverColor;
+
+                .p-button-icon-left,
+                .p-button-icon-right {
+                    color: $toggleButtonIconActiveHoverColor;
+                }
+            }
+        }
+    }
+}
+
+p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button {
+    @include invalid-input();
+}
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_slider.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_slider.scss
new file mode 100644
index 0000000..45f69b7
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_slider.scss
@@ -0,0 +1,74 @@
+@use 'sass:math';
+
+.p-slider {
+    background: $sliderBg;
+    border: $sliderBorder;
+    border-radius: $borderRadius;
+
+    &.p-slider-horizontal {
+        height: $sliderHorizontalHeight;
+
+        .p-slider-handle {
+            margin-top: math.div(-1 * $sliderHandleHeight, 2);
+            margin-left: math.div(-1 * $sliderHandleWidth, 2);
+        }
+    }
+
+    &.p-slider-vertical {
+        height: 100%;
+        width: $sliderVerticalWidth;
+
+        .p-slider-handle {
+            height: $sliderHandleWidth;
+            width: $sliderHandleHeight;
+            margin-left: math.div(-1 * $sliderHandleWidth, 2);
+            margin-bottom: math.div(-1 * $sliderHandleHeight, 2);
+        }
+    }
+
+    .p-slider-handle {
+        height: $sliderHandleHeight;
+        width: $sliderHandleWidth;
+        background: $sliderHandleBg;
+        border: $sliderHandleBorder;
+        border-radius: $sliderHandleBorderRadius;
+        transition: $formElementTransition;
+
+        &:focus {
+            @include focused();
+        }
+    }
+
+    .p-slider-range {
+        background: $sliderRangeBg;
+    }
+
+    &:not(.p-disabled) {
+        .p-slider-handle:hover {
+            background: $sliderHandleHoverBg;
+            border-color: $sliderHandleHoverBorderColor;
+        }
+    }
+
+    &.p-slider-animate {
+        &.p-slider-horizontal {
+            .p-slider-handle {
+                transition: $formElementTransition, left $transitionDuration;
+            }
+
+            .p-slider-range {
+                transition: width $transitionDuration;
+            }
+        }
+
+        &.p-slider-vertical {
+            .p-slider-handle {
+                transition: $formElementTransition, bottom $transitionDuration;
+            }
+
+            .p-slider-range {
+                transition: height $transitionDuration;
+            }
+        }
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_togglebutton.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_togglebutton.scss
new file mode 100644
index 0000000..b81bd26
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_togglebutton.scss
@@ -0,0 +1,48 @@
+.p-togglebutton.p-button {
+    background: $toggleButtonBg;
+    border: $toggleButtonBorder;
+    color: $toggleButtonTextColor;
+    transition: $formElementTransition;
+
+    .p-button-icon-left,
+    .p-button-icon-right {
+        color: $toggleButtonIconColor;
+    }
+
+    &:not(.p-disabled):not(.p-highlight):hover {
+        background: $toggleButtonHoverBg;
+        border-color: $toggleButtonHoverBorderColor;
+        color: $toggleButtonTextHoverColor;
+
+        .p-button-icon-left,
+        .p-button-icon-right {
+            color: $toggleButtonIconHoverColor;
+        }
+    }
+
+    &.p-highlight {
+        background: $toggleButtonActiveBg;
+        border-color: $toggleButtonActiveBorderColor;
+        color: $toggleButtonTextActiveColor;
+
+        .p-button-icon-left,
+        .p-button-icon-right {
+            color: $toggleButtonIconActiveColor;
+        }
+
+        &:hover {
+            background: $toggleButtonActiveHoverBg;
+            border-color: $toggleButtonActiveHoverBorderColor;
+            color: $toggleButtonTextActiveHoverColor;
+
+            .p-button-icon-left,
+            .p-button-icon-right {
+                color: $toggleButtonIconActiveHoverColor;
+            }
+        }
+    }
+}
+
+p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
+    @include invalid-input();
+}
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_treeselect.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_treeselect.scss
new file mode 100644
index 0000000..df62a4f
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_treeselect.scss
@@ -0,0 +1,151 @@
+@use 'sass:math';
+
+.p-treeselect {
+    background: $inputBg;
+    border: $inputBorder;
+    transition: $formElementTransition;
+    border-radius: $borderRadius;
+
+    &:not(.p-disabled):hover {
+        border-color: $inputHoverBorderColor;
+    }
+
+    &:not(.p-disabled).p-focus {
+        @include focused-input();
+    }
+
+    .p-treeselect-label {
+        padding: $inputPadding;
+        transition: $formElementTransition;
+
+        &.p-placeholder {
+            color: $inputPlaceholderTextColor;
+        }
+    }
+
+    &.p-treeselect-chip {
+        .p-treeselect-token {
+            padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+            margin-right: $inlineSpacing;
+            background: $chipBg;
+            color: $chipTextColor;
+            border-radius: $chipBorderRadius;
+        }
+    }
+
+    .p-treeselect-trigger {
+        background: transparent;
+        color: $inputIconColor;
+        width: $inputGroupAddOnMinWidth;
+        border-top-right-radius: $borderRadius;
+        border-bottom-right-radius: $borderRadius;
+    }
+
+    &.p-variant-filled {
+        background-color: $inputFilledBg;
+
+        &:enabled:hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:enabled:focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+}
+
+p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
+    @include invalid-input();
+}
+
+.p-inputwrapper-filled {
+    .p-treeselect {
+        &.p-treeselect-chip {
+            .p-treeselect-label {
+                padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+            }
+        }
+    }
+}
+
+.p-treeselect-panel {
+    background: $inputOverlayBg;
+    color: $inputListTextColor;
+    border: $inputOverlayBorder;
+    border-radius: $borderRadius;
+    box-shadow: $inputOverlayShadow;
+
+    .p-treeselect-header {
+        padding: $inputListHeaderPadding;
+        border-bottom: $inputListHeaderBorder;
+        color: $inputListHeaderTextColor;
+        background: $inputOverlayHeaderBg;
+        margin: $inputListHeaderMargin;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-treeselect-filter-container {
+            margin-right: $inlineSpacing;
+
+            .p-treeselect-filter {
+                padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+            }
+    
+            .p-treeselect-filter-icon {
+                right: nth($inputPadding, 2);
+                color: $inputIconColor;
+            }
+    
+            &.p-treeselect-clearable-filter {
+                .p-treeselect-filter {
+                    padding-right: 2 * (nth($inputPadding, 2) + $primeIconFontSize);
+                }
+        
+                .p-treeselect-filter-clear-icon {
+                    right: (2 * nth($inputPadding, 2)) + $primeIconFontSize;
+                }
+            }
+        }
+
+        .p-treeselect-close {
+            @include action-icon();
+        }
+    }
+    
+    .p-treeselect-items-wrapper {
+        .p-tree {
+            border: 0 none;
+        }
+
+        .p-treeselect-empty-message {
+            padding: $inputListItemPadding;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+        }
+    }
+}
+
+.p-input-filled {
+    .p-treeselect {
+        background: $inputFilledBg;
+
+        &:not(.p-disabled):hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:not(.p-disabled).p-focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+}
+
+p-treeselect.p-treeselect-clearable {
+    .p-treeselect-label-container {
+        padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+    }
+    
+    .p-treeselect-clear-icon {
+        color: $inputIconColor;
+        right: $buttonIconOnlyWidth;
+    }
+}
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_breadcrumb.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_breadcrumb.scss
new file mode 100644
index 0000000..5dd68b9
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_breadcrumb.scss
@@ -0,0 +1,42 @@
+.p-breadcrumb {
+    background: $breadcrumbBg;
+    border: $breadcrumbBorder;
+    border-radius: $borderRadius;
+    padding: $breadcrumbPadding;
+
+    .p-breadcrumb-list {
+        li {
+            .p-menuitem-link {
+                transition: $listItemTransition;
+                border-radius: $borderRadius;
+
+                &:focus-visible {
+                    @include focused();
+                }
+
+                .p-menuitem-text {
+                    color: $breadcrumbItemTextColor;
+                }
+
+                .p-menuitem-icon {
+                    color: $breadcrumbItemIconColor;
+                }
+            }
+
+            &.p-menuitem-separator {
+                margin: 0 $inlineSpacing 0 $inlineSpacing;
+                color: $breadcrumbSeparatorColor;
+            }
+
+            &:last-child {
+                .p-menuitem-text {
+                    color: $breadcrumbLastItemTextColor;
+                }
+
+                .p-menuitem-icon {
+                    color: $breadcrumbLastItemIconColor;
+                }
+            }
+        }
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_contextmenu.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_contextmenu.scss
new file mode 100644
index 0000000..88964af
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_contextmenu.scss
@@ -0,0 +1,39 @@
+.p-contextmenu {
+    padding: $verticalMenuPadding;
+    background: $overlayMenuBg;
+    color: $menuTextColor;
+    border: $overlayMenuBorder;
+    box-shadow: $overlayMenuShadow;
+    border-radius: $borderRadius;
+    width: $menuWidth;
+
+    .p-contextmenu-root-list {
+        outline: 0 none;
+    }
+
+    .p-submenu-list {
+        padding: $verticalMenuPadding;
+        background: $overlayMenuBg;
+        border: $overlayMenuBorder;
+        box-shadow: $overlayMenuShadow;
+        border-radius: $borderRadius;
+    }
+
+    .p-menuitem {
+        @include menuitem();
+    }
+
+    .p-menuitem-separator {
+        border-top: $divider;
+        margin: $menuSeparatorMargin;
+    }
+
+    .p-submenu-icon {
+        font-size: $menuitemSubmenuIconFontSize;
+
+        &.p-icon {
+            width: $menuitemSubmenuIconFontSize;
+            height: $menuitemSubmenuIconFontSize;
+        }
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_dock.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_dock.scss
new file mode 100644
index 0000000..0a14461
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_dock.scss
@@ -0,0 +1,95 @@
+.p-dock {
+    .p-dock-list-container {
+        background: $dockBg;
+        border: $dockBorder;
+        padding: $dockPadding;
+        border-radius: $dockBorderRadius;
+
+        .p-dock-list {
+            outline: 0 none;
+        }
+    }
+    
+    .p-dock-item {
+        padding: $dockItemPadding;
+        border-radius: $dockItemBorderRadius;
+
+        &.p-focus {
+            @include focused-listitem();
+        }
+    }
+
+    .p-dock-link {
+        width: $dockActionWidth;
+        height: $dockActionHeight;
+    }
+    
+    &.p-dock-top,
+    &.p-dock-bottom {
+        .p-dock-item-second-prev,
+        .p-dock-item-second-next {
+            margin: 0 $dockSecondItemsMargin;
+        }
+
+        .p-dock-item-prev,
+        .p-dock-item-next {
+            margin: 0 $dockFirstItemsMargin;
+        }
+
+        .p-dock-item-current {
+            margin: 0 $dockCurrentItemMargin;
+        }
+    }
+
+    &.p-dock-left,
+    &.p-dock-right {
+        .p-dock-item-second-prev,
+        .p-dock-item-second-next {
+            margin: $dockSecondItemsMargin 0;
+        }
+        
+        .p-dock-item-prev,
+        .p-dock-item-next {
+            margin: $dockFirstItemsMargin 0;
+        }
+
+        .p-dock-item-current {
+            margin: $dockCurrentItemMargin 0;
+        }
+    }
+}
+
+@media screen and (max-width: 960px) {
+    .p-dock {
+        &.p-dock-top,
+        &.p-dock-bottom {
+            .p-dock-list-container {
+                overflow-x: auto;
+                width: 100%;
+
+                .p-dock-list {
+                    margin: 0 auto;
+                }
+            }
+        }
+
+        &.p-dock-left,
+        &.p-dock-right {
+            .p-dock-list-container {
+                overflow-y: auto;
+                height: 100%;
+
+                .p-dock-list {
+                    margin: auto 0;
+                }
+            }
+        }
+
+        .p-dock-list {
+            .p-dock-item {
+                transform: none;
+                margin: 0;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_megamenu.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_megamenu.scss
new file mode 100644
index 0000000..892cf11
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_megamenu.scss
@@ -0,0 +1,56 @@
+.p-megamenu {
+    padding: $horizontalMenuPadding;
+    background: $horizontalMenuBg;
+    color: $horizontalMenuTextColor;
+    border: $horizontalMenuBorder;
+    border-radius: $borderRadius;
+
+    .p-megamenu-root-list {  
+        outline: 0 none;
+    }
+
+    .p-menuitem {
+        @include menuitem();
+    }
+
+    .p-megamenu-panel {
+        background: $overlayMenuBg;
+        color: $menuTextColor;
+        border: $overlayMenuBorder;
+        box-shadow: $overlayMenuShadow;
+        border-radius: $borderRadius;
+    }
+
+    .p-submenu-header {
+        margin: $submenuHeaderMargin;
+        padding: $submenuHeaderPadding;
+        color: $submenuHeaderTextColor;
+        background: $submenuHeaderBg;
+        font-weight: $submenuHeaderFontWeight;
+        border-top-right-radius: $borderRadius; 
+        border-top-left-radius: $borderRadius; 
+    }
+
+    .p-submenu-list {
+        padding: $verticalMenuPadding;
+        width: $menuWidth;
+
+        .p-menuitem-separator {
+            border-top: $divider;
+            margin: $menuSeparatorMargin;
+        }
+    }
+
+    &.p-megamenu-vertical {
+        width: $menuWidth;
+        padding: $verticalMenuPadding;
+    }
+
+    &.p-megamenu-horizontal {
+        .p-megamenu-root-list {  
+            > .p-menuitem {
+                @include horizontal-rootmenuitem();
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_menu.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_menu.scss
new file mode 100644
index 0000000..913419a
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_menu.scss
@@ -0,0 +1,37 @@
+.p-menu {
+    padding: $verticalMenuPadding;
+    background: $menuBg;
+    color: $menuTextColor;
+    border: $menuBorder;
+    border-radius: $borderRadius;
+    width: $menuWidth;
+
+    .p-menuitem {
+        @include menuitem();
+    }
+
+    &.p-menu-overlay {
+        background: $overlayMenuBg;
+        border: $overlayMenuBorder;
+        box-shadow: $overlayMenuShadow;
+    }
+
+    .p-submenu-header {
+        margin: $submenuHeaderMargin;
+        padding: $submenuHeaderPadding;
+        color: $submenuHeaderTextColor;
+        background: $submenuHeaderBg;
+        font-weight: $submenuHeaderFontWeight;
+        border-top-right-radius: $submenuHeaderBorderRadius; 
+        border-top-left-radius: $submenuHeaderBorderRadius; 
+    }
+
+    .p-menuitem-separator {
+        border-top: $divider;
+        margin: $menuSeparatorMargin;
+    }
+
+    .p-menuitem-badge {
+        @include menuitem-badge();
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_menubar.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_menubar.scss
new file mode 100644
index 0000000..d1642e9
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_menubar.scss
@@ -0,0 +1,142 @@
+.p-menubar {
+    padding: $horizontalMenuPadding;
+    background: $horizontalMenuBg;
+    color: $horizontalMenuTextColor;
+    border: $horizontalMenuBorder;
+    border-radius: $borderRadius;
+
+    .p-menubar-root-list {
+        outline: 0 none;
+
+        > .p-menuitem {
+            @include horizontal-rootmenuitem();
+        }
+    }
+
+    .p-menuitem {
+        @include menuitem();
+    }
+
+    .p-submenu-list {
+        padding: $verticalMenuPadding;
+        background: $overlayMenuBg;
+        border: $overlayMenuBorder;
+        box-shadow: $overlayMenuShadow;
+        width: $menuWidth;
+        border-radius: $borderRadius;
+
+        .p-menuitem-separator {
+            border-top: $divider;
+            margin: $menuSeparatorMargin;
+        }
+
+        .p-submenu-icon {
+            font-size: $menuitemSubmenuIconFontSize;
+        }
+    }
+}
+
+@media screen and (max-width: 960px) {
+    .p-menubar {
+        position: relative;
+
+        .p-menubar-button {
+            display: flex;
+            width: $actionIconWidth;
+            height: $actionIconHeight;
+            color: $horizontalMenuRootMenuitemIconColor;
+            border-radius: $actionIconBorderRadius;
+            transition: $actionIconTransition;
+        
+            &:hover {
+                color: $horizontalMenuRootMenuitemIconHoverColor;
+                background: $horizontalMenuRootMenuitemHoverBg;
+            }
+        
+            &:focus {
+                @include focused();
+            }
+        }
+
+        .p-menubar-root-list {
+            position: absolute;
+            display: none;
+            padding: $verticalMenuPadding;
+            background: $overlayMenuBg;
+            border: $overlayMenuBorder;
+            box-shadow: $overlayMenuShadow;
+            width: 100%;
+    
+            .p-menuitem-separator {
+                border-top: $divider;
+                margin: $menuSeparatorMargin;
+            }
+    
+            .p-submenu-icon {
+                font-size: $menuitemSubmenuIconFontSize;
+            }
+
+            .p-menuitem {
+                width: 100%;
+                position: static;
+
+                .p-menuitem-content {
+                    .p-menuitem-link {
+                        .p-submenu-icon {
+                            margin-left: auto;
+                            transition: transform $transitionDuration;
+                        }
+                    }
+                }
+
+
+                &.p-menuitem-active {
+                    > .p-menuitem-content {
+                        > .p-menuitem-link {
+                            > .p-submenu-icon {
+                                transform: rotate(-180deg);
+                            }
+                        }
+                    }
+                }
+            }
+
+            .p-submenu-list {
+                width: 100%;
+                position: static;
+                box-shadow: none;
+                border: 0 none;
+
+                .p-submenu-icon {
+                    transition: transform $transitionDuration;
+                    transform: rotate(90deg);
+                }
+
+                .p-menuitem-active {
+                    > .p-menuitem-content {
+                        > .p-menuitem-link {
+                            > .p-submenu-icon {
+                                transform: rotate(-90deg);
+                            }
+                        }
+                    }
+                }
+            }
+    
+            .p-menuitem {
+                width: 100%;
+                position: static;
+            }
+
+            @include nested-submenu-indents(nth($menuitemPadding, 1), 2, 10);
+        }
+
+        &.p-menubar-mobile-active .p-menubar-root-list {
+            display: flex;
+            flex-direction: column;
+            top: 100%;
+            left: 0;
+            z-index: 1;
+        }
+    }
+}
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_panelmenu.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_panelmenu.scss
new file mode 100644
index 0000000..c5907c5
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_panelmenu.scss
@@ -0,0 +1,153 @@
+.p-panelmenu {
+    .p-panelmenu-header {
+        outline: 0 none;
+
+        .p-panelmenu-header-content {
+            border: $accordionHeaderBorder;
+            color: $accordionHeaderTextColor;
+            background: $accordionHeaderBg;
+            border-radius: $borderRadius;
+            transition: $listItemTransition;
+
+            .p-panelmenu-header-action {
+                color: $accordionHeaderTextColor;
+                padding: $accordionHeaderPadding;
+                font-weight: $accordionHeaderFontWeight;
+
+                .p-submenu-icon {
+                    margin-right: $inlineSpacing;
+                }
+
+                .p-menuitem-icon {
+                    margin-right: $inlineSpacing;
+                }
+            }
+        }
+
+        &:not(.p-disabled) {
+            &:focus-visible {
+                .p-panelmenu-header-content {
+                    @include focused-inset();
+                }
+            }
+        }
+
+        &:not(.p-highlight):not(.p-disabled):hover {
+            .p-panelmenu-header-content {
+                background: $accordionHeaderHoverBg;
+                border-color: $accordionHeaderHoverBorderColor;
+                color: $accordionHeaderTextHoverColor;
+            }
+        }
+
+        &:not(.p-disabled).p-highlight {
+            .p-panelmenu-header-content {
+                background: $accordionHeaderActiveBg;
+                border-color: $accordionHeaderActiveBorderColor;
+                color: $accordionHeaderTextActiveColor;
+                border-bottom-right-radius: 0;
+                border-bottom-left-radius: 0;
+                margin-bottom: 0;
+            }
+
+            &:hover {
+                .p-panelmenu-header-content {
+                    border-color: $accordionHeaderActiveHoverBorderColor;
+                    background: $accordionHeaderActiveHoverBg;
+                    color: $accordionHeaderTextActiveHoverColor;
+                }
+            }
+        }
+    }
+
+    .p-panelmenu-content {
+        padding: $verticalMenuPadding;
+        border: $accordionContentBorder;
+        background: $accordionContentBg;
+        color: $accordionContentTextColor;
+        border-top: 0;
+        border-top-right-radius: 0;
+        border-top-left-radius: 0;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+
+        .p-panelmenu-root-list {
+            outline: 0 none;
+        }
+
+        .p-menuitem {
+            @include menuitem();
+
+            .p-menuitem-content {
+                .p-menuitem-link { 
+                    .p-submenu-icon {
+                        margin-right: $inlineSpacing;
+                    }
+                }
+            }
+        }
+
+        .p-menuitem-separator {
+            border-top: $divider;
+            margin: $menuSeparatorMargin;
+        }
+
+        .p-submenu-list:not(.p-panelmenu-root-list) {
+            padding: $treeNodeChildrenPadding;
+        }
+    }
+
+    .p-panelmenu-panel {
+        margin-bottom: $accordionSpacing;
+
+        @if $accordionSpacing == 0 {
+            .p-panelmenu-header {
+                .p-panelmenu-header-content {
+                    border-radius: 0;
+                }
+            }
+
+            .p-panelmenu-content {
+                border-radius: 0;
+            }
+
+            &:not(:first-child) {
+                .p-panelmenu-header {
+                    .p-panelmenu-header-content {
+                        border-top: 0 none;
+                    }
+
+                    &:not(.p-highlight):not(.p-disabled):hover,
+                    &:not(.p-disabled).p-highlight:hover {
+                        .p-panelmenu-header-content {
+                            border-top: 0 none;
+                        }
+                    }
+                }
+            }
+
+            &:first-child {
+                .p-panelmenu-header {
+                    .p-panelmenu-header-content {
+                        border-top-right-radius: $borderRadius;
+                        border-top-left-radius: $borderRadius;
+                    }
+                }
+            }
+
+            &:last-child {
+                .p-panelmenu-header:not(.p-highlight) {
+                    .p-panelmenu-header-content {
+                        border-bottom-right-radius: $borderRadius;
+                        border-bottom-left-radius: $borderRadius;
+                    }
+                }
+
+                .p-panelmenu-content {
+                    border-bottom-right-radius: $borderRadius;
+                    border-bottom-left-radius: $borderRadius;
+                }
+            }
+        } 
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_slidemenu.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_slidemenu.scss
new file mode 100644
index 0000000..f69f186
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_slidemenu.scss
@@ -0,0 +1,59 @@
+.p-slidemenu {
+    padding: $verticalMenuPadding;
+    background: $menuBg;
+    color: $menuTextColor;
+    border: $menuBorder;
+    border-radius: $borderRadius;
+    width: $menuWidth;
+    
+    .p-slidemenu-root-list {
+        outline: 0 none;
+    }
+
+    .p-submenu-list {
+        outline: 0 none;
+    }
+
+    .p-menuitem {
+        @include menuitem();
+    }
+
+    &.p-slidemenu-overlay {
+        background: $overlayMenuBg;
+        border: $overlayMenuBorder;
+        box-shadow: $overlayMenuShadow;
+    }
+
+    .p-slidemenu-list {
+        padding: $verticalMenuPadding;
+        background: $overlayMenuBg;
+        border: $overlayMenuBorder;
+        box-shadow: $overlayMenuShadow;
+    }
+
+    .p-menuitem-separator {
+        border-top: $divider;
+        margin: $menuSeparatorMargin;
+    }
+
+    .p-slidemenu-icon {
+        font-size: $menuitemSubmenuIconFontSize;
+    }
+
+    .p-icon {
+        width: $menuitemSubmenuIconFontSize;
+        height: $menuitemSubmenuIconFontSize;
+    }
+
+    .p-slidemenu-backward {
+        padding: $menuitemPadding;
+	    color: $menuitemTextColor;
+        &:not(.p-disabled):focus {
+            @include focused-inset();
+        }
+    }
+
+    .p-menuitem-badge {
+        @include menuitem-badge();
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_steps.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_steps.scss
new file mode 100644
index 0000000..9ad2297
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_steps.scss
@@ -0,0 +1,56 @@
+@use 'sass:math';
+
+.p-steps {
+    .p-steps-item {
+        .p-menuitem-link {
+            background: transparent;
+            transition: $listItemTransition;
+            border-radius: $borderRadius;
+            background: $stepsItemBg;
+
+            .p-steps-number {
+                color: $stepsItemNumberColor;
+                border: $stepsItemBorder;
+                background: $stepsItemBg;
+                min-width: $stepsItemNumberWidth;
+                height: $stepsItemNumberHeight;
+                line-height: $stepsItemNumberHeight;
+                font-size: $stepsItemNumberFontSize;
+                z-index: 1;
+                border-radius: $stepsItemNumberBorderRadius;
+            }
+
+            .p-steps-title {
+                margin-top: $inlineSpacing;
+                color: $stepsItemTextColor;
+            }
+
+            &:not(.p-disabled):focus-visible {
+                @include focused();
+            }
+        }
+
+        &.p-highlight {
+            .p-steps-number {
+                background: $highlightBg;
+                color: $highlightTextColor;
+            }
+
+            .p-steps-title {
+                font-weight: $stepsItemActiveFontWeight;
+                color: $textColor;
+            }
+        }
+
+        &:before {
+            content:' ';
+            border-top: $divider;
+            width: 100%;
+            top: 50%;
+            left: 0;
+            display: block;
+            position: absolute;
+            margin-top: math.div(-1 * $stepsItemNumberHeight, 2);
+        }
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_tabmenu.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_tabmenu.scss
new file mode 100644
index 0000000..54ac8fb
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_tabmenu.scss
@@ -0,0 +1,74 @@
+.p-tabmenu {
+    .p-tabmenu-nav {
+        background: $tabviewNavBg;
+        border: $tabviewNavBorder;
+        border-width: $tabviewNavBorderWidth;
+        
+
+        .p-menuitem-badge {
+            @include menuitem-badge();
+        }
+
+        .p-tabmenuitem {
+            margin-right: $tabviewHeaderSpacing;
+
+            .p-menuitem-link {
+                border: $tabviewHeaderBorder;
+                border-width: $tabviewHeaderBorderWidth;
+                border-color: $tabviewHeaderBorderColor;
+                background: $tabviewHeaderBg;
+                color: $tabviewHeaderTextColor;
+                padding: $tabviewHeaderPadding;
+                font-weight: $tabviewHeaderFontWeight;
+                border-top-right-radius: $borderRadius;
+                border-top-left-radius: $borderRadius;
+                transition: $listItemTransition;
+                margin: $tabviewHeaderMargin;
+
+                .p-menuitem-icon {
+                    margin-right: $inlineSpacing;
+                }
+
+                &:not(.p-disabled):focus-visible {
+                    @include focused-inset();
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled):hover {
+                .p-menuitem-link {
+                    background: $tabviewHeaderHoverBg;
+                    border-color: $tabviewHeaderHoverBorderColor;
+                    color: $tabviewHeaderTextHoverColor;
+                }
+            }
+
+            &.p-highlight {
+                .p-menuitem-link {
+                    background: $tabviewHeaderActiveBg;
+                    border-color: $tabviewHeaderActiveBorderColor;
+                    color: $tabviewHeaderTextActiveColor;
+                }
+            }
+        }
+    }
+
+    .p-tabmenu-left-icon {
+        margin-right: $inlineSpacing;
+    }
+
+    .p-tabmenu-right-icon {
+        margin-left: $inlineSpacing;
+    }
+
+    .p-tabmenu-nav-btn.p-link {
+        background: $tabviewHeaderActiveBg;
+        color: $tabviewHeaderTextActiveColor;
+        width: $buttonIconOnlyWidth;
+        box-shadow: $raisedButtonShadow;
+        border-radius: 0;
+
+        &:focus {
+            @include focused-inset();
+        }
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_tieredmenu.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_tieredmenu.scss
new file mode 100644
index 0000000..94590c8
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_tieredmenu.scss
@@ -0,0 +1,44 @@
+.p-tieredmenu {
+    padding: $verticalMenuPadding;
+    background: $menuBg;
+    color: $menuTextColor;
+    border: $menuBorder;
+    border-radius: $borderRadius;
+    width: $menuWidth;
+
+    &.p-tieredmenu-overlay {
+        background: $overlayMenuBg;
+        border: $overlayMenuBorder;
+        box-shadow: $overlayMenuShadow;
+    }
+
+    .p-tieredmenu-root-list {
+        outline: 0 none;
+    }
+
+    .p-submenu-list {
+        padding: $verticalMenuPadding;
+        background: $overlayMenuBg;
+        border: $overlayMenuBorder;
+        box-shadow: $overlayMenuShadow;
+        border-radius: $borderRadius;
+    }
+
+    .p-menuitem {
+        @include menuitem();
+    }
+
+    .p-menuitem-separator {
+        border-top: $divider;
+        margin: $menuSeparatorMargin;
+    }
+
+    .p-submenu-icon {
+        font-size: $menuitemSubmenuIconFontSize;
+
+        &.p-icon {
+            width: $menuitemSubmenuIconFontSize;
+            height: $menuitemSubmenuIconFontSize;
+        }
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/messages/_inlinemessage.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/messages/_inlinemessage.scss
new file mode 100644
index 0000000..1ec2159
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/messages/_inlinemessage.scss
@@ -0,0 +1,69 @@
+.p-inline-message {
+    padding: $inlineMessagePadding;
+    margin: $inlineMessageMargin;
+    border-radius: $borderRadius;
+
+    &.p-inline-message-info {
+        background: $infoMessageBg;
+        border: $infoMessageBorder;
+        border-width: $inlineMessageBorderWidth;
+        color: $infoMessageTextColor;
+
+        .p-inline-message-icon {
+            color: $infoMessageIconColor;
+        }
+    }
+
+    &.p-inline-message-success {
+        background: $successMessageBg;
+        border: $successMessageBorder;
+        border-width: $inlineMessageBorderWidth;
+        color: $successMessageTextColor;
+
+        .p-inline-message-icon {
+            color: $successMessageIconColor;
+        }
+    }
+
+    &.p-inline-message-warn {
+        background: $warningMessageBg;
+        border: $warningMessageBorder;
+        border-width: $inlineMessageBorderWidth;
+        color: $warningMessageTextColor;
+
+        .p-inline-message-icon {
+            color: $warningMessageIconColor;
+        }
+    }
+
+    &.p-inline-message-error {
+        background: $errorMessageBg;
+        border: $errorMessageBorder;
+        border-width: $inlineMessageBorderWidth;
+        color: $errorMessageTextColor;
+
+        .p-inline-message-icon {
+            color: $errorMessageIconColor;
+        }
+    }
+
+    .p-inline-message-icon {
+        font-size: $inlineMessageIconFontSize;
+        margin-right: $inlineSpacing;
+    }
+
+    .p-icon {
+        width: $inlineMessageIconFontSize;
+        height: $inlineMessageIconFontSize;
+    }
+
+    .p-inline-message-text {
+        font-size: $inlineMessageTextFontSize;
+    }
+
+    &.p-inline-message-icon-only {
+        .p-inline-message-icon {
+            margin-right: 0;
+        }
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/messages/_message.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/messages/_message.scss
new file mode 100644
index 0000000..98e345e
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/messages/_message.scss
@@ -0,0 +1,141 @@
+.p-message {
+    margin: $messageMargin;
+    border-radius: $borderRadius;
+
+    .p-message-wrapper {
+        padding: $messagePadding;
+    }
+
+    .p-message-close {
+        width: $actionIconWidth;
+        height: $actionIconHeight;
+        border-radius: $actionIconBorderRadius;
+        background: transparent;
+        transition: $actionIconTransition;
+
+        &:hover {
+            background: rgba(255,255,255,.5);
+        }
+
+        &:focus-visible {
+            @include focused();
+        }
+    }
+
+    &.p-message-info {
+        background: $infoMessageBg;
+        border: $infoMessageBorder;
+        border-width: $messageBorderWidth;
+        color: $infoMessageTextColor;
+
+        .p-message-icon {
+            color: $infoMessageIconColor;
+        }
+
+        .p-message-close {
+            color: $infoMessageIconColor;
+        }
+    }
+
+    &.p-message-success {
+        background: $successMessageBg;
+        border: $successMessageBorder;
+        border-width: $messageBorderWidth;
+        color: $successMessageTextColor;
+
+        .p-message-icon {
+            color: $successMessageIconColor;
+        }
+
+        .p-message-close {
+            color: $successMessageIconColor;
+        }
+    }
+
+    &.p-message-warn {
+        background: $warningMessageBg;
+        border: $warningMessageBorder;
+        border-width: $messageBorderWidth;
+        color: $warningMessageTextColor;
+
+        .p-message-icon {
+            color: $warningMessageIconColor;
+        }
+
+        .p-message-close {
+            color: $warningMessageIconColor;
+        }
+    }
+
+    &.p-message-error {
+        background: $errorMessageBg;
+        border: $errorMessageBorder;
+        border-width: $messageBorderWidth;
+        color: $errorMessageTextColor;
+
+        .p-message-icon {
+            color: $errorMessageIconColor;
+        }
+
+        .p-message-close {
+            color: $errorMessageIconColor;
+        }
+    }
+
+    .p-message-text {
+        font-size: $messageTextFontSize;
+        font-weight: $messageTextFontWeight;
+    }
+
+    .p-message-icon {
+        font-size: $messageIconFontSize;
+        margin-right: $inlineSpacing;
+    }
+
+    .p-icon {
+        width: $messageIconFontSize;
+        height: $messageIconFontSize;
+    }
+
+    .p-message-summary {
+        font-weight: 700;
+    }
+
+    .p-message-detail {
+        margin-left: $inlineSpacing;
+    }
+
+    @if variable-exists(secondaryMessageBg) {
+        &.p-message-secondary {
+            background: $secondaryMessageBg;
+            border: $secondaryMessageBorder;
+            border-width: $messageBorderWidth;
+            color: $secondaryMessageTextColor;
+
+            .p-message-icon {
+                color: $secondaryMessageIconColor;
+            }
+
+            .p-message-close {
+                color: $secondaryMessageIconColor;
+            }
+        }
+    }
+
+    @if variable-exists(contrastMessageBg) {
+        &.p-message-contrast {
+            background: $contrastMessageBg;
+            border: $contrastMessageBorder;
+            border-width: $messageBorderWidth;
+            color: $contrastMessageTextColor;
+
+            .p-message-icon {
+                color: $contrastMessageIconColor;
+            }
+
+            .p-message-close {
+                color: $contrastMessageIconColor;
+            }
+        }
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/messages/_toast.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/messages/_toast.scss
new file mode 100644
index 0000000..1fff6a9
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/messages/_toast.scss
@@ -0,0 +1,127 @@
+.p-toast {
+    opacity: $toastOpacity;
+
+    .p-toast-message {
+        margin: $toastMargin;
+        box-shadow: $toastShadow;
+        border-radius: $borderRadius;
+
+        .p-toast-message-content {
+            padding: $toastPadding;
+            border-width: $toastBorderWidth;
+
+            .p-toast-message-text {
+                margin: $toastMessageTextMargin;
+            }
+
+            .p-toast-message-icon {
+                font-size: $toastIconFontSize;
+            }
+
+            .p-icon:not(.p-toast-icon-close-icon) {
+                width: $toastIconFontSize;
+                height: $toastIconFontSize;
+            }
+
+            .p-toast-summary {
+                font-weight: $toastTitleFontWeight;
+            }
+
+            .p-toast-detail {
+                margin: $toastDetailMargin;
+            }
+        }
+
+        .p-toast-icon-close {
+            width: $toastIconFontSize;
+            height: $toastIconFontSize;
+            border-radius: $actionIconBorderRadius;
+            background: transparent;
+            transition: $actionIconTransition;
+
+            &:hover {
+                background: rgba(255,255,255,.5);
+            }
+
+            &:focus-visible {
+                @include focused();
+            }
+        }
+
+        &.p-toast-message-info {
+            background: $infoMessageBg;
+            border: $infoMessageBorder;
+            border-width: $messageBorderWidth;
+            color: $infoMessageTextColor;
+
+            .p-toast-message-icon,
+            .p-toast-icon-close {
+                color: $infoMessageIconColor;
+            }
+        }
+
+        &.p-toast-message-success {
+            background: $successMessageBg;
+            border: $successMessageBorder;
+            border-width: $messageBorderWidth;
+            color: $successMessageTextColor;
+
+            .p-toast-message-icon,
+            .p-toast-icon-close {
+                color: $successMessageIconColor;
+            }
+        }
+
+        &.p-toast-message-warn {
+            background: $warningMessageBg;
+            border: $warningMessageBorder;
+            border-width: $messageBorderWidth;
+            color: $warningMessageTextColor;
+
+            .p-toast-message-icon,
+            .p-toast-icon-close {
+                color: $warningMessageIconColor;
+            }
+        }
+
+        &.p-toast-message-error {
+            background: $errorMessageBg;
+            border: $errorMessageBorder;
+            border-width: $messageBorderWidth;
+            color: $errorMessageTextColor;
+
+            .p-toast-message-icon,
+            .p-toast-icon-close {
+                color: $errorMessageIconColor;
+            }
+        }
+
+        @if variable-exists(secondaryMessageBg) {
+            &.p-toast-message-secondary {
+                background: $secondaryMessageBg;
+                border: $secondaryMessageBorder;
+                border-width: $messageBorderWidth;
+                color: $secondaryMessageTextColor;
+
+                .p-toast-message-icon,
+                .p-toast-icon-close {
+                    color: $secondaryMessageIconColor;
+                }
+            }
+        }
+        
+        @if variable-exists(contrastMessageBg) {
+            &.p-toast-message-contrast {
+                background: $contrastMessageBg;
+                border: $contrastMessageBorder;
+                border-width: $messageBorderWidth;
+                color: $contrastMessageTextColor;
+
+                .p-toast-message-icon,
+                .p-toast-icon-close {
+                    color: $contrastMessageIconColor;
+                }
+            }
+        }
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_avatar.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_avatar.scss
new file mode 100644
index 0000000..d169b82
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_avatar.scss
@@ -0,0 +1,30 @@
+.p-avatar {
+    background-color: $avatarBg;
+    border-radius: $borderRadius;
+
+    &.p-avatar-lg {
+        width: 3rem;
+        height: 3rem;
+        font-size: 1.5rem;
+
+        .p-avatar-icon {
+            font-size: 1.5rem;
+        }
+    }
+
+    &.p-avatar-xl {
+        width: 4rem;
+        height: 4rem;
+        font-size: 2rem;
+
+        .p-avatar-icon {
+            font-size: 2rem;
+        }
+    }
+}
+
+.p-avatar-group {
+    .p-avatar {
+        border: 2px solid $panelContentBg;
+    }
+}
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_badge.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_badge.scss
new file mode 100644
index 0000000..6399c0e
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_badge.scss
@@ -0,0 +1,55 @@
+.p-badge {
+    background: $badgeBg;
+    color: $badgeTextColor;
+    font-size: $badgeFontSize;
+    font-weight: $badgeFontWeight;
+    min-width: $badgeMinWidth;
+    height: $badgeHeight;
+    line-height: $badgeHeight;
+
+    @if variable-exists(secondaryMessageBg) {
+        &.p-badge-secondary {
+            background-color: $secondaryButtonBg;
+            color: $secondaryButtonTextColor;
+        }
+    
+        &.p-badge-contrast {
+            background-color: $contrastButtonBg;
+            color: $contrastButtonTextColor;
+        }
+    }
+
+    &.p-badge-success {
+        background-color: $successButtonBg;
+        color: $successButtonTextColor;
+    }
+
+    &.p-badge-info {
+        background-color: $infoButtonBg;
+        color: $infoButtonTextColor;
+    }
+
+    &.p-badge-warning {
+        background-color: $warningButtonBg;
+        color: $warningButtonTextColor;
+    }
+
+    &.p-badge-danger {
+        background-color: $dangerButtonBg;
+        color: $dangerButtonTextColor;
+    }
+
+    &.p-badge-lg {
+        font-size: 1.5 * $badgeFontSize;
+        min-width: 1.5 * $badgeMinWidth;
+        height: 1.5 * $badgeHeight;
+        line-height: 1.5 * $badgeHeight;
+    }
+
+    &.p-badge-xl {
+        font-size: 2 * $badgeFontSize;
+        min-width: 2 * $badgeMinWidth;
+        height: 2 * $badgeHeight;
+        line-height: 2 * $badgeHeight;
+    }
+}
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_blockui.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_blockui.scss
new file mode 100644
index 0000000..e69de29
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_chip.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_chip.scss
new file mode 100644
index 0000000..a689663
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_chip.scss
@@ -0,0 +1,42 @@
+@use 'sass:math';
+
+.p-chip {
+    background-color: $chipBg;
+    color: $chipTextColor;
+    border-radius: $chipBorderRadius;
+    padding: 0 nth($inputPadding, 2);
+
+    .p-chip-text {
+        line-height: 1.5;
+        margin-top: math.div(nth($inputPadding, 1), 2);
+        margin-bottom: math.div(nth($inputPadding, 1), 2);
+    }
+
+    .p-chip-icon {
+        margin-right: $inlineSpacing;
+    }
+
+    .pi-chip-remove-icon {
+        margin-left: $inlineSpacing;
+    }
+
+    img {
+        width: 1.5 + nth($inputPadding, 1);
+        height: 1.5 + nth($inputPadding, 1);
+        margin-left: -1 * nth($inputPadding, 2);
+        margin-right: $inlineSpacing;
+    }
+
+    .pi-chip-remove-icon {
+        border-radius: $borderRadius;
+        transition: $actionIconTransition;
+        
+        &:focus-visible {
+            @include focused();
+        }
+
+        &:focus {
+            outline: 0 none;
+        }
+    }
+}
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_inplace.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_inplace.scss
new file mode 100644
index 0000000..8f64b69
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_inplace.scss
@@ -0,0 +1,17 @@
+.p-inplace {
+    .p-inplace-display {
+        padding: $inplacePadding;
+        border-radius: $borderRadius;
+        transition: $formElementTransition;
+
+        &:not(.p-disabled):hover {
+            background: $inplaceHoverBg;
+            color: $inplaceTextHoverColor;
+        }
+
+        &:focus {
+            @include focused();
+        }
+    }
+}
+
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_metergroup.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_metergroup.scss
new file mode 100644
index 0000000..50da396
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_metergroup.scss
@@ -0,0 +1,117 @@
+@use "sass:math";
+
+// core
+.p-metergroup {
+    display: flex;
+}
+
+.p-metergroup-meters {
+    display: flex;
+}
+
+.p-metergroup-vertical .p-metergroup-meters {
+    flex-direction: column;
+}
+
+.p-metergroup-labels {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+}
+
+.p-metergroup-vertical .p-metergroup-labels {
+    align-items: start;
+}
+
+.p-metergroup-labels-vertical {
+    flex-direction: column;
+}
+
+.p-metergroup-label {
+    display: inline-flex;
+    align-items: center;
+}
+
+.p-metergroup-label-marker {
+    display: inline-flex;
+}
+
+// theme
+.p-metergroup {
+    gap: $inlineSpacing * 2;
+
+    .p-metergroup-meters {
+        background: $progressBarBg;
+        border-radius: $borderRadius;
+    }
+
+    .p-metergroup-meter {
+        border: $progressBarBorder;
+        background: $progressBarValueBg;
+    }
+
+    .p-metergroup-labels {
+        .p-metergroup-label {
+            gap: $inlineSpacing;
+        }
+
+        .p-metergroup-label-marker {
+            background: $progressBarValueBg;
+            width: 0.5rem;
+            height: 0.5rem;
+            border-radius: 100%;
+        }
+
+        .p-metergroup-label-icon {
+            width: 1rem;
+            height: 1rem;
+        }
+
+        &.p-metergroup-labels-vertical {
+            gap: $inlineSpacing;
+        }
+
+        &.p-metergroup-labels-horizontal {
+            gap: $inlineSpacing * 2;
+        }
+    }
+
+    &.p-metergroup-horizontal {
+        flex-direction: column;
+
+        .p-metergroup-meters {
+            height: 0.5rem;
+        }
+
+        .p-metergroup-meter:first-of-type {
+            border-top-left-radius: $borderRadius;
+            border-bottom-left-radius: $borderRadius;
+        }
+
+        .p-metergroup-meter:last-of-type {
+            border-top-right-radius: $borderRadius;
+            border-bottom-right-radius: $borderRadius;
+        }
+    }
+
+    &.p-metergroup-vertical {
+        flex-direction: row;
+
+        .p-metergroup-meters {
+            width: 0.5rem;
+            height: 100%;
+        }
+
+        .p-metergroup-meter:first-of-type {
+            border-top-left-radius: $borderRadius;
+            border-top-right-radius: $borderRadius;
+        }
+
+        .p-metergroup-meter:last-of-type {
+            border-bottom-left-radius: $borderRadius;
+            border-bottom-right-radius: $borderRadius;
+        }
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_progressbar.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_progressbar.scss
new file mode 100644
index 0000000..7cf0ea6
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_progressbar.scss
@@ -0,0 +1,17 @@
+.p-progressbar {
+    border: $progressBarBorder;
+    height: $progressBarHeight;
+    background: $progressBarBg;
+    border-radius: $borderRadius;
+
+    .p-progressbar-value {
+        border: 0 none;
+        margin: 0;
+        background: $progressBarValueBg;
+    }
+
+    .p-progressbar-label {
+        color: $progressBarValueTextColor;
+        line-height: $progressBarHeight;
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_scrolltop.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_scrolltop.scss
new file mode 100644
index 0000000..371c0d2
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_scrolltop.scss
@@ -0,0 +1,25 @@
+.p-scrolltop {
+    width: $scrollTopWidth;
+    height: $scrollTopHeight;
+    border-radius: $scrollTopBorderRadius;
+    box-shadow: $inputOverlayShadow;
+    transition: $actionIconTransition;
+
+    &.p-link {
+        background: $scrollTopBg;
+
+        &:hover {
+            background: $scrollTopHoverBg;
+        }
+    }
+
+    .p-scrolltop-icon {
+        font-size: $scrollTopFontSize;
+        color: $scrollTopTextColor;
+    }
+
+    .p-icon {
+        width: $scrollTopFontSize;
+        height: $scrollTopFontSize;
+    }
+}
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_skeleton.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_skeleton.scss
new file mode 100644
index 0000000..24b3d92
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_skeleton.scss
@@ -0,0 +1,8 @@
+.p-skeleton {
+    background-color: $skeletonBg;
+    border-radius: $borderRadius;
+
+    &:after {
+        background: linear-gradient(90deg, rgba(255, 255, 255, 0), $skeletonAnimationBg, rgba(255, 255, 255, 0));
+    }
+}
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_tag.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_tag.scss
new file mode 100644
index 0000000..9c0b7a7
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_tag.scss
@@ -0,0 +1,52 @@
+@use 'sass:math';
+
+.p-tag {
+    background: $badgeBg;
+    color: $badgeTextColor;
+    font-size: $badgeFontSize;
+    font-weight: $badgeFontWeight;
+    padding: $tagPadding;
+    border-radius: $borderRadius;
+
+    &.p-tag-success {
+        background-color: $successButtonBg;
+        color: $successButtonTextColor;
+    }
+
+    &.p-tag-info {
+        background-color: $infoButtonBg;
+        color: $infoButtonTextColor;
+    }
+
+    &.p-tag-warning {
+        background-color: $warningButtonBg;
+        color: $warningButtonTextColor;
+    }
+
+    &.p-tag-danger {
+        background-color: $dangerButtonBg;
+        color: $dangerButtonTextColor;
+    }
+
+    .p-tag-icon {
+        margin-right: math.div($inlineSpacing, 2);
+        font-size: $badgeFontSize;
+    }
+
+    .p-icon {
+        width: $badgeFontSize;
+        height: $badgeFontSize;
+    }
+
+    @if variable-exists(secondaryMessageBg) {
+        &.p-tag-secondary {
+            background-color: $secondaryButtonBg;
+            color: $secondaryButtonTextColor;
+        }
+    
+        &.p-tag-contrast {
+            background-color: $contrastButtonBg;
+            color: $contrastButtonTextColor;
+        }
+    }
+}
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_terminal.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_terminal.scss
new file mode 100644
index 0000000..43815ba
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_terminal.scss
@@ -0,0 +1,12 @@
+.p-terminal {
+	background: $panelContentBg;
+	color: $panelContentTextColor;
+	border: $panelContentBorder;
+	padding: $panelContentPadding;
+
+	.p-terminal-input {
+        font-family: var(--font-family);
+		font-feature-settings: var(--font-feature-settings, normal);
+		font-size: $inputTextFontSize;
+	}
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/multimedia/_galleria.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/multimedia/_galleria.scss
new file mode 100644
index 0000000..e57b320
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/multimedia/_galleria.scss
@@ -0,0 +1,155 @@
+.p-galleria {
+    .p-galleria-close {
+        margin: $galleriaCloseIconMargin;
+        background: $galleriaCloseIconBg;
+        color: $galleriaCloseIconColor;
+        width: $galleriaCloseIconWidth;
+        height: $galleriaCloseIconHeight;
+        transition: $actionIconTransition;
+        border-radius: $galleriaCloseIconBorderRadius;
+
+        .p-galleria-close-icon {
+            font-size: $galleriaCloseIconFontSize;
+        }
+
+        .p-icon-wrapper {
+            .p-icon {
+                width: $galleriaCloseIconFontSize;
+                height: $galleriaCloseIconFontSize;
+            }
+        }
+
+        &:hover {
+            background: $galleriaCloseIconHoverBg;
+            color: $galleriaCloseIconHoverColor;
+        }
+    }
+
+    .p-galleria-item-nav {
+        background: $galleriaItemNavigatorBg;
+        color: $galleriaItemNavigatorColor;
+        width: $galleriaItemNavigatorWidth;
+        height: $galleriaItemNavigatorHeight;
+        transition: $actionIconTransition;
+        border-radius: $galleriaItemNavigatorBorderRadius;
+        margin: $galleriaItemNavigatorMargin;
+
+        .p-galleria-item-prev-icon,
+        .p-galleria-item-next-icon {
+            font-size: $galleriaItemNavigatorFontSize;
+        }
+
+        .p-icon-wrapper {
+            .p-icon {
+                width: $galleriaCloseIconFontSize;
+                height: $galleriaCloseIconFontSize;
+            }
+        }
+
+        &:not(.p-disabled) {
+            &:hover {
+                background: $galleriaItemNavigatorHoverBg;
+                color: $galleriaItemNavigatorHoverColor;
+            }
+        }
+    }
+
+    .p-galleria-caption {
+        background: $galleriaCaptionBg;
+        color: $galleriaCaptionTextColor;
+        padding: $galleriaCaptionPadding;
+    }
+
+    .p-galleria-indicators {
+        padding: $galleriaIndicatorsPadding;
+
+        .p-galleria-indicator {
+            button {
+                background-color: $galleriaIndicatorBg;
+                width: $galleriaIndicatorWidth;
+                height: $galleriaIndicatorHeight;
+                transition: $actionIconTransition;
+                border-radius: $galleriaIndicatorBorderRadius;
+
+                &:hover {
+                    background: $galleriaIndicatorHoverBg;
+                }
+            }
+
+            &.p-highlight {
+                button {
+                    background: $highlightBg;
+                    color: $highlightTextColor;
+                }
+            }
+        }
+    }
+
+    &.p-galleria-indicators-bottom,
+    &.p-galleria-indicators-top {
+        .p-galleria-indicator {
+            margin-right: $inlineSpacing;
+        }
+    }
+
+    &.p-galleria-indicators-left,
+    &.p-galleria-indicators-right {
+        .p-galleria-indicator {
+            margin-bottom: $inlineSpacing;
+        }
+    }
+
+    &.p-galleria-indicator-onitem {
+        .p-galleria-indicators {
+            background: $galleriaIndicatorsBgOnItem;
+
+            .p-galleria-indicator {
+                button {
+                    background: $galleriaIndicatorBgOnItem;
+
+                    &:hover {
+                        background: $galleriaIndicatorHoverBgOnItem;
+                    }
+                }
+
+                &.p-highlight {
+                    button {
+                        background: $highlightBg;
+                        color: $highlightTextColor;
+                    }
+                }
+            }
+        }
+    }
+
+    .p-galleria-thumbnail-container {
+        background: $galleriaThumbnailContainerBg;
+        padding: $galleriaThumbnailContainerPadding;
+
+        .p-galleria-thumbnail-prev,
+        .p-galleria-thumbnail-next {
+            margin: $inlineSpacing;
+            background-color: $galleriaThumbnailNavigatorBg;
+            color: $galleriaThumbnailNavigatorColor;
+            width: $galleriaThumbnailNavigatorWidth;
+            height: $galleriaThumbnailNavigatorHeight;
+            transition: $actionIconTransition;
+            border-radius: $galleriaThumbnailNavigatorBorderRadius;
+
+            &:hover {
+                background: $galleriaThumbnailNavigatorHoverBg;
+                color: $galleriaThumbnailNavigatorHoverColor;
+            }
+        }
+
+        .p-galleria-thumbnail-item-content {
+            &:focus-visible {
+                @include focused();
+            }
+        }
+    }
+}
+
+.p-galleria-mask {
+    --maskbg: #{$galleriaMaskBg};
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/multimedia/_image.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/multimedia/_image.scss
new file mode 100644
index 0000000..4ec713d
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/multimedia/_image.scss
@@ -0,0 +1,49 @@
+.p-image-mask {
+    --maskbg: #{$imageMaskBg};
+}
+
+.p-image-preview-indicator {
+    background-color: transparent;
+    color: $imagePreviewIndicatorColor;
+    transition: $actionIconTransition;
+}
+
+.p-image-preview-container {
+    &:hover {
+        > .p-image-preview-indicator {
+            background-color: $imagePreviewIndicatorBg;
+        }
+    }
+}
+
+.p-image-toolbar {
+    padding: $imagePreviewToolbarPadding;
+}
+
+.p-image-action.p-link {
+    color: $imagePreviewActionIconColor;
+    background-color: $imagePreviewActionIconBg;
+    width: $imagePreviewActionIconWidth;
+    height: $imagePreviewActionIconHeight;
+    border-radius: $imagePreviewActionIconBorderRadius;
+    transition: $actionIconTransition;
+    margin-right: $inlineSpacing;
+
+    &:last-child {
+        margin-right: 0;
+    }
+
+    &:hover {
+        color: $imagePreviewActionIconHoverColor;
+        background-color: $imagePreviewActionIconHoverBg;
+    }
+
+    i {
+        font-size: $imagePreviewActionIconFontSize;
+    }
+
+    .p-icon {
+        width: $imagePreviewActionIconFontSize;
+        height: $imagePreviewActionIconFontSize;
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/overlay/_confirmpopup.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/overlay/_confirmpopup.scss
new file mode 100644
index 0000000..d6659e1
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/overlay/_confirmpopup.scss
@@ -0,0 +1,72 @@
+.p-confirm-popup {
+    background: $overlayContentBg;
+    color: $panelContentTextColor;
+    border: $overlayContentBorder;
+    border-radius: $borderRadius;
+    box-shadow: $overlayContainerShadow;
+
+    .p-confirm-popup-content {
+        padding: $panelContentPadding;
+    }
+
+    .p-confirm-popup-footer {
+        text-align: right;
+        padding: $panelFooterPadding;
+
+        button {
+            margin: 0 $inlineSpacing 0 0;
+            width: auto;
+
+            &:last-child {
+                margin: 0;
+            }
+        }
+    }
+
+    &:after {
+        border: solid transparent;
+        border-color: rgba($overlayContentBg, 0);
+        border-bottom-color: $overlayContentBg;
+    }
+
+    &:before {
+        border: solid transparent;
+
+        @if (nth($overlayContentBorder, 2) == 'none') {
+            border-color: rgba($overlayContentBg, 0);
+            border-bottom-color: $overlayContentBg;
+        }
+        @else {
+            border-color: rgba(nth($overlayContentBorder, 3), 0);
+            border-bottom-color: nth($overlayContentBorder, 3);
+        }
+    }
+
+    &.p-confirm-popup-flipped {
+        &:after {
+            border-top-color: $overlayContentBg;
+        }
+
+        &:before {
+            @if (nth($overlayContentBorder, 2) == 'none') {
+                border-top-color: $overlayContentBg;
+            }
+            @else {
+                border-top-color: nth($overlayContentBorder, 3);
+            }
+        }
+    }
+
+    .p-confirm-popup-icon {
+        font-size: $primeIconFontSize * 1.5;
+        
+        &.p-icon {
+            width: $primeIconFontSize * 1.5;
+            height: $primeIconFontSize * 1.5;
+        }
+    }
+
+    .p-confirm-popup-message {
+        margin-left: $inlineSpacing * 2;
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/overlay/_dialog.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/overlay/_dialog.scss
new file mode 100644
index 0000000..091a676
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/overlay/_dialog.scss
@@ -0,0 +1,69 @@
+.p-dialog {
+    border-radius: $borderRadius;
+    box-shadow: $overlayContainerShadow;
+    border: $overlayContentBorder;
+
+    .p-dialog-header {
+        border-bottom: $dialogHeaderBorder;
+        background: $dialogHeaderBg;
+        color: $dialogHeaderTextColor;
+        padding: $dialogHeaderPadding;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-dialog-title {
+            font-weight: $dialogHeaderFontWeight;
+            font-size: $dialogHeaderFontSize;
+        }
+
+        .p-dialog-header-icon {
+            @include action-icon();
+            margin-right: $inlineSpacing;
+
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
+
+    .p-dialog-content {
+        background: $overlayContentBg;
+        color: $panelContentTextColor;
+        padding: $dialogContentPadding;
+
+        &:last-of-type {
+            border-bottom-right-radius: $borderRadius;
+            border-bottom-left-radius: $borderRadius;
+        }
+    }
+
+    .p-dialog-footer {
+        border-top:  $dialogFooterBorder;
+        background: $overlayContentBg;
+        color: $panelFooterTextColor;
+        padding: $dialogFooterPadding;
+        text-align: right;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+
+        button {
+            margin: 0 $inlineSpacing 0 0;
+            width: auto;
+        }
+    }
+
+    &.p-confirm-dialog {
+        .p-confirm-dialog-icon {
+            font-size: $primeIconFontSize * 2;
+
+            &.p-icon {
+                width: $primeIconFontSize * 2;
+                height: $primeIconFontSize * 2;
+            }
+        }
+
+        .p-confirm-dialog-message {
+            margin-left: $inlineSpacing * 2;
+        }
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/overlay/_overlaypanel.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/overlay/_overlaypanel.scss
new file mode 100644
index 0000000..e635041
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/overlay/_overlaypanel.scss
@@ -0,0 +1,64 @@
+@use 'sass:math';
+
+.p-overlaypanel {
+    background: $overlayContentBg;
+    color: $panelContentTextColor;
+    border: $overlayContentBorder;
+    border-radius: $borderRadius;
+    box-shadow: $overlayContainerShadow;
+
+    .p-overlaypanel-content {
+        padding: $panelContentPadding;
+    }
+
+    .p-overlaypanel-close {
+        background: $buttonBg;
+        color: $buttonTextColor;
+        width: $actionIconWidth;
+        height: $actionIconHeight;
+        transition: $actionIconTransition;
+        border-radius: $actionIconBorderRadius;
+        position: absolute;
+        top: math.div(-1 * $actionIconWidth, 2);
+        right: math.div(-1 * $actionIconWidth, 2);
+
+        &:enabled:hover {
+            background: $buttonHoverBg;
+            color: $buttonTextHoverColor;
+        }
+    }
+
+    &:after {
+        border: solid transparent;
+        border-color: rgba($overlayContentBg, 0);
+        border-bottom-color: $overlayContentBg;
+    }
+
+    &:before {
+        border: solid transparent;
+
+        @if (nth($overlayContentBorder, 2) == 'none') {
+            border-color: rgba($overlayContentBg, 0);
+            border-bottom-color: scale-color($overlayContentBg, $lightness: -5%);
+        }
+        @else {
+            border-color: rgba(nth($overlayContentBorder, 3), 0);
+            border-bottom-color: scale-color(nth($overlayContentBorder, 3), $lightness: -5%);
+        }
+    }
+
+    &.p-overlaypanel-flipped {
+        &:after {
+            border-top-color: $overlayContentBg;
+        }
+
+        &:before {
+            @if (nth($overlayContentBorder, 2) == 'none') {
+                border-top-color: $overlayContentBg;
+            }
+            @else {
+                border-top-color: nth($overlayContentBorder, 3);
+            }
+        }
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/overlay/_sidebar.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/overlay/_sidebar.scss
new file mode 100644
index 0000000..55b3bd1
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/overlay/_sidebar.scss
@@ -0,0 +1,27 @@
+.p-sidebar {
+    background: $overlayContentBg;
+    color: $panelContentTextColor;
+    border: $overlayContentBorder;
+    box-shadow: $overlayContainerShadow;
+
+    .p-sidebar-header {
+        padding: $panelHeaderPadding;
+
+        .p-sidebar-close,
+        .p-sidebar-icon {
+            @include action-icon();
+        }
+
+        & + .p-sidebar-content {
+            padding-top: 0;
+        }
+    }
+
+    .p-sidebar-content {
+        padding: $panelContentPadding;
+    }
+
+    .p-sidebar-footer {
+        padding: $panelHeaderPadding;
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/overlay/_tooltip.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/overlay/_tooltip.scss
new file mode 100644
index 0000000..47cce55
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/overlay/_tooltip.scss
@@ -0,0 +1,33 @@
+.p-tooltip {
+    .p-tooltip-text {
+        background: $tooltipBg;
+        color: $tooltipTextColor;
+        padding: $tooltipPadding;
+        box-shadow: $inputOverlayShadow;
+        border-radius: $borderRadius;
+    }
+
+    &.p-tooltip-right {
+        .p-tooltip-arrow {
+            border-right-color: $tooltipBg;
+        }
+    }
+
+    &.p-tooltip-left {
+        .p-tooltip-arrow {
+            border-left-color: $tooltipBg;
+        }
+    }
+
+    &.p-tooltip-top {
+        .p-tooltip-arrow {
+            border-top-color: $tooltipBg;
+        }
+    }
+
+    &.p-tooltip-bottom {
+        .p-tooltip-arrow {
+            border-bottom-color: $tooltipBg;
+        }
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_accordion.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_accordion.scss
new file mode 100644
index 0000000..8afbc95
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_accordion.scss
@@ -0,0 +1,119 @@
+.p-accordion {
+    .p-accordion-header {
+        .p-accordion-header-link {
+            padding: $accordionHeaderPadding;
+            border: $accordionHeaderBorder;
+            color: $accordionHeaderTextColor;
+            background: $accordionHeaderBg;
+            font-weight: $accordionHeaderFontWeight;
+            border-radius: $borderRadius;
+            transition: $listItemTransition;
+
+            .p-accordion-toggle-icon {
+                margin-right: $inlineSpacing;
+            }
+        }
+
+        &:not(.p-disabled) {
+            .p-accordion-header-link {
+                &:focus-visible {
+                    @include focused-inset();
+                }
+            }
+        }
+
+        &:not(.p-highlight):not(.p-disabled):hover {
+            .p-accordion-header-link {
+                background: $accordionHeaderHoverBg;
+                border-color: $accordionHeaderHoverBorderColor;
+                color: $accordionHeaderTextHoverColor;
+            }
+        }
+
+        &:not(.p-disabled).p-highlight {
+            .p-accordion-header-link {
+                background: $accordionHeaderActiveBg;
+                border-color: $accordionHeaderActiveBorderColor;
+                color: $accordionHeaderTextActiveColor;
+                border-bottom-right-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+
+            &:hover {
+                .p-accordion-header-link {
+                    border-color: $accordionHeaderActiveHoverBorderColor;
+                    background: $accordionHeaderActiveHoverBg;
+                    color: $accordionHeaderTextActiveHoverColor;
+                }
+            }
+        }
+    }
+
+    .p-accordion-content {
+        padding: $accordionContentPadding;
+        border: $accordionContentBorder;
+        background: $accordionContentBg;
+        color: $accordionContentTextColor;
+        border-top: 0;
+        border-top-right-radius: 0;
+        border-top-left-radius: 0;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+    }
+
+    p-accordiontab {
+        .p-accordion-tab {
+            margin-bottom: $accordionSpacing;
+        }
+        
+        @if $accordionSpacing == 0 {
+            .p-accordion-header {
+                .p-accordion-header-link {
+                    border-radius: 0;
+                }
+            }
+
+            .p-accordion-content {
+                border-radius: 0;
+            }
+
+            &:not(:first-child) {
+                .p-accordion-header {
+                    .p-accordion-header-link {
+                        border-top: 0 none;
+                    }
+
+                    &:not(.p-highlight):not(.p-disabled):hover,
+                    &:not(.p-disabled).p-highlight:hover {
+                        .p-accordion-header-link {
+                            border-top: 0 none;
+                        }
+                    }
+                }
+            }
+
+            &:first-child {
+                .p-accordion-header {
+                    .p-accordion-header-link {
+                        border-top-right-radius: $borderRadius;
+                        border-top-left-radius: $borderRadius;
+                    }
+                }
+            }
+
+            &:last-child {
+                .p-accordion-header:not(.p-highlight) {
+                    .p-accordion-header-link {
+                        border-bottom-right-radius: $borderRadius;
+                        border-bottom-left-radius: $borderRadius;
+                    }
+                }
+
+                .p-accordion-content {
+                    border-bottom-right-radius: $borderRadius;
+                    border-bottom-left-radius: $borderRadius;
+                }
+            }
+        } 
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_card.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_card.scss
new file mode 100644
index 0000000..f333124
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_card.scss
@@ -0,0 +1,30 @@
+.p-card {
+    background: $panelContentBg;
+    color: $panelContentTextColor;
+    box-shadow: $cardShadow;
+    border-radius: $borderRadius;
+
+    .p-card-body {
+        padding: $cardBodyPadding;
+    }
+
+    .p-card-title {
+        font-size: $cardTitleFontSize;
+        font-weight: $cardTitleFontWeight;
+        margin-bottom: $inlineSpacing;
+    }
+
+    .p-card-subtitle {
+        font-weight: $cardSubTitleFontWeight;
+        margin-bottom: $inlineSpacing;
+        color: $cardSubTitleColor;
+    }
+
+    .p-card-content {
+        padding: $cardContentPadding;
+    }
+
+    .p-card-footer {
+        padding: $cardFooterPadding;
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_divider.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_divider.scss
new file mode 100644
index 0000000..0f1719e
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_divider.scss
@@ -0,0 +1,31 @@
+.p-divider {
+    .p-divider-content {
+        background-color: $panelContentBg;
+    }
+
+    &.p-divider-horizontal {
+        margin: $dividerHorizontalMargin;
+        padding: $dividerHorizontalPadding;
+
+        &:before {
+            border-top: $dividerSize $dividerColor;
+        }
+
+        .p-divider-content {
+            padding: 0 $inlineSpacing;
+        }
+    }
+
+    &.p-divider-vertical {
+        margin: $dividerVerticalMargin;
+        padding: $dividerVerticalPadding;
+
+        &:before {
+            border-left: $dividerSize $dividerColor;
+        }
+
+        .p-divider-content {
+            padding: $inlineSpacing 0;
+        }
+    }
+}
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_fieldset.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_fieldset.scss
new file mode 100644
index 0000000..2fb1d2e
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_fieldset.scss
@@ -0,0 +1,47 @@
+.p-fieldset {
+    border: $panelContentBorder;
+    background: $panelContentBg;
+    color: $panelContentTextColor;
+    border-radius: $borderRadius;
+
+    .p-fieldset-legend {
+        padding: $panelHeaderPadding;
+        border: $panelHeaderBorder;
+        color: $panelHeaderTextColor;
+        background: $panelHeaderBg;
+        font-weight: $panelHeaderFontWeight;
+        border-radius: $borderRadius;
+    }
+
+    &.p-fieldset-toggleable {
+        .p-fieldset-legend {
+            padding: 0;
+            transition: $actionIconTransition;
+
+            a {
+                padding: $panelHeaderPadding;
+                color: $panelHeaderTextColor;
+                border-radius: $borderRadius;
+                transition: $listItemTransition;
+
+                .p-fieldset-toggler {
+                    margin-right: $inlineSpacing;
+                }
+
+                &:focus-visible {
+                    @include focused();
+                }
+            }
+
+            &:hover {
+                background: $panelHeaderHoverBg;
+                border-color: $panelHeaderHoverBorderColor;
+                color: $panelHeaderTextHoverColor;
+            }
+        }
+    }
+
+    .p-fieldset-content {
+        padding: $panelContentPadding;
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_panel.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_panel.scss
new file mode 100644
index 0000000..299e7e1
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_panel.scss
@@ -0,0 +1,63 @@
+.p-panel {
+    .p-panel-header {
+        border: $panelHeaderBorder;
+        padding: $panelHeaderPadding;
+        background: $panelHeaderBg;
+        color: $panelHeaderTextColor;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-panel-title {
+            font-weight: $panelHeaderFontWeight;
+        }
+
+        .p-panel-header-icon {
+            @include action-icon();
+        }
+    }
+
+    &.p-panel-toggleable {
+        .p-panel-header {
+            padding: $panelToggleableHeaderPadding;
+        }
+    }
+
+    .p-panel-content {
+        padding: $panelContentPadding;
+        border: $panelContentBorder;
+        background: $panelContentBg;
+        color: $panelContentTextColor;
+        border-top: 0 none;
+
+        &:last-child {
+            border-bottom-right-radius: $borderRadius;
+            border-bottom-left-radius: $borderRadius;
+        }
+    }
+
+    .p-panel-footer {
+        padding: $panelFooterPadding;
+        border: $panelFooterBorder;
+        background: $panelFooterBg;
+        color: $panelFooterTextColor;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+        border-top: 0 none;
+    }
+
+    .p-panel-icons-end {
+        order: 2;
+        margin-left: auto;
+    }    
+
+    .p-panel-icons-start {
+        order: 0;
+        margin-right: $inlineSpacing;
+    }
+
+    .p-panel-icons-center {
+        order: 2;
+        width:100%;
+        text-align:center;
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_scrollpanel.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_scrollpanel.scss
new file mode 100644
index 0000000..192a3a2
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_scrollpanel.scss
@@ -0,0 +1,11 @@
+.p-scrollpanel {
+    .p-scrollpanel-bar {
+        background: $scrollPanelTrackBg;
+        border: $scrollPanelTrackBorder;
+        transition: $formElementTransition;
+
+        &:focus-visible {
+            @include focused();
+        }
+    }
+}
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_splitter.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_splitter.scss
new file mode 100644
index 0000000..2cc9e99
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_splitter.scss
@@ -0,0 +1,23 @@
+.p-splitter {
+    border: $panelContentBorder;
+    background: $panelContentBg;
+    border-radius: $borderRadius;
+    color: $panelContentTextColor;
+
+    .p-splitter-gutter {
+        transition: $actionIconTransition;
+        background: $splitterGutterBg;
+
+        .p-splitter-gutter-handle {
+            background: $splitterGutterHandleBg;
+
+            &:focus-visible {
+                @include focused();
+            }
+        }
+    }
+
+    .p-splitter-gutter-resizing {
+        background: $splitterGutterHandleBg;
+    }
+}
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_stepper.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_stepper.scss
new file mode 100644
index 0000000..78df96b
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_stepper.scss
@@ -0,0 +1,201 @@
+@use "sass:math";
+
+//core
+.p-stepper .p-stepper-nav {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow-x: auto;
+}
+
+.p-stepper-vertical .p-stepper-nav {
+    flex-direction: column;
+}
+
+.p-stepper-header {
+    position: relative;
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+
+    &:last-of-type {
+        flex: initial;
+    }
+}
+
+.p-stepper-header .p-stepper-action {
+    border: 0 none;
+    display: inline-flex;
+    align-items: center;
+    text-decoration: none;
+    cursor: pointer;
+
+    &:focus-visible {
+        @include focused();
+    }
+}
+
+.p-stepper.p-stepper-readonly .p-stepper-header {
+    cursor: auto;
+}
+
+.p-stepper-header.p-highlight .p-stepper-action {
+    cursor: default;
+}
+
+.p-stepper-title {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+}
+
+.p-stepper-number {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-stepper-separator {
+    flex: 1 1 0;
+}
+
+//theme
+.p-stepper {
+    .p-stepper-nav {
+        display: flex;
+        justify-content: space-between;
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+    }
+
+    .p-stepper-header {
+        padding: $inlineSpacing;
+
+        .p-stepper-action {
+            transition: $listItemTransition;
+            border-radius: $borderRadius;
+            background: $stepsItemBg;
+            outline-color: transparent;
+
+            .p-stepper-number {
+                color: $stepsItemNumberColor;
+                border: $stepsItemBorder;
+                border-width: 2px;
+                background: $stepsItemBg;
+                min-width: $stepsItemNumberWidth;
+                height: $stepsItemNumberHeight;
+                line-height: $stepsItemNumberHeight;
+                font-size: $stepsItemNumberFontSize;
+                border-radius: $stepsItemNumberBorderRadius;
+                transition: $actionIconTransition;
+            }
+
+            .p-stepper-title {
+                margin-left: $inlineSpacing;
+                color: $stepsItemTextColor;
+                font-weight: $stepsItemActiveFontWeight;
+                transition: $actionIconTransition;
+            }
+
+            &:not(.p-disabled):focus-visible {
+                @include focused();
+            }
+        }
+
+        &.p-highlight {
+            .p-stepper-number {
+                background: $highlightBg;
+                color: $highlightTextColor;
+            }
+
+            .p-stepper-title {
+                color: $textColor;
+            }
+        }
+
+        &:not(.p-disabled):focus-visible {
+            @include focused();
+        }
+
+        &:has(~ .p-highlight) {
+            @if variable-exists(primaryColor) {
+                .p-stepper-separator {
+                    background-color: $primaryColor;
+                }
+            }
+        }
+    }
+
+    .p-stepper-panels {
+        background: $tabviewContentBg;
+        padding: $tabviewContentPadding;
+        color: $tabviewContentTextColor;
+    }
+
+    .p-stepper-separator {
+        background-color: $timelineEventColor;
+        width: 100%;
+        height: 2px;
+        margin-inline-start: calc($inlineSpacing * 2);
+        transition: $listItemTransition;
+    }
+
+    &.p-stepper-vertical {
+        display: flex;
+        flex-direction: column;
+
+        .p-stepper-toggleable-content {
+            display: flex;
+            flex: 1 1 auto;
+            background: $tabviewContentBg;
+            color: $tabviewContentTextColor;
+        }
+
+        .p-stepper-panel {
+            display: flex;
+            flex-direction: column;
+            flex: initial;
+
+            &.p-stepper-panel-active {
+                flex: 1 1 auto;
+            }
+
+            .p-stepper-header {
+                flex: initial;
+            }
+
+            .p-stepper-content {
+                width: 100%;
+                padding-left: calc($inlineSpacing * 2);
+            }
+
+            .p-stepper-separator {
+                flex: 0 0 auto;
+                width: 2px;
+                height: auto;
+                margin-inline-start: calc($inlineSpacing * 7 / 2 + 2px);
+            }
+
+            &:has(~ .p-stepper-panel-active) {
+                @if variable-exists(primaryColor) {
+                    .p-stepper-separator {
+                        background-color: $primaryColor;
+                    }
+                }
+            }
+
+            &:last-of-type {
+                .p-stepper-content {
+                    padding-left: calc($inlineSpacing * 6);
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_tabview.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_tabview.scss
new file mode 100644
index 0000000..9fa6210
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_tabview.scss
@@ -0,0 +1,82 @@
+.p-tabview {
+    .p-tabview-nav-content {
+        scroll-padding-inline: $buttonIconOnlyWidth;
+    }
+
+    .p-tabview-nav {
+        background: $tabviewNavBg;
+        border: $tabviewNavBorder;
+        border-width: $tabviewNavBorderWidth;
+
+        li {
+            margin-right: $tabviewHeaderSpacing;
+
+            .p-tabview-nav-link {
+                border: $tabviewHeaderBorder;
+                border-width: $tabviewHeaderBorderWidth;
+                border-color: $tabviewHeaderBorderColor;
+                background: $tabviewHeaderBg;
+                color: $tabviewHeaderTextColor;
+                padding: $tabviewHeaderPadding;
+                font-weight: $tabviewHeaderFontWeight;
+                border-top-right-radius: $borderRadius;
+                border-top-left-radius: $borderRadius;
+                transition: $listItemTransition;
+                margin: $tabviewHeaderMargin;
+
+                &:not(.p-disabled):focus-visible {
+                    @include focused-inset();
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled):hover {
+                .p-tabview-nav-link {
+                    background: $tabviewHeaderHoverBg;
+                    border-color: $tabviewHeaderHoverBorderColor;
+                    color: $tabviewHeaderTextHoverColor;
+                }
+            }
+
+            &.p-highlight {
+                .p-tabview-nav-link {
+                    background: $tabviewHeaderActiveBg;
+                    border-color: $tabviewHeaderActiveBorderColor;
+                    color: $tabviewHeaderTextActiveColor;
+                }
+            }
+        }
+    }
+
+    .p-tabview-left-icon {
+        margin-right: $inlineSpacing;
+    }
+
+    .p-tabview-right-icon {
+        margin-left: $inlineSpacing;
+    }
+
+    .p-tabview-close {
+        margin-left: $inlineSpacing;
+    }
+
+    .p-tabview-nav-btn.p-link {
+        background: $tabviewHeaderActiveBg;
+        color: $tabviewHeaderTextActiveColor;
+        width: $buttonIconOnlyWidth;
+        box-shadow: $raisedButtonShadow;
+        border-radius: 0;
+
+        &:focus-visible {
+            @include focused-inset();
+        }
+    }
+
+    .p-tabview-panels {
+        background: $tabviewContentBg;
+        padding: $tabviewContentPadding;
+        border: $tabviewContentBorder;
+        color: $tabviewContentTextColor;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_toolbar.scss b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_toolbar.scss
new file mode 100644
index 0000000..78d7415
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_toolbar.scss
@@ -0,0 +1,11 @@
+.p-toolbar {
+    background: $panelHeaderBg;
+    border: $panelHeaderBorder;
+    padding: $panelHeaderPadding;
+    border-radius: $borderRadius;
+    gap: $inlineSpacing;
+
+    .p-toolbar-separator {
+        margin: 0 $inlineSpacing;
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/themes/vela/_extensions.scss b/main/http_server/axe-os/src/app/layout/styles/theme/themes/vela/_extensions.scss
new file mode 100644
index 0000000..8c09b32
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/themes/vela/_extensions.scss
@@ -0,0 +1,39 @@
+@layer primeng {
+    .p-carousel {
+        .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+            background-color: $primaryColor;
+        }
+    }
+    
+    .p-galleria {
+        .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+            background-color: $primaryColor;
+        }
+    
+        &.p-galleria-indicator-onitem {
+            .p-galleria-indicators {
+                .p-galleria-indicator {
+                    &.p-highlight {
+                        button {
+                            background: $primaryColor;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    
+    .p-datatable {
+        .p-datatable-tbody {
+            > tr {
+                &.p-datatable-dragpoint-top > td {
+                    box-shadow: inset 0 2px 0 0 $primaryColor;
+                }
+    
+                &.p-datatable-dragpoint-bottom > td {
+                    box-shadow: inset 0 -2px 0 0 $primaryColor;
+                }
+            }
+        }
+    }
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/themes/vela/_variables.scss b/main/http_server/axe-os/src/app/layout/styles/theme/themes/vela/_variables.scss
new file mode 100644
index 0000000..6852f8d
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/themes/vela/_variables.scss
@@ -0,0 +1,955 @@
+$colors: (
+    "blue": #2196f3,
+    "green": #4caf50,
+    "yellow": #fbc02d,
+    "cyan": #00bcd4,
+    "pink": #e91e63,
+    "indigo": #3f51b5,
+    "teal": #009688,
+    "orange": #f57c00,
+    "bluegray": #607d8b,
+    "purple": #9c27b0,
+    "red": #ff4032,
+    "primary": $primaryColor,
+) !default;
+
+//shades
+$shade000: rgba(255, 255, 255, 0.87) !default; //text color
+$shade100: rgba(255, 255, 255, 0.6) !default; //text secondary color
+$shade500: #3e526d !default;
+$shade600: #304562 !default; //input bg, border, divider
+$shade700: #283951 !default; //unused
+$shade800: #1f2d40 !default; //elevated surface
+$shade900: #070D17 !default; //ground surface
+
+$hoverBg: rgba(255, 255, 255, 0.03) !default;
+
+//global
+$fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$fontSize: 1rem !default;
+$fontWeight: normal !default;
+$textColor: $shade000 !default;
+$textSecondaryColor: $shade100 !default;
+$borderRadius: 3px !default;
+$transitionDuration: 0.2s !default;
+$formElementTransition: background-color $transitionDuration,
+    color $transitionDuration, border-color $transitionDuration,
+    box-shadow $transitionDuration !default;
+$actionIconTransition: background-color $transitionDuration,
+    color $transitionDuration, box-shadow $transitionDuration !default;
+$listItemTransition: box-shadow $transitionDuration !default;
+$primeIconFontSize: 1rem !default;
+$divider: 1px solid $shade600 !default;
+$inlineSpacing: 0.5rem !default; //spacing between inline elements
+$disabledOpacity: 0.4 !default; //opacity of a disabled item
+$maskBg: rgba(0, 0, 0, 0.4) !default; //modal mask bg color
+$loadingIconFontSize: 2rem !default;
+$errorColor: #ef9a9a !default;
+
+//scale
+$scaleSM: 0.875 !default;
+$scaleLG: 1.25 !default;
+
+//focus
+$focusOutlineColor: $primaryLightColor !default;
+$focusOutline: 0 none !default;
+$focusOutlineOffset: 0 !default;
+$inputFocusOutlineOffset:$focusOutlineOffset !default;
+$focusShadow: 0 0 0 1px $focusOutlineColor !default;
+
+//action icons
+$actionIconWidth: 2rem !default;
+$actionIconHeight: 2rem !default;
+$actionIconBg: transparent !default;
+$actionIconBorder: 0 none !default;
+$actionIconColor: $shade100 !default;
+$actionIconHoverBg: $hoverBg !default;
+$actionIconHoverBorderColor: transparent !default;
+$actionIconHoverColor: $shade000 !default;
+$actionIconBorderRadius: 50% !default;
+
+//input field (e.g. inputtext, spinner, inputmask)
+$inputPadding: 0.5rem 0.5rem !default;
+$inputTextFontSize: 1rem !default;
+$inputBg: $shade900 !default;
+$inputTextColor: $shade000 !default;
+$inputIconColor: $shade100 !default;
+$inputBorder: 1px solid $shade600 !default;
+$inputHoverBorderColor: $primaryColor !default;
+$inputFocusBorderColor: $primaryColor !default;
+$inputErrorBorderColor: $errorColor !default;
+$inputPlaceholderTextColor: $shade100 !default;
+$inputFilledBg: $shade600 !default;
+$inputFilledHoverBg: $inputFilledBg !default;
+$inputFilledFocusBg: $inputFilledBg !default;
+
+//input groups
+$inputGroupBg: $shade800 !default;
+$inputGroupTextColor: $shade100 !default;
+$inputGroupAddOnMinWidth: 2.357rem !default;
+
+//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
+$inputListBg: $shade800 !default;
+$inputListTextColor: $shade000 !default;
+$inputListBorder: $inputBorder !default;
+$inputListPadding: 0.5rem 0 !default;
+$inputListItemPadding: 0.5rem 1rem !default;
+$inputListItemBg: transparent !default;
+$inputListItemTextColor: $shade000 !default;
+$inputListItemHoverBg: $hoverBg !default;
+$inputListItemTextHoverColor: $shade000 !default;
+$inputListItemFocusBg: rgba(255, 255, 255, 0.09) !default;
+$inputListItemTextFocusColor: $shade000 !default;
+$inputListItemBorder: 0 none !default;
+$inputListItemBorderRadius: 0 !default;
+$inputListItemMargin: 0 !default;
+$inputListItemFocusShadow: inset 0 0 0 0.15rem $focusOutlineColor !default;
+$inputListHeaderPadding: 0.5rem 1rem !default;
+$inputListHeaderMargin: 0 !default;
+$inputListHeaderBg: $shade800 !default;
+$inputListHeaderTextColor: $shade000 !default;
+$inputListHeaderBorder: 0 none !default;
+
+//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
+$inputOverlayBg: $inputListBg !default;
+$inputOverlayHeaderBg: $inputListHeaderBg !default;
+$inputOverlayBorder: 1px solid $shade600 !default;
+$inputOverlayShadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
+    0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12) !default;
+
+//password
+$passwordMeterBg: $shade600 !default;
+$passwordWeakBg: #f48fb1 !default;
+$passwordMediumBg: #ffe082 !default;
+$passwordStrongBg: #c5e1a5 !default;
+
+//button
+$buttonPadding: 0.5rem 1rem !default;
+$buttonIconOnlyWidth: 2.357rem !default;
+$buttonIconOnlyPadding: 0.5rem 0 !default;
+$buttonBg: $primaryColor !default;
+$buttonTextColor: $primaryTextColor !default;
+$buttonBorder: 1px solid $primaryColor !default;
+$buttonHoverBg: $primaryDarkColor !default;
+$buttonTextHoverColor: $primaryTextColor !default;
+$buttonHoverBorderColor: $primaryDarkColor !default;
+$buttonActiveBg: $primaryDarkerColor !default;
+$buttonTextActiveColor: $primaryTextColor !default;
+$buttonActiveBorderColor: $primaryDarkerColor !default;
+$raisedButtonShadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12) !default;
+$roundedButtonBorderRadius: 2rem !default;
+
+$textButtonHoverBgOpacity: 0.04 !default;
+$textButtonActiveBgOpacity: 0.16 !default;
+$outlinedButtonBorder: 1px solid !default;
+$plainButtonTextColor: $textSecondaryColor !default;
+$plainButtonHoverBgColor: $hoverBg !default;
+$plainButtonActiveBgColor: rgba(255, 255, 255, 0.16) !default;
+
+$secondaryButtonBg: #78909c !default;
+$secondaryButtonTextColor: #ffffff !default;
+$secondaryButtonBorder: 1px solid $secondaryButtonBg !default;
+$secondaryButtonHoverBg: scale-color(
+    $secondaryButtonBg,
+    $lightness: -10%
+) !default;
+$secondaryButtonTextHoverColor: $secondaryButtonTextColor !default;
+$secondaryButtonHoverBorderColor: scale-color(
+    $secondaryButtonBg,
+    $lightness: -10%
+) !default;
+$secondaryButtonActiveBg: scale-color(
+    $secondaryButtonBg,
+    $lightness: -20%
+) !default;
+$secondaryButtonTextActiveColor: $secondaryButtonTextColor !default;
+$secondaryButtonActiveBorderColor: scale-color(
+    $secondaryButtonBg,
+    $lightness: -20%
+) !default;
+$secondaryButtonFocusShadow: 0 0 0 1px
+    scale-color($secondaryButtonBg, $lightness: 30%) !default;
+
+$infoButtonBg: #81d4fa !default;
+$infoButtonTextColor: #121212 !default;
+$infoButtonBorder: 1px solid $infoButtonBg !default;
+$infoButtonHoverBg: scale-color($infoButtonBg, $lightness: -10%) !default;
+$infoButtonTextHoverColor: $infoButtonTextColor !default;
+$infoButtonHoverBorderColor: scale-color(
+    $infoButtonBg,
+    $lightness: -10%
+) !default;
+$infoButtonActiveBg: scale-color($infoButtonBg, $lightness: -20%) !default;
+$infoButtonTextActiveColor: $infoButtonTextColor !default;
+$infoButtonActiveBorderColor: scale-color(
+    $infoButtonBg,
+    $lightness: -20%
+) !default;
+$infoButtonFocusShadow: 0 0 0 1px scale-color($infoButtonBg, $lightness: 30%) !default;
+
+$successButtonBg: #c5e1a5 !default;
+$successButtonTextColor: #121212 !default;
+$successButtonBorder: 1px solid $successButtonBg !default;
+$successButtonHoverBg: scale-color($successButtonBg, $lightness: -10%) !default;
+$successButtonTextHoverColor: $successButtonTextColor !default;
+$successButtonHoverBorderColor: scale-color(
+    $successButtonBg,
+    $lightness: -10%
+) !default;
+$successButtonActiveBg: scale-color(
+    $successButtonBg,
+    $lightness: -20%
+) !default;
+$successButtonTextActiveColor: $successButtonTextColor !default;
+$successButtonActiveBorderColor: scale-color(
+    $successButtonBg,
+    $lightness: -20%
+) !default;
+$successButtonFocusShadow: 0 0 0 1px
+    scale-color($successButtonBg, $lightness: 30%) !default;
+
+$warningButtonBg: #ffe082 !default;
+$warningButtonTextColor: #121212 !default;
+$warningButtonBorder: 1px solid $warningButtonBg !default;
+$warningButtonHoverBg: scale-color($warningButtonBg, $lightness: -10%) !default;
+$warningButtonTextHoverColor: $warningButtonTextColor !default;
+$warningButtonHoverBorderColor: scale-color(
+    $warningButtonBg,
+    $lightness: -10%
+) !default;
+$warningButtonActiveBg: scale-color(
+    $warningButtonBg,
+    $lightness: -20%
+) !default;
+$warningButtonTextActiveColor: $warningButtonTextColor !default;
+$warningButtonActiveBorderColor: scale-color(
+    $warningButtonBg,
+    $lightness: -20%
+) !default;
+$warningButtonFocusShadow: 0 0 0 1px
+    scale-color($warningButtonBg, $lightness: 30%) !default;
+
+$helpButtonBg: #ce93d8 !default;
+$helpButtonTextColor: #121212 !default;
+$helpButtonBorder: 1px solid $helpButtonBg !default;
+$helpButtonHoverBg: scale-color($helpButtonBg, $lightness: -10%) !default;
+$helpButtonTextHoverColor: $helpButtonTextColor !default;
+$helpButtonHoverBorderColor: scale-color(
+    $helpButtonBg,
+    $lightness: -10%
+) !default;
+$helpButtonActiveBg: scale-color($helpButtonBg, $lightness: -20%) !default;
+$helpButtonTextActiveColor: $helpButtonTextColor !default;
+$helpButtonActiveBorderColor: scale-color(
+    $helpButtonBg,
+    $lightness: -20%
+) !default;
+$helpButtonFocusShadow: 0 0 0 1px scale-color($helpButtonBg, $lightness: 30%) !default;
+
+$dangerButtonBg: #f48fb1 !default;
+$dangerButtonTextColor: #121212 !default;
+$dangerButtonBorder: 1px solid $dangerButtonBg !default;
+$dangerButtonHoverBg: scale-color($dangerButtonBg, $lightness: -10%) !default;
+$dangerButtonTextHoverColor: $dangerButtonTextColor !default;
+$dangerButtonHoverBorderColor: scale-color(
+    $dangerButtonBg,
+    $lightness: -10%
+) !default;
+$dangerButtonActiveBg: scale-color($dangerButtonBg, $lightness: -20%) !default;
+$dangerButtonTextActiveColor: $dangerButtonTextColor !default;
+$dangerButtonActiveBorderColor: scale-color(
+    $dangerButtonBg,
+    $lightness: -20%
+) !default;
+$dangerButtonFocusShadow: 0 0 0 1px
+    scale-color($dangerButtonBg, $lightness: 30%) !default;
+
+$linkButtonColor: $primaryColor !default;
+$linkButtonHoverColor: $primaryColor !default;
+$linkButtonTextHoverDecoration: underline !default;
+$linkButtonFocusShadow: 0 0 0 0.1rem $focusOutlineColor !default;
+
+//checkbox
+$checkboxWidth: 20px !default;
+$checkboxHeight: 20px !default;
+$checkboxBorder: 2px solid $shade600 !default;
+$checkboxIconFontSize: 14px !default;
+$checkboxActiveBorderColor: $primaryColor !default;
+$checkboxActiveBg: $primaryColor !default;
+$checkboxIconActiveColor: $primaryTextColor !default;
+$checkboxActiveHoverBg: $primaryDarkerColor !default;
+$checkboxIconActiveHoverColor: $primaryTextColor !default;
+$checkboxActiveHoverBorderColor: $primaryDarkerColor !default;
+
+//radiobutton
+$radiobuttonWidth: 20px !default;
+$radiobuttonHeight: 20px !default;
+$radiobuttonBorder: 2px solid $shade600 !default;
+$radiobuttonIconSize: 12px !default;
+$radiobuttonActiveBorderColor: $primaryColor !default;
+$radiobuttonActiveBg: $primaryColor !default;
+$radiobuttonIconActiveColor: $primaryTextColor !default;
+$radiobuttonActiveHoverBg: $primaryDarkerColor !default;
+$radiobuttonIconActiveHoverColor: $primaryTextColor !default;
+$radiobuttonActiveHoverBorderColor: $primaryDarkerColor !default;
+
+//colorpicker
+$colorPickerPreviewWidth: 2rem !default;
+$colorPickerPreviewHeight: 2rem !default;
+$colorPickerBg: $shade800 !default;
+$colorPickerBorder: 1px solid $shade600 !default;
+$colorPickerHandleColor: #ffffff !default;
+
+//togglebutton
+$toggleButtonBg: $shade800 !default;
+$toggleButtonBorder: 1px solid $shade600 !default;
+$toggleButtonTextColor: $shade000 !default;
+$toggleButtonIconColor: $shade100 !default;
+$toggleButtonHoverBg: $hoverBg !default;
+$toggleButtonHoverBorderColor: $shade600 !default;
+$toggleButtonTextHoverColor: $shade000 !default;
+$toggleButtonIconHoverColor: $shade100 !default;
+$toggleButtonActiveBg: $primaryColor !default;
+$toggleButtonActiveBorderColor: $primaryColor !default;
+$toggleButtonTextActiveColor: $primaryTextColor !default;
+$toggleButtonIconActiveColor: $primaryTextColor !default;
+$toggleButtonActiveHoverBg: $primaryDarkColor !default;
+$toggleButtonActiveHoverBorderColor: $primaryDarkColor !default;
+$toggleButtonTextActiveHoverColor: $primaryTextColor !default;
+$toggleButtonIconActiveHoverColor: $primaryTextColor !default;
+
+//inplace
+$inplacePadding: $inputPadding !default;
+$inplaceHoverBg: $hoverBg !default;
+$inplaceTextHoverColor: $shade000 !default;
+
+//rating
+$ratingIconFontSize: 1.143rem !default;
+$ratingCancelIconColor: #f48fb1 !default;
+$ratingCancelIconHoverColor: #f48fb1 !default;
+$ratingStarIconOffColor: $shade000 !default;
+$ratingStarIconOnColor: $primaryColor !default;
+$ratingStarIconHoverColor: $primaryColor !default;
+
+//slider
+$sliderBg: $shade600 !default;
+$sliderBorder: 0 none !default;
+$sliderHorizontalHeight: 0.286rem !default;
+$sliderVerticalWidth: 0.286rem !default;
+$sliderHandleWidth: 1.143rem !default;
+$sliderHandleHeight: 1.143rem !default;
+$sliderHandleBg: $shade600 !default;
+$sliderHandleBorder: 2px solid $primaryColor !default;
+$sliderHandleBorderRadius: 50% !default;
+$sliderHandleHoverBorderColor: $primaryColor !default;
+$sliderHandleHoverBg: $primaryColor !default;
+$sliderRangeBg: $primaryColor !default;
+
+//calendar
+$calendarTableMargin: 0.5rem 0 !default;
+$calendarPadding: 0.5rem !default;
+$calendarBg: $shade800 !default;
+$calendarInlineBg: $calendarBg !default;
+$calendarTextColor: $shade000 !default;
+$calendarBorder: $inputListBorder !default;
+$calendarOverlayBorder: $inputOverlayBorder !default;
+
+$calendarHeaderPadding: 0.5rem !default;
+$calendarHeaderBg: $shade800 !default;
+$calendarInlineHeaderBg: $calendarBg !default;
+$calendarHeaderBorder: 1px solid $shade600 !default;
+$calendarHeaderTextColor: $shade000 !default;
+$calendarHeaderFontWeight: 600 !default;
+$calendarHeaderCellPadding: 0.5rem !default;
+$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
+
+$calendarCellDatePadding: 0.5rem !default;
+$calendarCellDateWidth: 2.5rem !default;
+$calendarCellDateHeight: 2.5rem !default;
+$calendarCellDateBorderRadius: 50% !default;
+$calendarCellDateBorder: 1px solid transparent !default;
+$calendarCellDateHoverBg: $hoverBg !default;
+$calendarCellDateTodayBg: transparent !default;
+$calendarCellDateTodayBorderColor: transparent !default;
+$calendarCellDateTodayTextColor: $primaryColor !default;
+
+$calendarButtonBarPadding: 1rem 0 !default;
+$calendarTimePickerPadding: 0.5rem !default;
+$calendarTimePickerElementPadding: 0 0.5rem !default;
+$calendarTimePickerTimeFontSize: 1.25rem !default;
+
+$calendarBreakpoint: 769px !default;
+$calendarCellDatePaddingSM: 0 !default;
+
+//input switch
+$inputSwitchWidth: 3rem !default;
+$inputSwitchHeight: 1.75rem !default;
+$inputSwitchBorderRadius: 30px !default;
+$inputSwitchHandleWidth: 1.25rem !default;
+$inputSwitchHandleHeight: 1.25rem !default;
+$inputSwitchHandleBorderRadius: 50% !default;
+$inputSwitchSliderPadding: 0.25rem !default;
+$inputSwitchSliderOffBg: $shade600 !default;
+$inputSwitchHandleOffBg: $shade100 !default;
+$inputSwitchSliderOffHoverBg: $hoverBg !default;
+$inputSwitchSliderOnBg: $primaryColor !default;
+$inputSwitchSliderOnHoverBg: $primaryDarkColor !default;
+$inputSwitchHandleOnBg: $shade000 !default;
+
+//panel
+$panelHeaderBorderColor: $shade600 !default;
+$panelHeaderBorder: 1px solid $shade600 !default;
+$panelHeaderBg: $shade800 !default;
+$panelHeaderTextColor: $shade000 !default;
+$panelHeaderFontWeight: 600 !default;
+$panelHeaderPadding: 1rem !default;
+$panelToggleableHeaderPadding: 0.5rem 1rem !default;
+
+$panelHeaderHoverBg: $hoverBg !default;
+$panelHeaderHoverBorderColor: $shade600 !default;
+$panelHeaderTextHoverColor: $shade000 !default;
+
+$panelContentBorderColor: $shade600 !default;
+$panelContentBorder: 1px solid $shade600 !default;
+$panelContentBg: $shade800 !default;
+$panelContentEvenRowBg: rgba(255, 255, 255, 0.01) !default;
+$panelContentTextColor: $shade000 !default;
+$panelContentPadding: 1rem !default;
+
+$panelFooterBorder: 1px solid $shade600 !default;
+$panelFooterBg: $shade800 !default;
+$panelFooterTextColor: $shade000 !default;
+$panelFooterPadding: 0.5rem 1rem !default;
+
+//accordion
+$accordionSpacing: 0 !default;
+$accordionHeaderBorder: $panelHeaderBorder !default;
+$accordionHeaderBg: $panelHeaderBg !default;
+$accordionHeaderTextColor: $panelHeaderTextColor !default;
+$accordionHeaderFontWeight: $panelHeaderFontWeight !default;
+$accordionHeaderPadding: $panelHeaderPadding !default;
+
+$accordionHeaderHoverBg: $hoverBg !default;
+$accordionHeaderHoverBorderColor: $shade600 !default;
+$accordionHeaderTextHoverColor: $shade000 !default;
+
+$accordionHeaderActiveBg: $panelHeaderBg !default;
+$accordionHeaderActiveBorderColor: $shade600 !default;
+$accordionHeaderTextActiveColor: $shade000 !default;
+
+$accordionHeaderActiveHoverBg: $hoverBg !default;
+$accordionHeaderActiveHoverBorderColor: $shade600 !default;
+$accordionHeaderTextActiveHoverColor: $shade000 !default;
+
+$accordionContentBorder: $panelContentBorder !default;
+$accordionContentBg: $panelContentBg !default;
+$accordionContentTextColor: $panelContentTextColor !default;
+$accordionContentPadding: $panelContentPadding !default;
+
+//tabview
+$tabviewNavBorder: 1px solid $shade600 !default;
+$tabviewNavBorderWidth: 0 0 2px 0 !default;
+$tabviewNavBg: transparent !default;
+
+$tabviewHeaderSpacing: 0 !default;
+$tabviewHeaderBorder: solid $shade600 !default;
+$tabviewHeaderBorderWidth: 0 0 2px 0 !default;
+$tabviewHeaderBorderColor: transparent transparent $shade600 transparent !default;
+$tabviewHeaderBg: $shade800 !default;
+$tabviewHeaderTextColor: $shade100 !default;
+$tabviewHeaderFontWeight: $panelHeaderFontWeight !default;
+$tabviewHeaderPadding: $panelHeaderPadding !default;
+$tabviewHeaderMargin: 0 0 -2px 0 !default;
+
+$tabviewHeaderHoverBg: $shade800 !default;
+$tabviewHeaderHoverBorderColor: $primaryColor !default;
+$tabviewHeaderTextHoverColor: $shade000 !default;
+
+$tabviewHeaderActiveBg: $shade800 !default;
+$tabviewHeaderActiveBorderColor: $primaryColor !default;
+$tabviewHeaderTextActiveColor: $primaryColor !default;
+
+$tabviewContentBorder: 0 none !default;
+$tabviewContentBg: $shade800 !default;
+$tabviewContentTextColor: $shade000 !default;
+$tabviewContentPadding: $panelContentPadding !default;
+
+//upload
+$fileUploadProgressBarHeight: 0.25rem !default;
+$fileUploadContentPadding: 2rem 1rem !default;
+$fileUploadContentHoverBorder: 1px dashed $primaryColor !default;
+
+//scrollpanel
+$scrollPanelTrackBorder: 0 none !default;
+$scrollPanelTrackBg: $shade600 !default;
+
+//card
+$cardBodyPadding: 1rem !default;
+$cardTitleFontSize: 1.5rem !default;
+$cardTitleFontWeight: 700 !default;
+$cardSubTitleFontWeight: 700 !default;
+$cardSubTitleColor: $shade100 !default;
+$cardContentPadding: 1rem 0 !default;
+$cardFooterPadding: 1rem 0 0 0 !default;
+$cardShadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
+    0 1px 3px 0 rgba(0, 0, 0, 0.12) !default;
+
+//editor
+$editorToolbarBg: $panelHeaderBg !default;
+$editorToolbarBorder: $panelHeaderBorder !default;
+$editorToolbarPadding: $panelHeaderPadding !default;
+$editorToolbarIconColor: $textSecondaryColor !default;
+$editorToolbarIconHoverColor: $textColor !default;
+$editorIconActiveColor: $primaryColor !default;
+$editorContentBorder: $panelContentBorder !default;
+$editorContentBg: $panelContentBg !default;
+
+//paginator
+$paginatorBg: $shade800 !default;
+$paginatorTextColor: $shade100 !default;
+$paginatorBorder: solid $shade600 !default;
+$paginatorBorderWidth: 1px !default;
+$paginatorPadding: 0.5rem 1rem !default;
+$paginatorElementWidth: 2.286em !default;
+$paginatorElementHeight: 2.286em !default;
+$paginatorElementBg: transparent !default;
+$paginatorElementBorder: 0 none !default;
+$paginatorElementIconColor: $shade100 !default;
+$paginatorElementHoverBg: $hoverBg !default;
+$paginatorElementHoverBorderColor: transparent !default;
+$paginatorElementIconHoverColor: $shade000 !default;
+$paginatorElementBorderRadius: $borderRadius !default;
+$paginatorElementMargin: 0.143rem !default;
+$paginatorElementPadding: 0 !default;
+
+//table
+$tableHeaderBorder: 1px solid $shade600 !default;
+$tableHeaderBorderWidth: 0 0 1px 0 !default;
+$tableHeaderBg: $shade800 !default;
+$tableHeaderTextColor: $shade100 !default;
+$tableHeaderFontWeight: 600 !default;
+$tableHeaderPadding: 1rem 1rem !default;
+
+$tableHeaderCellPadding: 1rem 1rem !default;
+$tableHeaderCellBg: $shade800 !default;
+$tableHeaderCellTextColor: $shade000 !default;
+$tableHeaderCellFontWeight: 600 !default;
+$tableHeaderCellBorder: 1px solid $shade600 !default;
+$tableHeaderCellBorderWidth: 0 0 1px 0 !default;
+$tableHeaderCellHoverBg: $hoverBg !default;
+$tableHeaderCellTextHoverColor: $shade000 !default;
+$tableHeaderCellIconColor: $shade100 !default;
+$tableHeaderCellIconHoverColor: $shade000 !default;
+$tableHeaderCellHighlightBg: $shade800 !default;
+$tableHeaderCellHighlightTextColor: $primaryColor !default;
+$tableHeaderCellHighlightHoverBg: $hoverBg !default;
+$tableHeaderCellHighlightTextHoverColor: $primaryColor !default;
+$tableSortableColumnBadgeSize: 1.143rem !default;
+
+$tableBodyRowBg: $shade800 !default;
+$tableBodyRowTextColor: $shade000 !default;
+$tableBodyRowEvenBg: #253144 !default;
+$tableBodyRowHoverBg: $hoverBg !default;
+$tableBodyRowTextHoverColor: $shade000 !default;
+$tableBodyCellBorder: 1px solid $shade600 !default;
+$tableBodyCellBorderWidth: 0 0 1px 0 !default;
+$tableBodyCellPadding: 1rem 1rem !default;
+
+$tableFooterCellPadding: 1rem 1rem !default;
+$tableFooterCellBg: $shade800 !default;
+$tableFooterCellTextColor: $shade000 !default;
+$tableFooterCellFontWeight: 600 !default;
+$tableFooterCellBorder: 1px solid $shade600 !default;
+$tableFooterCellBorderWidth: 0 0 1px 0 !default;
+$tableResizerHelperBg: $primaryColor !default;
+
+$tableFooterBorder: 1px solid $shade600 !default;
+$tableFooterBorderWidth: 0 0 1px 0 !default;
+$tableFooterBg: $shade800 !default;
+$tableFooterTextColor: $shade000 !default;
+$tableFooterFontWeight: 600 !default;
+$tableFooterPadding: 1rem 1rem !default;
+
+$tableCellContentAlignment: left !default;
+$tableTopPaginatorBorderWidth: 1px 0 1px 0 !default;
+$tableBottomPaginatorBorderWidth: 0 0 1px 0 !default;
+
+$tableScaleSM: 0.5 !default;
+$tableScaleLG: 1.25 !default;
+
+//dataview
+$dataViewContentPadding: 0 !default;
+$dataViewContentBorder: 0 none !default;
+
+//tree
+$treeContainerPadding: 0.286rem !default;
+$treeNodePadding: 0.143rem !default;
+$treeNodeContentPadding: 0 !default;
+$treeNodeChildrenPadding: 0 0 0 1rem !default;
+$treeNodeIconColor: $shade100 !default;
+
+//timeline
+$timelineVerticalEventContentPadding: 0 1rem !default;
+$timelineHorizontalEventContentPadding: 1rem 0 !default;
+$timelineEventMarkerWidth: 1rem !default;
+$timelineEventMarkerHeight: 1rem !default;
+$timelineEventMarkerBorderRadius: 50% !default;
+$timelineEventMarkerBorder: 2px solid $primaryColor !default;
+$timelineEventMarkerBackground: $shade800 !default;
+$timelineEventConnectorSize: 2px !default;
+$timelineEventColor: $shade600 !default;
+
+//org chart
+$organizationChartConnectorColor: $shade100 !default;
+
+//message
+$messageMargin: 1rem 0 !default;
+$messagePadding: 1rem 1.5rem !default;
+$messageBorderWidth: 0 0 0 6px !default;
+$messageIconFontSize: 1.5rem !default;
+$messageTextFontSize: 1rem !default;
+$messageTextFontWeight: 500 !default;
+
+//inline message
+$inlineMessagePadding: $inputPadding !default;
+$inlineMessageMargin: 0 !default;
+$inlineMessageIconFontSize: 1rem !default;
+$inlineMessageTextFontSize: 1rem !default;
+$inlineMessageBorderWidth: 1px !default;
+
+//toast
+$toastIconFontSize: 2rem !default;
+$toastMessageTextMargin: 0 0 0 1rem !default;
+$toastMargin: 0 0 1rem 0 !default;
+$toastPadding: 1rem !default;
+$toastBorderWidth: 0 0 0 6px !default;
+$toastShadow: none !default;
+$toastOpacity: 0.9 !default;
+$toastTitleFontWeight: 700 !default;
+$toastDetailMargin: $inlineSpacing 0 0 0 !default;
+
+//severities
+$infoMessageBg: #b3e5fc !default;
+$infoMessageBorder: solid scale-color($infoMessageBg, $lightness: -50%) !default;
+$infoMessageTextColor: scale-color($infoMessageBg, $lightness: -75%) !default;
+$infoMessageIconColor: scale-color($infoMessageBg, $lightness: -75%) !default;
+$successMessageBg: #c8e6c9 !default;
+$successMessageBorder: solid scale-color($successMessageBg, $lightness: -50%) !default;
+$successMessageTextColor: scale-color(
+    $successMessageBg,
+    $lightness: -75%
+) !default;
+$successMessageIconColor: scale-color(
+    $successMessageBg,
+    $lightness: -75%
+) !default;
+$warningMessageBg: #ffecb3 !default;
+$warningMessageBorder: solid scale-color($warningMessageBg, $lightness: -50%) !default;
+$warningMessageTextColor: scale-color(
+    $warningMessageBg,
+    $lightness: -75%
+) !default;
+$warningMessageIconColor: scale-color(
+    $warningMessageBg,
+    $lightness: -75%
+) !default;
+$errorMessageBg: #ffcdd2 !default;
+$errorMessageBorder: solid scale-color($errorMessageBg, $lightness: -50%) !default;
+$errorMessageTextColor: scale-color($errorMessageBg, $lightness: -75%) !default;
+$errorMessageIconColor: scale-color($errorMessageBg, $lightness: -75%) !default;
+
+//overlays
+$overlayContentBorder: 1px solid $shade600 !default;
+$overlayContentBg: $panelContentBg !default;
+$overlayContainerShadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
+    0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12) !default;
+
+//dialog
+$dialogHeaderBg: $shade800 !default;
+$dialogHeaderBorder: 0 none !default;
+$dialogHeaderTextColor: $shade000 !default;
+$dialogHeaderFontWeight: 600 !default;
+$dialogHeaderFontSize: 1.25rem !default;
+$dialogHeaderPadding: 1.5rem !default;
+$dialogContentPadding: 0 1.5rem 2rem 1.5rem !default;
+$dialogFooterBorder: 0 none !default;
+$dialogFooterPadding: 0 1.5rem 1.5rem 1.5rem !default;
+
+//confirmpopup
+$confirmPopupContentPadding: $panelContentPadding !default;
+$confirmPopupFooterPadding: 0 1rem 1rem 1rem !default;
+
+//tooltip
+$tooltipBg: $shade600 !default;
+$tooltipTextColor: $shade000 !default;
+$tooltipPadding: $inputPadding !default;
+
+//steps
+$stepsItemBg: transparent !default;
+$stepsItemBorder: 0 none !default;
+$stepsItemTextColor: $shade100 !default;
+$stepsItemNumberWidth: 2rem !default;
+$stepsItemNumberHeight: 2rem !default;
+$stepsItemNumberFontSize: 1.143rem !default;
+$stepsItemNumberColor: $shade000 !default;
+$stepsItemNumberBorderRadius: 50% !default;
+$stepsItemActiveFontWeight: 600 !default;
+
+//progressbar
+$progressBarHeight: 1.5rem !default;
+$progressBarBorder: 0 none !default;
+$progressBarBg: $shade600 !default;
+$progressBarValueBg: $primaryColor !default;
+$progressBarValueTextColor: $primaryTextColor !default;
+
+//menu (e.g. menu, menubar, tieredmenu)
+$menuWidth: 12.5rem !default;
+$menuBg: $shade800 !default;
+$menuBorder: 1px solid $shade600 !default;
+$menuTextColor: $shade000 !default;
+$menuitemPadding: 0.75rem 1rem !default;
+$menuitemBorderRadius: 0 !default;
+$menuitemTextColor: $shade000 !default;
+$menuitemIconColor: $shade100 !default;
+$menuitemTextHoverColor: $shade000 !default;
+$menuitemIconHoverColor: $shade000 !default;
+$menuitemHoverBg: $hoverBg !default;
+$menuitemTextFocusColor: $shade000 !default;
+$menuitemIconFocusColor: $shade000 !default;
+$menuitemFocusBg: rgba(255, 255, 255, 0.09) !default;
+$menuitemTextActiveColor: $shade000 !default;
+$menuitemIconActiveColor: $shade000 !default;
+$menuitemActiveBg: $shade900 !default;
+$menuitemActiveFocusBg: $shade900 !default;
+$menuitemSubmenuIconFontSize: 0.875rem !default;
+$submenuHeaderMargin: 0 !default;
+$submenuHeaderPadding: 0.75rem 1rem !default;
+$submenuHeaderBg: $shade800 !default;
+$submenuHeaderTextColor: $shade000 !default;
+$submenuHeaderBorderRadius: 0 !default;
+$submenuHeaderFontWeight: 600 !default;
+$overlayMenuBg: $menuBg !default;
+$overlayMenuBorder: 1px solid $shade600 !default;
+$overlayMenuShadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
+    0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12) !default;
+$verticalMenuPadding: 0.25rem 0 !default;
+$verticalMenuitemMargin: 0 !default;
+$menuSeparatorMargin: 0.25rem 0 !default;
+
+$breadcrumbPadding: 1rem !default;
+$breadcrumbBg: $menuBg !default;
+$breadcrumbBorder: $menuBorder !default;
+$breadcrumbItemTextColor: $menuitemTextColor !default;
+$breadcrumbItemIconColor: $menuitemIconColor !default;
+$breadcrumbLastItemTextColor: $menuitemTextColor !default;
+$breadcrumbLastItemIconColor: $menuitemIconColor !default;
+$breadcrumbSeparatorColor: $menuitemTextColor !default;
+
+$horizontalMenuPadding: 0.5rem !default;
+$horizontalMenuBg: $menuBg !default;
+$horizontalMenuBorder: $menuBorder !default;
+$horizontalMenuTextColor: $menuTextColor !default;
+$horizontalMenuRootMenuitemPadding: $menuitemPadding !default;
+$horizontalMenuRootMenuitemBorderRadius: $borderRadius !default;
+$horizontalMenuRootMenuitemTextColor: $menuitemTextColor !default;
+$horizontalMenuRootMenuitemIconColor: $menuitemIconColor !default;
+$horizontalMenuRootMenuitemTextHoverColor: $menuitemTextHoverColor !default;
+$horizontalMenuRootMenuitemIconHoverColor: $menuitemIconHoverColor !default;
+$horizontalMenuRootMenuitemHoverBg: $menuitemHoverBg !default;
+$horizontalMenuRootMenuitemTextActiveColor: $menuitemTextActiveColor !default;
+$horizontalMenuRootMenuitemIconActiveColor: $menuitemIconActiveColor !default;
+$horizontalMenuRootMenuitemActiveBg: $menuitemActiveBg !default;
+
+//badge and tag
+$badgeBg: $primaryColor !default;
+$badgeTextColor: $primaryTextColor !default;
+$badgeMinWidth: 1.5rem !default;
+$badgeHeight: 1.5rem !default;
+$badgeFontWeight: 700 !default;
+$badgeFontSize: 0.75rem !default;
+
+$tagPadding: 0.25rem 0.4rem !default;
+
+//carousel
+$carouselIndicatorsPadding: 1rem !default;
+$carouselIndicatorBg: $shade600 !default;
+$carouselIndicatorHoverBg: scale-color($shade600, $lightness: 10%) !default;
+$carouselIndicatorBorderRadius: 0 !default;
+$carouselIndicatorWidth: 2rem !default;
+$carouselIndicatorHeight: 0.5rem !default;
+
+//galleria
+$galleriaMaskBg: rgba(0, 0, 0, 0.9) !default;
+$galleriaCloseIconMargin: 0.5rem !default;
+$galleriaCloseIconFontSize: 2rem !default;
+$galleriaCloseIconBg: transparent !default;
+$galleriaCloseIconColor: #f8f9fa !default;
+$galleriaCloseIconHoverBg: rgba(255, 255, 255, 0.1) !default;
+$galleriaCloseIconHoverColor: #f8f9fa !default;
+$galleriaCloseIconWidth: 4rem !default;
+$galleriaCloseIconHeight: 4rem !default;
+$galleriaCloseIconBorderRadius: 50% !default;
+
+$galleriaItemNavigatorBg: transparent !default;
+$galleriaItemNavigatorColor: #f8f9fa !default;
+$galleriaItemNavigatorMargin: 0 0.5rem !default;
+$galleriaItemNavigatorFontSize: 2rem !default;
+$galleriaItemNavigatorHoverBg: rgba(255, 255, 255, 0.1) !default;
+$galleriaItemNavigatorHoverColor: #f8f9fa !default;
+$galleriaItemNavigatorWidth: 4rem !default;
+$galleriaItemNavigatorHeight: 4rem !default;
+$galleriaItemNavigatorBorderRadius: $borderRadius !default;
+
+$galleriaCaptionBg: rgba(0, 0, 0, 0.5) !default;
+$galleriaCaptionTextColor: #f8f9fa !default;
+$galleriaCaptionPadding: 1rem !default;
+
+$galleriaIndicatorsPadding: 1rem !default;
+$galleriaIndicatorBg: $shade600 !default;
+$galleriaIndicatorHoverBg: scale-color($shade600, $lightness: 10%) !default;
+$galleriaIndicatorBorderRadius: 50% !default;
+$galleriaIndicatorWidth: 1rem !default;
+$galleriaIndicatorHeight: 1rem !default;
+$galleriaIndicatorsBgOnItem: rgba(0, 0, 0, 0.5) !default;
+$galleriaIndicatorBgOnItem: rgba(255, 255, 255, 0.4) !default;
+$galleriaIndicatorHoverBgOnItem: rgba(255, 255, 255, 0.6) !default;
+
+$galleriaThumbnailContainerBg: rgba(0, 0, 0, 0.9) !default;
+$galleriaThumbnailContainerPadding: 1rem 0.25rem !default;
+$galleriaThumbnailNavigatorBg: transparent !default;
+$galleriaThumbnailNavigatorColor: #f8f9fa !default;
+$galleriaThumbnailNavigatorHoverBg: rgba(255, 255, 255, 0.1) !default;
+$galleriaThumbnailNavigatorHoverColor: #f8f9fa !default;
+$galleriaThumbnailNavigatorBorderRadius: 50% !default;
+$galleriaThumbnailNavigatorWidth: 2rem !default;
+$galleriaThumbnailNavigatorHeight: 2rem !default;
+
+//divider
+$dividerHorizontalMargin: 1rem 0 !default;
+$dividerHorizontalPadding: 0 1rem !default;
+$dividerVerticalMargin: 0 1rem !default;
+$dividerVerticalPadding: 1rem 0 !default;
+$dividerSize: 1px !default;
+$dividerColor: $shade600 !default;
+
+//avatar
+$avatarBg: $shade600 !default;
+$avatarTextColor: $textColor !default;
+
+//chip
+$chipBg: $shade600 !default;
+$chipTextColor: $textColor !default;
+$chipBorderRadius: 16px !default;
+$chipFocusBg: $shade500 !default;
+$chipFocusTextColor: $textColor !default;
+
+//scrollTop
+$scrollTopBg: $highlightBg !default;
+$scrollTopHoverBg: scale-color($highlightBg, $alpha: 24%) !default;
+$scrollTopWidth: 3rem !default;
+$scrollTopHeight: 3rem !default;
+$scrollTopBorderRadius: 50% !default;
+$scrollTopFontSize: 1.5rem !default;
+$scrollTopTextColor: $highlightTextColor !default;
+
+//skeleton
+$skeletonBg: rgba(255, 255, 255, 0.06) !default;
+$skeletonAnimationBg: rgba(255, 255, 255, 0.04) !default;
+
+//splitter
+$splitterGutterBg: rgba(255, 255, 255, 0.03) !default;
+$splitterGutterHandleBg: $shade600 !default;
+
+//speeddial
+$speedDialButtonWidth: 4rem !default;
+$speedDialButtonHeight: 4rem !default;
+$speedDialButtonIconFontSize: 1.3rem !default;
+$speedDialActionWidth: 3rem !default;
+$speedDialActionHeight: 3rem !default;
+$speedDialActionBg: $shade000 !default;
+$speedDialActionHoverBg: $shade100 !default;
+$speedDialActionTextColor: $shade900 !default;
+$speedDialActionTextHoverColor: $shade900 !default;
+
+//dock
+$dockActionWidth: 4rem !default;
+$dockActionHeight: 4rem !default;
+$dockItemPadding: 0.5rem !default;
+$dockItemBorderRadius: $borderRadius !default;
+$dockCurrentItemMargin: 1.5rem !default;
+$dockFirstItemsMargin: 1.3rem !default;
+$dockSecondItemsMargin: 0.9rem !default;
+$dockBg: rgba(255, 255, 255, 0.1) !default;
+$dockBorder: 1px solid rgba(255, 255, 255, 0.2) !default;
+$dockPadding: 0.5rem 0.5rem !default;
+$dockBorderRadius: 0.5rem !default;
+
+//image
+$imageMaskBg: rgba(0, 0, 0, 0.9) !default;
+$imagePreviewToolbarPadding: 1rem !default;
+$imagePreviewIndicatorColor: #f8f9fa !default;
+$imagePreviewIndicatorBg: rgba(0, 0, 0, 0.5) !default;
+$imagePreviewActionIconBg: transparent !default;
+$imagePreviewActionIconColor: #f8f9fa !default;
+$imagePreviewActionIconHoverBg: rgba(255, 255, 255, 0.1) !default;
+$imagePreviewActionIconHoverColor: #f8f9fa !default;
+$imagePreviewActionIconWidth: 3rem !default;
+$imagePreviewActionIconHeight: 3rem !default;
+$imagePreviewActionIconFontSize: 1.5rem !default;
+$imagePreviewActionIconBorderRadius: 50% !default;
+
+:root {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+        Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+        "Segoe UI Symbol";
+    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+        Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+        "Segoe UI Symbol";
+    --surface-a: #{$shade800};
+    --surface-b: #{$shade900};
+    --surface-c: #{$hoverBg};
+    --surface-d: #{$shade600};
+    --surface-e: #{$shade800};
+    --surface-f: #{$shade800};
+    --text-color: #{$shade000};
+    --text-color-secondary: #{$shade100};
+    --primary-color: #{$primaryColor};
+    --primary-color-text: #{$primaryTextColor};
+    --surface-0: #070D17;
+    --surface-50: #2e3744;
+    --surface-100: #454d59;
+    --surface-200: #5d646d;
+    --surface-300: #747a82;
+    --surface-400: #8b9097;
+    --surface-500: #a2a6ac;
+    --surface-600: #b9bcc1;
+    --surface-700: #d1d3d5;
+    --surface-800: #e8e9ea;
+    --surface-900: #ffffff;
+    --gray-50: #e8e9ea;
+    --gray-100: #d1d3d5;
+    --gray-200: #b9bcc1;
+    --gray-300: #a2a6ac;
+    --gray-400: #8b9097;
+    --gray-500: #747a82;
+    --gray-600: #5d646d;
+    --gray-700: #454d59;
+    --gray-800: #2e3744;
+    --gray-900: #070D17;
+    --content-padding: #{$panelContentPadding};
+    --inline-spacing: #{$inlineSpacing};
+    --border-radius: #{$borderRadius};
+    --surface-ground: #000;
+    --surface-section: #070D17;
+    --surface-card: #070D17;
+    --surface-overlay: #070D17;
+    --surface-border: #192730;
+    --surface-hover: rgba(255, 255, 255, 0.03);
+    --maskbg: #{$maskBg};
+    --highlight-bg: #{$highlightBg};
+    --highlight-text-color: #{$highlightTextColor};
+    --focus-ring: #{$focusShadow};
+    color-scheme: light dark;
+}
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/themes/vela/bitaxe/_extensions.scss b/main/http_server/axe-os/src/app/layout/styles/theme/themes/vela/bitaxe/_extensions.scss
new file mode 100644
index 0000000..2c0ed92
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/themes/vela/bitaxe/_extensions.scss
@@ -0,0 +1,2 @@
+/* Customizations to the designer theme should be defined here */
+@import '../extensions';
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/themes/vela/bitaxe/_fonts.scss b/main/http_server/axe-os/src/app/layout/styles/theme/themes/vela/bitaxe/_fonts.scss
new file mode 100644
index 0000000..e38a3a6
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/themes/vela/bitaxe/_fonts.scss
@@ -0,0 +1 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank
\ No newline at end of file
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/themes/vela/bitaxe/_variables.scss b/main/http_server/axe-os/src/app/layout/styles/theme/themes/vela/bitaxe/_variables.scss
new file mode 100644
index 0000000..ed9c24e
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/themes/vela/bitaxe/_variables.scss
@@ -0,0 +1,11 @@
+$primaryColor: #f80421 !default;
+$primaryLightColor: scale-color($primaryColor, $lightness: 30%) !default;
+$primaryDarkColor: scale-color($primaryColor, $lightness: -10%) !default;
+$primaryDarkerColor: scale-color($primaryColor, $lightness: -20%) !default;
+$primaryTextColor: white !default;
+
+$highlightBg: rgba(100, 181, 246, .16) !default;
+$highlightTextColor: rgba(255,255,255,.87) !default;
+$highlightFocusBg: rgba($primaryColor, .24) !default;
+
+@import '../_variables';
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/themes/vela/bitaxe/theme.scss b/main/http_server/axe-os/src/app/layout/styles/theme/themes/vela/bitaxe/theme.scss
new file mode 100644
index 0000000..3c57389
--- /dev/null
+++ b/main/http_server/axe-os/src/app/layout/styles/theme/themes/vela/bitaxe/theme.scss
@@ -0,0 +1,4 @@
+@import './variables';
+@import './_fonts';
+@import '../../../theme-base/_components';
+@import './_extensions';
diff --git a/main/http_server/axe-os/src/app/layout/styles/theme/vela-blue/theme.css b/main/http_server/axe-os/src/app/layout/styles/theme/vela-blue/theme.css
deleted file mode 100644
index e349a5b..0000000
--- a/main/http_server/axe-os/src/app/layout/styles/theme/vela-blue/theme.css
+++ /dev/null
@@ -1,6293 +0,0 @@
-:root {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-      Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-      "Segoe UI Symbol";
-  --surface-a: #1f2d40;
-  --surface-b: #17212f;
-  --surface-c: rgba(255, 255, 255, 0.03);
-  --surface-d: #304562;
-  --surface-e: #1f2d40;
-  --surface-f: #1f2d40;
-  --text-color: rgba(255, 255, 255, 0.87);
-  --text-color-secondary: rgba(255, 255, 255, 0.6);
-  --primary-color: #64B5F6;
-  --primary-color-text: #212529;
-  --surface-0: #17212f;
-  --surface-50: #2e3744;
-  --surface-100: #454d59;
-  --surface-200: #5d646d;
-  --surface-300: #747a82;
-  --surface-400: #8b9097;
-  --surface-500: #a2a6ac;
-  --surface-600: #b9bcc1;
-  --surface-700: #d1d3d5;
-  --surface-800: #e8e9ea;
-  --surface-900: #ffffff;
-  --gray-50: #e8e9ea;
-  --gray-100: #d1d3d5;
-  --gray-200: #b9bcc1;
-  --gray-300: #a2a6ac;
-  --gray-400: #8b9097;
-  --gray-500: #747a82;
-  --gray-600: #5d646d;
-  --gray-700: #454d59;
-  --gray-800: #2e3744;
-  --gray-900: #17212f;
-  --content-padding: 1rem;
-  --inline-spacing: 0.5rem;
-  --border-radius: 3px;
-  --surface-ground: #17212f;
-  --surface-section: #17212f;
-  --surface-card: #1f2d40;
-  --surface-overlay: #1f2d40;
-  --surface-border: #304562;
-  --surface-hover: rgba(255, 255, 255, 0.03);
-  --maskbg: rgba(0, 0, 0, 0.4);
-  --highlight-bg: rgba(100, 181, 246, 0.16);
-  --highlight-text-color: rgba(255, 255, 255, 0.87);
-  --focus-ring: 0 0 0 1px #93cbf9;
-  color-scheme: light dark;
-}
-
-:root {
-  --blue-50:#f4fafe;
-  --blue-100:#cae6fc;
-  --blue-200:#a0d2fa;
-  --blue-300:#75bef8;
-  --blue-400:#4baaf5;
-  --blue-500:#2196f3;
-  --blue-600:#1c80cf;
-  --blue-700:#1769aa;
-  --blue-800:#125386;
-  --blue-900:#0d3c61;
-  --green-50:#f6fbf6;
-  --green-100:#d4ecd5;
-  --green-200:#b2ddb4;
-  --green-300:#90cd93;
-  --green-400:#6ebe71;
-  --green-500:#4caf50;
-  --green-600:#419544;
-  --green-700:#357b38;
-  --green-800:#2a602c;
-  --green-900:#1e4620;
-  --yellow-50:#fffcf5;
-  --yellow-100:#fef0cd;
-  --yellow-200:#fde4a5;
-  --yellow-300:#fdd87d;
-  --yellow-400:#fccc55;
-  --yellow-500:#fbc02d;
-  --yellow-600:#d5a326;
-  --yellow-700:#b08620;
-  --yellow-800:#8a6a19;
-  --yellow-900:#644d12;
-  --cyan-50:#f2fcfd;
-  --cyan-100:#c2eff5;
-  --cyan-200:#91e2ed;
-  --cyan-300:#61d5e4;
-  --cyan-400:#30c9dc;
-  --cyan-500:#00bcd4;
-  --cyan-600:#00a0b4;
-  --cyan-700:#008494;
-  --cyan-800:#006775;
-  --cyan-900:#004b55;
-  --pink-50:#fef4f7;
-  --pink-100:#fac9da;
-  --pink-200:#f69ebc;
-  --pink-300:#f1749e;
-  --pink-400:#ed4981;
-  --pink-500:#e91e63;
-  --pink-600:#c61a54;
-  --pink-700:#a31545;
-  --pink-800:#801136;
-  --pink-900:#5d0c28;
-  --indigo-50:#f5f6fb;
-  --indigo-100:#d1d5ed;
-  --indigo-200:#acb4df;
-  --indigo-300:#8893d1;
-  --indigo-400:#6372c3;
-  --indigo-500:#3f51b5;
-  --indigo-600:#36459a;
-  --indigo-700:#2c397f;
-  --indigo-800:#232d64;
-  --indigo-900:#192048;
-  --teal-50:#f2faf9;
-  --teal-100:#c2e6e2;
-  --teal-200:#91d2cc;
-  --teal-300:#61beb5;
-  --teal-400:#30aa9f;
-  --teal-500:#009688;
-  --teal-600:#008074;
-  --teal-700:#00695f;
-  --teal-800:#00534b;
-  --teal-900:#003c36;
-  --orange-50:#fff8f2;
-  --orange-100:#fde0c2;
-  --orange-200:#fbc791;
-  --orange-300:#f9ae61;
-  --orange-400:#f79530;
-  --orange-500:#f57c00;
-  --orange-600:#d06900;
-  --orange-700:#ac5700;
-  --orange-800:#874400;
-  --orange-900:#623200;
-  --bluegray-50:#f7f9f9;
-  --bluegray-100:#d9e0e3;
-  --bluegray-200:#bbc7cd;
-  --bluegray-300:#9caeb7;
-  --bluegray-400:#7e96a1;
-  --bluegray-500:#607d8b;
-  --bluegray-600:#526a76;
-  --bluegray-700:#435861;
-  --bluegray-800:#35454c;
-  --bluegray-900:#263238;
-  --purple-50:#faf4fb;
-  --purple-100:#e7cbec;
-  --purple-200:#d4a2dd;
-  --purple-300:#c279ce;
-  --purple-400:#af50bf;
-  --purple-500:#9c27b0;
-  --purple-600:#852196;
-  --purple-700:#6d1b7b;
-  --purple-800:#561561;
-  --purple-900:#3e1046;
-  --red-50:#fff5f5;
-  --red-100:#ffd1ce;
-  --red-200:#ffada7;
-  --red-300:#ff8980;
-  --red-400:#ff6459;
-  --red-500:#ff4032;
-  --red-600:#d9362b;
-  --red-700:#b32d23;
-  --red-800:#8c231c;
-  --red-900:#661a14;
-  --primary-50:#f7fbff;
-  --primary-100:#daedfd;
-  --primary-200:#bcdffb;
-  --primary-300:#9fd1f9;
-  --primary-400:#81c3f8;
-  --primary-500:#64b5f6;
-  --primary-600:#559ad1;
-  --primary-700:#467fac;
-  --primary-800:#376487;
-  --primary-900:#284862;
-}
-
-.p-editor-container .p-editor-toolbar {
-  background: #1f2d40;
-  border-top-right-radius: 3px;
-  border-top-left-radius: 3px;
-}
-.p-editor-container .p-editor-toolbar.ql-snow {
-  border: 1px solid #304562;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
-  stroke: rgba(255, 255, 255, 0.6);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
-  fill: rgba(255, 255, 255, 0.6);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
-  border: 0 none;
-  color: rgba(255, 255, 255, 0.6);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
-  color: rgba(255, 255, 255, 0.87);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
-  stroke: rgba(255, 255, 255, 0.87);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
-  fill: rgba(255, 255, 255, 0.87);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
-  color: rgba(255, 255, 255, 0.87);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
-  stroke: rgba(255, 255, 255, 0.87);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
-  fill: rgba(255, 255, 255, 0.87);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
-  background: #1f2d40;
-  border: 1px solid #304562;
-  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-  border-radius: 3px;
-  padding: 0.5rem 0;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
-  color: rgba(255, 255, 255, 0.87);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
-  color: rgba(255, 255, 255, 0.87);
-  background: rgba(255, 255, 255, 0.03);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
-  padding: 0.5rem 1rem;
-}
-.p-editor-container .p-editor-content {
-  border-bottom-right-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-.p-editor-container .p-editor-content.ql-snow {
-  border: 1px solid #304562;
-}
-.p-editor-container .p-editor-content .ql-editor {
-  background: #17212f;
-  color: rgba(255, 255, 255, 0.87);
-  border-bottom-right-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-.p-editor-container .ql-snow.ql-toolbar button:hover,
-.p-editor-container .ql-snow.ql-toolbar button:focus {
-  color: rgba(255, 255, 255, 0.87);
-}
-.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
-.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
-  stroke: rgba(255, 255, 255, 0.87);
-}
-.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
-.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
-  fill: rgba(255, 255, 255, 0.87);
-}
-.p-editor-container .ql-snow.ql-toolbar button.ql-active,
-.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active,
-.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected {
-  color: #64B5F6;
-}
-.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke,
-.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
-.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke {
-  stroke: #64B5F6;
-}
-.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill,
-.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
-.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill {
-  fill: #64B5F6;
-}
-.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label,
-.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label,
-.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label {
-  color: #64B5F6;
-}
-
-@layer primeng {
-  * {
-    box-sizing: border-box;
-  }
-
-  .p-component {
-    font-family: var(--font-family);
-    font-feature-settings: var(--font-feature-settings, normal);
-    font-size: 1rem;
-    font-weight: normal;
-  }
-
-  .p-component-overlay {
-    background-color: rgba(0, 0, 0, 0.4);
-    transition-duration: 0.2s;
-  }
-
-  .p-disabled, .p-component:disabled {
-    opacity: 0.4;
-  }
-
-  .p-error {
-    color: #ef9a9a;
-  }
-
-  .p-text-secondary {
-    color: rgba(255, 255, 255, 0.6);
-  }
-
-  .pi {
-    font-size: 1rem;
-  }
-
-  .p-icon {
-    width: 1rem;
-    height: 1rem;
-  }
-
-  .p-link {
-    font-family: var(--font-family);
-    font-feature-settings: var(--font-feature-settings, normal);
-    font-size: 1rem;
-    border-radius: 3px;
-  }
-  .p-link:focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-
-  .p-component-overlay-enter {
-    animation: p-component-overlay-enter-animation 150ms forwards;
-  }
-
-  .p-component-overlay-leave {
-    animation: p-component-overlay-leave-animation 150ms forwards;
-  }
-
-  @keyframes p-component-overlay-enter-animation {
-    from {
-      background-color: transparent;
-    }
-    to {
-      background-color: var(--maskbg);
-    }
-  }
-  @keyframes p-component-overlay-leave-animation {
-    from {
-      background-color: var(--maskbg);
-    }
-    to {
-      background-color: transparent;
-    }
-  }
-
-  .p-autocomplete .p-autocomplete-loader {
-    right: 0.5rem;
-  }
-  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
-    right: 2.857rem;
-  }
-  .p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container {
-    border-color: #64B5F6;
-  }
-  .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-    border-color: #64B5F6;
-  }
-  .p-autocomplete .p-autocomplete-multiple-container {
-    padding: 0.25rem 0.5rem;
-    gap: 0.5rem;
-  }
-  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
-    padding: 0.25rem 0;
-  }
-  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
-    font-family: var(--font-family);
-    font-feature-settings: var(--font-feature-settings, normal);
-    font-size: 1rem;
-    color: rgba(255, 255, 255, 0.87);
-    padding: 0;
-    margin: 0;
-  }
-  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
-    padding: 0.25rem 0.5rem;
-    background: #304562;
-    color: rgba(255, 255, 255, 0.87);
-    border-radius: 16px;
-  }
-  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon {
-    margin-left: 0.5rem;
-  }
-  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus {
-    background: #3e526d;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-autocomplete.p-invalid.p-component > .p-inputtext {
-    border-color: #ef9a9a;
-  }
-
-  .p-autocomplete-panel {
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border: 1px solid #304562;
-    border-radius: 3px;
-    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-  }
-  .p-autocomplete-panel .p-autocomplete-items {
-    padding: 0.5rem 0;
-  }
-  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
-    margin: 0;
-    padding: 0.5rem 1rem;
-    border: 0 none;
-    color: rgba(255, 255, 255, 0.87);
-    background: transparent;
-    transition: box-shadow 0.2s;
-    border-radius: 0;
-  }
-  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(100, 181, 246, 0.16);
-  }
-  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight.p-focus {
-    background: rgba(100, 181, 246, 0.24);
-  }
-  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.09);
-  }
-  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
-    margin: 0;
-    padding: 0.75rem 1rem;
-    color: rgba(255, 255, 255, 0.87);
-    background: #1f2d40;
-    font-weight: 600;
-  }
-
-  p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
-    border-color: #ef9a9a;
-  }
-
-  p-autocomplete.p-autocomplete-clearable .p-inputtext {
-    padding-right: 2rem;
-  }
-  p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
-    color: rgba(255, 255, 255, 0.6);
-    right: 0.5rem;
-  }
-
-  p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon {
-    color: rgba(255, 255, 255, 0.6);
-    right: 2.857rem;
-  }
-
-  p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
-    border-color: #ef9a9a;
-  }
-
-  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-    border-color: #64B5F6;
-  }
-
-  .p-datepicker {
-    padding: 0.5rem;
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border: 1px solid #304562;
-    border-radius: 3px;
-  }
-  .p-datepicker:not(.p-datepicker-inline) {
-    background: #1f2d40;
-    border: 1px solid #304562;
-    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-  }
-  .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
-    background: #1f2d40;
-  }
-  .p-datepicker .p-datepicker-header {
-    padding: 0.5rem;
-    color: rgba(255, 255, 255, 0.87);
-    background: #1f2d40;
-    font-weight: 600;
-    margin: 0;
-    border-bottom: 1px solid #304562;
-    border-top-right-radius: 3px;
-    border-top-left-radius: 3px;
-  }
-  .p-datepicker .p-datepicker-header .p-datepicker-prev,
-.p-datepicker .p-datepicker-header .p-datepicker-next {
-    width: 2rem;
-    height: 2rem;
-    color: rgba(255, 255, 255, 0.6);
-    border: 0 none;
-    background: transparent;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,
-.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover {
-    color: rgba(255, 255, 255, 0.87);
-    border-color: transparent;
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
-.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-  .p-datepicker .p-datepicker-header .p-datepicker-title {
-    line-height: 2rem;
-  }
-  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
-.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
-    color: rgba(255, 255, 255, 0.87);
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-    font-weight: 600;
-    padding: 0.5rem;
-  }
-  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
-.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
-    color: #64B5F6;
-  }
-  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
-    margin-right: 0.5rem;
-  }
-  .p-datepicker table {
-    font-size: 1rem;
-    margin: 0.5rem 0;
-  }
-  .p-datepicker table th {
-    padding: 0.5rem;
-  }
-  .p-datepicker table th > span {
-    width: 2.5rem;
-    height: 2.5rem;
-  }
-  .p-datepicker table td {
-    padding: 0.5rem;
-  }
-  .p-datepicker table td > span {
-    width: 2.5rem;
-    height: 2.5rem;
-    border-radius: 50%;
-    transition: box-shadow 0.2s;
-    border: 1px solid transparent;
-  }
-  .p-datepicker table td > span.p-highlight {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(100, 181, 246, 0.16);
-  }
-  .p-datepicker table td > span:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-  .p-datepicker table td.p-datepicker-today > span {
-    background: transparent;
-    color: #64B5F6;
-    border-color: transparent;
-  }
-  .p-datepicker table td.p-datepicker-today > span.p-highlight {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(100, 181, 246, 0.16);
-  }
-  .p-datepicker .p-datepicker-buttonbar {
-    padding: 1rem 0;
-    border-top: 1px solid #304562;
-  }
-  .p-datepicker .p-datepicker-buttonbar .p-button {
-    width: auto;
-  }
-  .p-datepicker .p-timepicker {
-    border-top: 1px solid #304562;
-    padding: 0.5rem;
-  }
-  .p-datepicker .p-timepicker button {
-    width: 2rem;
-    height: 2rem;
-    color: rgba(255, 255, 255, 0.6);
-    border: 0 none;
-    background: transparent;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-datepicker .p-timepicker button:enabled:hover {
-    color: rgba(255, 255, 255, 0.87);
-    border-color: transparent;
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-datepicker .p-timepicker button:focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-  .p-datepicker .p-timepicker button:last-child {
-    margin-top: 0.2em;
-  }
-  .p-datepicker .p-timepicker span {
-    font-size: 1.25rem;
-  }
-  .p-datepicker .p-timepicker > div {
-    padding: 0 0.5rem;
-  }
-  .p-datepicker.p-datepicker-timeonly .p-timepicker {
-    border-top: 0 none;
-  }
-  .p-datepicker .p-monthpicker {
-    margin: 0.5rem 0;
-  }
-  .p-datepicker .p-monthpicker .p-monthpicker-month {
-    padding: 0.5rem;
-    transition: box-shadow 0.2s;
-    border-radius: 3px;
-  }
-  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(100, 181, 246, 0.16);
-  }
-  .p-datepicker .p-yearpicker {
-    margin: 0.5rem 0;
-  }
-  .p-datepicker .p-yearpicker .p-yearpicker-year {
-    padding: 0.5rem;
-    transition: box-shadow 0.2s;
-    border-radius: 3px;
-  }
-  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(100, 181, 246, 0.16);
-  }
-  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
-    border-left: 1px solid #304562;
-    padding-right: 0.5rem;
-    padding-left: 0.5rem;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
-    padding-left: 0;
-    border-left: 0 none;
-  }
-  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
-    padding-right: 0;
-  }
-  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-
-  p-calendar.p-calendar-clearable .p-inputtext {
-    padding-right: 2rem;
-  }
-  p-calendar.p-calendar-clearable .p-calendar-clear-icon {
-    color: rgba(255, 255, 255, 0.6);
-    right: 0.5rem;
-  }
-
-  p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon {
-    color: rgba(255, 255, 255, 0.6);
-    right: 2.857rem;
-  }
-
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
-  .p-cascadeselect {
-    background: #17212f;
-    border: 1px solid #304562;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
-    border-radius: 3px;
-  }
-  .p-cascadeselect:not(.p-disabled):hover {
-    border-color: #64B5F6;
-  }
-  .p-cascadeselect:not(.p-disabled).p-focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-    border-color: #64B5F6;
-  }
-  .p-cascadeselect .p-cascadeselect-label {
-    background: transparent;
-    border: 0 none;
-    padding: 0.5rem 0.5rem;
-  }
-  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
-    outline: 0 none;
-    box-shadow: none;
-  }
-  .p-cascadeselect .p-cascadeselect-trigger {
-    background: transparent;
-    color: rgba(255, 255, 255, 0.6);
-    width: 2.357rem;
-    border-top-right-radius: 3px;
-    border-bottom-right-radius: 3px;
-  }
-  .p-cascadeselect.p-invalid.p-component {
-    border-color: #ef9a9a;
-  }
-
-  .p-cascadeselect-panel {
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border: 1px solid #304562;
-    border-radius: 3px;
-    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-  }
-  .p-cascadeselect-panel .p-cascadeselect-items {
-    padding: 0.5rem 0;
-  }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
-    margin: 0;
-    border: 0 none;
-    color: rgba(255, 255, 255, 0.87);
-    background: transparent;
-    transition: box-shadow 0.2s;
-    border-radius: 0;
-  }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(100, 181, 246, 0.16);
-  }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
-    background: rgba(100, 181, 246, 0.24);
-  }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.09);
-  }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.5rem 1rem;
-  }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
-    font-size: 0.875rem;
-  }
-
-  .p-input-filled .p-cascadeselect {
-    background: #304562;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #304562;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #304562;
-  }
-
-  p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
-    border-color: #ef9a9a;
-  }
-
-  p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label {
-    padding-right: 0.5rem;
-  }
-  p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
-    color: rgba(255, 255, 255, 0.6);
-    right: 2.357rem;
-  }
-
-  .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel {
-    box-shadow: none;
-    border-radius: 0;
-    padding: 0.25rem 0 0.25rem 0.5rem;
-  }
-  .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon {
-    transform: rotate(90deg);
-  }
-
-  .p-checkbox {
-    width: 20px;
-    height: 20px;
-  }
-  .p-checkbox .p-checkbox-box {
-    border: 2px solid #304562;
-    background: #17212f;
-    width: 20px;
-    height: 20px;
-    color: rgba(255, 255, 255, 0.87);
-    border-radius: 3px;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  }
-  .p-checkbox .p-checkbox-box .p-checkbox-icon {
-    transition-duration: 0.2s;
-    color: #212529;
-    font-size: 14px;
-  }
-  .p-checkbox .p-checkbox-box .p-icon {
-    width: 14px;
-    height: 14px;
-  }
-  .p-checkbox .p-checkbox-box.p-highlight {
-    border-color: #64B5F6;
-    background: #64B5F6;
-  }
-  .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
-    border-color: #64B5F6;
-  }
-  .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-    border-color: #64B5F6;
-  }
-  .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
-    border-color: #2396f2;
-    background: #2396f2;
-    color: #212529;
-  }
-
-  p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
-    border-color: #ef9a9a;
-  }
-
-  .p-input-filled .p-checkbox .p-checkbox-box {
-    background-color: #304562;
-  }
-  .p-input-filled .p-checkbox .p-checkbox-box.p-highlight {
-    background: #64B5F6;
-  }
-  .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
-    background-color: #304562;
-  }
-  .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
-    background: #2396f2;
-  }
-
-  .p-checkbox-label {
-    margin-left: 0.5rem;
-  }
-
-  p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
-    border-color: #ef9a9a;
-  }
-
-  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
-    border-color: #64B5F6;
-  }
-  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-    border-color: #64B5F6;
-  }
-  .p-chips .p-chips-multiple-container {
-    padding: 0.25rem 0.5rem;
-    gap: 0.5rem;
-  }
-  .p-chips .p-chips-multiple-container .p-chips-token {
-    padding: 0.25rem 0.5rem;
-    margin-right: 0.5rem;
-    background: #304562;
-    color: rgba(255, 255, 255, 0.87);
-    border-radius: 16px;
-  }
-  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
-    background: #3e526d;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon {
-    margin-left: 0.5rem;
-  }
-  .p-chips .p-chips-multiple-container .p-chips-input-token {
-    padding: 0.25rem 0;
-  }
-  .p-chips .p-chips-multiple-container .p-chips-input-token input {
-    font-family: var(--font-family);
-    font-feature-settings: var(--font-feature-settings, normal);
-    font-size: 1rem;
-    color: rgba(255, 255, 255, 0.87);
-    padding: 0;
-    margin: 0;
-  }
-
-  p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
-    border-color: #ef9a9a;
-  }
-
-  p-chips.p-chips-clearable .p-inputtext {
-    padding-right: 1.5rem;
-  }
-  p-chips.p-chips-clearable .p-chips-clear-icon {
-    color: rgba(255, 255, 255, 0.6);
-    right: 0.5rem;
-  }
-
-  .p-colorpicker-preview,
-.p-fluid .p-colorpicker-preview.p-inputtext {
-    width: 2rem;
-    height: 2rem;
-  }
-
-  .p-colorpicker-panel {
-    background: #1f2d40;
-    border: 1px solid #304562;
-  }
-  .p-colorpicker-panel .p-colorpicker-color-handle,
-.p-colorpicker-panel .p-colorpicker-hue-handle {
-    border-color: #ffffff;
-  }
-
-  .p-colorpicker-overlay-panel {
-    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-  }
-
-  .p-dropdown {
-    background: #17212f;
-    border: 1px solid #304562;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
-    border-radius: 3px;
-  }
-  .p-dropdown:not(.p-disabled):hover {
-    border-color: #64B5F6;
-  }
-  .p-dropdown:not(.p-disabled).p-focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-    border-color: #64B5F6;
-  }
-  .p-dropdown.p-dropdown-clearable .p-dropdown-label {
-    padding-right: 1.5rem;
-  }
-  .p-dropdown .p-dropdown-label {
-    background: transparent;
-    border: 0 none;
-  }
-  .p-dropdown .p-dropdown-label.p-placeholder {
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
-    outline: 0 none;
-    box-shadow: none;
-  }
-  .p-dropdown .p-dropdown-trigger {
-    background: transparent;
-    color: rgba(255, 255, 255, 0.6);
-    width: 2.357rem;
-    border-top-right-radius: 3px;
-    border-bottom-right-radius: 3px;
-  }
-  .p-dropdown .p-dropdown-clear-icon {
-    color: rgba(255, 255, 255, 0.6);
-    right: 2.357rem;
-  }
-  .p-dropdown.p-invalid.p-component {
-    border-color: #ef9a9a;
-  }
-
-  .p-dropdown-panel {
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border: 1px solid #304562;
-    border-radius: 3px;
-    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-  }
-  .p-dropdown-panel .p-dropdown-header {
-    padding: 0.5rem 1rem;
-    border-bottom: 0 none;
-    color: rgba(255, 255, 255, 0.87);
-    background: #1f2d40;
-    margin: 0;
-    border-top-right-radius: 3px;
-    border-top-left-radius: 3px;
-  }
-  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
-    padding-right: 1.5rem;
-    margin-right: -1.5rem;
-  }
-  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
-    right: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-dropdown-panel .p-dropdown-items {
-    padding: 0.5rem 0;
-  }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
-    margin: 0;
-    padding: 0.5rem 1rem;
-    border: 0 none;
-    color: rgba(255, 255, 255, 0.87);
-    background: transparent;
-    transition: box-shadow 0.2s;
-    border-radius: 0;
-  }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(100, 181, 246, 0.16);
-  }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
-    background: rgba(100, 181, 246, 0.24);
-  }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.09);
-  }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
-    margin: 0;
-    padding: 0.75rem 1rem;
-    color: rgba(255, 255, 255, 0.87);
-    background: #1f2d40;
-    font-weight: 600;
-  }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.5rem 1rem;
-    color: rgba(255, 255, 255, 0.87);
-    background: transparent;
-  }
-
-  .p-input-filled .p-dropdown {
-    background: #304562;
-  }
-  .p-input-filled .p-dropdown:not(.p-disabled):hover {
-    background-color: #304562;
-  }
-  .p-input-filled .p-dropdown:not(.p-disabled).p-focus {
-    background-color: #304562;
-  }
-  .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext {
-    background-color: transparent;
-  }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #ef9a9a;
-  }
-
-  .p-inputgroup-addon {
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.6);
-    border-top: 1px solid #304562;
-    border-left: 1px solid #304562;
-    border-bottom: 1px solid #304562;
-    padding: 0.5rem 0.5rem;
-    min-width: 2.357rem;
-  }
-  .p-inputgroup-addon:last-child {
-    border-right: 1px solid #304562;
-  }
-
-  .p-inputgroup > .p-component,
-.p-inputgroup > .p-inputwrapper > .p-inputtext,
-.p-inputgroup > .p-float-label > .p-component {
-    border-radius: 0;
-    margin: 0;
-  }
-  .p-inputgroup > .p-component + .p-inputgroup-addon,
-.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon,
-.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
-    border-left: 0 none;
-  }
-  .p-inputgroup > .p-component:focus,
-.p-inputgroup > .p-inputwrapper > .p-inputtext:focus,
-.p-inputgroup > .p-float-label > .p-component:focus {
-    z-index: 1;
-  }
-  .p-inputgroup > .p-component:focus ~ label,
-.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label,
-.p-inputgroup > .p-float-label > .p-component:focus ~ label {
-    z-index: 1;
-  }
-
-  .p-inputgroup-addon:first-child,
-.p-inputgroup button:first-child,
-.p-inputgroup input:first-child,
-.p-inputgroup > .p-inputwrapper:first-child > .p-component,
-.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext {
-    border-top-left-radius: 3px;
-    border-bottom-left-radius: 3px;
-  }
-
-  .p-inputgroup .p-float-label:first-child input {
-    border-top-left-radius: 3px;
-    border-bottom-left-radius: 3px;
-  }
-
-  .p-inputgroup-addon:last-child,
-.p-inputgroup button:last-child,
-.p-inputgroup input:last-child,
-.p-inputgroup > .p-inputwrapper:last-child > .p-component,
-.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext {
-    border-top-right-radius: 3px;
-    border-bottom-right-radius: 3px;
-  }
-
-  .p-inputgroup .p-float-label:last-child input {
-    border-top-right-radius: 3px;
-    border-bottom-right-radius: 3px;
-  }
-
-  .p-fluid .p-inputgroup .p-button {
-    width: auto;
-  }
-  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
-    width: 2.357rem;
-  }
-
-  p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
-    border-color: #ef9a9a;
-  }
-
-  p-inputmask.p-inputmask-clearable .p-inputtext {
-    padding-right: 2rem;
-  }
-  p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon {
-    color: rgba(255, 255, 255, 0.6);
-    right: 0.5rem;
-  }
-
-  p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
-    border-color: #ef9a9a;
-  }
-
-  p-inputnumber.p-inputnumber-clearable .p-inputnumber-input {
-    padding-right: 2rem;
-  }
-  p-inputnumber.p-inputnumber-clearable .p-inputnumber-clear-icon {
-    color: rgba(255, 255, 255, 0.6);
-    right: 0.5rem;
-  }
-
-  p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon {
-    right: 2.857rem;
-  }
-  p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon {
-    right: 2.857rem;
-  }
-
-  .p-inputswitch {
-    width: 3rem;
-    height: 1.75rem;
-  }
-  .p-inputswitch .p-inputswitch-slider {
-    background: #304562;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
-    border-radius: 30px;
-  }
-  .p-inputswitch .p-inputswitch-slider:before {
-    background: rgba(255, 255, 255, 0.6);
-    width: 1.25rem;
-    height: 1.25rem;
-    left: 0.25rem;
-    margin-top: -0.625rem;
-    border-radius: 50%;
-    transition-duration: 0.2s;
-  }
-  .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
-    transform: translateX(1.25rem);
-  }
-  .p-inputswitch.p-focus .p-inputswitch-slider {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-  .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider {
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
-    background: #64B5F6;
-  }
-  .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
-    background: rgba(255, 255, 255, 0.87);
-  }
-  .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
-    background: #43a5f4;
-  }
-
-  p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider {
-    border-color: #ef9a9a;
-  }
-
-  .p-inputtext {
-    font-family: var(--font-family);
-    font-feature-settings: var(--font-feature-settings, normal);
-    font-size: 1rem;
-    color: rgba(255, 255, 255, 0.87);
-    background: #17212f;
-    padding: 0.5rem 0.5rem;
-    border: 1px solid #304562;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
-    appearance: none;
-    border-radius: 3px;
-  }
-  .p-inputtext:enabled:hover {
-    border-color: #64B5F6;
-  }
-  .p-inputtext:enabled:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-    border-color: #64B5F6;
-  }
-  .p-inputtext.ng-dirty.ng-invalid {
-    border-color: #ef9a9a;
-  }
-  .p-inputtext.p-inputtext-sm {
-    font-size: 0.875rem;
-    padding: 0.4375rem 0.4375rem;
-  }
-  .p-inputtext.p-inputtext-lg {
-    font-size: 1.25rem;
-    padding: 0.625rem 0.625rem;
-  }
-
-  .p-float-label > label {
-    left: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-    transition-duration: 0.2s;
-  }
-
-  .p-float-label > .ng-invalid.ng-dirty + label {
-    color: #ef9a9a;
-  }
-
-  .p-input-icon-left > .p-icon-wrapper.p-icon,
-.p-input-icon-left > i:first-of-type {
-    left: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2rem;
-  }
-
-  .p-input-icon-left.p-float-label > label {
-    left: 2rem;
-  }
-
-  .p-input-icon-right > .p-icon-wrapper,
-.p-input-icon-right > i:last-of-type {
-    right: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2rem;
-  }
-
-  ::-webkit-input-placeholder {
-    color: rgba(255, 255, 255, 0.6);
-  }
-
-  :-moz-placeholder {
-    color: rgba(255, 255, 255, 0.6);
-  }
-
-  ::-moz-placeholder {
-    color: rgba(255, 255, 255, 0.6);
-  }
-
-  :-ms-input-placeholder {
-    color: rgba(255, 255, 255, 0.6);
-  }
-
-  .p-input-filled .p-inputtext {
-    background-color: #304562;
-  }
-  .p-input-filled .p-inputtext:enabled:hover {
-    background-color: #304562;
-  }
-  .p-input-filled .p-inputtext:enabled:focus {
-    background-color: #304562;
-  }
-
-  .p-inputtext-sm .p-inputtext {
-    font-size: 0.875rem;
-    padding: 0.4375rem 0.4375rem;
-  }
-
-  .p-inputtext-lg .p-inputtext {
-    font-size: 1.25rem;
-    padding: 0.625rem 0.625rem;
-  }
-
-  .p-listbox {
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border: 1px solid #304562;
-    border-radius: 3px;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  }
-  .p-listbox .p-listbox-header {
-    padding: 0.5rem 1rem;
-    border-bottom: 0 none;
-    color: rgba(255, 255, 255, 0.87);
-    background: #1f2d40;
-    margin: 0;
-    border-top-right-radius: 3px;
-    border-top-left-radius: 3px;
-  }
-  .p-listbox .p-listbox-header .p-listbox-filter {
-    padding-right: 1.5rem;
-  }
-  .p-listbox .p-listbox-header .p-listbox-filter-icon {
-    right: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-listbox .p-listbox-header .p-checkbox {
-    margin-right: 0.5rem;
-  }
-  .p-listbox .p-listbox-list {
-    padding: 0.5rem 0;
-    outline: 0 none;
-  }
-  .p-listbox .p-listbox-list .p-listbox-item {
-    margin: 0;
-    padding: 0.5rem 1rem;
-    border: 0 none;
-    color: rgba(255, 255, 255, 0.87);
-    transition: box-shadow 0.2s;
-    border-radius: 0;
-  }
-  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(100, 181, 246, 0.16);
-  }
-  .p-listbox .p-listbox-list .p-listbox-item .p-checkbox {
-    margin-right: 0.5rem;
-  }
-  .p-listbox .p-listbox-list .p-listbox-item-group {
-    margin: 0;
-    padding: 0.75rem 1rem;
-    color: rgba(255, 255, 255, 0.87);
-    background: #1f2d40;
-    font-weight: 600;
-  }
-  .p-listbox .p-listbox-list .p-listbox-empty-message {
-    padding: 0.5rem 1rem;
-    color: rgba(255, 255, 255, 0.87);
-    background: transparent;
-  }
-  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
-    background: rgba(100, 181, 246, 0.24);
-  }
-  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.09);
-  }
-  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-listbox.p-focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-    border-color: #64B5F6;
-  }
-
-  p-listbox.ng-dirty.ng-invalid > .p-listbox {
-    border-color: #ef9a9a;
-  }
-
-  .p-multiselect {
-    background: #17212f;
-    border: 1px solid #304562;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
-    border-radius: 3px;
-  }
-  .p-multiselect:not(.p-disabled):hover {
-    border-color: #64B5F6;
-  }
-  .p-multiselect:not(.p-disabled).p-focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-    border-color: #64B5F6;
-  }
-  .p-multiselect .p-multiselect-label {
-    padding: 0.5rem 0.5rem;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  }
-  .p-multiselect .p-multiselect-label.p-placeholder {
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-multiselect.p-multiselect-chip .p-multiselect-token {
-    padding: 0.25rem 0.5rem;
-    margin-right: 0.5rem;
-    background: #304562;
-    color: rgba(255, 255, 255, 0.87);
-    border-radius: 16px;
-  }
-  .p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
-    margin-left: 0.5rem;
-  }
-  .p-multiselect .p-multiselect-trigger {
-    background: transparent;
-    color: rgba(255, 255, 255, 0.6);
-    width: 2.357rem;
-    border-top-right-radius: 3px;
-    border-bottom-right-radius: 3px;
-  }
-
-  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
-    padding: 0.25rem 0.5rem;
-  }
-
-  .p-multiselect-clearable .p-multiselect-label-container {
-    padding-right: 1.5rem;
-  }
-  .p-multiselect-clearable .p-multiselect-clear-icon {
-    color: rgba(255, 255, 255, 0.6);
-    right: 2.357rem;
-  }
-
-  .p-multiselect-panel {
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border: 1px solid #304562;
-    border-radius: 3px;
-    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-  }
-  .p-multiselect-panel .p-multiselect-header {
-    padding: 0.5rem 1rem;
-    border-bottom: 0 none;
-    color: rgba(255, 255, 255, 0.87);
-    background: #1f2d40;
-    margin: 0;
-    border-top-right-radius: 3px;
-    border-top-left-radius: 3px;
-  }
-  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
-    padding-right: 1.5rem;
-  }
-  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
-    right: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-multiselect-panel .p-multiselect-header .p-checkbox {
-    margin-right: 0.5rem;
-  }
-  .p-multiselect-panel .p-multiselect-header .p-multiselect-close {
-    margin-left: 0.5rem;
-    width: 2rem;
-    height: 2rem;
-    color: rgba(255, 255, 255, 0.6);
-    border: 0 none;
-    background: transparent;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover {
-    color: rgba(255, 255, 255, 0.87);
-    border-color: transparent;
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-  .p-multiselect-panel .p-multiselect-items {
-    padding: 0.5rem 0;
-  }
-  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
-    margin: 0;
-    padding: 0.5rem 1rem;
-    border: 0 none;
-    color: rgba(255, 255, 255, 0.87);
-    background: transparent;
-    transition: box-shadow 0.2s;
-    border-radius: 0;
-  }
-  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(100, 181, 246, 0.16);
-  }
-  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
-    background: rgba(100, 181, 246, 0.24);
-  }
-  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.09);
-  }
-  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
-    margin-right: 0.5rem;
-  }
-  .p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
-    margin: 0;
-    padding: 0.75rem 1rem;
-    color: rgba(255, 255, 255, 0.87);
-    background: #1f2d40;
-    font-weight: 600;
-  }
-  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
-    padding: 0.5rem 1rem;
-    color: rgba(255, 255, 255, 0.87);
-    background: transparent;
-  }
-
-  .p-input-filled .p-multiselect {
-    background: #304562;
-  }
-  .p-input-filled .p-multiselect:not(.p-disabled):hover {
-    background-color: #304562;
-  }
-  .p-input-filled .p-multiselect:not(.p-disabled).p-focus {
-    background-color: #304562;
-  }
-
-  p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
-    border-color: #ef9a9a;
-  }
-
-  p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
-    border-color: #ef9a9a;
-  }
-
-  .p-password-panel {
-    padding: 1rem;
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border: 1px solid #304562;
-    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-    border-radius: 3px;
-  }
-  .p-password-panel .p-password-meter {
-    margin-bottom: 0.5rem;
-    background: #304562;
-  }
-  .p-password-panel .p-password-meter .p-password-strength.weak {
-    background: #f48fb1;
-  }
-  .p-password-panel .p-password-meter .p-password-strength.medium {
-    background: #ffe082;
-  }
-  .p-password-panel .p-password-meter .p-password-strength.strong {
-    background: #c5e1a5;
-  }
-
-  p-password.p-password-clearable .p-password-input {
-    padding-right: 2rem;
-  }
-  p-password.p-password-clearable .p-password-clear-icon {
-    color: rgba(255, 255, 255, 0.6);
-    right: 0.5rem;
-  }
-
-  p-password.p-password-clearable.p-password-mask .p-password-input {
-    padding-right: 3.5rem;
-  }
-  p-password.p-password-clearable.p-password-mask .p-password-clear-icon {
-    color: rgba(255, 255, 255, 0.6);
-    right: 2rem;
-  }
-
-  .p-radiobutton {
-    width: 20px;
-    height: 20px;
-  }
-  .p-radiobutton .p-radiobutton-box {
-    border: 2px solid #304562;
-    background: #17212f;
-    width: 20px;
-    height: 20px;
-    color: rgba(255, 255, 255, 0.87);
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  }
-  .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
-    border-color: #64B5F6;
-  }
-  .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-    border-color: #64B5F6;
-  }
-  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-    width: 12px;
-    height: 12px;
-    transition-duration: 0.2s;
-    background-color: #212529;
-  }
-  .p-radiobutton .p-radiobutton-box.p-highlight {
-    border-color: #64B5F6;
-    background: #64B5F6;
-  }
-  .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
-    border-color: #2396f2;
-    background: #2396f2;
-    color: #212529;
-  }
-
-  p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box {
-    border-color: #ef9a9a;
-  }
-
-  .p-input-filled .p-radiobutton .p-radiobutton-box {
-    background-color: #304562;
-  }
-  .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover {
-    background-color: #304562;
-  }
-  .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight {
-    background: #64B5F6;
-  }
-  .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
-    background: #2396f2;
-  }
-
-  .p-radiobutton-label {
-    margin-left: 0.5rem;
-  }
-
-  .p-rating {
-    gap: 0.5rem;
-  }
-  .p-rating .p-rating-item .p-rating-icon {
-    color: rgba(255, 255, 255, 0.87);
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
-    font-size: 1.143rem;
-  }
-  .p-rating .p-rating-item .p-rating-icon.p-icon {
-    width: 1.143rem;
-    height: 1.143rem;
-  }
-  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
-    color: #f48fb1;
-  }
-  .p-rating .p-rating-item.p-focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-    border-color: #64B5F6;
-  }
-  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
-    color: #64B5F6;
-  }
-  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
-    color: #64B5F6;
-  }
-  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
-    color: #f48fb1;
-  }
-
-  .p-selectbutton .p-button {
-    background: #1f2d40;
-    border: 1px solid #304562;
-    color: rgba(255, 255, 255, 0.87);
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  }
-  .p-selectbutton .p-button .p-button-icon-left,
-.p-selectbutton .p-button .p-button-icon-right {
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
-    background: rgba(255, 255, 255, 0.03);
-    border-color: #304562;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left,
-.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right {
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-selectbutton .p-button.p-highlight {
-    background: #64B5F6;
-    border-color: #64B5F6;
-    color: #212529;
-  }
-  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
-.p-selectbutton .p-button.p-highlight .p-button-icon-right {
-    color: #212529;
-  }
-  .p-selectbutton .p-button.p-highlight:hover {
-    background: #43a5f4;
-    border-color: #43a5f4;
-    color: #212529;
-  }
-  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
-.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
-    color: #212529;
-  }
-
-  p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button {
-    border-color: #ef9a9a;
-  }
-
-  .p-slider {
-    background: #304562;
-    border: 0 none;
-    border-radius: 3px;
-  }
-  .p-slider.p-slider-horizontal {
-    height: 0.286rem;
-  }
-  .p-slider.p-slider-horizontal .p-slider-handle {
-    margin-top: -0.5715rem;
-    margin-left: -0.5715rem;
-  }
-  .p-slider.p-slider-vertical {
-    width: 0.286rem;
-  }
-  .p-slider.p-slider-vertical .p-slider-handle {
-    margin-left: -0.5715rem;
-    margin-bottom: -0.5715rem;
-  }
-  .p-slider .p-slider-handle {
-    height: 1.143rem;
-    width: 1.143rem;
-    background: #304562;
-    border: 2px solid #64B5F6;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  }
-  .p-slider .p-slider-handle:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-  .p-slider .p-slider-range {
-    background: #64B5F6;
-  }
-  .p-slider:not(.p-disabled) .p-slider-handle:hover {
-    background: #64B5F6;
-    border-color: #64B5F6;
-  }
-  .p-slider.p-slider-animate.p-slider-horizontal .p-slider-handle {
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, left 0.2s;
-  }
-  .p-slider.p-slider-animate.p-slider-horizontal .p-slider-range {
-    transition: width 0.2s;
-  }
-  .p-slider.p-slider-animate.p-slider-vertical .p-slider-handle {
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, bottom 0.2s;
-  }
-  .p-slider.p-slider-animate.p-slider-vertical .p-slider-range {
-    transition: height 0.2s;
-  }
-
-  .p-togglebutton.p-button {
-    background: #1f2d40;
-    border: 1px solid #304562;
-    color: rgba(255, 255, 255, 0.87);
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  }
-  .p-togglebutton.p-button .p-button-icon-left,
-.p-togglebutton.p-button .p-button-icon-right {
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover {
-    background: rgba(255, 255, 255, 0.03);
-    border-color: #304562;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left,
-.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right {
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-togglebutton.p-button.p-highlight {
-    background: #64B5F6;
-    border-color: #64B5F6;
-    color: #212529;
-  }
-  .p-togglebutton.p-button.p-highlight .p-button-icon-left,
-.p-togglebutton.p-button.p-highlight .p-button-icon-right {
-    color: #212529;
-  }
-  .p-togglebutton.p-button.p-highlight:hover {
-    background: #43a5f4;
-    border-color: #43a5f4;
-    color: #212529;
-  }
-  .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left,
-.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right {
-    color: #212529;
-  }
-
-  p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
-    border-color: #ef9a9a;
-  }
-
-  .p-treeselect {
-    background: #17212f;
-    border: 1px solid #304562;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
-    border-radius: 3px;
-  }
-  .p-treeselect:not(.p-disabled):hover {
-    border-color: #64B5F6;
-  }
-  .p-treeselect:not(.p-disabled).p-focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-    border-color: #64B5F6;
-  }
-  .p-treeselect .p-treeselect-label {
-    padding: 0.5rem 0.5rem;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  }
-  .p-treeselect .p-treeselect-label.p-placeholder {
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-treeselect.p-treeselect-chip .p-treeselect-token {
-    padding: 0.25rem 0.5rem;
-    margin-right: 0.5rem;
-    background: #304562;
-    color: rgba(255, 255, 255, 0.87);
-    border-radius: 16px;
-  }
-  .p-treeselect .p-treeselect-trigger {
-    background: transparent;
-    color: rgba(255, 255, 255, 0.6);
-    width: 2.357rem;
-    border-top-right-radius: 3px;
-    border-bottom-right-radius: 3px;
-  }
-
-  p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
-    border-color: #ef9a9a;
-  }
-
-  .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label {
-    padding: 0.25rem 0.5rem;
-  }
-
-  .p-treeselect-panel {
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border: 1px solid #304562;
-    border-radius: 3px;
-    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-  }
-  .p-treeselect-panel .p-treeselect-header {
-    padding: 0.5rem 1rem;
-    border-bottom: 0 none;
-    color: rgba(255, 255, 255, 0.87);
-    background: #1f2d40;
-    margin: 0;
-    border-top-right-radius: 3px;
-    border-top-left-radius: 3px;
-  }
-  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
-    margin-right: 0.5rem;
-  }
-  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
-    padding-right: 1.5rem;
-  }
-  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
-    right: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
-    padding-right: 3rem;
-  }
-  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
-    right: 2rem;
-  }
-  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
-    width: 2rem;
-    height: 2rem;
-    color: rgba(255, 255, 255, 0.6);
-    border: 0 none;
-    background: transparent;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
-    color: rgba(255, 255, 255, 0.87);
-    border-color: transparent;
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
-    border: 0 none;
-  }
-  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
-    padding: 0.5rem 1rem;
-    color: rgba(255, 255, 255, 0.87);
-    background: transparent;
-  }
-
-  .p-input-filled .p-treeselect {
-    background: #304562;
-  }
-  .p-input-filled .p-treeselect:not(.p-disabled):hover {
-    background-color: #304562;
-  }
-  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
-    background-color: #304562;
-  }
-
-  p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
-    padding-right: 1.5rem;
-  }
-  p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
-    color: rgba(255, 255, 255, 0.6);
-    right: 2.357rem;
-  }
-
-  .p-button {
-    color: #212529;
-    background: #64B5F6;
-    border: 1px solid #64B5F6;
-    padding: 0.5rem 1rem;
-    font-size: 1rem;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
-    border-radius: 3px;
-  }
-  .p-button:not(:disabled):hover {
-    background: #43a5f4;
-    color: #212529;
-    border-color: #43a5f4;
-  }
-  .p-button:not(:disabled):active {
-    background: #2396f2;
-    color: #212529;
-    border-color: #2396f2;
-  }
-  .p-button.p-button-outlined {
-    background-color: transparent;
-    color: #64B5F6;
-    border: 1px solid;
-  }
-  .p-button.p-button-outlined:not(:disabled):hover {
-    background: rgba(100, 181, 246, 0.04);
-    color: #64B5F6;
-    border: 1px solid;
-  }
-  .p-button.p-button-outlined:not(:disabled):active {
-    background: rgba(100, 181, 246, 0.16);
-    color: #64B5F6;
-    border: 1px solid;
-  }
-  .p-button.p-button-outlined.p-button-plain {
-    color: rgba(255, 255, 255, 0.6);
-    border-color: rgba(255, 255, 255, 0.6);
-  }
-  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
-    background: rgba(255, 255, 255, 0.16);
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-button.p-button-text {
-    background-color: transparent;
-    color: #64B5F6;
-    border-color: transparent;
-  }
-  .p-button.p-button-text:not(:disabled):hover {
-    background: rgba(100, 181, 246, 0.04);
-    color: #64B5F6;
-    border-color: transparent;
-  }
-  .p-button.p-button-text:not(:disabled):active {
-    background: rgba(100, 181, 246, 0.16);
-    color: #64B5F6;
-    border-color: transparent;
-  }
-  .p-button.p-button-text.p-button-plain {
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-button.p-button-text.p-button-plain:not(:disabled):active {
-    background: rgba(255, 255, 255, 0.16);
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-button:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-  .p-button .p-button-label {
-    transition-duration: 0.2s;
-  }
-  .p-button .p-button-icon-left {
-    margin-right: 0.5rem;
-  }
-  .p-button .p-button-icon-right {
-    margin-left: 0.5rem;
-  }
-  .p-button .p-button-icon-bottom {
-    margin-top: 0.5rem;
-  }
-  .p-button .p-button-icon-top {
-    margin-bottom: 0.5rem;
-  }
-  .p-button .p-badge {
-    margin-left: 0.5rem;
-    min-width: 1rem;
-    height: 1rem;
-    line-height: 1rem;
-    color: #64B5F6;
-    background-color: #212529;
-  }
-  .p-button.p-button-raised {
-    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-  }
-  .p-button.p-button-rounded {
-    border-radius: 2rem;
-  }
-  .p-button.p-button-icon-only {
-    width: 2.357rem;
-    padding: 0.5rem 0;
-  }
-  .p-button.p-button-icon-only .p-button-icon-left,
-.p-button.p-button-icon-only .p-button-icon-right {
-    margin: 0;
-  }
-  .p-button.p-button-icon-only.p-button-rounded {
-    border-radius: 50%;
-    height: 2.357rem;
-  }
-  .p-button.p-button-sm {
-    font-size: 0.875rem;
-    padding: 0.4375rem 0.875rem;
-  }
-  .p-button.p-button-sm .p-button-icon {
-    font-size: 0.875rem;
-  }
-  .p-button.p-button-lg {
-    font-size: 1.25rem;
-    padding: 0.625rem 1.25rem;
-  }
-  .p-button.p-button-lg .p-button-icon {
-    font-size: 1.25rem;
-  }
-  .p-button.p-button-loading-label-only .p-button-label {
-    margin-left: 0.5rem;
-  }
-  .p-button.p-button-loading-label-only .p-button-loading-icon {
-    margin-right: 0;
-  }
-
-  .p-fluid .p-button {
-    width: 100%;
-  }
-  .p-fluid .p-button-icon-only {
-    width: 2.357rem;
-  }
-  .p-fluid .p-buttonset {
-    display: flex;
-  }
-  .p-fluid .p-buttonset .p-button {
-    flex: 1;
-  }
-
-  .p-button.p-button-secondary,
-.p-buttonset.p-button-secondary > .p-button,
-.p-splitbutton.p-button-secondary > .p-button {
-    color: #ffffff;
-    background: #78909c;
-    border: 1px solid #78909c;
-  }
-  .p-button.p-button-secondary:not(:disabled):hover,
-.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover,
-.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover {
-    background: #69838f;
-    color: #ffffff;
-    border-color: #69838f;
-  }
-  .p-button.p-button-secondary:not(:disabled):focus,
-.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus,
-.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus {
-    box-shadow: 0 0 0 1px #a1b1ba;
-  }
-  .p-button.p-button-secondary:not(:disabled):active,
-.p-buttonset.p-button-secondary > .p-button:not(:disabled):active,
-.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active {
-    background: #5d747f;
-    color: #ffffff;
-    border-color: #5d747f;
-  }
-  .p-button.p-button-secondary.p-button-outlined,
-.p-buttonset.p-button-secondary > .p-button.p-button-outlined,
-.p-splitbutton.p-button-secondary > .p-button.p-button-outlined {
-    background-color: transparent;
-    color: #78909c;
-    border: 1px solid;
-  }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover,
-.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover,
-.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover {
-    background: rgba(120, 144, 156, 0.04);
-    color: #78909c;
-    border: 1px solid;
-  }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active,
-.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active,
-.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active {
-    background: rgba(120, 144, 156, 0.16);
-    color: #78909c;
-    border: 1px solid;
-  }
-  .p-button.p-button-secondary.p-button-text,
-.p-buttonset.p-button-secondary > .p-button.p-button-text,
-.p-splitbutton.p-button-secondary > .p-button.p-button-text {
-    background-color: transparent;
-    color: #78909c;
-    border-color: transparent;
-  }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover,
-.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover,
-.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover {
-    background: rgba(120, 144, 156, 0.04);
-    border-color: transparent;
-    color: #78909c;
-  }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active,
-.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active,
-.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active {
-    background: rgba(120, 144, 156, 0.16);
-    border-color: transparent;
-    color: #78909c;
-  }
-
-  .p-button.p-button-info,
-.p-buttonset.p-button-info > .p-button,
-.p-splitbutton.p-button-info > .p-button {
-    color: #121212;
-    background: #81d4fa;
-    border: 1px solid #81d4fa;
-  }
-  .p-button.p-button-info:not(:disabled):hover,
-.p-buttonset.p-button-info > .p-button:not(:disabled):hover,
-.p-splitbutton.p-button-info > .p-button:not(:disabled):hover {
-    background: #5dc8f9;
-    color: #121212;
-    border-color: #5dc8f9;
-  }
-  .p-button.p-button-info:not(:disabled):focus,
-.p-buttonset.p-button-info > .p-button:not(:disabled):focus,
-.p-splitbutton.p-button-info > .p-button:not(:disabled):focus {
-    box-shadow: 0 0 0 1px #a7e1fc;
-  }
-  .p-button.p-button-info:not(:disabled):active,
-.p-buttonset.p-button-info > .p-button:not(:disabled):active,
-.p-splitbutton.p-button-info > .p-button:not(:disabled):active {
-    background: #38bbf7;
-    color: #121212;
-    border-color: #38bbf7;
-  }
-  .p-button.p-button-info.p-button-outlined,
-.p-buttonset.p-button-info > .p-button.p-button-outlined,
-.p-splitbutton.p-button-info > .p-button.p-button-outlined {
-    background-color: transparent;
-    color: #81d4fa;
-    border: 1px solid;
-  }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover,
-.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover,
-.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover {
-    background: rgba(129, 212, 250, 0.04);
-    color: #81d4fa;
-    border: 1px solid;
-  }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active,
-.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active,
-.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active {
-    background: rgba(129, 212, 250, 0.16);
-    color: #81d4fa;
-    border: 1px solid;
-  }
-  .p-button.p-button-info.p-button-text,
-.p-buttonset.p-button-info > .p-button.p-button-text,
-.p-splitbutton.p-button-info > .p-button.p-button-text {
-    background-color: transparent;
-    color: #81d4fa;
-    border-color: transparent;
-  }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover,
-.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover,
-.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover {
-    background: rgba(129, 212, 250, 0.04);
-    border-color: transparent;
-    color: #81d4fa;
-  }
-  .p-button.p-button-info.p-button-text:not(:disabled):active,
-.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active,
-.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active {
-    background: rgba(129, 212, 250, 0.16);
-    border-color: transparent;
-    color: #81d4fa;
-  }
-
-  .p-button.p-button-success,
-.p-buttonset.p-button-success > .p-button,
-.p-splitbutton.p-button-success > .p-button {
-    color: #121212;
-    background: #c5e1a5;
-    border: 1px solid #c5e1a5;
-  }
-  .p-button.p-button-success:not(:disabled):hover,
-.p-buttonset.p-button-success > .p-button:not(:disabled):hover,
-.p-splitbutton.p-button-success > .p-button:not(:disabled):hover {
-    background: #b2d788;
-    color: #121212;
-    border-color: #b2d788;
-  }
-  .p-button.p-button-success:not(:disabled):focus,
-.p-buttonset.p-button-success > .p-button:not(:disabled):focus,
-.p-splitbutton.p-button-success > .p-button:not(:disabled):focus {
-    box-shadow: 0 0 0 1px #d6eac0;
-  }
-  .p-button.p-button-success:not(:disabled):active,
-.p-buttonset.p-button-success > .p-button:not(:disabled):active,
-.p-splitbutton.p-button-success > .p-button:not(:disabled):active {
-    background: #9fce6b;
-    color: #121212;
-    border-color: #9fce6b;
-  }
-  .p-button.p-button-success.p-button-outlined,
-.p-buttonset.p-button-success > .p-button.p-button-outlined,
-.p-splitbutton.p-button-success > .p-button.p-button-outlined {
-    background-color: transparent;
-    color: #c5e1a5;
-    border: 1px solid;
-  }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover,
-.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover,
-.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover {
-    background: rgba(197, 225, 165, 0.04);
-    color: #c5e1a5;
-    border: 1px solid;
-  }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active,
-.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active,
-.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active {
-    background: rgba(197, 225, 165, 0.16);
-    color: #c5e1a5;
-    border: 1px solid;
-  }
-  .p-button.p-button-success.p-button-text,
-.p-buttonset.p-button-success > .p-button.p-button-text,
-.p-splitbutton.p-button-success > .p-button.p-button-text {
-    background-color: transparent;
-    color: #c5e1a5;
-    border-color: transparent;
-  }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover,
-.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover,
-.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover {
-    background: rgba(197, 225, 165, 0.04);
-    border-color: transparent;
-    color: #c5e1a5;
-  }
-  .p-button.p-button-success.p-button-text:not(:disabled):active,
-.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active,
-.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active {
-    background: rgba(197, 225, 165, 0.16);
-    border-color: transparent;
-    color: #c5e1a5;
-  }
-
-  .p-button.p-button-warning,
-.p-buttonset.p-button-warning > .p-button,
-.p-splitbutton.p-button-warning > .p-button {
-    color: #121212;
-    background: #ffe082;
-    border: 1px solid #ffe082;
-  }
-  .p-button.p-button-warning:not(:disabled):hover,
-.p-buttonset.p-button-warning > .p-button:not(:disabled):hover,
-.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover {
-    background: #ffd65c;
-    color: #121212;
-    border-color: #ffd65c;
-  }
-  .p-button.p-button-warning:not(:disabled):focus,
-.p-buttonset.p-button-warning > .p-button:not(:disabled):focus,
-.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus {
-    box-shadow: 0 0 0 1px #ffe9a8;
-  }
-  .p-button.p-button-warning:not(:disabled):active,
-.p-buttonset.p-button-warning > .p-button:not(:disabled):active,
-.p-splitbutton.p-button-warning > .p-button:not(:disabled):active {
-    background: #ffcd35;
-    color: #121212;
-    border-color: #ffcd35;
-  }
-  .p-button.p-button-warning.p-button-outlined,
-.p-buttonset.p-button-warning > .p-button.p-button-outlined,
-.p-splitbutton.p-button-warning > .p-button.p-button-outlined {
-    background-color: transparent;
-    color: #ffe082;
-    border: 1px solid;
-  }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover,
-.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover,
-.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover {
-    background: rgba(255, 224, 130, 0.04);
-    color: #ffe082;
-    border: 1px solid;
-  }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active,
-.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active,
-.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active {
-    background: rgba(255, 224, 130, 0.16);
-    color: #ffe082;
-    border: 1px solid;
-  }
-  .p-button.p-button-warning.p-button-text,
-.p-buttonset.p-button-warning > .p-button.p-button-text,
-.p-splitbutton.p-button-warning > .p-button.p-button-text {
-    background-color: transparent;
-    color: #ffe082;
-    border-color: transparent;
-  }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover,
-.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover,
-.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover {
-    background: rgba(255, 224, 130, 0.04);
-    border-color: transparent;
-    color: #ffe082;
-  }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active,
-.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active,
-.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active {
-    background: rgba(255, 224, 130, 0.16);
-    border-color: transparent;
-    color: #ffe082;
-  }
-
-  .p-button.p-button-help,
-.p-buttonset.p-button-help > .p-button,
-.p-splitbutton.p-button-help > .p-button {
-    color: #121212;
-    background: #ce93d8;
-    border: 1px solid #ce93d8;
-  }
-  .p-button.p-button-help:not(:disabled):hover,
-.p-buttonset.p-button-help > .p-button:not(:disabled):hover,
-.p-splitbutton.p-button-help > .p-button:not(:disabled):hover {
-    background: #c278ce;
-    color: #121212;
-    border-color: #c278ce;
-  }
-  .p-button.p-button-help:not(:disabled):focus,
-.p-buttonset.p-button-help > .p-button:not(:disabled):focus,
-.p-splitbutton.p-button-help > .p-button:not(:disabled):focus {
-    box-shadow: 0 0 0 1px #ddb3e4;
-  }
-  .p-button.p-button-help:not(:disabled):active,
-.p-buttonset.p-button-help > .p-button:not(:disabled):active,
-.p-splitbutton.p-button-help > .p-button:not(:disabled):active {
-    background: #b65ec5;
-    color: #121212;
-    border-color: #b65ec5;
-  }
-  .p-button.p-button-help.p-button-outlined,
-.p-buttonset.p-button-help > .p-button.p-button-outlined,
-.p-splitbutton.p-button-help > .p-button.p-button-outlined {
-    background-color: transparent;
-    color: #ce93d8;
-    border: 1px solid;
-  }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover,
-.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover,
-.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover {
-    background: rgba(206, 147, 216, 0.04);
-    color: #ce93d8;
-    border: 1px solid;
-  }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active,
-.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active,
-.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active {
-    background: rgba(206, 147, 216, 0.16);
-    color: #ce93d8;
-    border: 1px solid;
-  }
-  .p-button.p-button-help.p-button-text,
-.p-buttonset.p-button-help > .p-button.p-button-text,
-.p-splitbutton.p-button-help > .p-button.p-button-text {
-    background-color: transparent;
-    color: #ce93d8;
-    border-color: transparent;
-  }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover,
-.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover,
-.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover {
-    background: rgba(206, 147, 216, 0.04);
-    border-color: transparent;
-    color: #ce93d8;
-  }
-  .p-button.p-button-help.p-button-text:not(:disabled):active,
-.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active,
-.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active {
-    background: rgba(206, 147, 216, 0.16);
-    border-color: transparent;
-    color: #ce93d8;
-  }
-
-  .p-button.p-button-danger,
-.p-buttonset.p-button-danger > .p-button,
-.p-splitbutton.p-button-danger > .p-button {
-    color: #121212;
-    background: #f48fb1;
-    border: 1px solid #f48fb1;
-  }
-  .p-button.p-button-danger:not(:disabled):hover,
-.p-buttonset.p-button-danger > .p-button:not(:disabled):hover,
-.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover {
-    background: #f16c98;
-    color: #121212;
-    border-color: #f16c98;
-  }
-  .p-button.p-button-danger:not(:disabled):focus,
-.p-buttonset.p-button-danger > .p-button:not(:disabled):focus,
-.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus {
-    box-shadow: 0 0 0 1px #f7b1c8;
-  }
-  .p-button.p-button-danger:not(:disabled):active,
-.p-buttonset.p-button-danger > .p-button:not(:disabled):active,
-.p-splitbutton.p-button-danger > .p-button:not(:disabled):active {
-    background: #ed4980;
-    color: #121212;
-    border-color: #ed4980;
-  }
-  .p-button.p-button-danger.p-button-outlined,
-.p-buttonset.p-button-danger > .p-button.p-button-outlined,
-.p-splitbutton.p-button-danger > .p-button.p-button-outlined {
-    background-color: transparent;
-    color: #f48fb1;
-    border: 1px solid;
-  }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover,
-.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover,
-.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover {
-    background: rgba(244, 143, 177, 0.04);
-    color: #f48fb1;
-    border: 1px solid;
-  }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active,
-.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active,
-.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active {
-    background: rgba(244, 143, 177, 0.16);
-    color: #f48fb1;
-    border: 1px solid;
-  }
-  .p-button.p-button-danger.p-button-text,
-.p-buttonset.p-button-danger > .p-button.p-button-text,
-.p-splitbutton.p-button-danger > .p-button.p-button-text {
-    background-color: transparent;
-    color: #f48fb1;
-    border-color: transparent;
-  }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover,
-.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover,
-.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover {
-    background: rgba(244, 143, 177, 0.04);
-    border-color: transparent;
-    color: #f48fb1;
-  }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active,
-.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active,
-.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active {
-    background: rgba(244, 143, 177, 0.16);
-    border-color: transparent;
-    color: #f48fb1;
-  }
-
-  .p-button.p-button-link {
-    color: #64B5F6;
-    background: transparent;
-    border: transparent;
-  }
-  .p-button.p-button-link:not(:disabled):hover {
-    background: transparent;
-    color: #64B5F6;
-    border-color: transparent;
-  }
-  .p-button.p-button-link:not(:disabled):hover .p-button-label {
-    text-decoration: underline;
-  }
-  .p-button.p-button-link:not(:disabled):focus {
-    background: transparent;
-    box-shadow: 0 0 0 0.1rem #93cbf9;
-    border-color: transparent;
-  }
-  .p-button.p-button-link:not(:disabled):active {
-    background: transparent;
-    color: #64B5F6;
-    border-color: transparent;
-  }
-
-  .p-speeddial-button.p-button.p-button-icon-only {
-    width: 4rem;
-    height: 4rem;
-  }
-  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
-    font-size: 1.3rem;
-  }
-  .p-speeddial-button.p-button.p-button-icon-only .p-icon {
-    width: 1.3rem;
-    height: 1.3rem;
-  }
-
-  .p-speeddial-list {
-    outline: 0 none;
-  }
-
-  .p-speeddial-item.p-focus > .p-speeddial-action {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-
-  .p-speeddial-action {
-    width: 3rem;
-    height: 3rem;
-    background: rgba(255, 255, 255, 0.87);
-    color: #17212f;
-  }
-  .p-speeddial-action:hover {
-    background: rgba(255, 255, 255, 0.6);
-    color: #17212f;
-  }
-
-  .p-speeddial-direction-up .p-speeddial-item {
-    margin: 0.25rem 0;
-  }
-  .p-speeddial-direction-up .p-speeddial-item:first-child {
-    margin-bottom: 0.5rem;
-  }
-
-  .p-speeddial-direction-down .p-speeddial-item {
-    margin: 0.25rem 0;
-  }
-  .p-speeddial-direction-down .p-speeddial-item:first-child {
-    margin-top: 0.5rem;
-  }
-
-  .p-speeddial-direction-left .p-speeddial-item {
-    margin: 0 0.25rem;
-  }
-  .p-speeddial-direction-left .p-speeddial-item:first-child {
-    margin-right: 0.5rem;
-  }
-
-  .p-speeddial-direction-right .p-speeddial-item {
-    margin: 0 0.25rem;
-  }
-  .p-speeddial-direction-right .p-speeddial-item:first-child {
-    margin-left: 0.5rem;
-  }
-
-  .p-speeddial-circle .p-speeddial-item,
-.p-speeddial-semi-circle .p-speeddial-item,
-.p-speeddial-quarter-circle .p-speeddial-item {
-    margin: 0;
-  }
-  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
-.p-speeddial-semi-circle .p-speeddial-item:first-child,
-.p-speeddial-semi-circle .p-speeddial-item:last-child,
-.p-speeddial-quarter-circle .p-speeddial-item:first-child,
-.p-speeddial-quarter-circle .p-speeddial-item:last-child {
-    margin: 0;
-  }
-
-  .p-speeddial-mask {
-    background-color: rgba(0, 0, 0, 0.4);
-  }
-
-  .p-splitbutton {
-    border-radius: 3px;
-  }
-  .p-splitbutton.p-button-outlined > .p-button {
-    background-color: transparent;
-    color: #64B5F6;
-    border: 1px solid;
-  }
-  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
-    background: rgba(100, 181, 246, 0.04);
-    color: #64B5F6;
-  }
-  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
-    background: rgba(100, 181, 246, 0.16);
-    color: #64B5F6;
-  }
-  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
-    color: rgba(255, 255, 255, 0.6);
-    border-color: rgba(255, 255, 255, 0.6);
-  }
-  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
-    background: rgba(255, 255, 255, 0.16);
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-splitbutton.p-button-text > .p-button {
-    background-color: transparent;
-    color: #64B5F6;
-    border-color: transparent;
-  }
-  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
-    background: rgba(100, 181, 246, 0.04);
-    color: #64B5F6;
-    border-color: transparent;
-  }
-  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
-    background: rgba(100, 181, 246, 0.16);
-    color: #64B5F6;
-    border-color: transparent;
-  }
-  .p-splitbutton.p-button-text.p-button-plain > .p-button {
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
-    background: rgba(255, 255, 255, 0.16);
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-splitbutton.p-button-raised {
-    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-  }
-  .p-splitbutton.p-button-rounded {
-    border-radius: 2rem;
-  }
-  .p-splitbutton.p-button-rounded > .p-button {
-    border-radius: 2rem;
-  }
-  .p-splitbutton.p-button-sm > .p-button {
-    font-size: 0.875rem;
-    padding: 0.4375rem 0.875rem;
-  }
-  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
-    font-size: 0.875rem;
-  }
-  .p-splitbutton.p-button-lg > .p-button {
-    font-size: 1.25rem;
-    padding: 0.625rem 1.25rem;
-  }
-  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
-    font-size: 1.25rem;
-  }
-
-  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
-    background-color: transparent;
-    color: #78909c;
-    border: 1px solid;
-  }
-  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
-    background: rgba(120, 144, 156, 0.04);
-    color: #78909c;
-  }
-  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
-    background: rgba(120, 144, 156, 0.16);
-    color: #78909c;
-  }
-  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
-    background-color: transparent;
-    color: #78909c;
-    border-color: transparent;
-  }
-  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
-    background: rgba(120, 144, 156, 0.04);
-    border-color: transparent;
-    color: #78909c;
-  }
-  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
-    background: rgba(120, 144, 156, 0.16);
-    border-color: transparent;
-    color: #78909c;
-  }
-
-  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
-    background-color: transparent;
-    color: #81d4fa;
-    border: 1px solid;
-  }
-  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
-    background: rgba(129, 212, 250, 0.04);
-    color: #81d4fa;
-  }
-  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
-    background: rgba(129, 212, 250, 0.16);
-    color: #81d4fa;
-  }
-  .p-splitbutton.p-button-info.p-button-text > .p-button {
-    background-color: transparent;
-    color: #81d4fa;
-    border-color: transparent;
-  }
-  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
-    background: rgba(129, 212, 250, 0.04);
-    border-color: transparent;
-    color: #81d4fa;
-  }
-  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
-    background: rgba(129, 212, 250, 0.16);
-    border-color: transparent;
-    color: #81d4fa;
-  }
-
-  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
-    background-color: transparent;
-    color: #c5e1a5;
-    border: 1px solid;
-  }
-  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
-    background: rgba(197, 225, 165, 0.04);
-    color: #c5e1a5;
-  }
-  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
-    background: rgba(197, 225, 165, 0.16);
-    color: #c5e1a5;
-  }
-  .p-splitbutton.p-button-success.p-button-text > .p-button {
-    background-color: transparent;
-    color: #c5e1a5;
-    border-color: transparent;
-  }
-  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
-    background: rgba(197, 225, 165, 0.04);
-    border-color: transparent;
-    color: #c5e1a5;
-  }
-  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
-    background: rgba(197, 225, 165, 0.16);
-    border-color: transparent;
-    color: #c5e1a5;
-  }
-
-  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
-    background-color: transparent;
-    color: #ffe082;
-    border: 1px solid;
-  }
-  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
-    background: rgba(255, 224, 130, 0.04);
-    color: #ffe082;
-  }
-  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
-    background: rgba(255, 224, 130, 0.16);
-    color: #ffe082;
-  }
-  .p-splitbutton.p-button-warning.p-button-text > .p-button {
-    background-color: transparent;
-    color: #ffe082;
-    border-color: transparent;
-  }
-  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
-    background: rgba(255, 224, 130, 0.04);
-    border-color: transparent;
-    color: #ffe082;
-  }
-  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
-    background: rgba(255, 224, 130, 0.16);
-    border-color: transparent;
-    color: #ffe082;
-  }
-
-  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
-    background-color: transparent;
-    color: #ce93d8;
-    border: 1px solid;
-  }
-  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
-    background: rgba(206, 147, 216, 0.04);
-    color: #ce93d8;
-  }
-  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
-    background: rgba(206, 147, 216, 0.16);
-    color: #ce93d8;
-  }
-  .p-splitbutton.p-button-help.p-button-text > .p-button {
-    background-color: transparent;
-    color: #ce93d8;
-    border-color: transparent;
-  }
-  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
-    background: rgba(206, 147, 216, 0.04);
-    border-color: transparent;
-    color: #ce93d8;
-  }
-  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
-    background: rgba(206, 147, 216, 0.16);
-    border-color: transparent;
-    color: #ce93d8;
-  }
-
-  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
-    background-color: transparent;
-    color: #f48fb1;
-    border: 1px solid;
-  }
-  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
-    background: rgba(244, 143, 177, 0.04);
-    color: #f48fb1;
-  }
-  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
-    background: rgba(244, 143, 177, 0.16);
-    color: #f48fb1;
-  }
-  .p-splitbutton.p-button-danger.p-button-text > .p-button {
-    background-color: transparent;
-    color: #f48fb1;
-    border-color: transparent;
-  }
-  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
-    background: rgba(244, 143, 177, 0.04);
-    border-color: transparent;
-    color: #f48fb1;
-  }
-  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
-    background: rgba(244, 143, 177, 0.16);
-    border-color: transparent;
-    color: #f48fb1;
-  }
-
-  .p-carousel .p-carousel-content .p-carousel-prev,
-.p-carousel .p-carousel-content .p-carousel-next {
-    width: 2rem;
-    height: 2rem;
-    color: rgba(255, 255, 255, 0.6);
-    border: 0 none;
-    background: transparent;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-    margin: 0.5rem;
-  }
-  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
-.p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
-    color: rgba(255, 255, 255, 0.87);
-    border-color: transparent;
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
-.p-carousel .p-carousel-content .p-carousel-next:focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-  .p-carousel .p-carousel-indicators {
-    padding: 1rem;
-  }
-  .p-carousel .p-carousel-indicators .p-carousel-indicator {
-    margin-right: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
-  .p-carousel .p-carousel-indicators .p-carousel-indicator button {
-    background-color: #304562;
-    width: 2rem;
-    height: 0.5rem;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-    border-radius: 0;
-  }
-  .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover {
-    background: #3c567a;
-  }
-  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
-    background: rgba(100, 181, 246, 0.16);
-    color: rgba(255, 255, 255, 0.87);
-  }
-
-  .p-datatable .p-paginator-top {
-    border-width: 1px 0 1px 0;
-    border-radius: 0;
-  }
-  .p-datatable .p-paginator-bottom {
-    border-width: 0 0 1px 0;
-    border-radius: 0;
-  }
-  .p-datatable .p-datatable-header {
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.6);
-    border: 1px solid #304562;
-    border-width: 0 0 1px 0;
-    padding: 1rem 1rem;
-    font-weight: 600;
-  }
-  .p-datatable .p-datatable-footer {
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border: 1px solid #304562;
-    border-width: 0 0 1px 0;
-    padding: 1rem 1rem;
-    font-weight: 600;
-  }
-  .p-datatable .p-datatable-thead > tr > th {
-    text-align: left;
-    padding: 1rem 1rem;
-    border: 1px solid #304562;
-    border-width: 0 0 1px 0;
-    font-weight: 600;
-    color: rgba(255, 255, 255, 0.87);
-    background: #1f2d40;
-    transition: box-shadow 0.2s;
-  }
-  .p-datatable .p-datatable-tfoot > tr > td {
-    text-align: left;
-    padding: 1rem 1rem;
-    border: 1px solid #304562;
-    border-width: 0 0 1px 0;
-    font-weight: 600;
-    color: rgba(255, 255, 255, 0.87);
-    background: #1f2d40;
-  }
-  .p-datatable .p-sortable-column .p-sortable-column-icon {
-    color: rgba(255, 255, 255, 0.6);
-    margin-left: 0.5rem;
-  }
-  .p-datatable .p-sortable-column .p-sortable-column-badge {
-    border-radius: 50%;
-    height: 1.143rem;
-    min-width: 1.143rem;
-    line-height: 1.143rem;
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(100, 181, 246, 0.16);
-    margin-left: 0.5rem;
-  }
-  .p-datatable .p-sortable-column:not(.p-highlight):hover {
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-datatable .p-sortable-column.p-highlight {
-    background: #1f2d40;
-    color: #64B5F6;
-  }
-  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
-    color: #64B5F6;
-  }
-  .p-datatable .p-sortable-column.p-highlight:hover {
-    background: rgba(255, 255, 255, 0.03);
-    color: #64B5F6;
-  }
-  .p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon {
-    color: #64B5F6;
-  }
-  .p-datatable .p-sortable-column:focus-visible {
-    box-shadow: inset 0 0 0 0.15rem #93cbf9;
-    outline: 0 none;
-  }
-  .p-datatable .p-datatable-tbody > tr {
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    transition: box-shadow 0.2s;
-  }
-  .p-datatable .p-datatable-tbody > tr > td {
-    text-align: left;
-    border: 1px solid #304562;
-    border-width: 0 0 1px 0;
-    padding: 1rem 1rem;
-  }
-  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel {
-    width: 2rem;
-    height: 2rem;
-    color: rgba(255, 255, 255, 0.6);
-    border: 0 none;
-    background: transparent;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover {
-    color: rgba(255, 255, 255, 0.87);
-    border-color: transparent;
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
-    margin-right: 0.5rem;
-  }
-  .p-datatable .p-datatable-tbody > tr:focus-visible {
-    outline: 0.15rem solid #93cbf9;
-    outline-offset: -0.15rem;
-  }
-  .p-datatable .p-datatable-tbody > tr.p-highlight {
-    background: rgba(100, 181, 246, 0.16);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
-    box-shadow: inset 0 2px 0 0 rgba(100, 181, 246, 0.16);
-  }
-  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
-    box-shadow: inset 0 -2px 0 0 rgba(100, 181, 246, 0.16);
-  }
-  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-datatable .p-column-resizer-helper {
-    background: #64B5F6;
-  }
-  .p-datatable .p-datatable-scrollable-header,
-.p-datatable .p-datatable-scrollable-footer {
-    background: #1f2d40;
-  }
-  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
-.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead,
-.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot {
-    background-color: #1f2d40;
-  }
-  .p-datatable .p-datatable-loading-icon {
-    font-size: 2rem;
-  }
-  .p-datatable.p-datatable-gridlines .p-datatable-header {
-    border-width: 1px 1px 0 1px;
-  }
-  .p-datatable.p-datatable-gridlines .p-datatable-footer {
-    border-width: 0 1px 1px 1px;
-  }
-  .p-datatable.p-datatable-gridlines .p-paginator-top {
-    border-width: 0 1px 0 1px;
-  }
-  .p-datatable.p-datatable-gridlines .p-paginator-bottom {
-    border-width: 0 1px 1px 1px;
-  }
-  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th {
-    border-width: 1px 0 1px 1px;
-  }
-  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
-    border-width: 1px;
-  }
-  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
-    border-width: 1px 0 0 1px;
-  }
-  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
-    border-width: 1px 1px 0 1px;
-  }
-  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
-    border-width: 1px 0 1px 1px;
-  }
-  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
-    border-width: 1px;
-  }
-  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
-    border-width: 1px 0 1px 1px;
-  }
-  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
-    border-width: 1px 1px 1px 1px;
-  }
-  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
-    border-width: 0 0 1px 1px;
-  }
-  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
-    border-width: 0 1px 1px 1px;
-  }
-  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
-    border-width: 0 0 1px 1px;
-  }
-  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
-    border-width: 0 1px 1px 1px;
-  }
-  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
-    border-width: 0 0 0 1px;
-  }
-  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
-    border-width: 0 1px 0 1px;
-  }
-  .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
-    background: #253144;
-  }
-  .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight {
-    background: rgba(100, 181, 246, 0.16);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-datatable.p-datatable-sm .p-datatable-header {
-    padding: 0.5rem 0.5rem;
-  }
-  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
-    padding: 0.5rem 0.5rem;
-  }
-  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
-    padding: 0.5rem 0.5rem;
-  }
-  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
-    padding: 0.5rem 0.5rem;
-  }
-  .p-datatable.p-datatable-sm .p-datatable-footer {
-    padding: 0.5rem 0.5rem;
-  }
-  .p-datatable.p-datatable-lg .p-datatable-header {
-    padding: 1.25rem 1.25rem;
-  }
-  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
-    padding: 1.25rem 1.25rem;
-  }
-  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
-    padding: 1.25rem 1.25rem;
-  }
-  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
-    padding: 1.25rem 1.25rem;
-  }
-  .p-datatable.p-datatable-lg .p-datatable-footer {
-    padding: 1.25rem 1.25rem;
-  }
-
-  .p-dataview .p-paginator-top {
-    border-width: 1px 0 1px 0;
-    border-radius: 0;
-  }
-  .p-dataview .p-paginator-bottom {
-    border-width: 0 0 1px 0;
-    border-radius: 0;
-  }
-  .p-dataview .p-dataview-header {
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.6);
-    border: 1px solid #304562;
-    border-width: 0 0 1px 0;
-    padding: 1rem 1rem;
-    font-weight: 600;
-  }
-  .p-dataview .p-dataview-content {
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border: 0 none;
-    padding: 0;
-  }
-  .p-dataview .p-dataview-footer {
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border: 1px solid #304562;
-    border-width: 0 0 1px 0;
-    padding: 1rem 1rem;
-    font-weight: 600;
-    border-bottom-left-radius: 3px;
-    border-bottom-right-radius: 3px;
-  }
-  .p-dataview .p-dataview-loading-icon {
-    font-size: 2rem;
-  }
-  .p-dataview .p-dataview-emptymessage {
-    padding: 1rem;
-  }
-
-  .p-column-filter-row .p-column-filter-menu-button,
-.p-column-filter-row .p-column-filter-clear-button {
-    margin-left: 0.5rem;
-  }
-
-  .p-column-filter-menu-button {
-    width: 2rem;
-    height: 2rem;
-    color: rgba(255, 255, 255, 0.6);
-    border: 0 none;
-    background: transparent;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-column-filter-menu-button:hover {
-    color: rgba(255, 255, 255, 0.87);
-    border-color: transparent;
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
-    background: rgba(100, 181, 246, 0.16);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-column-filter-menu-button:focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-
-  .p-column-filter-clear-button {
-    width: 2rem;
-    height: 2rem;
-    color: rgba(255, 255, 255, 0.6);
-    border: 0 none;
-    background: transparent;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-column-filter-clear-button:hover {
-    color: rgba(255, 255, 255, 0.87);
-    border-color: transparent;
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-column-filter-clear-button:focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-
-  .p-column-filter-overlay {
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border: 1px solid #304562;
-    border-radius: 3px;
-    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-    min-width: 12.5rem;
-  }
-  .p-column-filter-overlay .p-column-filter-row-items {
-    padding: 0.5rem 0;
-  }
-  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
-    margin: 0;
-    padding: 0.5rem 1rem;
-    border: 0 none;
-    color: rgba(255, 255, 255, 0.87);
-    background: transparent;
-    transition: box-shadow 0.2s;
-    border-radius: 0;
-  }
-  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(100, 181, 246, 0.16);
-  }
-  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #93cbf9;
-  }
-  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
-    border-top: 1px solid #304562;
-    margin: 0.25rem 0;
-  }
-
-  .p-column-filter-overlay-menu .p-column-filter-operator {
-    padding: 0.5rem 1rem;
-    border-bottom: 0 none;
-    color: rgba(255, 255, 255, 0.87);
-    background: #1f2d40;
-    margin: 0;
-    border-top-right-radius: 3px;
-    border-top-left-radius: 3px;
-  }
-  .p-column-filter-overlay-menu .p-column-filter-constraint {
-    padding: 1rem;
-    border-bottom: 1px solid #304562;
-  }
-  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
-    margin-bottom: 0.5rem;
-  }
-  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button {
-    margin-top: 0.5rem;
-  }
-  .p-column-filter-overlay-menu .p-column-filter-constraint:last-child {
-    border-bottom: 0 none;
-  }
-  .p-column-filter-overlay-menu .p-column-filter-add-rule {
-    padding: 0.5rem 1rem;
-  }
-  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
-    padding: 1rem;
-  }
-
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-bottom: 0.5rem;
-  }
-  .p-orderlist .p-orderlist-header {
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border: 1px solid #304562;
-    padding: 1rem;
-    border-bottom: 0 none;
-    border-top-right-radius: 3px;
-    border-top-left-radius: 3px;
-  }
-  .p-orderlist .p-orderlist-header .p-orderlist-title {
-    font-weight: 600;
-  }
-  .p-orderlist .p-orderlist-filter-container {
-    padding: 1rem;
-    background: #1f2d40;
-    border: 1px solid #304562;
-    border-bottom: 0 none;
-  }
-  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
-    padding-right: 1.5rem;
-  }
-  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
-    right: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-orderlist .p-orderlist-list {
-    border: 1px solid #304562;
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    padding: 0.5rem 0;
-    border-bottom-right-radius: 3px;
-    border-bottom-left-radius: 3px;
-    outline: 0 none;
-  }
-  .p-orderlist .p-orderlist-list .p-orderlist-item {
-    padding: 0.5rem 1rem;
-    margin: 0;
-    border: 0 none;
-    color: rgba(255, 255, 255, 0.87);
-    background: transparent;
-    transition: box-shadow 0.2s;
-  }
-  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.09);
-  }
-  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(100, 181, 246, 0.16);
-  }
-  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
-    background: rgba(100, 181, 246, 0.24);
-  }
-  .p-orderlist .p-orderlist-list .p-orderlist-empty-message {
-    padding: 0.5rem 1rem;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-orderlist .p-orderlist-list:not(.cdk-drop-list-dragging) .p-orderlist-item:not(.p-highlight):hover {
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
-    background: rgba(255, 255, 255, 0.01);
-  }
-  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
-    background: rgba(255, 255, 255, 0.03);
-  }
-
-  .p-orderlist-item.cdk-drag-preview {
-    padding: 0.5rem 1rem;
-    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-    border: 0 none;
-    color: rgba(255, 255, 255, 0.87);
-    background: #1f2d40;
-    margin: 0;
-  }
-
-  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-organizationchart .p-organizationchart-node-content.p-highlight {
-    background: rgba(100, 181, 246, 0.16);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
-    color: rgba(12, 120, 207, 0.16);
-  }
-  .p-organizationchart .p-organizationchart-line-down {
-    background: rgba(255, 255, 255, 0.6);
-  }
-  .p-organizationchart .p-organizationchart-line-left {
-    border-right: 1px solid #304562;
-    border-color: rgba(255, 255, 255, 0.6);
-  }
-  .p-organizationchart .p-organizationchart-line-top {
-    border-top: 1px solid #304562;
-    border-color: rgba(255, 255, 255, 0.6);
-  }
-  .p-organizationchart .p-organizationchart-node-content {
-    border: 1px solid #304562;
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    padding: 1rem;
-  }
-  .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
-    background: inherit;
-    color: inherit;
-    border-radius: 50%;
-  }
-  .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-
-  .p-paginator {
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.6);
-    border: solid #304562;
-    border-width: 1px;
-    padding: 0.5rem 1rem;
-    border-radius: 3px;
-  }
-  .p-paginator .p-paginator-first,
-.p-paginator .p-paginator-prev,
-.p-paginator .p-paginator-next,
-.p-paginator .p-paginator-last {
-    background-color: transparent;
-    border: 0 none;
-    color: rgba(255, 255, 255, 0.6);
-    min-width: 2.286em;
-    height: 2.286em;
-    margin: 0.143rem;
-    transition: box-shadow 0.2s;
-    border-radius: 3px;
-  }
-  .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
-.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
-.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
-.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
-    background: rgba(255, 255, 255, 0.03);
-    border-color: transparent;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-paginator .p-paginator-first {
-    border-top-left-radius: 3px;
-    border-bottom-left-radius: 3px;
-  }
-  .p-paginator .p-paginator-last {
-    border-top-right-radius: 3px;
-    border-bottom-right-radius: 3px;
-  }
-  .p-paginator .p-dropdown {
-    margin-left: 0.5rem;
-    margin-right: 0.5rem;
-    height: 2.286em;
-  }
-  .p-paginator .p-dropdown .p-dropdown-label {
-    padding-right: 0;
-  }
-  .p-paginator .p-paginator-page-input {
-    margin-left: 0.5rem;
-    margin-right: 0.5rem;
-  }
-  .p-paginator .p-paginator-page-input .p-inputtext {
-    max-width: 2.286em;
-  }
-  .p-paginator .p-paginator-current {
-    background-color: transparent;
-    border: 0 none;
-    color: rgba(255, 255, 255, 0.6);
-    min-width: 2.286em;
-    height: 2.286em;
-    margin: 0.143rem;
-    padding: 0 0.5rem;
-  }
-  .p-paginator .p-paginator-pages .p-paginator-page {
-    background-color: transparent;
-    border: 0 none;
-    color: rgba(255, 255, 255, 0.6);
-    min-width: 2.286em;
-    height: 2.286em;
-    margin: 0.143rem;
-    transition: box-shadow 0.2s;
-    border-radius: 3px;
-  }
-  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
-    background: rgba(100, 181, 246, 0.16);
-    border-color: rgba(100, 181, 246, 0.16);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
-    background: rgba(255, 255, 255, 0.03);
-    border-color: transparent;
-    color: rgba(255, 255, 255, 0.87);
-  }
-
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-bottom: 0.5rem;
-  }
-  .p-picklist .p-picklist-header {
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border: 1px solid #304562;
-    padding: 1rem;
-    border-bottom: 0 none;
-    border-top-right-radius: 3px;
-    border-top-left-radius: 3px;
-  }
-  .p-picklist .p-picklist-header .p-picklist-title {
-    font-weight: 600;
-  }
-  .p-picklist .p-picklist-filter-container {
-    padding: 1rem;
-    background: #1f2d40;
-    border: 1px solid #304562;
-    border-bottom: 0 none;
-  }
-  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
-    padding-right: 1.5rem;
-  }
-  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
-    right: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-picklist .p-picklist-list {
-    border: 1px solid #304562;
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    padding: 0.5rem 0;
-    border-bottom-right-radius: 3px;
-    border-bottom-left-radius: 3px;
-    outline: 0 none;
-  }
-  .p-picklist .p-picklist-list .p-picklist-item {
-    padding: 0.5rem 1rem;
-    margin: 0;
-    border: 0 none;
-    color: rgba(255, 255, 255, 0.87);
-    background: transparent;
-    transition: box-shadow 0.2s;
-  }
-  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.09);
-  }
-  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(100, 181, 246, 0.16);
-  }
-  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
-    background: rgba(100, 181, 246, 0.24);
-  }
-  .p-picklist .p-picklist-list .p-picklist-empty-message {
-    padding: 0.5rem 1rem;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-picklist .p-picklist-list:not(.cdk-drop-list-dragging) .p-picklist-item:not(.p-highlight):hover {
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) {
-    background: rgba(255, 255, 255, 0.01);
-  }
-  .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover {
-    background: rgba(255, 255, 255, 0.03);
-  }
-
-  .p-picklist-item.cdk-drag-preview {
-    padding: 0.5rem 1rem;
-    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-    border: 0 none;
-    color: rgba(255, 255, 255, 0.87);
-    background: #1f2d40;
-    margin: 0;
-  }
-
-  .p-timeline .p-timeline-event-marker {
-    border: 2px solid #64B5F6;
-    border-radius: 50%;
-    width: 1rem;
-    height: 1rem;
-    background-color: #1f2d40;
-  }
-  .p-timeline .p-timeline-event-connector {
-    background-color: #304562;
-  }
-  .p-timeline.p-timeline-vertical .p-timeline-event-opposite,
-.p-timeline.p-timeline-vertical .p-timeline-event-content {
-    padding: 0 1rem;
-  }
-  .p-timeline.p-timeline-vertical .p-timeline-event-connector {
-    width: 2px;
-  }
-  .p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
-.p-timeline.p-timeline-horizontal .p-timeline-event-content {
-    padding: 1rem 0;
-  }
-  .p-timeline.p-timeline-horizontal .p-timeline-event-connector {
-    height: 2px;
-  }
-
-  .p-tree {
-    border: 1px solid #304562;
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    padding: 1rem;
-    border-radius: 3px;
-  }
-  .p-tree .p-tree-container .p-treenode {
-    padding: 0.143rem;
-    outline: 0 none;
-  }
-  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #93cbf9;
-  }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content {
-    border-radius: 3px;
-    transition: box-shadow 0.2s;
-    padding: 0;
-  }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
-    margin-right: 0.5rem;
-    width: 2rem;
-    height: 2rem;
-    color: rgba(255, 255, 255, 0.6);
-    border: 0 none;
-    background: transparent;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover {
-    color: rgba(255, 255, 255, 0.87);
-    border-color: transparent;
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
-    margin-right: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
-    margin-right: 0.5rem;
-  }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
-    background: rgba(100, 181, 246, 0.16);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler,
-.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover,
-.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-tree .p-tree-filter-container {
-    margin-bottom: 0.5rem;
-  }
-  .p-tree .p-tree-filter-container .p-tree-filter {
-    width: 100%;
-    padding-right: 1.5rem;
-  }
-  .p-tree .p-tree-filter-container .p-tree-filter-icon {
-    right: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-tree .p-treenode-children {
-    padding: 0 0 0 1rem;
-  }
-  .p-tree .p-tree-loading-icon {
-    font-size: 2rem;
-  }
-  .p-tree .p-tree-loading-icon.p-icon {
-    width: 2rem;
-    height: 2rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background-color: rgba(35, 150, 242, 0.16);
-  }
-  .p-tree.p-tree-horizontal .p-treenode .p-treenode-content {
-    border-radius: 3px;
-    border: 1px solid #304562;
-    background-color: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    padding: 0;
-    transition: box-shadow 0.2s;
-  }
-  .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-highlight {
-    background-color: rgba(100, 181, 246, 0.16);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-highlight .p-treenode-icon {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-tree.p-tree-horizontal .p-treenode .p-treenode-content .p-tree-toggler {
-    margin-right: 0.5rem;
-  }
-  .p-tree.p-tree-horizontal .p-treenode .p-treenode-content .p-treenode-icon {
-    color: rgba(255, 255, 255, 0.6);
-    margin-right: 0.5rem;
-  }
-  .p-tree.p-tree-horizontal .p-treenode .p-treenode-content .p-checkbox {
-    margin-right: 0.5rem;
-  }
-  .p-tree.p-tree-horizontal .p-treenode .p-treenode-content .p-treenode-label:not(.p-highlight):hover {
-    background-color: inherit;
-    color: inherit;
-  }
-  .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-tree.p-tree-horizontal .p-treenode .p-treenode-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-
-  .p-treetable .p-paginator-top {
-    border-width: 1px 0 1px 0;
-    border-radius: 0;
-  }
-  .p-treetable .p-paginator-bottom {
-    border-width: 0 0 1px 0;
-    border-radius: 0;
-  }
-  .p-treetable .p-treetable-header {
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.6);
-    border: 1px solid #304562;
-    border-width: 0 0 1px 0;
-    padding: 1rem 1rem;
-    font-weight: 600;
-  }
-  .p-treetable .p-treetable-footer {
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border: 1px solid #304562;
-    border-width: 0 0 1px 0;
-    padding: 1rem 1rem;
-    font-weight: 600;
-  }
-  .p-treetable .p-treetable-thead > tr > th {
-    text-align: left;
-    padding: 1rem 1rem;
-    border: 1px solid #304562;
-    border-width: 0 0 1px 0;
-    font-weight: 600;
-    color: rgba(255, 255, 255, 0.87);
-    background: #1f2d40;
-    transition: box-shadow 0.2s;
-  }
-  .p-treetable .p-treetable-tfoot > tr > td {
-    text-align: left;
-    padding: 1rem 1rem;
-    border: 1px solid #304562;
-    border-width: 0 0 1px 0;
-    font-weight: 600;
-    color: rgba(255, 255, 255, 0.87);
-    background: #1f2d40;
-  }
-  .p-treetable .p-sortable-column {
-    outline-color: #93cbf9;
-  }
-  .p-treetable .p-sortable-column .p-sortable-column-icon {
-    color: rgba(255, 255, 255, 0.6);
-    margin-left: 0.5rem;
-  }
-  .p-treetable .p-sortable-column .p-sortable-column-badge {
-    border-radius: 50%;
-    height: 1.143rem;
-    min-width: 1.143rem;
-    line-height: 1.143rem;
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(100, 181, 246, 0.16);
-    margin-left: 0.5rem;
-  }
-  .p-treetable .p-sortable-column:not(.p-highlight):hover {
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-treetable .p-sortable-column.p-highlight {
-    background: #1f2d40;
-    color: #64B5F6;
-  }
-  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
-    color: #64B5F6;
-  }
-  .p-treetable .p-treetable-tbody > tr {
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    transition: box-shadow 0.2s;
-  }
-  .p-treetable .p-treetable-tbody > tr > td {
-    text-align: left;
-    border: 1px solid #304562;
-    border-width: 0 0 1px 0;
-    padding: 1rem 1rem;
-  }
-  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
-    width: 2rem;
-    height: 2rem;
-    color: rgba(255, 255, 255, 0.6);
-    border: 0 none;
-    background: transparent;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-    margin-right: 0.5rem;
-  }
-  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
-    color: rgba(255, 255, 255, 0.87);
-    border-color: transparent;
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon {
-    width: 2rem;
-    height: 2rem;
-  }
-  .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox {
-    margin-right: 0.5rem;
-  }
-  .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-treetable .p-treetable-tbody > tr:focus-visible {
-    outline: 0.15rem solid #93cbf9;
-    outline-offset: -0.15rem;
-  }
-  .p-treetable .p-treetable-tbody > tr.p-highlight {
-    background: rgba(100, 181, 246, 0.16);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-treetable .p-column-resizer-helper {
-    background: #64B5F6;
-  }
-  .p-treetable .p-treetable-scrollable-header,
-.p-treetable .p-treetable-scrollable-footer {
-    background: #1f2d40;
-  }
-  .p-treetable .p-treetable-loading-icon {
-    font-size: 2rem;
-  }
-  .p-treetable .p-treetable-loading-icon.p-icon {
-    width: 2rem;
-    height: 2rem;
-  }
-  .p-treetable.p-treetable-gridlines .p-datatable-header {
-    border-width: 1px 1px 0 1px;
-  }
-  .p-treetable.p-treetable-gridlines .p-treetable-footer {
-    border-width: 0 1px 1px 1px;
-  }
-  .p-treetable.p-treetable-gridlines .p-treetable-top {
-    border-width: 0 1px 0 1px;
-  }
-  .p-treetable.p-treetable-gridlines .p-treetable-bottom {
-    border-width: 0 1px 1px 1px;
-  }
-  .p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th {
-    border-width: 1px;
-  }
-  .p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td {
-    border-width: 1px;
-  }
-  .p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td {
-    border-width: 1px;
-  }
-  .p-treetable.p-treetable-sm .p-treetable-header {
-    padding: 0.875rem 0.875rem;
-  }
-  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
-    padding: 0.5rem 0.5rem;
-  }
-  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
-    padding: 0.5rem 0.5rem;
-  }
-  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
-    padding: 0.5rem 0.5rem;
-  }
-  .p-treetable.p-treetable-sm .p-treetable-footer {
-    padding: 0.5rem 0.5rem;
-  }
-  .p-treetable.p-treetable-lg .p-treetable-header {
-    padding: 1.25rem 1.25rem;
-  }
-  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
-    padding: 1.25rem 1.25rem;
-  }
-  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
-    padding: 1.25rem 1.25rem;
-  }
-  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
-    padding: 1.25rem 1.25rem;
-  }
-  .p-treetable.p-treetable-lg .p-treetable-footer {
-    padding: 1.25rem 1.25rem;
-  }
-
-  .p-virtualscroller .p-virtualscroller-header {
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.6);
-    border: 1px solid #304562;
-    border-width: 0 0 1px 0;
-    padding: 1rem 1rem;
-    font-weight: 600;
-  }
-  .p-virtualscroller .p-virtualscroller-content {
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border: 0 none;
-    padding: 0;
-  }
-  .p-virtualscroller .p-virtualscroller-footer {
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border: 1px solid #304562;
-    border-width: 0 0 1px 0;
-    padding: 1rem 1rem;
-    font-weight: 600;
-    border-bottom-left-radius: 3px;
-    border-bottom-right-radius: 3px;
-  }
-
-  .p-accordion .p-accordion-header .p-accordion-header-link {
-    padding: 1rem;
-    border: 1px solid #304562;
-    color: rgba(255, 255, 255, 0.87);
-    background: #1f2d40;
-    font-weight: 600;
-    border-radius: 3px;
-    transition: box-shadow 0.2s;
-  }
-  .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon {
-    margin-right: 0.5rem;
-  }
-  .p-accordion .p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 1px #93cbf9;
-  }
-  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
-    background: rgba(255, 255, 255, 0.03);
-    border-color: #304562;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
-    background: #1f2d40;
-    border-color: #304562;
-    color: rgba(255, 255, 255, 0.87);
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link {
-    border-color: #304562;
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-accordion .p-accordion-content {
-    padding: 1rem;
-    border: 1px solid #304562;
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border-top: 0;
-    border-top-right-radius: 0;
-    border-top-left-radius: 0;
-    border-bottom-right-radius: 3px;
-    border-bottom-left-radius: 3px;
-  }
-  .p-accordion p-accordiontab .p-accordion-tab {
-    margin-bottom: 0;
-  }
-  .p-accordion p-accordiontab .p-accordion-header .p-accordion-header-link {
-    border-radius: 0;
-  }
-  .p-accordion p-accordiontab .p-accordion-content {
-    border-radius: 0;
-  }
-  .p-accordion p-accordiontab:not(:first-child) .p-accordion-header .p-accordion-header-link {
-    border-top: 0 none;
-  }
-  .p-accordion p-accordiontab:not(:first-child) .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link, .p-accordion p-accordiontab:not(:first-child) .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link {
-    border-top: 0 none;
-  }
-  .p-accordion p-accordiontab:first-child .p-accordion-header .p-accordion-header-link {
-    border-top-right-radius: 3px;
-    border-top-left-radius: 3px;
-  }
-  .p-accordion p-accordiontab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-header-link {
-    border-bottom-right-radius: 3px;
-    border-bottom-left-radius: 3px;
-  }
-  .p-accordion p-accordiontab:last-child .p-accordion-content {
-    border-bottom-right-radius: 3px;
-    border-bottom-left-radius: 3px;
-  }
-
-  .p-card {
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-    border-radius: 3px;
-  }
-  .p-card .p-card-body {
-    padding: 1rem;
-  }
-  .p-card .p-card-title {
-    font-size: 1.5rem;
-    font-weight: 700;
-    margin-bottom: 0.5rem;
-  }
-  .p-card .p-card-subtitle {
-    font-weight: 700;
-    margin-bottom: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-card .p-card-content {
-    padding: 1rem 0;
-  }
-  .p-card .p-card-footer {
-    padding: 1rem 0 0 0;
-  }
-
-  .p-divider .p-divider-content {
-    background-color: #1f2d40;
-  }
-  .p-divider.p-divider-horizontal {
-    margin: 1rem 0;
-    padding: 0 1rem;
-  }
-  .p-divider.p-divider-horizontal:before {
-    border-top: 1px #304562;
-  }
-  .p-divider.p-divider-horizontal .p-divider-content {
-    padding: 0 0.5rem;
-  }
-  .p-divider.p-divider-vertical {
-    margin: 0 1rem;
-    padding: 1rem 0;
-  }
-  .p-divider.p-divider-vertical:before {
-    border-left: 1px #304562;
-  }
-  .p-divider.p-divider-vertical .p-divider-content {
-    padding: 0.5rem 0;
-  }
-
-  .p-fieldset {
-    border: 1px solid #304562;
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border-radius: 3px;
-  }
-  .p-fieldset .p-fieldset-legend {
-    padding: 1rem;
-    border: 1px solid #304562;
-    color: rgba(255, 255, 255, 0.87);
-    background: #1f2d40;
-    font-weight: 600;
-    border-radius: 3px;
-  }
-  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend {
-    padding: 0;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a {
-    padding: 1rem;
-    color: rgba(255, 255, 255, 0.87);
-    border-radius: 3px;
-    transition: box-shadow 0.2s;
-  }
-  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler {
-    margin-right: 0.5rem;
-  }
-  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
-    background: rgba(255, 255, 255, 0.03);
-    border-color: #304562;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-fieldset .p-fieldset-content {
-    padding: 1rem;
-  }
-
-  .p-panel .p-panel-header {
-    border: 1px solid #304562;
-    padding: 1rem;
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border-top-right-radius: 3px;
-    border-top-left-radius: 3px;
-  }
-  .p-panel .p-panel-header .p-panel-title {
-    font-weight: 600;
-  }
-  .p-panel .p-panel-header .p-panel-header-icon {
-    width: 2rem;
-    height: 2rem;
-    color: rgba(255, 255, 255, 0.6);
-    border: 0 none;
-    background: transparent;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-panel .p-panel-header .p-panel-header-icon:enabled:hover {
-    color: rgba(255, 255, 255, 0.87);
-    border-color: transparent;
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-  .p-panel.p-panel-toggleable .p-panel-header {
-    padding: 0.5rem 1rem;
-  }
-  .p-panel .p-panel-content {
-    padding: 1rem;
-    border: 1px solid #304562;
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border-top: 0 none;
-  }
-  .p-panel .p-panel-content:last-child {
-    border-bottom-right-radius: 3px;
-    border-bottom-left-radius: 3px;
-  }
-  .p-panel .p-panel-footer {
-    padding: 0.5rem 1rem;
-    border: 1px solid #304562;
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border-bottom-right-radius: 3px;
-    border-bottom-left-radius: 3px;
-    border-top: 0 none;
-  }
-  .p-panel .p-panel-icons-end {
-    order: 2;
-    margin-left: auto;
-  }
-  .p-panel .p-panel-icons-start {
-    order: 0;
-    margin-right: 0.5rem;
-  }
-  .p-panel .p-panel-icons-center {
-    order: 2;
-    width: 100%;
-    text-align: center;
-  }
-
-  .p-scrollpanel .p-scrollpanel-bar {
-    background: #304562;
-    border: 0 none;
-  }
-
-  .p-splitter {
-    border: 1px solid #304562;
-    background: #1f2d40;
-    border-radius: 3px;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-splitter .p-splitter-gutter {
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
-    background: #304562;
-  }
-  .p-splitter .p-splitter-gutter-resizing {
-    background: #304562;
-  }
-
-  .p-tabview .p-tabview-nav-content {
-    scroll-padding-inline: 2.357rem;
-  }
-  .p-tabview .p-tabview-nav {
-    background: transparent;
-    border: 1px solid #304562;
-    border-width: 0 0 2px 0;
-  }
-  .p-tabview .p-tabview-nav li {
-    margin-right: 0;
-  }
-  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
-    border: solid #304562;
-    border-width: 0 0 2px 0;
-    border-color: transparent transparent #304562 transparent;
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.6);
-    padding: 1rem;
-    font-weight: 600;
-    border-top-right-radius: 3px;
-    border-top-left-radius: 3px;
-    transition: box-shadow 0.2s;
-    margin: 0 0 -2px 0;
-  }
-  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 1px #93cbf9;
-  }
-  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
-    background: #1f2d40;
-    border-color: #64B5F6;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
-    background: #1f2d40;
-    border-color: #64B5F6;
-    color: #64B5F6;
-  }
-  .p-tabview .p-tabview-left-icon {
-    margin-right: 0.5rem;
-  }
-  .p-tabview .p-tabview-right-icon {
-    margin-left: 0.5rem;
-  }
-  .p-tabview .p-tabview-close {
-    margin-left: 0.5rem;
-  }
-  .p-tabview .p-tabview-nav-btn.p-link {
-    background: #1f2d40;
-    color: #64B5F6;
-    width: 2.357rem;
-    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-    border-radius: 0;
-  }
-  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 1px #93cbf9;
-  }
-  .p-tabview .p-tabview-panels {
-    background: #1f2d40;
-    padding: 1rem;
-    border: 0 none;
-    color: rgba(255, 255, 255, 0.87);
-    border-bottom-right-radius: 3px;
-    border-bottom-left-radius: 3px;
-  }
-
-  .p-toolbar {
-    background: #1f2d40;
-    border: 1px solid #304562;
-    padding: 1rem;
-    border-radius: 3px;
-    gap: 0.5rem;
-  }
-  .p-toolbar .p-toolbar-separator {
-    margin: 0 0.5rem;
-  }
-
-  .p-confirm-popup {
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border: 1px solid #304562;
-    border-radius: 3px;
-    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
-  }
-  .p-confirm-popup .p-confirm-popup-content {
-    padding: 1rem;
-  }
-  .p-confirm-popup .p-confirm-popup-footer {
-    text-align: right;
-    padding: 0.5rem 1rem;
-  }
-  .p-confirm-popup .p-confirm-popup-footer button {
-    margin: 0 0.5rem 0 0;
-    width: auto;
-  }
-  .p-confirm-popup .p-confirm-popup-footer button:last-child {
-    margin: 0;
-  }
-  .p-confirm-popup:after {
-    border: solid transparent;
-    border-color: rgba(31, 45, 64, 0);
-    border-bottom-color: #1f2d40;
-  }
-  .p-confirm-popup:before {
-    border: solid transparent;
-    border-color: rgba(48, 69, 98, 0);
-    border-bottom-color: #304562;
-  }
-  .p-confirm-popup.p-confirm-popup-flipped:after {
-    border-top-color: #1f2d40;
-  }
-  .p-confirm-popup.p-confirm-popup-flipped:before {
-    border-top-color: #304562;
-  }
-  .p-confirm-popup .p-confirm-popup-icon {
-    font-size: 1.5rem;
-  }
-  .p-confirm-popup .p-confirm-popup-icon.p-icon {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-  .p-confirm-popup .p-confirm-popup-message {
-    margin-left: 1rem;
-  }
-
-  .p-dialog {
-    border-radius: 3px;
-    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
-    border: 1px solid #304562;
-  }
-  .p-dialog .p-dialog-header {
-    border-bottom: 0 none;
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    padding: 1.5rem;
-    border-top-right-radius: 3px;
-    border-top-left-radius: 3px;
-  }
-  .p-dialog .p-dialog-header .p-dialog-title {
-    font-weight: 600;
-    font-size: 1.25rem;
-  }
-  .p-dialog .p-dialog-header .p-dialog-header-icon {
-    width: 2rem;
-    height: 2rem;
-    color: rgba(255, 255, 255, 0.6);
-    border: 0 none;
-    background: transparent;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-    margin-right: 0.5rem;
-  }
-  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
-    color: rgba(255, 255, 255, 0.87);
-    border-color: transparent;
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
-    margin-right: 0;
-  }
-  .p-dialog .p-dialog-content {
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    padding: 0 1.5rem 2rem 1.5rem;
-  }
-  .p-dialog .p-dialog-content:last-of-type {
-    border-bottom-right-radius: 3px;
-    border-bottom-left-radius: 3px;
-  }
-  .p-dialog .p-dialog-footer {
-    border-top: 0 none;
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    padding: 0 1.5rem 1.5rem 1.5rem;
-    text-align: right;
-    border-bottom-right-radius: 3px;
-    border-bottom-left-radius: 3px;
-  }
-  .p-dialog .p-dialog-footer button {
-    margin: 0 0.5rem 0 0;
-    width: auto;
-  }
-  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
-    font-size: 2rem;
-  }
-  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
-    width: 2rem;
-    height: 2rem;
-  }
-  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
-    margin-left: 1rem;
-  }
-
-  .p-overlaypanel {
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border: 1px solid #304562;
-    border-radius: 3px;
-    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
-  }
-  .p-overlaypanel .p-overlaypanel-content {
-    padding: 1rem;
-  }
-  .p-overlaypanel .p-overlaypanel-close {
-    background: #64B5F6;
-    color: #212529;
-    width: 2rem;
-    height: 2rem;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-    border-radius: 50%;
-    position: absolute;
-    top: -1rem;
-    right: -1rem;
-  }
-  .p-overlaypanel .p-overlaypanel-close:enabled:hover {
-    background: #43a5f4;
-    color: #212529;
-  }
-  .p-overlaypanel:after {
-    border: solid transparent;
-    border-color: rgba(31, 45, 64, 0);
-    border-bottom-color: #1f2d40;
-  }
-  .p-overlaypanel:before {
-    border: solid transparent;
-    border-color: rgba(48, 69, 98, 0);
-    border-bottom-color: #2e425d;
-  }
-  .p-overlaypanel.p-overlaypanel-flipped:after {
-    border-top-color: #1f2d40;
-  }
-  .p-overlaypanel.p-overlaypanel-flipped:before {
-    border-top-color: #304562;
-  }
-
-  .p-sidebar {
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border: 1px solid #304562;
-    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
-  }
-  .p-sidebar .p-sidebar-header {
-    padding: 1rem;
-  }
-  .p-sidebar .p-sidebar-header .p-sidebar-close,
-.p-sidebar .p-sidebar-header .p-sidebar-icon {
-    width: 2rem;
-    height: 2rem;
-    color: rgba(255, 255, 255, 0.6);
-    border: 0 none;
-    background: transparent;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
-.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
-    color: rgba(255, 255, 255, 0.87);
-    border-color: transparent;
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
-.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-  .p-sidebar .p-sidebar-header + .p-sidebar-content {
-    padding-top: 0;
-  }
-  .p-sidebar .p-sidebar-content {
-    padding: 1rem;
-  }
-  .p-sidebar .p-sidebar-footer {
-    padding: 1rem;
-  }
-
-  .p-tooltip .p-tooltip-text {
-    background: #304562;
-    color: rgba(255, 255, 255, 0.87);
-    padding: 0.5rem 0.5rem;
-    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-    border-radius: 3px;
-  }
-  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
-    border-right-color: #304562;
-  }
-  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
-    border-left-color: #304562;
-  }
-  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
-    border-top-color: #304562;
-  }
-  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
-    border-bottom-color: #304562;
-  }
-
-  .p-fileupload .p-fileupload-buttonbar {
-    background: #1f2d40;
-    padding: 1rem;
-    border: 1px solid #304562;
-    color: rgba(255, 255, 255, 0.87);
-    border-bottom: 0 none;
-    border-top-right-radius: 3px;
-    border-top-left-radius: 3px;
-  }
-  .p-fileupload .p-fileupload-buttonbar .p-button {
-    margin-right: 0.5rem;
-  }
-  .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-  .p-fileupload .p-fileupload-content {
-    background: #1f2d40;
-    padding: 2rem 1rem;
-    border: 1px solid #304562;
-    color: rgba(255, 255, 255, 0.87);
-    border-bottom-right-radius: 3px;
-    border-bottom-left-radius: 3px;
-  }
-  .p-fileupload .p-fileupload-content.p-fileupload-highlight {
-    border-color: 1px dashed #64B5F6;
-    border-style: dashed;
-    background-color: rgba(100, 181, 246, 0.16);
-  }
-  .p-fileupload .p-progressbar {
-    height: 0.25rem;
-  }
-  .p-fileupload .p-fileupload-row > div {
-    padding: 1rem 1rem;
-  }
-  .p-fileupload.p-fileupload-advanced .p-message {
-    margin-top: 0;
-  }
-
-  .p-fileupload-choose:not(.p-disabled):hover {
-    background: #43a5f4;
-    color: #212529;
-    border-color: #43a5f4;
-  }
-  .p-fileupload-choose:not(.p-disabled):active {
-    background: #2396f2;
-    color: #212529;
-    border-color: #2396f2;
-  }
-
-  .p-breadcrumb {
-    background: #1f2d40;
-    border: 1px solid #304562;
-    border-radius: 3px;
-    padding: 1rem;
-  }
-  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
-    transition: box-shadow 0.2s;
-    border-radius: 3px;
-  }
-  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
-    margin: 0 0.5rem 0 0.5rem;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
-    color: rgba(255, 255, 255, 0.6);
-  }
-
-  .p-contextmenu {
-    padding: 0.25rem 0;
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border: 1px solid #304562;
-    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-    border-radius: 3px;
-    width: 12.5rem;
-  }
-  .p-contextmenu .p-contextmenu-root-list {
-    outline: 0 none;
-  }
-  .p-contextmenu .p-submenu-list {
-    padding: 0.25rem 0;
-    background: #1f2d40;
-    border: 1px solid #304562;
-    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-    border-radius: 3px;
-  }
-  .p-contextmenu .p-menuitem > .p-menuitem-content {
-    color: rgba(255, 255, 255, 0.87);
-    transition: box-shadow 0.2s;
-    border-radius: 0;
-  }
-  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
-    color: rgba(255, 255, 255, 0.87);
-    padding: 0.75rem 1rem;
-    user-select: none;
-  }
-  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
-    color: rgba(255, 255, 255, 0.6);
-    margin-right: 0.5rem;
-  }
-  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
-    color: rgba(255, 255, 255, 0.87);
-    background: #17212f;
-  }
-  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
-    background: #17212f;
-  }
-  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.09);
-  }
-  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
-.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-contextmenu .p-menuitem-separator {
-    border-top: 1px solid #304562;
-    margin: 0.25rem 0;
-  }
-  .p-contextmenu .p-submenu-icon {
-    font-size: 0.875rem;
-  }
-  .p-contextmenu .p-submenu-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-
-  .p-dock .p-dock-list-container {
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    padding: 0.5rem 0.5rem;
-    border-radius: 0.5rem;
-  }
-  .p-dock .p-dock-list-container .p-dock-list {
-    outline: 0 none;
-  }
-  .p-dock .p-dock-item {
-    padding: 0.5rem;
-    border-radius: 3px;
-  }
-  .p-dock .p-dock-item.p-focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #93cbf9;
-  }
-  .p-dock .p-dock-link {
-    width: 4rem;
-    height: 4rem;
-  }
-  .p-dock.p-dock-top .p-dock-item-second-prev,
-.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
-.p-dock.p-dock-bottom .p-dock-item-second-next {
-    margin: 0 0.9rem;
-  }
-  .p-dock.p-dock-top .p-dock-item-prev,
-.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
-.p-dock.p-dock-bottom .p-dock-item-next {
-    margin: 0 1.3rem;
-  }
-  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
-    margin: 0 1.5rem;
-  }
-  .p-dock.p-dock-left .p-dock-item-second-prev,
-.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
-.p-dock.p-dock-right .p-dock-item-second-next {
-    margin: 0.9rem 0;
-  }
-  .p-dock.p-dock-left .p-dock-item-prev,
-.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
-.p-dock.p-dock-right .p-dock-item-next {
-    margin: 1.3rem 0;
-  }
-  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
-    margin: 1.5rem 0;
-  }
-
-  @media screen and (max-width: 960px) {
-    .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container {
-      overflow-x: auto;
-      width: 100%;
-    }
-    .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list {
-      margin: 0 auto;
-    }
-    .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container {
-      overflow-y: auto;
-      height: 100%;
-    }
-    .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list {
-      margin: auto 0;
-    }
-    .p-dock .p-dock-list .p-dock-item {
-      transform: none;
-      margin: 0;
-    }
-  }
-  .p-megamenu {
-    padding: 0.5rem;
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border: 1px solid #304562;
-    border-radius: 3px;
-  }
-  .p-megamenu .p-megamenu-root-list {
-    outline: 0 none;
-  }
-  .p-megamenu .p-menuitem > .p-menuitem-content {
-    color: rgba(255, 255, 255, 0.87);
-    transition: box-shadow 0.2s;
-    border-radius: 0;
-  }
-  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
-    color: rgba(255, 255, 255, 0.87);
-    padding: 0.75rem 1rem;
-    user-select: none;
-  }
-  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
-    color: rgba(255, 255, 255, 0.6);
-    margin-right: 0.5rem;
-  }
-  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
-    color: rgba(255, 255, 255, 0.87);
-    background: #17212f;
-  }
-  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
-    background: #17212f;
-  }
-  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.09);
-  }
-  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
-.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-megamenu .p-megamenu-panel {
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border: 1px solid #304562;
-    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-  }
-  .p-megamenu .p-submenu-header {
-    margin: 0;
-    padding: 0.75rem 1rem;
-    color: rgba(255, 255, 255, 0.87);
-    background: #1f2d40;
-    font-weight: 600;
-    border-top-right-radius: 3px;
-    border-top-left-radius: 3px;
-  }
-  .p-megamenu .p-submenu-list {
-    padding: 0.25rem 0;
-    width: 12.5rem;
-  }
-  .p-megamenu .p-submenu-list .p-menuitem-separator {
-    border-top: 1px solid #304562;
-    margin: 0.25rem 0;
-  }
-  .p-megamenu.p-megamenu-vertical {
-    width: 12.5rem;
-    padding: 0.25rem 0;
-  }
-  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
-    color: rgba(255, 255, 255, 0.87);
-    transition: box-shadow 0.2s;
-    border-radius: 3px;
-  }
-  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
-    padding: 0.75rem 1rem;
-    user-select: none;
-  }
-  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
-    color: rgba(255, 255, 255, 0.6);
-    margin-right: 0.5rem;
-  }
-  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-    color: rgba(255, 255, 255, 0.6);
-    margin-left: 0.5rem;
-  }
-  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
-.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
-    color: rgba(255, 255, 255, 0.87);
-  }
-
-  .p-menu {
-    padding: 0.25rem 0;
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border: 1px solid #304562;
-    border-radius: 3px;
-    width: 12.5rem;
-  }
-  .p-menu .p-menuitem > .p-menuitem-content {
-    color: rgba(255, 255, 255, 0.87);
-    transition: box-shadow 0.2s;
-    border-radius: 0;
-  }
-  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
-    color: rgba(255, 255, 255, 0.87);
-    padding: 0.75rem 1rem;
-    user-select: none;
-  }
-  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
-    color: rgba(255, 255, 255, 0.6);
-    margin-right: 0.5rem;
-  }
-  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
-    color: rgba(255, 255, 255, 0.87);
-    background: #17212f;
-  }
-  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
-    background: #17212f;
-  }
-  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.09);
-  }
-  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
-.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-menu.p-menu-overlay {
-    background: #1f2d40;
-    border: 1px solid #304562;
-    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-  }
-  .p-menu .p-submenu-header {
-    margin: 0;
-    padding: 0.75rem 1rem;
-    color: rgba(255, 255, 255, 0.87);
-    background: #1f2d40;
-    font-weight: 600;
-    border-top-right-radius: 0;
-    border-top-left-radius: 0;
-  }
-  .p-menu .p-menuitem-separator {
-    border-top: 1px solid #304562;
-    margin: 0.25rem 0;
-  }
-  .p-menu .p-menuitem-badge {
-    background: #64B5F6;
-    color: #212529;
-    font-size: 0.75rem;
-    font-weight: 700;
-    min-width: 1.5rem;
-    height: 1.5rem;
-    line-height: 1.5rem;
-    border-radius: 3px;
-    margin-left: 0.5rem;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-  }
-
-  .p-menubar {
-    padding: 0.5rem;
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border: 1px solid #304562;
-    border-radius: 3px;
-  }
-  .p-menubar .p-menubar-root-list {
-    outline: 0 none;
-  }
-  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
-    color: rgba(255, 255, 255, 0.87);
-    transition: box-shadow 0.2s;
-    border-radius: 3px;
-  }
-  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
-    padding: 0.75rem 1rem;
-    user-select: none;
-  }
-  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
-    color: rgba(255, 255, 255, 0.6);
-    margin-right: 0.5rem;
-  }
-  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-    color: rgba(255, 255, 255, 0.6);
-    margin-left: 0.5rem;
-  }
-  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
-.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-menubar .p-menuitem > .p-menuitem-content {
-    color: rgba(255, 255, 255, 0.87);
-    transition: box-shadow 0.2s;
-    border-radius: 0;
-  }
-  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
-    color: rgba(255, 255, 255, 0.87);
-    padding: 0.75rem 1rem;
-    user-select: none;
-  }
-  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
-    color: rgba(255, 255, 255, 0.6);
-    margin-right: 0.5rem;
-  }
-  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
-    color: rgba(255, 255, 255, 0.87);
-    background: #17212f;
-  }
-  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
-    background: #17212f;
-  }
-  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.09);
-  }
-  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
-.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-menubar .p-submenu-list {
-    padding: 0.25rem 0;
-    background: #1f2d40;
-    border: 1px solid #304562;
-    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-    width: 12.5rem;
-  }
-  .p-menubar .p-submenu-list .p-menuitem-separator {
-    border-top: 1px solid #304562;
-    margin: 0.25rem 0;
-  }
-  .p-menubar .p-submenu-list .p-submenu-icon {
-    font-size: 0.875rem;
-  }
-
-  @media screen and (max-width: 960px) {
-    .p-menubar {
-      position: relative;
-    }
-    .p-menubar .p-menubar-button {
-      display: flex;
-      width: 2rem;
-      height: 2rem;
-      color: rgba(255, 255, 255, 0.6);
-      border-radius: 50%;
-      transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-    }
-    .p-menubar .p-menubar-button:hover {
-      color: rgba(255, 255, 255, 0.87);
-      background: rgba(255, 255, 255, 0.03);
-    }
-    .p-menubar .p-menubar-button:focus {
-      outline: 0 none;
-      outline-offset: 0;
-      box-shadow: 0 0 0 1px #93cbf9;
-    }
-    .p-menubar .p-menubar-root-list {
-      position: absolute;
-      display: none;
-      padding: 0.25rem 0;
-      background: #1f2d40;
-      border: 1px solid #304562;
-      box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-      width: 100%;
-    }
-    .p-menubar .p-menubar-root-list .p-menuitem-separator {
-      border-top: 1px solid #304562;
-      margin: 0.25rem 0;
-    }
-    .p-menubar .p-menubar-root-list .p-submenu-icon {
-      font-size: 0.875rem;
-    }
-    .p-menubar .p-menubar-root-list .p-menuitem {
-      width: 100%;
-      position: static;
-    }
-    .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-      margin-left: auto;
-      transition: transform 0.2s;
-    }
-    .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
-      transform: rotate(-180deg);
-    }
-    .p-menubar .p-menubar-root-list .p-submenu-list {
-      width: 100%;
-      position: static;
-      box-shadow: none;
-      border: 0 none;
-    }
-    .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon {
-      transition: transform 0.2s;
-      transform: rotate(90deg);
-    }
-    .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
-      transform: rotate(-90deg);
-    }
-    .p-menubar .p-menubar-root-list .p-menuitem {
-      width: 100%;
-      position: static;
-    }
-    .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
-      padding-left: 2.25rem;
-    }
-    .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
-      padding-left: 3.75rem;
-    }
-    .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
-      padding-left: 5.25rem;
-    }
-    .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
-      padding-left: 6.75rem;
-    }
-    .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
-      padding-left: 8.25rem;
-    }
-    .p-menubar.p-menubar-mobile-active .p-menubar-root-list {
-      display: flex;
-      flex-direction: column;
-      top: 100%;
-      left: 0;
-      z-index: 1;
-    }
-  }
-  .p-panelmenu .p-panelmenu-header {
-    outline: 0 none;
-  }
-  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
-    border: 1px solid #304562;
-    color: rgba(255, 255, 255, 0.87);
-    background: #1f2d40;
-    border-radius: 3px;
-    transition: box-shadow 0.2s;
-  }
-  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action {
-    color: rgba(255, 255, 255, 0.87);
-    padding: 1rem;
-    font-weight: 600;
-  }
-  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon {
-    margin-right: 0.5rem;
-  }
-  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon {
-    margin-right: 0.5rem;
-  }
-  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 1px #93cbf9;
-  }
-  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
-    background: rgba(255, 255, 255, 0.03);
-    border-color: #304562;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
-    background: #1f2d40;
-    border-color: #304562;
-    color: rgba(255, 255, 255, 0.87);
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-    margin-bottom: 0;
-  }
-  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
-    border-color: #304562;
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-panelmenu .p-panelmenu-content {
-    padding: 0.25rem 0;
-    border: 1px solid #304562;
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border-top: 0;
-    border-top-right-radius: 0;
-    border-top-left-radius: 0;
-    border-bottom-right-radius: 3px;
-    border-bottom-left-radius: 3px;
-  }
-  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
-    outline: 0 none;
-  }
-  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
-    color: rgba(255, 255, 255, 0.87);
-    transition: box-shadow 0.2s;
-    border-radius: 0;
-  }
-  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
-    color: rgba(255, 255, 255, 0.87);
-    padding: 0.75rem 1rem;
-    user-select: none;
-  }
-  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
-    color: rgba(255, 255, 255, 0.6);
-    margin-right: 0.5rem;
-  }
-  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
-    color: rgba(255, 255, 255, 0.87);
-    background: #17212f;
-  }
-  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
-    background: #17212f;
-  }
-  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.09);
-  }
-  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
-.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-    margin-right: 0.5rem;
-  }
-  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
-    border-top: 1px solid #304562;
-    margin: 0.25rem 0;
-  }
-  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
-    padding: 0 0 0 1rem;
-  }
-  .p-panelmenu .p-panelmenu-panel {
-    margin-bottom: 0;
-  }
-  .p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
-    border-radius: 0;
-  }
-  .p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
-    border-radius: 0;
-  }
-  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
-    border-top: 0 none;
-  }
-  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
-    border-top: 0 none;
-  }
-  .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
-    border-top-right-radius: 3px;
-    border-top-left-radius: 3px;
-  }
-  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
-    border-bottom-right-radius: 3px;
-    border-bottom-left-radius: 3px;
-  }
-  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-content {
-    border-bottom-right-radius: 3px;
-    border-bottom-left-radius: 3px;
-  }
-
-  .p-slidemenu {
-    padding: 0.25rem 0;
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border: 1px solid #304562;
-    border-radius: 3px;
-    width: 12.5rem;
-  }
-  .p-slidemenu .p-slidemenu-root-list {
-    outline: 0 none;
-  }
-  .p-slidemenu .p-submenu-list {
-    outline: 0 none;
-  }
-  .p-slidemenu .p-menuitem > .p-menuitem-content {
-    color: rgba(255, 255, 255, 0.87);
-    transition: box-shadow 0.2s;
-    border-radius: 0;
-  }
-  .p-slidemenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
-    color: rgba(255, 255, 255, 0.87);
-    padding: 0.75rem 1rem;
-    user-select: none;
-  }
-  .p-slidemenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-slidemenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
-    color: rgba(255, 255, 255, 0.6);
-    margin-right: 0.5rem;
-  }
-  .p-slidemenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content {
-    color: rgba(255, 255, 255, 0.87);
-    background: #17212f;
-  }
-  .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
-    background: #17212f;
-  }
-  .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.09);
-  }
-  .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
-.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-slidemenu.p-slidemenu-overlay {
-    background: #1f2d40;
-    border: 1px solid #304562;
-    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-  }
-  .p-slidemenu .p-slidemenu-list {
-    padding: 0.25rem 0;
-    background: #1f2d40;
-    border: 1px solid #304562;
-    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-  }
-  .p-slidemenu .p-menuitem-separator {
-    border-top: 1px solid #304562;
-    margin: 0.25rem 0;
-  }
-  .p-slidemenu .p-slidemenu-icon {
-    font-size: 0.875rem;
-  }
-  .p-slidemenu .p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-slidemenu .p-slidemenu-backward {
-    padding: 0.75rem 1rem;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-slidemenu .p-slidemenu-backward:not(.p-disabled):focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 1px #93cbf9;
-  }
-  .p-slidemenu .p-menuitem-badge {
-    background: #64B5F6;
-    color: #212529;
-    font-size: 0.75rem;
-    font-weight: 700;
-    min-width: 1.5rem;
-    height: 1.5rem;
-    line-height: 1.5rem;
-    border-radius: 3px;
-    margin-left: 0.5rem;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-  }
-
-  .p-steps .p-steps-item .p-menuitem-link {
-    background: transparent;
-    transition: box-shadow 0.2s;
-    border-radius: 3px;
-    background: transparent;
-  }
-  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
-    color: rgba(255, 255, 255, 0.87);
-    border: 0 none;
-    background: transparent;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    z-index: 1;
-    border-radius: 50%;
-  }
-  .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
-    margin-top: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-  .p-steps .p-steps-item.p-highlight .p-steps-number {
-    background: rgba(100, 181, 246, 0.16);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-steps .p-steps-item.p-highlight .p-steps-title {
-    font-weight: 600;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-steps .p-steps-item:before {
-    content: " ";
-    border-top: 1px solid #304562;
-    width: 100%;
-    top: 50%;
-    left: 0;
-    display: block;
-    position: absolute;
-    margin-top: -1rem;
-  }
-
-  .p-tabmenu .p-tabmenu-nav {
-    background: transparent;
-    border: 1px solid #304562;
-    border-width: 0 0 2px 0;
-  }
-  .p-tabmenu .p-tabmenu-nav .p-menuitem-badge {
-    background: #64B5F6;
-    color: #212529;
-    font-size: 0.75rem;
-    font-weight: 700;
-    min-width: 1.5rem;
-    height: 1.5rem;
-    line-height: 1.5rem;
-    border-radius: 3px;
-    margin-left: 0.5rem;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-  }
-  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
-    margin-right: 0;
-  }
-  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
-    border: solid #304562;
-    border-width: 0 0 2px 0;
-    border-color: transparent transparent #304562 transparent;
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.6);
-    padding: 1rem;
-    font-weight: 600;
-    border-top-right-radius: 3px;
-    border-top-left-radius: 3px;
-    transition: box-shadow 0.2s;
-    margin: 0 0 -2px 0;
-  }
-  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon {
-    margin-right: 0.5rem;
-  }
-  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 1px #93cbf9;
-  }
-  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
-    background: #1f2d40;
-    border-color: #64B5F6;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
-    background: #1f2d40;
-    border-color: #64B5F6;
-    color: #64B5F6;
-  }
-  .p-tabmenu .p-tabmenu-left-icon {
-    margin-right: 0.5rem;
-  }
-  .p-tabmenu .p-tabmenu-right-icon {
-    margin-left: 0.5rem;
-  }
-  .p-tabmenu .p-tabmenu-nav-btn.p-link {
-    background: #1f2d40;
-    color: #64B5F6;
-    width: 2.357rem;
-    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-    border-radius: 0;
-  }
-  .p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 1px #93cbf9;
-  }
-
-  .p-tieredmenu {
-    padding: 0.25rem 0;
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border: 1px solid #304562;
-    border-radius: 3px;
-    width: 12.5rem;
-  }
-  .p-tieredmenu.p-tieredmenu-overlay {
-    background: #1f2d40;
-    border: 1px solid #304562;
-    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-  }
-  .p-tieredmenu .p-tieredmenu-root-list {
-    outline: 0 none;
-  }
-  .p-tieredmenu .p-submenu-list {
-    padding: 0.25rem 0;
-    background: #1f2d40;
-    border: 1px solid #304562;
-    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-  }
-  .p-tieredmenu .p-menuitem > .p-menuitem-content {
-    color: rgba(255, 255, 255, 0.87);
-    transition: box-shadow 0.2s;
-    border-radius: 0;
-  }
-  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
-    color: rgba(255, 255, 255, 0.87);
-    padding: 0.75rem 1rem;
-    user-select: none;
-  }
-  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
-    color: rgba(255, 255, 255, 0.6);
-    margin-right: 0.5rem;
-  }
-  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
-    color: rgba(255, 255, 255, 0.87);
-    background: #17212f;
-  }
-  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
-    background: #17212f;
-  }
-  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.09);
-  }
-  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
-    color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.03);
-  }
-  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
-.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-tieredmenu .p-menuitem-separator {
-    border-top: 1px solid #304562;
-    margin: 0.25rem 0;
-  }
-  .p-tieredmenu .p-submenu-icon {
-    font-size: 0.875rem;
-  }
-  .p-tieredmenu .p-submenu-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-
-  .p-inline-message {
-    padding: 0.5rem 0.5rem;
-    margin: 0;
-    border-radius: 3px;
-  }
-  .p-inline-message.p-inline-message-info {
-    background: #b3e5fc;
-    border: solid #0891cf;
-    border-width: 1px;
-    color: #044868;
-  }
-  .p-inline-message.p-inline-message-info .p-inline-message-icon {
-    color: #044868;
-  }
-  .p-inline-message.p-inline-message-success {
-    background: #c8e6c9;
-    border: solid #439446;
-    border-width: 1px;
-    color: #224a23;
-  }
-  .p-inline-message.p-inline-message-success .p-inline-message-icon {
-    color: #224a23;
-  }
-  .p-inline-message.p-inline-message-warn {
-    background: #ffecb3;
-    border: solid #d9a300;
-    border-width: 1px;
-    color: #6d5100;
-  }
-  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
-    color: #6d5100;
-  }
-  .p-inline-message.p-inline-message-error {
-    background: #ffcdd2;
-    border: solid #e60017;
-    border-width: 1px;
-    color: #73000c;
-  }
-  .p-inline-message.p-inline-message-error .p-inline-message-icon {
-    color: #73000c;
-  }
-  .p-inline-message .p-inline-message-icon {
-    font-size: 1rem;
-    margin-right: 0.5rem;
-  }
-  .p-inline-message .p-icon {
-    width: 1rem;
-    height: 1rem;
-  }
-  .p-inline-message .p-inline-message-text {
-    font-size: 1rem;
-  }
-  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
-    margin-right: 0;
-  }
-
-  .p-message {
-    margin: 1rem 0;
-    border-radius: 3px;
-  }
-  .p-message .p-message-wrapper {
-    padding: 1rem 1.5rem;
-  }
-  .p-message .p-message-close {
-    width: 2rem;
-    height: 2rem;
-    border-radius: 50%;
-    background: transparent;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-message .p-message-close:hover {
-    background: rgba(255, 255, 255, 0.5);
-  }
-  .p-message .p-message-close:focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-  .p-message.p-message-info {
-    background: #b3e5fc;
-    border: solid #0891cf;
-    border-width: 0 0 0 6px;
-    color: #044868;
-  }
-  .p-message.p-message-info .p-message-icon {
-    color: #044868;
-  }
-  .p-message.p-message-info .p-message-close {
-    color: #044868;
-  }
-  .p-message.p-message-success {
-    background: #c8e6c9;
-    border: solid #439446;
-    border-width: 0 0 0 6px;
-    color: #224a23;
-  }
-  .p-message.p-message-success .p-message-icon {
-    color: #224a23;
-  }
-  .p-message.p-message-success .p-message-close {
-    color: #224a23;
-  }
-  .p-message.p-message-warn {
-    background: #ffecb3;
-    border: solid #d9a300;
-    border-width: 0 0 0 6px;
-    color: #6d5100;
-  }
-  .p-message.p-message-warn .p-message-icon {
-    color: #6d5100;
-  }
-  .p-message.p-message-warn .p-message-close {
-    color: #6d5100;
-  }
-  .p-message.p-message-error {
-    background: #ffcdd2;
-    border: solid #e60017;
-    border-width: 0 0 0 6px;
-    color: #73000c;
-  }
-  .p-message.p-message-error .p-message-icon {
-    color: #73000c;
-  }
-  .p-message.p-message-error .p-message-close {
-    color: #73000c;
-  }
-  .p-message .p-message-text {
-    font-size: 1rem;
-    font-weight: 500;
-  }
-  .p-message .p-message-icon {
-    font-size: 1.5rem;
-    margin-right: 0.5rem;
-  }
-  .p-message .p-icon {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-  .p-message .p-message-summary {
-    font-weight: 700;
-  }
-  .p-message .p-message-detail {
-    margin-left: 0.5rem;
-  }
-
-  .p-toast {
-    opacity: 0.9;
-  }
-  .p-toast .p-toast-message {
-    margin: 0 0 1rem 0;
-    box-shadow: none;
-    border-radius: 3px;
-  }
-  .p-toast .p-toast-message .p-toast-message-content {
-    padding: 1rem;
-    border-width: 0 0 0 6px;
-  }
-  .p-toast .p-toast-message .p-toast-message-content .p-toast-message-text {
-    margin: 0 0 0 1rem;
-  }
-  .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
-    font-size: 2rem;
-  }
-  .p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) {
-    width: 2rem;
-    height: 2rem;
-  }
-  .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
-    font-weight: 700;
-  }
-  .p-toast .p-toast-message .p-toast-message-content .p-toast-detail {
-    margin: 0.5rem 0 0 0;
-  }
-  .p-toast .p-toast-message .p-toast-icon-close {
-    width: 2rem;
-    height: 2rem;
-    border-radius: 50%;
-    background: transparent;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-toast .p-toast-message .p-toast-icon-close:hover {
-    background: rgba(255, 255, 255, 0.5);
-  }
-  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-  .p-toast .p-toast-message.p-toast-message-info {
-    background: #b3e5fc;
-    border: solid #0891cf;
-    border-width: 0 0 0 6px;
-    color: #044868;
-  }
-  .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon,
-.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close {
-    color: #044868;
-  }
-  .p-toast .p-toast-message.p-toast-message-success {
-    background: #c8e6c9;
-    border: solid #439446;
-    border-width: 0 0 0 6px;
-    color: #224a23;
-  }
-  .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon,
-.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close {
-    color: #224a23;
-  }
-  .p-toast .p-toast-message.p-toast-message-warn {
-    background: #ffecb3;
-    border: solid #d9a300;
-    border-width: 0 0 0 6px;
-    color: #6d5100;
-  }
-  .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon,
-.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close {
-    color: #6d5100;
-  }
-  .p-toast .p-toast-message.p-toast-message-error {
-    background: #ffcdd2;
-    border: solid #e60017;
-    border-width: 0 0 0 6px;
-    color: #73000c;
-  }
-  .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon,
-.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
-    color: #73000c;
-  }
-
-  .p-galleria .p-galleria-close {
-    margin: 0.5rem;
-    background: transparent;
-    color: #f8f9fa;
-    width: 4rem;
-    height: 4rem;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-    border-radius: 50%;
-  }
-  .p-galleria .p-galleria-close .p-galleria-close-icon {
-    font-size: 2rem;
-  }
-  .p-galleria .p-galleria-close .p-icon-wrapper .p-icon {
-    width: 2rem;
-    height: 2rem;
-  }
-  .p-galleria .p-galleria-close:hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: #f8f9fa;
-  }
-  .p-galleria .p-galleria-item-nav {
-    background: transparent;
-    color: #f8f9fa;
-    width: 4rem;
-    height: 4rem;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-    border-radius: 3px;
-    margin: 0 0.5rem;
-  }
-  .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon,
-.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
-    font-size: 2rem;
-  }
-  .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon {
-    width: 2rem;
-    height: 2rem;
-  }
-  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: #f8f9fa;
-  }
-  .p-galleria .p-galleria-caption {
-    background: rgba(0, 0, 0, 0.5);
-    color: #f8f9fa;
-    padding: 1rem;
-  }
-  .p-galleria .p-galleria-indicators {
-    padding: 1rem;
-  }
-  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
-    background-color: #304562;
-    width: 1rem;
-    height: 1rem;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-    border-radius: 50%;
-  }
-  .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover {
-    background: #3c567a;
-  }
-  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
-    background: rgba(100, 181, 246, 0.16);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-galleria.p-galleria-indicators-bottom .p-galleria-indicator, .p-galleria.p-galleria-indicators-top .p-galleria-indicator {
-    margin-right: 0.5rem;
-  }
-  .p-galleria.p-galleria-indicators-left .p-galleria-indicator, .p-galleria.p-galleria-indicators-right .p-galleria-indicator {
-    margin-bottom: 0.5rem;
-  }
-  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators {
-    background: rgba(0, 0, 0, 0.5);
-  }
-  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator button {
-    background: rgba(255, 255, 255, 0.4);
-  }
-  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator button:hover {
-    background: rgba(255, 255, 255, 0.6);
-  }
-  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button {
-    background: rgba(100, 181, 246, 0.16);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-galleria .p-galleria-thumbnail-container {
-    background: rgba(0, 0, 0, 0.9);
-    padding: 1rem 0.25rem;
-  }
-  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
-.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
-    margin: 0.5rem;
-    background-color: transparent;
-    color: #f8f9fa;
-    width: 2rem;
-    height: 2rem;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-    border-radius: 50%;
-  }
-  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover,
-.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: #f8f9fa;
-  }
-  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-
-  .p-galleria-mask {
-    --maskbg: rgba(0, 0, 0, 0.9);
-  }
-
-  .p-image-mask {
-    --maskbg: rgba(0, 0, 0, 0.9);
-  }
-
-  .p-image-preview-indicator {
-    background-color: transparent;
-    color: #f8f9fa;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-
-  .p-image-preview-container:hover > .p-image-preview-indicator {
-    background-color: rgba(0, 0, 0, 0.5);
-  }
-
-  .p-image-toolbar {
-    padding: 1rem;
-  }
-
-  .p-image-action.p-link {
-    color: #f8f9fa;
-    background-color: transparent;
-    width: 3rem;
-    height: 3rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-    margin-right: 0.5rem;
-  }
-  .p-image-action.p-link:last-child {
-    margin-right: 0;
-  }
-  .p-image-action.p-link:hover {
-    color: #f8f9fa;
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-  .p-image-action.p-link i {
-    font-size: 1.5rem;
-  }
-  .p-image-action.p-link .p-icon {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-
-  .p-avatar {
-    background-color: #304562;
-    border-radius: 3px;
-  }
-  .p-avatar.p-avatar-lg {
-    width: 3rem;
-    height: 3rem;
-    font-size: 1.5rem;
-  }
-  .p-avatar.p-avatar-lg .p-avatar-icon {
-    font-size: 1.5rem;
-  }
-  .p-avatar.p-avatar-xl {
-    width: 4rem;
-    height: 4rem;
-    font-size: 2rem;
-  }
-  .p-avatar.p-avatar-xl .p-avatar-icon {
-    font-size: 2rem;
-  }
-
-  .p-avatar-group .p-avatar {
-    border: 2px solid #1f2d40;
-  }
-
-  .p-badge {
-    background: #64B5F6;
-    color: #212529;
-    font-size: 0.75rem;
-    font-weight: 700;
-    min-width: 1.5rem;
-    height: 1.5rem;
-    line-height: 1.5rem;
-  }
-  .p-badge.p-badge-secondary {
-    background-color: #78909c;
-    color: #ffffff;
-  }
-  .p-badge.p-badge-success {
-    background-color: #c5e1a5;
-    color: #121212;
-  }
-  .p-badge.p-badge-info {
-    background-color: #81d4fa;
-    color: #121212;
-  }
-  .p-badge.p-badge-warning {
-    background-color: #ffe082;
-    color: #121212;
-  }
-  .p-badge.p-badge-danger {
-    background-color: #f48fb1;
-    color: #121212;
-  }
-  .p-badge.p-badge-lg {
-    font-size: 1.125rem;
-    min-width: 2.25rem;
-    height: 2.25rem;
-    line-height: 2.25rem;
-  }
-  .p-badge.p-badge-xl {
-    font-size: 1.5rem;
-    min-width: 3rem;
-    height: 3rem;
-    line-height: 3rem;
-  }
-
-  .p-chip {
-    background-color: #304562;
-    color: rgba(255, 255, 255, 0.87);
-    border-radius: 16px;
-    padding: 0 0.5rem;
-  }
-  .p-chip .p-chip-text {
-    line-height: 1.5;
-    margin-top: 0.25rem;
-    margin-bottom: 0.25rem;
-  }
-  .p-chip .p-chip-icon {
-    margin-right: 0.5rem;
-  }
-  .p-chip .pi-chip-remove-icon {
-    margin-left: 0.5rem;
-  }
-  .p-chip img {
-    width: 2rem;
-    height: 2rem;
-    margin-left: -0.5rem;
-    margin-right: 0.5rem;
-  }
-  .p-chip .pi-chip-remove-icon {
-    border-radius: 3px;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-chip .pi-chip-remove-icon:focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-  .p-chip .pi-chip-remove-icon:focus {
-    outline: 0 none;
-  }
-
-  .p-inplace .p-inplace-display {
-    padding: 0.5rem 0.5rem;
-    border-radius: 3px;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  }
-  .p-inplace .p-inplace-display:not(.p-disabled):hover {
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-inplace .p-inplace-display:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-
-  .p-progressbar {
-    border: 0 none;
-    height: 1.5rem;
-    background: #304562;
-    border-radius: 3px;
-  }
-  .p-progressbar .p-progressbar-value {
-    border: 0 none;
-    margin: 0;
-    background: #64B5F6;
-  }
-  .p-progressbar .p-progressbar-label {
-    color: #212529;
-    line-height: 1.5rem;
-  }
-
-  .p-scrolltop {
-    width: 3rem;
-    height: 3rem;
-    border-radius: 50%;
-    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-scrolltop.p-link {
-    background: rgba(100, 181, 246, 0.16);
-  }
-  .p-scrolltop.p-link:hover {
-    background: rgba(100, 181, 246, 0.3616);
-  }
-  .p-scrolltop .p-scrolltop-icon {
-    font-size: 1.5rem;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-scrolltop .p-icon {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-
-  .p-skeleton {
-    background-color: rgba(255, 255, 255, 0.06);
-    border-radius: 3px;
-  }
-  .p-skeleton:after {
-    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
-  }
-
-  .p-tag {
-    background: #64B5F6;
-    color: #212529;
-    font-size: 0.75rem;
-    font-weight: 700;
-    padding: 0.25rem 0.4rem;
-    border-radius: 3px;
-  }
-  .p-tag.p-tag-success {
-    background-color: #c5e1a5;
-    color: #121212;
-  }
-  .p-tag.p-tag-info {
-    background-color: #81d4fa;
-    color: #121212;
-  }
-  .p-tag.p-tag-warning {
-    background-color: #ffe082;
-    color: #121212;
-  }
-  .p-tag.p-tag-danger {
-    background-color: #f48fb1;
-    color: #121212;
-  }
-  .p-tag .p-tag-icon {
-    margin-right: 0.25rem;
-    font-size: 0.75rem;
-  }
-  .p-tag .p-icon {
-    width: 0.75rem;
-    height: 0.75rem;
-  }
-
-  .p-terminal {
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-    border: 1px solid #304562;
-    padding: 1rem;
-  }
-  .p-terminal .p-terminal-input {
-    font-family: var(--font-family);
-    font-feature-settings: var(--font-feature-settings, normal);
-    font-size: 1rem;
-  }
-}
-/* Customizations to the designer theme should be defined here */
-@layer primeng {
-  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
-    background-color: #64B5F6;
-  }
-
-  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
-    background-color: #64B5F6;
-  }
-  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button {
-    background: #64B5F6;
-  }
-
-  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
-    box-shadow: inset 0 2px 0 0 #64B5F6;
-  }
-  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
-    box-shadow: inset 0 -2px 0 0 #64B5F6;
-  }
-}
diff --git a/main/http_server/axe-os/src/assets/fonts/AngelWish.ttf b/main/http_server/axe-os/src/assets/fonts/AngelWish.ttf
new file mode 100644
index 0000000..e694329
Binary files /dev/null and b/main/http_server/axe-os/src/assets/fonts/AngelWish.ttf differ
diff --git a/main/http_server/axe-os/src/assets/fonts/Nippo-Regular.ttf b/main/http_server/axe-os/src/assets/fonts/Nippo-Regular.ttf
new file mode 100644
index 0000000..c39a533
Binary files /dev/null and b/main/http_server/axe-os/src/assets/fonts/Nippo-Regular.ttf differ
diff --git a/main/http_server/axe-os/src/assets/fonts/Nippo-Regular.woff b/main/http_server/axe-os/src/assets/fonts/Nippo-Regular.woff
new file mode 100644
index 0000000..15c39d7
Binary files /dev/null and b/main/http_server/axe-os/src/assets/fonts/Nippo-Regular.woff differ
diff --git a/main/http_server/axe-os/src/assets/fonts/Nippo-Regular.woff2 b/main/http_server/axe-os/src/assets/fonts/Nippo-Regular.woff2
new file mode 100644
index 0000000..c23adb7
Binary files /dev/null and b/main/http_server/axe-os/src/assets/fonts/Nippo-Regular.woff2 differ
diff --git a/main/http_server/axe-os/src/styles.scss b/main/http_server/axe-os/src/styles.scss
index 36e0f2a..09b4661 100644
--- a/main/http_server/axe-os/src/styles.scss
+++ b/main/http_server/axe-os/src/styles.scss
@@ -1,5 +1,24 @@
+@font-face {
+    font-family: 'Angel Wish';
+    src: url(./assets/fonts/AngelWish.ttf) format('truetype');
+}
+
+@font-face {
+    font-family: 'Nippo-Regular';
+    src: url(./assets/fonts/Nippo-Regular.woff2) format('woff2'),
+         url(./assets/fonts/Nippo-Regular.woff) format('woff'),
+         url(./assets/fonts/Nippo-Regular.ttf) format('truetype');
+    font-weight: 400;
+    font-display: swap;
+    font-style: normal;
+  }
+
+* {
+    font-family: 'Nippo-Regular';
+}
+
 @import "app/layout/styles/layout/layout.scss";
-@import "app/layout/styles/theme/vela-blue/theme.css";
+@import "app/layout/styles/theme/themes/vela/bitaxe/theme.scss";
 
 @import "../node_modules/primeicons/primeicons.css";
 @import "../node_modules/primeng/resources/primeng.min.css";
diff --git a/main/main.c b/main/main.c
index dbc467b..0046a7d 100644
--- a/main/main.c
+++ b/main/main.c
@@ -58,10 +58,10 @@ void app_main(void)
     }
 
     //should we run the self test?
-    if (should_test(&GLOBAL_STATE)) {
-        self_test((void *) &GLOBAL_STATE);
-        vTaskDelay(60 * 60 * 1000 / portTICK_PERIOD_MS);
-    }
+    // if (should_test(&GLOBAL_STATE)) {
+    //     self_test((void *) &GLOBAL_STATE);
+    //     vTaskDelay(60 * 60 * 1000 / portTICK_PERIOD_MS);
+    // }
 
     SYSTEM_init_system(&GLOBAL_STATE);