From 1943252422533795295ae4a3b82244dbd374bbef Mon Sep 17 00:00:00 2001
From: Pier-Paolo Mammi <pierpaolo.mammi@unipr.it>
Date: Fri, 17 Jul 2026 10:40:42 +0200
Subject: [PATCH] first update to bootstrap italia styles

---
 react/common/src/App.css                      |   3 +
 .../common/src/ElixFormsComponentAbstract.tsx |  53 ++-
 react/common/src/ElixFormsElement.tsx         |  24 +-
 react/package-lock.json                       | 343 ++++++++++++++++++
 react/package.json                            |   3 +-
 .../src/App.css                               |   2 +
 react/scelta-carriera/src/App.css             |   3 +
 7 files changed, 399 insertions(+), 32 deletions(-)

diff --git a/react/common/src/App.css b/react/common/src/App.css
index 37c19f0..c8faa14 100644
--- a/react/common/src/App.css
+++ b/react/common/src/App.css
@@ -1,3 +1,4 @@
+/*
 @import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap');
 @import url("https://console-unipr.elixforms.it/elixFormsCustom/css/elixForms.css");
 @import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/bootstrap_adaptation.css");
@@ -15,6 +16,8 @@
 @import url("https://console-unipr.elixforms.it/rwe2/css/plugins/modaldisplay.css");
 @import url("https://console-unipr.elixforms.it/rwe2/css/themes/blu-italia.css");
 @import url("https://console-unipr.elixforms.it/rwe2/isipcss/css/grid_fluid.css");
+*/
+@import url("https://cdn.jsdelivr.net/npm/bootstrap-italia@2.0.0/dist/css/bootstrap-italia.min.css");
 
 /* Submit button styling (elixForms main submit) */
 .mainview .container .submit {
diff --git a/react/common/src/ElixFormsComponentAbstract.tsx b/react/common/src/ElixFormsComponentAbstract.tsx
index 802be38..cd3330a 100644
--- a/react/common/src/ElixFormsComponentAbstract.tsx
+++ b/react/common/src/ElixFormsComponentAbstract.tsx
@@ -1,12 +1,13 @@
 import './App.css';
+
 import type { IElixFormsComponentFormState } from './IElixFormsComponentFormState';
 import type { IElixFormsComponentProperties } from './IElixFormsComponentProperties';
+import type { IElixFormsComponentCustomFormFieldFactory } from './IElixFormsComponentCustomFormFieldFactory';
+import type { ElixFormsCheckboxOption, ElixFormsDropdownOption, ElixFormsRadioOption } from './ElixFormsTypes';
 import { ElixFormsElement } from './ElixFormsElement';
 import { QueryParamHelper } from './QueryParamHelper';
 import { Component, type JSX } from 'react';
 import React from 'react';
-import type { IElixFormsComponentCustomFormFieldFactory } from './IElixFormsComponentCustomFormFieldFactory';
-import type { ElixFormsCheckboxOption, ElixFormsDropdownOption, ElixFormsRadioOption } from './ElixFormsTypes';
 
 export default abstract class ElixFormsComponentAbstract extends Component<IElixFormsComponentProperties, IElixFormsComponentFormState> {
   constructor(props: IElixFormsComponentProperties) {
@@ -107,10 +108,36 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
     const hasAuthenticationError = missingMandatoryParams.length > 0;
 
     return (
-      <div className="container_12" id="pageBody">
-        <div className="grid_12">
-          <div id="userConsole" className="fe-behaviour">
-            <header>
+      <div className="container-fluid px-0" id="pageBody">
+        <header className="it-header-wrapper">
+          <div className="it-header-center-wrapper">
+            <div className="container">
+              <div className="it-header-center-content-wrapper">
+                <div className="it-brand-wrapper">
+                  <a href="/">
+                    <div className="it-brand-text">
+                      <h2 className="no_toc">Ente Pubblico</h2>
+                      <h3 className="no_toc d-none d-md-block">Sito istituzionale</h3>
+                    </div>
+                  </a>
+                </div>
+
+                <div className="it-right-zone">
+                  <div className="it-search-wrapper">
+                    <span className="d-none d-md-block">Cerca</span>
+                    <button className="search-link" aria-label="Cerca">
+                      <span className="it-search"></span>
+                    </button>
+                  </div>
+                </div>
+
+              </div>
+            </div>
+          </div>
+        </header>
+        <div className="row g-0">
+          <div id="userConsole" className="col-12">
+            <header className='it-header-wrapper'>
               <div className="neutral">
                 <div className="grid_12">
                   <div className="console_header">
@@ -134,16 +161,16 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
               </div>
             </header>
 
-            <div className="grid_12 console_main">
-              <div className="inside">
+            <div className="row">
+              <div className="col-12">
                 {headerTitle && (
                   <div>
-                    <div className="fe-module-header-container">
-                      <h2>{headerTitle}</h2>
+                    <div className="mb-4">
+                      <h2 className="h4 mb-0">{headerTitle}</h2>
                     </div>
                   </div>
                 )}
-                <div className="mainview">
+                <div className="py-4">
                   <div className="container py-4">
                     {pageTitle && <h1 className="mb-3">{pageTitle}</h1>}
                     {heroImageSrc && <img src={heroImageSrc} alt="Hero Image" className="hero-image img-fluid mb-3" />}
@@ -177,9 +204,9 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
               </div>
             </div>
 
-            <div className="clear"></div>
+            <div className="clearfix"></div>
 
-            <footer className="it-footer">
+            <footer className="it-footer mt-5">
               <div className="it-footer-main">
                 <div className="container">
                   <div className="row clearfix">
diff --git a/react/common/src/ElixFormsElement.tsx b/react/common/src/ElixFormsElement.tsx
index be5996f..2582e1b 100644
--- a/react/common/src/ElixFormsElement.tsx
+++ b/react/common/src/ElixFormsElement.tsx
@@ -17,26 +17,14 @@ export class ElixFormsElement {
 
     render(): JSX.Element {
         return (
-            <div className="iuFieldContainer form-group row mb-3 align-items-start">
-                <div className="attrDisplay_left attrDisplay_label col-sm-4">
-                    <div className="iuLabelContainer">
-                        <div className="attrDisplay_center">
-                            <div className="attrDisplay_middle">
-                                {this.label}{this.separator}
-                            </div>
-                        </div>
-                        <div className="iuClearContainer">&nbsp;</div>
+            <div className="row mb-3 align-items-start">
+                <div className="col-12 col-md-4">
+                    <div className="text-md-end pe-md-3">
+                        {this.label}{this.separator}
                     </div>
                 </div>
-                <div className="attrDisplay_right attrDisplay_input col-sm-8">
-                    <div className="iuInputContainer iuTypeString">
-                        <div className="attrDisplay_center">
-                            <div className="attrDisplay_middle">
-                                {this.input}
-                            </div>
-                        </div>
-                        <div className="iuClearContainer">&nbsp;</div>
-                    </div>
+                <div className="col-12 col-md-8">
+                    {this.input}
                 </div>
             </div>
         );
diff --git a/react/package-lock.json b/react/package-lock.json
index 09bf62c..c7a0d45 100644
--- a/react/package-lock.json
+++ b/react/package-lock.json
@@ -5,10 +5,280 @@
     "packages": {
         "": {
             "dependencies": {
+                "bootstrap-italia": "^2.18.2",
                 "react": "^19.2.7",
                 "react-dom": "^19.2.5"
             }
         },
+        "node_modules/@babel/runtime": {
+            "version": "7.29.7",
+            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
+            "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@popperjs/core": {
+            "version": "2.11.8",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+            "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+            "license": "MIT",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/popperjs"
+            }
+        },
+        "node_modules/@splidejs/splide": {
+            "version": "4.1.4",
+            "resolved": "https://registry.npmjs.org/@splidejs/splide/-/splide-4.1.4.tgz",
+            "integrity": "sha512-5I30evTJcAJQXt6vJ26g2xEkG+l1nXcpEw4xpKh0/FWQ8ozmAeTbtniVtVmz2sH1Es3vgfC4SS8B2X4o5JMptA==",
+            "license": "MIT"
+        },
+        "node_modules/@types/bootstrap": {
+            "version": "5.2.11",
+            "resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-5.2.11.tgz",
+            "integrity": "sha512-69ykbLiNzQxi6Q/y/aYJLrlzI5QkLQjhIYW2U+cxujBxAmaBtmXKtxnFes59Ttfpt936as6xJU0dYnmVpcwIwg==",
+            "license": "MIT",
+            "dependencies": {
+                "@popperjs/core": "^2.9.2"
+            }
+        },
+        "node_modules/@videojs/http-streaming": {
+            "version": "3.17.5",
+            "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-3.17.5.tgz",
+            "integrity": "sha512-PRRQVu0hYW5h0XvRWpIyIpEatpMZzZtf7L1avV89Hnu+69f+0c7oLsSL9jwpg2nbvzGkdX5rQxQkz5Vc7tFR9w==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@babel/runtime": "^7.12.5",
+                "@videojs/vhs-utils": "^4.1.2",
+                "aes-decrypter": "^4.0.2",
+                "global": "^4.4.0",
+                "m3u8-parser": "^7.2.0",
+                "mpd-parser": "^1.4.0",
+                "mux.js": "7.1.0",
+                "video.js": "^7 || ^8"
+            },
+            "engines": {
+                "node": ">=8",
+                "npm": ">=5"
+            },
+            "peerDependencies": {
+                "video.js": "^8.19.0"
+            }
+        },
+        "node_modules/@videojs/vhs-utils": {
+            "version": "4.1.2",
+            "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-4.1.2.tgz",
+            "integrity": "sha512-1Dsv5dtWOq0LP1G37O46FQFA2tKAZON5UMe6dFPxT7JvPhEx8QIXcFQxan8+hHI3fX6aomFRFrUBJNgRYQDSXA==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/runtime": "^7.12.5",
+                "global": "^4.4.0"
+            },
+            "engines": {
+                "node": ">=8",
+                "npm": ">=5"
+            }
+        },
+        "node_modules/@videojs/xhr": {
+            "version": "2.7.0",
+            "resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.7.0.tgz",
+            "integrity": "sha512-giab+EVRanChIupZK7gXjHy90y3nncA2phIOyG3Ne5fvpiMJzvqYwiTOnEVW2S4CoYcuKJkomat7bMXA/UoUZQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/runtime": "^7.5.5",
+                "global": "~4.4.0",
+                "is-function": "^1.0.1"
+            }
+        },
+        "node_modules/@xmldom/xmldom": {
+            "version": "0.8.13",
+            "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.13.tgz",
+            "integrity": "sha512-KRYzxepc14G/CEpEGc3Yn+JKaAeT63smlDr+vjB8jRfgTBBI9wRj/nkQEO+ucV8p8I9bfKLWp37uHgFrbntPvw==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=10.0.0"
+            }
+        },
+        "node_modules/aes-decrypter": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-4.0.2.tgz",
+            "integrity": "sha512-lc+/9s6iJvuaRe5qDlMTpCFjnwpkeOXp8qP3oiZ5jsj1MRg+SBVUmmICrhxHvc8OELSmc+fEyyxAuppY6hrWzw==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@babel/runtime": "^7.12.5",
+                "@videojs/vhs-utils": "^4.1.1",
+                "global": "^4.4.0",
+                "pkcs7": "^1.0.4"
+            }
+        },
+        "node_modules/animejs": {
+            "version": "3.2.2",
+            "resolved": "https://registry.npmjs.org/animejs/-/animejs-3.2.2.tgz",
+            "integrity": "sha512-Ao95qWLpDPXXM+WrmwcKbl6uNlC5tjnowlaRYtuVDHHoygjtIPfDUoK9NthrlZsQSKjZXlmji2TrBUAVbiH0LQ==",
+            "license": "MIT"
+        },
+        "node_modules/bootstrap-italia": {
+            "version": "2.18.2",
+            "resolved": "https://registry.npmjs.org/bootstrap-italia/-/bootstrap-italia-2.18.2.tgz",
+            "integrity": "sha512-qoOrq8lDfmELVS46PJekZVacWCkVqG+PF4g41QBevbIWgw2LII6mESrE+ntADMrEKhDAVYPHt0Z9viHhabzXFw==",
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "@popperjs/core": "^2.11.6",
+                "@splidejs/splide": "^4.1.4",
+                "@types/bootstrap": "^5.2.6",
+                "animejs": "^3.2.1",
+                "design-tokens-italia": "^1.3.3",
+                "just-validate": "^4.3.0",
+                "minimasonry": "^1.3.2",
+                "progressbar.js": "^1.1.0",
+                "uuid": "^14.0.0",
+                "video.js": "^8.23.7"
+            }
+        },
+        "node_modules/design-tokens-italia": {
+            "version": "1.3.3",
+            "resolved": "https://registry.npmjs.org/design-tokens-italia/-/design-tokens-italia-1.3.3.tgz",
+            "integrity": "sha512-9vdoT91ln2H/mppLO1LkTD9q18YPbT+BX9seJxzAC8r7gPlDRmbPJwsmt8dqXnULaH8Lqkp1KEdL8HW3Ah6K6A==",
+            "license": "BSD-3-Clause"
+        },
+        "node_modules/dom-walk": {
+            "version": "0.1.2",
+            "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+            "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+        },
+        "node_modules/fsevents": {
+            "version": "2.3.3",
+            "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+            "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+            "hasInstallScript": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+            }
+        },
+        "node_modules/global": {
+            "version": "4.4.0",
+            "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+            "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+            "license": "MIT",
+            "dependencies": {
+                "min-document": "^2.19.0",
+                "process": "^0.11.10"
+            }
+        },
+        "node_modules/is-function": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
+            "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==",
+            "license": "MIT"
+        },
+        "node_modules/just-validate": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/just-validate/-/just-validate-4.3.0.tgz",
+            "integrity": "sha512-9yS7ZnFk95vq+O7CAa7XZEJvZN5i6jTQWNhLwOjtgkSqiLxo7GZJhK8ViylP76fXPfHLs8tYWqi81XgxPF3OGA==",
+            "license": "MIT"
+        },
+        "node_modules/lodash.merge": {
+            "version": "4.6.2",
+            "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+            "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+            "license": "MIT"
+        },
+        "node_modules/m3u8-parser": {
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-7.2.0.tgz",
+            "integrity": "sha512-CRatFqpjVtMiMaKXxNvuI3I++vUumIXVVT/JpCpdU/FynV/ceVw1qpPyyBNindL+JlPMSesx+WX1QJaZEJSaMQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@babel/runtime": "^7.12.5",
+                "@videojs/vhs-utils": "^4.1.1",
+                "global": "^4.4.0"
+            }
+        },
+        "node_modules/min-document": {
+            "version": "2.19.2",
+            "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.2.tgz",
+            "integrity": "sha512-8S5I8db/uZN8r9HSLFVWPdJCvYOejMcEC82VIzNUc6Zkklf/d1gg2psfE79/vyhWOj4+J8MtwmoOz3TmvaGu5A==",
+            "license": "MIT",
+            "dependencies": {
+                "dom-walk": "^0.1.0"
+            }
+        },
+        "node_modules/minimasonry": {
+            "version": "1.3.2",
+            "resolved": "https://registry.npmjs.org/minimasonry/-/minimasonry-1.3.2.tgz",
+            "integrity": "sha512-ygvf5JIR4NT1LbM6o8z1oz1icTkta72gXKwidvSqIVxuzVd/P21UI0Wbq1J+MStAu50Vvr8qWYNSz1W4uycqMQ==",
+            "license": "MIT"
+        },
+        "node_modules/mpd-parser": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-1.4.0.tgz",
+            "integrity": "sha512-blbA7XpAaOdC/PR0Tu8GiUxlx6CpBuRowQPYV7lhi9Yr9G9+dkPXIUjqjzc/NCn/uZZPopluaJlIYntIEI/VLw==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@babel/runtime": "^7.12.5",
+                "@videojs/vhs-utils": "^4.1.2",
+                "@xmldom/xmldom": "^0.8.3",
+                "global": "^4.4.0"
+            },
+            "bin": {
+                "mpd-to-m3u8-json": "bin/parse.js"
+            }
+        },
+        "node_modules/mux.js": {
+            "version": "7.1.0",
+            "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-7.1.0.tgz",
+            "integrity": "sha512-NTxawK/BBELJrYsZThEulyUMDVlLizKdxyAsMuzoCD1eFj97BVaA8D/CvKsKu6FOLYkFojN5CbM9h++ZTZtknA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@babel/runtime": "^7.11.2",
+                "global": "^4.4.0"
+            },
+            "bin": {
+                "muxjs-transmux": "bin/transmux.js"
+            },
+            "engines": {
+                "node": ">=8",
+                "npm": ">=5"
+            }
+        },
+        "node_modules/pkcs7": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
+            "integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@babel/runtime": "^7.5.5"
+            },
+            "bin": {
+                "pkcs7": "bin/cli.js"
+            }
+        },
+        "node_modules/process": {
+            "version": "0.11.10",
+            "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+            "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.6.0"
+            }
+        },
+        "node_modules/progressbar.js": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/progressbar.js/-/progressbar.js-1.1.1.tgz",
+            "integrity": "sha512-FBsw3BKsUbb+hNeYfiP3xzvAAQrPi4DnGDw66bCmfuRCDLcslxyxv2GyYUdBSKFGSIBa73CUP5WMcl6F8AAXlw==",
+            "license": "MIT",
+            "dependencies": {
+                "lodash.merge": "^4.6.2",
+                "shifty": "^2.8.3"
+            }
+        },
         "node_modules/react": {
             "version": "19.2.7",
             "resolved": "https://registry.npmjs.org/react/-/react-19.2.7.tgz",
@@ -35,6 +305,79 @@
             "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
             "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
             "license": "MIT"
+        },
+        "node_modules/shifty": {
+            "version": "2.20.4",
+            "resolved": "https://registry.npmjs.org/shifty/-/shifty-2.20.4.tgz",
+            "integrity": "sha512-4Y0qRkg8ME5XN8yGNAwmFOmsIURGFKT9UQfNL6DDJQErYtN5HsjyoBuJn41ZQfTkuu2rIbRMn9qazjKsDpO2TA==",
+            "license": "MIT",
+            "optionalDependencies": {
+                "fsevents": "^2.3.2"
+            }
+        },
+        "node_modules/uuid": {
+            "version": "14.0.1",
+            "resolved": "https://registry.npmjs.org/uuid/-/uuid-14.0.1.tgz",
+            "integrity": "sha512-6ZxzVpzDXDa3bJWaHilVayA+BH/1zmxCJoVgvmqJnid/gPoKHxUrS/aC/T6LGQtNHT+XHG9fXPJB4d+IrU30Ew==",
+            "funding": [
+                "https://github.com/sponsors/broofa",
+                "https://github.com/sponsors/ctavan"
+            ],
+            "license": "MIT",
+            "bin": {
+                "uuid": "dist-node/bin/uuid"
+            }
+        },
+        "node_modules/video.js": {
+            "version": "8.23.9",
+            "resolved": "https://registry.npmjs.org/video.js/-/video.js-8.23.9.tgz",
+            "integrity": "sha512-3UCqyFW4wIusQu4TuhgRUxqtbzbj0WPT9hps0XIEXST43QBD11zb+bG7tBPrinrZztwVYdXCiOBo2pcGj9L05w==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@babel/runtime": "^7.28.4",
+                "@videojs/http-streaming": "^3.17.5",
+                "@videojs/vhs-utils": "^4.1.2",
+                "@videojs/xhr": "2.7.0",
+                "aes-decrypter": "^4.0.2",
+                "global": "4.4.0",
+                "m3u8-parser": "^7.2.0",
+                "mpd-parser": "^1.4.0",
+                "mux.js": "^7.0.1",
+                "videojs-contrib-quality-levels": "4.1.0",
+                "videojs-font": "4.2.0",
+                "videojs-vtt.js": "0.15.5"
+            }
+        },
+        "node_modules/videojs-contrib-quality-levels": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-4.1.0.tgz",
+            "integrity": "sha512-TfrXJJg1Bv4t6TOCMEVMwF/CoS8iENYsWNKip8zfhB5kTcegiFYezEA0eHAJPU64ZC8NQbxQgOwAsYU8VXbOWA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "global": "^4.4.0"
+            },
+            "engines": {
+                "node": ">=16",
+                "npm": ">=8"
+            },
+            "peerDependencies": {
+                "video.js": "^8"
+            }
+        },
+        "node_modules/videojs-font": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-4.2.0.tgz",
+            "integrity": "sha512-YPq+wiKoGy2/M7ccjmlvwi58z2xsykkkfNMyIg4xb7EZQQNwB71hcSsB3o75CqQV7/y5lXkXhI/rsGAS7jfEmQ==",
+            "license": "Apache-2.0"
+        },
+        "node_modules/videojs-vtt.js": {
+            "version": "0.15.5",
+            "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.5.tgz",
+            "integrity": "sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "global": "^4.3.1"
+            }
         }
     }
 }
diff --git a/react/package.json b/react/package.json
index 67ec3bc..8b15cc7 100644
--- a/react/package.json
+++ b/react/package.json
@@ -1,6 +1,7 @@
 {
     "dependencies": {
+        "bootstrap-italia": "^2.18.2",
         "react": "^19.2.7",
         "react-dom": "^19.2.5"
     }
-}
\ No newline at end of file
+}
diff --git a/react/recupero-proposta-cct-da-contratti/src/App.css b/react/recupero-proposta-cct-da-contratti/src/App.css
index 2ce01c1..f99bcaf 100644
--- a/react/recupero-proposta-cct-da-contratti/src/App.css
+++ b/react/recupero-proposta-cct-da-contratti/src/App.css
@@ -1,3 +1,5 @@
+@import url('https://cdn.jsdelivr.net/npm/bootstrap-italia@2.0.0/dist/css/bootstrap-italia.min.css');
+
 /* ===== Autocomplete Component Styles ===== */
 
 .autocomplete-wrapper {
diff --git a/react/scelta-carriera/src/App.css b/react/scelta-carriera/src/App.css
index 7ec1df1..6cd1116 100644
--- a/react/scelta-carriera/src/App.css
+++ b/react/scelta-carriera/src/App.css
@@ -1,3 +1,5 @@
+@import url('https://cdn.jsdelivr.net/npm/bootstrap-italia@2.0.0/dist/css/bootstrap-italia.min.css');
+/*
 @import url('https://console-unipr.elixforms.it/elixFormsCustom/css/elixForms.css');
 @import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/bootstrap_adaptation.css');
 @import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/bootstrap_overrides.css');
@@ -14,6 +16,7 @@
 @import url('https://console-unipr.elixforms.it/rwe2/css/plugins/modaldisplay.css');
 @import url('https://console-unipr.elixforms.it/rwe2/css/themes/blu-italia.css');
 @import url('https://console-unipr.elixforms.it/rwe2/isipcss/css/grid_fluid.css');
+*/
 
 /*
 .counter {