From 0772e9dc2f6e5bf116017fe2b5639dceb1ee2074 Mon Sep 17 00:00:00 2001
From: milospp <misa01523@gmail.com>
Date: Tue, 9 Apr 2024 10:51:07 +0200
Subject: [PATCH 1/9] Cherry-pick Added Bootstrap and updated CSS for Wilma
 theme to make it responsive (#3909)

* Added bootstrap and updated CSS for Wilma theme to make it responsive

* Fixed View All position

* Fixed footer

* Added responsiveness to Page managment table

* Fixed CapabilityMap responsive

* modified Photo Cropping page and minor fixes

* Removed unused libraries

* Fixed horizonal scroll in the site admin pages

* Minor fix in Capability map page

* fix: Fixed serach bar button moving out of place

* fix: Co-author Network graph size on mobile phone

* Fixed tenderfoot bootstrap in search page

* Updated bootstrap location and refactored propert group tabs

* Reimplemented tab state persistence after refresh feature
---
 .../js/individual/propertyGroupControls.js    | 139 +--
 .../webapp/themes/nemo/templates/head.ftl     |   2 +
 .../themes/nemo/templates/headScripts.ftl     |   2 +-
 .../webapp/themes/tenderfoot/css/screen.css   |   4 +-
 .../templates/page/partials/headScripts.ftl   |   2 +-
 .../templates/page/partials/menu.ftl          |  11 +
 .../css/bootstrap-grid.min.css                |   6 +
 .../main/webapp/themes/wilma/css/screen.css   |   1 +
 .../main/webapp/themes/wilma/css/wilma.css    | 876 ++++++++++++++++--
 .../webapp/themes/wilma/templates/footer.ftl  |  48 +-
 .../webapp/themes/wilma/templates/head.ftl    |   3 +
 .../webapp/themes/wilma/templates/menu.ftl    |  17 +-
 .../themes/wilma/templates/page-home.ftl      | 182 ++--
 .../webapp/themes/wilma/templates/page.ftl    |  28 +-
 14 files changed, 1004 insertions(+), 317 deletions(-)
 create mode 100644 webapp/src/main/webapp/themes/wilma/bootstrap-5.3.2-dist/css/bootstrap-grid.min.css

diff --git a/webapp/src/main/webapp/js/individual/propertyGroupControls.js b/webapp/src/main/webapp/js/individual/propertyGroupControls.js
index 14e940f06e..1b50991dfe 100644
--- a/webapp/src/main/webapp/js/individual/propertyGroupControls.js
+++ b/webapp/src/main/webapp/js/individual/propertyGroupControls.js
@@ -4,54 +4,39 @@ $(document).ready(function(){
 
     $.extend(this, individualLocalName);
     adjustFontSize();
-    padSectionBottoms();
     checkLocationHash();
 
     // prevents the page jumping down when loading a page with a requested tab in the url
     removeHash();
 
-    // ensures that shorter property group sections don't cause the page to "jump around"
-    // when the tabs are clicked
-    function padSectionBottoms() {
-        $.each($('section.property-group'), function() {
-            var sectionHeight = $(this).height();
-            if ( sectionHeight < 1000 ) {
-                $(this).css('margin-bottom', 1000-sectionHeight + "px");
-            }
-        });
-    }
-
     // controls the property group tabs
-    $.each($('li.clickable'), function() {
-        var groupName = $(this).attr("groupName");
-        var $propertyGroupLi = $(this);
+    let showAllBtn = $('#show-all-tabs')[0];
+    let tabList = $('ul.propertyTabsList')[0];
 
-        $(this).click(function() {
+    showAllBtn.addEventListener('show.bs.tab', function (event) {
+        event.preventDefault()
+        showAllTabs();
+        manageLocalStorage();
+    })
 
-            if ( $propertyGroupLi.attr("class") == "nonSelectedGroupTab clickable" ) {
-                $.each($('li.selectedGroupTab'), function() {
-                    $(this).removeClass("selectedGroupTab clickable");
-                    $(this).addClass("nonSelectedGroupTab clickable");
-                });
-                $propertyGroupLi.removeClass("nonSelectedGroupTab clickable");
-                $propertyGroupLi.addClass("selectedGroupTab clickable");
-            }
-            if ( $propertyGroupLi.attr("groupname") == "viewAll" ) {
-                processViewAllTab();
-            }
-            else {
-                padSectionBottoms();
-                var $visibleSection = $('section.property-group:visible');
-                $visibleSection.hide();
-                $('h2[pgroup=tabs]').addClass("hidden");
-                $('nav#scroller').addClass("hidden");
-                $('section#' + groupName).show();
-            }
+    showAllBtn.addEventListener('hide.bs.tab', function (event) {
+        $(".tab-content>section.tab-pane").removeClass('show active')
+    })
+
+    tabList.addEventListener('shown.bs.tab', function (event) {
+        manageLocalStorage();
+    })
 
-            manageLocalStorage();
-            return false;
+
+    function showAllTabs() {
+        $('.propertyTabsList.nav.nav-tabs > li').each(function() {
+            $(this).attr("aria-selected", "false");
+            $(this).removeClass("active");
         });
-    });
+        
+        $('#show-all-tabs').addClass("active").attr("aria-selected", "true");
+        $(".tab-content>section.tab-pane").addClass('active show')    
+    }
 
 
     function removeHash () {
@@ -73,22 +58,13 @@ $(document).ready(function(){
         }
     }
 
-    function processViewAllTab() {
-        $.each($('section.property-group'), function() {
-            $(this).css("margin-bottom", "1px");
-            $(this).children('h2').css("margin-top", "-15px").css("border-bottom","1px solid #DFEBE5").css("padding","12px 25px 10px 20px");
-            $(this).show();
-            $('h2[pgroup=tabs]').removeClass("hidden");
-            $('nav#scroller').removeClass("hidden");
-        });
-    }
 
     // If a page is requested with a hash this script will try to open a property
     // group tab matching that hash value.
     // The geographic focus map links to a county's page with a #map hash. This will
     // select the research tab and expand the 'geographic focus of' property list.
     function checkLocationHash() {
-        var currentTab = $('li.selectedGroupTab').attr('groupName')
+        var currentTab = $('li.nav-link').attr('groupName')
 
         if ( location.hash ) {
             // remove the trailing white space
@@ -108,55 +84,23 @@ $(document).ready(function(){
 
             if ( tabName ) {
                 if ( tabName != currentTab ) {
-                    swapTabs(tabName, currentTab)
+                    let tabSelect = $('li[groupName="' + tabName + '"]');
+                    let tab = new bootstrap.Tab(tabSelect);
+                    tab.show()
                 }
             }
 
             // the requested tab was gibberish, try the local storage
             else {
-                retrieveLocalStorage(currentTab);
+                retrieveLocalStorage();
             }
         }
 
         else {
-            retrieveLocalStorage(currentTab);
+            retrieveLocalStorage();
         }
     }
 
-    function swapTabs(tabName, currentTab) {
-        $('li[groupName="' + tabName + '"]').removeClass("nonSelectedGroupTab clickable");
-        $('li[groupName="' + tabName + '"]').addClass("selectedGroupTab clickable");
-        // deselect the first tab
-        $('li[groupName="' + currentTab + '"]').removeClass("selectedGroupTab clickable");
-        $('li[groupName="' + currentTab + '"]').addClass("nonSelectedGroupTab clickable");
-
-        if ( tabName == 'viewAll'){
-            processViewAllTab();
-        }
-
-        else {
-            padSectionBottoms();
-            $('section.property-group:visible').hide();
-            // show the selected tab section
-            $('section#' + tabName).show();
-        }
-
-    }
-
-    function geoFocusExpand() {
-        // if the ontology is set to collate by subclass, $list.length will be > 0
-        // this ensures both possibilities are covered
-        var $list = $('ul#geographicFocusOfList').find('ul');
-        if ( $list.length > 0 )
-        {
-            var $more = $list.find('a.more-less');
-            $more.click();
-        }
-        else {
-            var $more = $('ul#geographicFocusOfList').find('a.more-less');
-            $more.click();
-        }
-    }
 
     //  Next two functions --  keep track of which property group tab was selected,
     //  so if we return from a custom form or a related individual, even via the back button,
@@ -186,7 +130,7 @@ $(document).ready(function(){
             }
         }
         var selectedTab = [];
-        selectedTab.push($('li.selectedGroupTab').attr('groupName'));
+        selectedTab.push($('li.nav-link.active').attr('groupName'));
         amplify.store(localName, selectedTab);
         var checkLength = amplify.store(localName);
         if ( checkLength.length == 0 ) {
@@ -194,7 +138,7 @@ $(document).ready(function(){
         }
     }
 
-    function retrieveLocalStorage(currentTab) {
+    function retrieveLocalStorage() {
 
         var localName = this.individualLocalName;
         var selectedTab = amplify.store(individualLocalName);
@@ -209,28 +153,23 @@ $(document).ready(function(){
                 // if the selected tab is the default first one, don't do anything
                 if ( $('li.clickable').first().attr("groupName") != groupName ) {
                     // deselect the default first tab
-                    var $firstTab = $('li.clickable').first();
-                    $firstTab.removeClass("selectedGroupTab clickable");
-                    $firstTab.addClass("nonSelectedGroupTab clickable");
-                    // select the stored tab
-                    $("li[groupName='" + groupName + "']").removeClass("nonSelectedGroupTab clickable");
-                    $("li[groupName='" + groupName + "']").addClass("selectedGroupTab clickable");
-                    // hide the first tab section
-                    $('section.property-group:visible').hide();
 
                     if ( groupName == "viewAll" ) {
-                        processViewAllTab();
-                    }
+                        console.log("View all")
+                        showAllTabs();
+                    } else {
 
-                    // show the selected tab section
-                    $('section#' + groupName).show();
+                        let tabSelect = $('li[groupName="' + groupName + '"]');
+                        let tab = new bootstrap.Tab(tabSelect);
+                        tab.show();
+                    }
                 }
             }
         }
         // If you wish to default to the "all" tab for small profiles, uncomment the following lines
 //      -- Start view all mod
 //        else if ( $('article.property').length < 10 ) {
-//            swapTabs('viewAll', currentTab)
+//            showAllTabs();
 //        }
 //      -- End view all mod
     }
diff --git a/webapp/src/main/webapp/themes/nemo/templates/head.ftl b/webapp/src/main/webapp/themes/nemo/templates/head.ftl
index de486fc0f9..837d8f1c79 100644
--- a/webapp/src/main/webapp/themes/nemo/templates/head.ftl
+++ b/webapp/src/main/webapp/themes/nemo/templates/head.ftl
@@ -20,6 +20,8 @@
     </#if>	
 </#if>	
 
+<script src="${urls.base}/bootstrap-5.3.2/js/bootstrap.min.js"></script> 
+
 <#include "stylesheets.ftl">
 <#-- <link rel="stylesheet" href="${urls.theme}/css/screen.css" /> -->
 
diff --git a/webapp/src/main/webapp/themes/nemo/templates/headScripts.ftl b/webapp/src/main/webapp/themes/nemo/templates/headScripts.ftl
index be26ee797a..2b76e03104 100644
--- a/webapp/src/main/webapp/themes/nemo/templates/headScripts.ftl
+++ b/webapp/src/main/webapp/themes/nemo/templates/headScripts.ftl
@@ -15,7 +15,7 @@ var i18nStrings = {
 
 <script type="text/javascript" src="${urls.base}/js/vitroUtils.js"></script>
 
-<script src="${urls.base}/js/bootstrap/js/bootstrap.min.js"></script> 
+<script src="${urls.base}/bootstrap/js/bootstrap.min.js"></script> 
 
 <script src="${urls.theme}/js/publicationTableFilter.js"></script>
 
diff --git a/webapp/src/main/webapp/themes/tenderfoot/css/screen.css b/webapp/src/main/webapp/themes/tenderfoot/css/screen.css
index 936519191a..cacef769c0 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/css/screen.css
+++ b/webapp/src/main/webapp/themes/tenderfoot/css/screen.css
@@ -16,8 +16,8 @@ VIVO tenderfoot theme: screen styles
 
 @charset "UTF-8";
 
-@import url("../../../js/bootstrap/css/bootstrap.min.css");
-@import url("../../../js/bootstrap/css/bootstrap-theme.min.css");
+@import url("../../../bootstrap/css/bootstrap.min.css");
+@import url("../../../bootstrap/css/bootstrap-theme.min.css");
 @import url("reset.css");
 @import url("tenderfoot.css");
 @import url("edit.css");
diff --git a/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/headScripts.ftl b/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/headScripts.ftl
index 80b863bb7f..49c9181a9c 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/headScripts.ftl
+++ b/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/headScripts.ftl
@@ -15,7 +15,7 @@ var i18nStrings = {
 <script type="text/javascript" src="${urls.base}/js/html5.js"></script>
 <![endif]-->
 
-<script src="${urls.base}/js/bootstrap/js/bootstrap.min.js"></script>
+<script src="${urls.base}/bootstrap/js/bootstrap.min.js"></script>
 <script type="text/javascript">
 	$(document).ready(function(){
         $('#nav-wrapper').height($("#nav").height());
diff --git a/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/menu.ftl b/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/menu.ftl
index b5308a8092..b6090ba069 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/menu.ftl
+++ b/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/menu.ftl
@@ -1,5 +1,16 @@
 <#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
 
+<style>
+ul#main-nav {
+    display:block;
+}
+
+nav.navbar.navbar-default {
+    display: block;
+    padding: 0;
+}
+</style>
+
 <div id="nav-wrapper">
     <div id="nav">
         <div class="container">
diff --git a/webapp/src/main/webapp/themes/wilma/bootstrap-5.3.2-dist/css/bootstrap-grid.min.css b/webapp/src/main/webapp/themes/wilma/bootstrap-5.3.2-dist/css/bootstrap-grid.min.css
new file mode 100644
index 0000000000..46f0a44931
--- /dev/null
+++ b/webapp/src/main/webapp/themes/wilma/bootstrap-5.3.2-dist/css/bootstrap-grid.min.css
@@ -0,0 +1,6 @@
+/*!
+ * Bootstrap Grid v5.3.2 (https://getbootstrap.com/)
+ * Copyright 2011-2023 The Bootstrap Authors
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */.container,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{--bs-gutter-x:1.5rem;--bs-gutter-y:0;width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-right:auto;margin-left:auto}@media (min-width:576px){.container,.container-sm{max-width:540px}}@media (min-width:768px){.container,.container-md,.container-sm{max-width:720px}}@media (min-width:992px){.container,.container-lg,.container-md,.container-sm{max-width:960px}}@media (min-width:1200px){.container,.container-lg,.container-md,.container-sm,.container-xl{max-width:1140px}}@media (min-width:1400px){.container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{max-width:1320px}}:root{--bs-breakpoint-xs:0;--bs-breakpoint-sm:576px;--bs-breakpoint-md:768px;--bs-breakpoint-lg:992px;--bs-breakpoint-xl:1200px;--bs-breakpoint-xxl:1400px}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(-1 * var(--bs-gutter-y));margin-right:calc(-.5 * var(--bs-gutter-x));margin-left:calc(-.5 * var(--bs-gutter-x))}.row>*{box-sizing:border-box;flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}.col{flex:1 0 0%}.row-cols-auto>*{flex:0 0 auto;width:auto}.row-cols-1>*{flex:0 0 auto;width:100%}.row-cols-2>*{flex:0 0 auto;width:50%}.row-cols-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-4>*{flex:0 0 auto;width:25%}.row-cols-5>*{flex:0 0 auto;width:20%}.row-cols-6>*{flex:0 0 auto;width:16.66666667%}.col-auto{flex:0 0 auto;width:auto}.col-1{flex:0 0 auto;width:8.33333333%}.col-2{flex:0 0 auto;width:16.66666667%}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.33333333%}.col-5{flex:0 0 auto;width:41.66666667%}.col-6{flex:0 0 auto;width:50%}.col-7{flex:0 0 auto;width:58.33333333%}.col-8{flex:0 0 auto;width:66.66666667%}.col-9{flex:0 0 auto;width:75%}.col-10{flex:0 0 auto;width:83.33333333%}.col-11{flex:0 0 auto;width:91.66666667%}.col-12{flex:0 0 auto;width:100%}.offset-1{margin-left:8.33333333%}.offset-2{margin-left:16.66666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.33333333%}.offset-5{margin-left:41.66666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.33333333%}.offset-8{margin-left:66.66666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.33333333%}.offset-11{margin-left:91.66666667%}.g-0,.gx-0{--bs-gutter-x:0}.g-0,.gy-0{--bs-gutter-y:0}.g-1,.gx-1{--bs-gutter-x:0.25rem}.g-1,.gy-1{--bs-gutter-y:0.25rem}.g-2,.gx-2{--bs-gutter-x:0.5rem}.g-2,.gy-2{--bs-gutter-y:0.5rem}.g-3,.gx-3{--bs-gutter-x:1rem}.g-3,.gy-3{--bs-gutter-y:1rem}.g-4,.gx-4{--bs-gutter-x:1.5rem}.g-4,.gy-4{--bs-gutter-y:1.5rem}.g-5,.gx-5{--bs-gutter-x:3rem}.g-5,.gy-5{--bs-gutter-y:3rem}@media (min-width:576px){.col-sm{flex:1 0 0%}.row-cols-sm-auto>*{flex:0 0 auto;width:auto}.row-cols-sm-1>*{flex:0 0 auto;width:100%}.row-cols-sm-2>*{flex:0 0 auto;width:50%}.row-cols-sm-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-sm-4>*{flex:0 0 auto;width:25%}.row-cols-sm-5>*{flex:0 0 auto;width:20%}.row-cols-sm-6>*{flex:0 0 auto;width:16.66666667%}.col-sm-auto{flex:0 0 auto;width:auto}.col-sm-1{flex:0 0 auto;width:8.33333333%}.col-sm-2{flex:0 0 auto;width:16.66666667%}.col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.33333333%}.col-sm-5{flex:0 0 auto;width:41.66666667%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-7{flex:0 0 auto;width:58.33333333%}.col-sm-8{flex:0 0 auto;width:66.66666667%}.col-sm-9{flex:0 0 auto;width:75%}.col-sm-10{flex:0 0 auto;width:83.33333333%}.col-sm-11{flex:0 0 auto;width:91.66666667%}.col-sm-12{flex:0 0 auto;width:100%}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.33333333%}.offset-sm-2{margin-left:16.66666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.33333333%}.offset-sm-5{margin-left:41.66666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.33333333%}.offset-sm-8{margin-left:66.66666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.33333333%}.offset-sm-11{margin-left:91.66666667%}.g-sm-0,.gx-sm-0{--bs-gutter-x:0}.g-sm-0,.gy-sm-0{--bs-gutter-y:0}.g-sm-1,.gx-sm-1{--bs-gutter-x:0.25rem}.g-sm-1,.gy-sm-1{--bs-gutter-y:0.25rem}.g-sm-2,.gx-sm-2{--bs-gutter-x:0.5rem}.g-sm-2,.gy-sm-2{--bs-gutter-y:0.5rem}.g-sm-3,.gx-sm-3{--bs-gutter-x:1rem}.g-sm-3,.gy-sm-3{--bs-gutter-y:1rem}.g-sm-4,.gx-sm-4{--bs-gutter-x:1.5rem}.g-sm-4,.gy-sm-4{--bs-gutter-y:1.5rem}.g-sm-5,.gx-sm-5{--bs-gutter-x:3rem}.g-sm-5,.gy-sm-5{--bs-gutter-y:3rem}}@media (min-width:768px){.col-md{flex:1 0 0%}.row-cols-md-auto>*{flex:0 0 auto;width:auto}.row-cols-md-1>*{flex:0 0 auto;width:100%}.row-cols-md-2>*{flex:0 0 auto;width:50%}.row-cols-md-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-md-4>*{flex:0 0 auto;width:25%}.row-cols-md-5>*{flex:0 0 auto;width:20%}.row-cols-md-6>*{flex:0 0 auto;width:16.66666667%}.col-md-auto{flex:0 0 auto;width:auto}.col-md-1{flex:0 0 auto;width:8.33333333%}.col-md-2{flex:0 0 auto;width:16.66666667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.33333333%}.col-md-5{flex:0 0 auto;width:41.66666667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.33333333%}.col-md-8{flex:0 0 auto;width:66.66666667%}.col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.33333333%}.col-md-11{flex:0 0 auto;width:91.66666667%}.col-md-12{flex:0 0 auto;width:100%}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.33333333%}.offset-md-2{margin-left:16.66666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.33333333%}.offset-md-5{margin-left:41.66666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.33333333%}.offset-md-8{margin-left:66.66666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.33333333%}.offset-md-11{margin-left:91.66666667%}.g-md-0,.gx-md-0{--bs-gutter-x:0}.g-md-0,.gy-md-0{--bs-gutter-y:0}.g-md-1,.gx-md-1{--bs-gutter-x:0.25rem}.g-md-1,.gy-md-1{--bs-gutter-y:0.25rem}.g-md-2,.gx-md-2{--bs-gutter-x:0.5rem}.g-md-2,.gy-md-2{--bs-gutter-y:0.5rem}.g-md-3,.gx-md-3{--bs-gutter-x:1rem}.g-md-3,.gy-md-3{--bs-gutter-y:1rem}.g-md-4,.gx-md-4{--bs-gutter-x:1.5rem}.g-md-4,.gy-md-4{--bs-gutter-y:1.5rem}.g-md-5,.gx-md-5{--bs-gutter-x:3rem}.g-md-5,.gy-md-5{--bs-gutter-y:3rem}}@media (min-width:992px){.col-lg{flex:1 0 0%}.row-cols-lg-auto>*{flex:0 0 auto;width:auto}.row-cols-lg-1>*{flex:0 0 auto;width:100%}.row-cols-lg-2>*{flex:0 0 auto;width:50%}.row-cols-lg-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-lg-4>*{flex:0 0 auto;width:25%}.row-cols-lg-5>*{flex:0 0 auto;width:20%}.row-cols-lg-6>*{flex:0 0 auto;width:16.66666667%}.col-lg-auto{flex:0 0 auto;width:auto}.col-lg-1{flex:0 0 auto;width:8.33333333%}.col-lg-2{flex:0 0 auto;width:16.66666667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.33333333%}.col-lg-5{flex:0 0 auto;width:41.66666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.33333333%}.col-lg-8{flex:0 0 auto;width:66.66666667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.33333333%}.col-lg-11{flex:0 0 auto;width:91.66666667%}.col-lg-12{flex:0 0 auto;width:100%}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.33333333%}.offset-lg-2{margin-left:16.66666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.33333333%}.offset-lg-5{margin-left:41.66666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.33333333%}.offset-lg-8{margin-left:66.66666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.33333333%}.offset-lg-11{margin-left:91.66666667%}.g-lg-0,.gx-lg-0{--bs-gutter-x:0}.g-lg-0,.gy-lg-0{--bs-gutter-y:0}.g-lg-1,.gx-lg-1{--bs-gutter-x:0.25rem}.g-lg-1,.gy-lg-1{--bs-gutter-y:0.25rem}.g-lg-2,.gx-lg-2{--bs-gutter-x:0.5rem}.g-lg-2,.gy-lg-2{--bs-gutter-y:0.5rem}.g-lg-3,.gx-lg-3{--bs-gutter-x:1rem}.g-lg-3,.gy-lg-3{--bs-gutter-y:1rem}.g-lg-4,.gx-lg-4{--bs-gutter-x:1.5rem}.g-lg-4,.gy-lg-4{--bs-gutter-y:1.5rem}.g-lg-5,.gx-lg-5{--bs-gutter-x:3rem}.g-lg-5,.gy-lg-5{--bs-gutter-y:3rem}}@media (min-width:1200px){.col-xl{flex:1 0 0%}.row-cols-xl-auto>*{flex:0 0 auto;width:auto}.row-cols-xl-1>*{flex:0 0 auto;width:100%}.row-cols-xl-2>*{flex:0 0 auto;width:50%}.row-cols-xl-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-xl-4>*{flex:0 0 auto;width:25%}.row-cols-xl-5>*{flex:0 0 auto;width:20%}.row-cols-xl-6>*{flex:0 0 auto;width:16.66666667%}.col-xl-auto{flex:0 0 auto;width:auto}.col-xl-1{flex:0 0 auto;width:8.33333333%}.col-xl-2{flex:0 0 auto;width:16.66666667%}.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.33333333%}.col-xl-5{flex:0 0 auto;width:41.66666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-7{flex:0 0 auto;width:58.33333333%}.col-xl-8{flex:0 0 auto;width:66.66666667%}.col-xl-9{flex:0 0 auto;width:75%}.col-xl-10{flex:0 0 auto;width:83.33333333%}.col-xl-11{flex:0 0 auto;width:91.66666667%}.col-xl-12{flex:0 0 auto;width:100%}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.33333333%}.offset-xl-2{margin-left:16.66666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.33333333%}.offset-xl-5{margin-left:41.66666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.33333333%}.offset-xl-8{margin-left:66.66666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.33333333%}.offset-xl-11{margin-left:91.66666667%}.g-xl-0,.gx-xl-0{--bs-gutter-x:0}.g-xl-0,.gy-xl-0{--bs-gutter-y:0}.g-xl-1,.gx-xl-1{--bs-gutter-x:0.25rem}.g-xl-1,.gy-xl-1{--bs-gutter-y:0.25rem}.g-xl-2,.gx-xl-2{--bs-gutter-x:0.5rem}.g-xl-2,.gy-xl-2{--bs-gutter-y:0.5rem}.g-xl-3,.gx-xl-3{--bs-gutter-x:1rem}.g-xl-3,.gy-xl-3{--bs-gutter-y:1rem}.g-xl-4,.gx-xl-4{--bs-gutter-x:1.5rem}.g-xl-4,.gy-xl-4{--bs-gutter-y:1.5rem}.g-xl-5,.gx-xl-5{--bs-gutter-x:3rem}.g-xl-5,.gy-xl-5{--bs-gutter-y:3rem}}@media (min-width:1400px){.col-xxl{flex:1 0 0%}.row-cols-xxl-auto>*{flex:0 0 auto;width:auto}.row-cols-xxl-1>*{flex:0 0 auto;width:100%}.row-cols-xxl-2>*{flex:0 0 auto;width:50%}.row-cols-xxl-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-xxl-4>*{flex:0 0 auto;width:25%}.row-cols-xxl-5>*{flex:0 0 auto;width:20%}.row-cols-xxl-6>*{flex:0 0 auto;width:16.66666667%}.col-xxl-auto{flex:0 0 auto;width:auto}.col-xxl-1{flex:0 0 auto;width:8.33333333%}.col-xxl-2{flex:0 0 auto;width:16.66666667%}.col-xxl-3{flex:0 0 auto;width:25%}.col-xxl-4{flex:0 0 auto;width:33.33333333%}.col-xxl-5{flex:0 0 auto;width:41.66666667%}.col-xxl-6{flex:0 0 auto;width:50%}.col-xxl-7{flex:0 0 auto;width:58.33333333%}.col-xxl-8{flex:0 0 auto;width:66.66666667%}.col-xxl-9{flex:0 0 auto;width:75%}.col-xxl-10{flex:0 0 auto;width:83.33333333%}.col-xxl-11{flex:0 0 auto;width:91.66666667%}.col-xxl-12{flex:0 0 auto;width:100%}.offset-xxl-0{margin-left:0}.offset-xxl-1{margin-left:8.33333333%}.offset-xxl-2{margin-left:16.66666667%}.offset-xxl-3{margin-left:25%}.offset-xxl-4{margin-left:33.33333333%}.offset-xxl-5{margin-left:41.66666667%}.offset-xxl-6{margin-left:50%}.offset-xxl-7{margin-left:58.33333333%}.offset-xxl-8{margin-left:66.66666667%}.offset-xxl-9{margin-left:75%}.offset-xxl-10{margin-left:83.33333333%}.offset-xxl-11{margin-left:91.66666667%}.g-xxl-0,.gx-xxl-0{--bs-gutter-x:0}.g-xxl-0,.gy-xxl-0{--bs-gutter-y:0}.g-xxl-1,.gx-xxl-1{--bs-gutter-x:0.25rem}.g-xxl-1,.gy-xxl-1{--bs-gutter-y:0.25rem}.g-xxl-2,.gx-xxl-2{--bs-gutter-x:0.5rem}.g-xxl-2,.gy-xxl-2{--bs-gutter-y:0.5rem}.g-xxl-3,.gx-xxl-3{--bs-gutter-x:1rem}.g-xxl-3,.gy-xxl-3{--bs-gutter-y:1rem}.g-xxl-4,.gx-xxl-4{--bs-gutter-x:1.5rem}.g-xxl-4,.gy-xxl-4{--bs-gutter-y:1.5rem}.g-xxl-5,.gx-xxl-5{--bs-gutter-x:3rem}.g-xxl-5,.gy-xxl-5{--bs-gutter-y:3rem}}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-grid{display:grid!important}.d-inline-grid{display:inline-grid!important}.d-table{display:table!important}.d-table-row{display:table-row!important}.d-table-cell{display:table-cell!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.d-none{display:none!important}.flex-fill{flex:1 1 auto!important}.flex-row{flex-direction:row!important}.flex-column{flex-direction:column!important}.flex-row-reverse{flex-direction:row-reverse!important}.flex-column-reverse{flex-direction:column-reverse!important}.flex-grow-0{flex-grow:0!important}.flex-grow-1{flex-grow:1!important}.flex-shrink-0{flex-shrink:0!important}.flex-shrink-1{flex-shrink:1!important}.flex-wrap{flex-wrap:wrap!important}.flex-nowrap{flex-wrap:nowrap!important}.flex-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-start{justify-content:flex-start!important}.justify-content-end{justify-content:flex-end!important}.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.justify-content-around{justify-content:space-around!important}.justify-content-evenly{justify-content:space-evenly!important}.align-items-start{align-items:flex-start!important}.align-items-end{align-items:flex-end!important}.align-items-center{align-items:center!important}.align-items-baseline{align-items:baseline!important}.align-items-stretch{align-items:stretch!important}.align-content-start{align-content:flex-start!important}.align-content-end{align-content:flex-end!important}.align-content-center{align-content:center!important}.align-content-between{align-content:space-between!important}.align-content-around{align-content:space-around!important}.align-content-stretch{align-content:stretch!important}.align-self-auto{align-self:auto!important}.align-self-start{align-self:flex-start!important}.align-self-end{align-self:flex-end!important}.align-self-center{align-self:center!important}.align-self-baseline{align-self:baseline!important}.align-self-stretch{align-self:stretch!important}.order-first{order:-1!important}.order-0{order:0!important}.order-1{order:1!important}.order-2{order:2!important}.order-3{order:3!important}.order-4{order:4!important}.order-5{order:5!important}.order-last{order:6!important}.m-0{margin:0!important}.m-1{margin:.25rem!important}.m-2{margin:.5rem!important}.m-3{margin:1rem!important}.m-4{margin:1.5rem!important}.m-5{margin:3rem!important}.m-auto{margin:auto!important}.mx-0{margin-right:0!important;margin-left:0!important}.mx-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-3{margin-right:1rem!important;margin-left:1rem!important}.mx-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-5{margin-right:3rem!important;margin-left:3rem!important}.mx-auto{margin-right:auto!important;margin-left:auto!important}.my-0{margin-top:0!important;margin-bottom:0!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-0{margin-top:0!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}.mt-auto{margin-top:auto!important}.me-0{margin-right:0!important}.me-1{margin-right:.25rem!important}.me-2{margin-right:.5rem!important}.me-3{margin-right:1rem!important}.me-4{margin-right:1.5rem!important}.me-5{margin-right:3rem!important}.me-auto{margin-right:auto!important}.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}.mb-auto{margin-bottom:auto!important}.ms-0{margin-left:0!important}.ms-1{margin-left:.25rem!important}.ms-2{margin-left:.5rem!important}.ms-3{margin-left:1rem!important}.ms-4{margin-left:1.5rem!important}.ms-5{margin-left:3rem!important}.ms-auto{margin-left:auto!important}.p-0{padding:0!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.p-3{padding:1rem!important}.p-4{padding:1.5rem!important}.p-5{padding:3rem!important}.px-0{padding-right:0!important;padding-left:0!important}.px-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-3{padding-right:1rem!important;padding-left:1rem!important}.px-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-5{padding-right:3rem!important;padding-left:3rem!important}.py-0{padding-top:0!important;padding-bottom:0!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-0{padding-top:0!important}.pt-1{padding-top:.25rem!important}.pt-2{padding-top:.5rem!important}.pt-3{padding-top:1rem!important}.pt-4{padding-top:1.5rem!important}.pt-5{padding-top:3rem!important}.pe-0{padding-right:0!important}.pe-1{padding-right:.25rem!important}.pe-2{padding-right:.5rem!important}.pe-3{padding-right:1rem!important}.pe-4{padding-right:1.5rem!important}.pe-5{padding-right:3rem!important}.pb-0{padding-bottom:0!important}.pb-1{padding-bottom:.25rem!important}.pb-2{padding-bottom:.5rem!important}.pb-3{padding-bottom:1rem!important}.pb-4{padding-bottom:1.5rem!important}.pb-5{padding-bottom:3rem!important}.ps-0{padding-left:0!important}.ps-1{padding-left:.25rem!important}.ps-2{padding-left:.5rem!important}.ps-3{padding-left:1rem!important}.ps-4{padding-left:1.5rem!important}.ps-5{padding-left:3rem!important}@media (min-width:576px){.d-sm-inline{display:inline!important}.d-sm-inline-block{display:inline-block!important}.d-sm-block{display:block!important}.d-sm-grid{display:grid!important}.d-sm-inline-grid{display:inline-grid!important}.d-sm-table{display:table!important}.d-sm-table-row{display:table-row!important}.d-sm-table-cell{display:table-cell!important}.d-sm-flex{display:flex!important}.d-sm-inline-flex{display:inline-flex!important}.d-sm-none{display:none!important}.flex-sm-fill{flex:1 1 auto!important}.flex-sm-row{flex-direction:row!important}.flex-sm-column{flex-direction:column!important}.flex-sm-row-reverse{flex-direction:row-reverse!important}.flex-sm-column-reverse{flex-direction:column-reverse!important}.flex-sm-grow-0{flex-grow:0!important}.flex-sm-grow-1{flex-grow:1!important}.flex-sm-shrink-0{flex-shrink:0!important}.flex-sm-shrink-1{flex-shrink:1!important}.flex-sm-wrap{flex-wrap:wrap!important}.flex-sm-nowrap{flex-wrap:nowrap!important}.flex-sm-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-sm-start{justify-content:flex-start!important}.justify-content-sm-end{justify-content:flex-end!important}.justify-content-sm-center{justify-content:center!important}.justify-content-sm-between{justify-content:space-between!important}.justify-content-sm-around{justify-content:space-around!important}.justify-content-sm-evenly{justify-content:space-evenly!important}.align-items-sm-start{align-items:flex-start!important}.align-items-sm-end{align-items:flex-end!important}.align-items-sm-center{align-items:center!important}.align-items-sm-baseline{align-items:baseline!important}.align-items-sm-stretch{align-items:stretch!important}.align-content-sm-start{align-content:flex-start!important}.align-content-sm-end{align-content:flex-end!important}.align-content-sm-center{align-content:center!important}.align-content-sm-between{align-content:space-between!important}.align-content-sm-around{align-content:space-around!important}.align-content-sm-stretch{align-content:stretch!important}.align-self-sm-auto{align-self:auto!important}.align-self-sm-start{align-self:flex-start!important}.align-self-sm-end{align-self:flex-end!important}.align-self-sm-center{align-self:center!important}.align-self-sm-baseline{align-self:baseline!important}.align-self-sm-stretch{align-self:stretch!important}.order-sm-first{order:-1!important}.order-sm-0{order:0!important}.order-sm-1{order:1!important}.order-sm-2{order:2!important}.order-sm-3{order:3!important}.order-sm-4{order:4!important}.order-sm-5{order:5!important}.order-sm-last{order:6!important}.m-sm-0{margin:0!important}.m-sm-1{margin:.25rem!important}.m-sm-2{margin:.5rem!important}.m-sm-3{margin:1rem!important}.m-sm-4{margin:1.5rem!important}.m-sm-5{margin:3rem!important}.m-sm-auto{margin:auto!important}.mx-sm-0{margin-right:0!important;margin-left:0!important}.mx-sm-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-sm-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-sm-3{margin-right:1rem!important;margin-left:1rem!important}.mx-sm-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-sm-5{margin-right:3rem!important;margin-left:3rem!important}.mx-sm-auto{margin-right:auto!important;margin-left:auto!important}.my-sm-0{margin-top:0!important;margin-bottom:0!important}.my-sm-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-sm-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-sm-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-sm-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-sm-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-sm-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-sm-0{margin-top:0!important}.mt-sm-1{margin-top:.25rem!important}.mt-sm-2{margin-top:.5rem!important}.mt-sm-3{margin-top:1rem!important}.mt-sm-4{margin-top:1.5rem!important}.mt-sm-5{margin-top:3rem!important}.mt-sm-auto{margin-top:auto!important}.me-sm-0{margin-right:0!important}.me-sm-1{margin-right:.25rem!important}.me-sm-2{margin-right:.5rem!important}.me-sm-3{margin-right:1rem!important}.me-sm-4{margin-right:1.5rem!important}.me-sm-5{margin-right:3rem!important}.me-sm-auto{margin-right:auto!important}.mb-sm-0{margin-bottom:0!important}.mb-sm-1{margin-bottom:.25rem!important}.mb-sm-2{margin-bottom:.5rem!important}.mb-sm-3{margin-bottom:1rem!important}.mb-sm-4{margin-bottom:1.5rem!important}.mb-sm-5{margin-bottom:3rem!important}.mb-sm-auto{margin-bottom:auto!important}.ms-sm-0{margin-left:0!important}.ms-sm-1{margin-left:.25rem!important}.ms-sm-2{margin-left:.5rem!important}.ms-sm-3{margin-left:1rem!important}.ms-sm-4{margin-left:1.5rem!important}.ms-sm-5{margin-left:3rem!important}.ms-sm-auto{margin-left:auto!important}.p-sm-0{padding:0!important}.p-sm-1{padding:.25rem!important}.p-sm-2{padding:.5rem!important}.p-sm-3{padding:1rem!important}.p-sm-4{padding:1.5rem!important}.p-sm-5{padding:3rem!important}.px-sm-0{padding-right:0!important;padding-left:0!important}.px-sm-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-sm-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-sm-3{padding-right:1rem!important;padding-left:1rem!important}.px-sm-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-sm-5{padding-right:3rem!important;padding-left:3rem!important}.py-sm-0{padding-top:0!important;padding-bottom:0!important}.py-sm-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-sm-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-sm-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-sm-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-sm-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-sm-0{padding-top:0!important}.pt-sm-1{padding-top:.25rem!important}.pt-sm-2{padding-top:.5rem!important}.pt-sm-3{padding-top:1rem!important}.pt-sm-4{padding-top:1.5rem!important}.pt-sm-5{padding-top:3rem!important}.pe-sm-0{padding-right:0!important}.pe-sm-1{padding-right:.25rem!important}.pe-sm-2{padding-right:.5rem!important}.pe-sm-3{padding-right:1rem!important}.pe-sm-4{padding-right:1.5rem!important}.pe-sm-5{padding-right:3rem!important}.pb-sm-0{padding-bottom:0!important}.pb-sm-1{padding-bottom:.25rem!important}.pb-sm-2{padding-bottom:.5rem!important}.pb-sm-3{padding-bottom:1rem!important}.pb-sm-4{padding-bottom:1.5rem!important}.pb-sm-5{padding-bottom:3rem!important}.ps-sm-0{padding-left:0!important}.ps-sm-1{padding-left:.25rem!important}.ps-sm-2{padding-left:.5rem!important}.ps-sm-3{padding-left:1rem!important}.ps-sm-4{padding-left:1.5rem!important}.ps-sm-5{padding-left:3rem!important}}@media (min-width:768px){.d-md-inline{display:inline!important}.d-md-inline-block{display:inline-block!important}.d-md-block{display:block!important}.d-md-grid{display:grid!important}.d-md-inline-grid{display:inline-grid!important}.d-md-table{display:table!important}.d-md-table-row{display:table-row!important}.d-md-table-cell{display:table-cell!important}.d-md-flex{display:flex!important}.d-md-inline-flex{display:inline-flex!important}.d-md-none{display:none!important}.flex-md-fill{flex:1 1 auto!important}.flex-md-row{flex-direction:row!important}.flex-md-column{flex-direction:column!important}.flex-md-row-reverse{flex-direction:row-reverse!important}.flex-md-column-reverse{flex-direction:column-reverse!important}.flex-md-grow-0{flex-grow:0!important}.flex-md-grow-1{flex-grow:1!important}.flex-md-shrink-0{flex-shrink:0!important}.flex-md-shrink-1{flex-shrink:1!important}.flex-md-wrap{flex-wrap:wrap!important}.flex-md-nowrap{flex-wrap:nowrap!important}.flex-md-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-md-start{justify-content:flex-start!important}.justify-content-md-end{justify-content:flex-end!important}.justify-content-md-center{justify-content:center!important}.justify-content-md-between{justify-content:space-between!important}.justify-content-md-around{justify-content:space-around!important}.justify-content-md-evenly{justify-content:space-evenly!important}.align-items-md-start{align-items:flex-start!important}.align-items-md-end{align-items:flex-end!important}.align-items-md-center{align-items:center!important}.align-items-md-baseline{align-items:baseline!important}.align-items-md-stretch{align-items:stretch!important}.align-content-md-start{align-content:flex-start!important}.align-content-md-end{align-content:flex-end!important}.align-content-md-center{align-content:center!important}.align-content-md-between{align-content:space-between!important}.align-content-md-around{align-content:space-around!important}.align-content-md-stretch{align-content:stretch!important}.align-self-md-auto{align-self:auto!important}.align-self-md-start{align-self:flex-start!important}.align-self-md-end{align-self:flex-end!important}.align-self-md-center{align-self:center!important}.align-self-md-baseline{align-self:baseline!important}.align-self-md-stretch{align-self:stretch!important}.order-md-first{order:-1!important}.order-md-0{order:0!important}.order-md-1{order:1!important}.order-md-2{order:2!important}.order-md-3{order:3!important}.order-md-4{order:4!important}.order-md-5{order:5!important}.order-md-last{order:6!important}.m-md-0{margin:0!important}.m-md-1{margin:.25rem!important}.m-md-2{margin:.5rem!important}.m-md-3{margin:1rem!important}.m-md-4{margin:1.5rem!important}.m-md-5{margin:3rem!important}.m-md-auto{margin:auto!important}.mx-md-0{margin-right:0!important;margin-left:0!important}.mx-md-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-md-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-md-3{margin-right:1rem!important;margin-left:1rem!important}.mx-md-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-md-5{margin-right:3rem!important;margin-left:3rem!important}.mx-md-auto{margin-right:auto!important;margin-left:auto!important}.my-md-0{margin-top:0!important;margin-bottom:0!important}.my-md-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-md-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-md-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-md-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-md-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-md-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-md-0{margin-top:0!important}.mt-md-1{margin-top:.25rem!important}.mt-md-2{margin-top:.5rem!important}.mt-md-3{margin-top:1rem!important}.mt-md-4{margin-top:1.5rem!important}.mt-md-5{margin-top:3rem!important}.mt-md-auto{margin-top:auto!important}.me-md-0{margin-right:0!important}.me-md-1{margin-right:.25rem!important}.me-md-2{margin-right:.5rem!important}.me-md-3{margin-right:1rem!important}.me-md-4{margin-right:1.5rem!important}.me-md-5{margin-right:3rem!important}.me-md-auto{margin-right:auto!important}.mb-md-0{margin-bottom:0!important}.mb-md-1{margin-bottom:.25rem!important}.mb-md-2{margin-bottom:.5rem!important}.mb-md-3{margin-bottom:1rem!important}.mb-md-4{margin-bottom:1.5rem!important}.mb-md-5{margin-bottom:3rem!important}.mb-md-auto{margin-bottom:auto!important}.ms-md-0{margin-left:0!important}.ms-md-1{margin-left:.25rem!important}.ms-md-2{margin-left:.5rem!important}.ms-md-3{margin-left:1rem!important}.ms-md-4{margin-left:1.5rem!important}.ms-md-5{margin-left:3rem!important}.ms-md-auto{margin-left:auto!important}.p-md-0{padding:0!important}.p-md-1{padding:.25rem!important}.p-md-2{padding:.5rem!important}.p-md-3{padding:1rem!important}.p-md-4{padding:1.5rem!important}.p-md-5{padding:3rem!important}.px-md-0{padding-right:0!important;padding-left:0!important}.px-md-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-md-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-md-3{padding-right:1rem!important;padding-left:1rem!important}.px-md-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-md-5{padding-right:3rem!important;padding-left:3rem!important}.py-md-0{padding-top:0!important;padding-bottom:0!important}.py-md-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-md-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-md-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-md-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-md-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-md-0{padding-top:0!important}.pt-md-1{padding-top:.25rem!important}.pt-md-2{padding-top:.5rem!important}.pt-md-3{padding-top:1rem!important}.pt-md-4{padding-top:1.5rem!important}.pt-md-5{padding-top:3rem!important}.pe-md-0{padding-right:0!important}.pe-md-1{padding-right:.25rem!important}.pe-md-2{padding-right:.5rem!important}.pe-md-3{padding-right:1rem!important}.pe-md-4{padding-right:1.5rem!important}.pe-md-5{padding-right:3rem!important}.pb-md-0{padding-bottom:0!important}.pb-md-1{padding-bottom:.25rem!important}.pb-md-2{padding-bottom:.5rem!important}.pb-md-3{padding-bottom:1rem!important}.pb-md-4{padding-bottom:1.5rem!important}.pb-md-5{padding-bottom:3rem!important}.ps-md-0{padding-left:0!important}.ps-md-1{padding-left:.25rem!important}.ps-md-2{padding-left:.5rem!important}.ps-md-3{padding-left:1rem!important}.ps-md-4{padding-left:1.5rem!important}.ps-md-5{padding-left:3rem!important}}@media (min-width:992px){.d-lg-inline{display:inline!important}.d-lg-inline-block{display:inline-block!important}.d-lg-block{display:block!important}.d-lg-grid{display:grid!important}.d-lg-inline-grid{display:inline-grid!important}.d-lg-table{display:table!important}.d-lg-table-row{display:table-row!important}.d-lg-table-cell{display:table-cell!important}.d-lg-flex{display:flex!important}.d-lg-inline-flex{display:inline-flex!important}.d-lg-none{display:none!important}.flex-lg-fill{flex:1 1 auto!important}.flex-lg-row{flex-direction:row!important}.flex-lg-column{flex-direction:column!important}.flex-lg-row-reverse{flex-direction:row-reverse!important}.flex-lg-column-reverse{flex-direction:column-reverse!important}.flex-lg-grow-0{flex-grow:0!important}.flex-lg-grow-1{flex-grow:1!important}.flex-lg-shrink-0{flex-shrink:0!important}.flex-lg-shrink-1{flex-shrink:1!important}.flex-lg-wrap{flex-wrap:wrap!important}.flex-lg-nowrap{flex-wrap:nowrap!important}.flex-lg-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-lg-start{justify-content:flex-start!important}.justify-content-lg-end{justify-content:flex-end!important}.justify-content-lg-center{justify-content:center!important}.justify-content-lg-between{justify-content:space-between!important}.justify-content-lg-around{justify-content:space-around!important}.justify-content-lg-evenly{justify-content:space-evenly!important}.align-items-lg-start{align-items:flex-start!important}.align-items-lg-end{align-items:flex-end!important}.align-items-lg-center{align-items:center!important}.align-items-lg-baseline{align-items:baseline!important}.align-items-lg-stretch{align-items:stretch!important}.align-content-lg-start{align-content:flex-start!important}.align-content-lg-end{align-content:flex-end!important}.align-content-lg-center{align-content:center!important}.align-content-lg-between{align-content:space-between!important}.align-content-lg-around{align-content:space-around!important}.align-content-lg-stretch{align-content:stretch!important}.align-self-lg-auto{align-self:auto!important}.align-self-lg-start{align-self:flex-start!important}.align-self-lg-end{align-self:flex-end!important}.align-self-lg-center{align-self:center!important}.align-self-lg-baseline{align-self:baseline!important}.align-self-lg-stretch{align-self:stretch!important}.order-lg-first{order:-1!important}.order-lg-0{order:0!important}.order-lg-1{order:1!important}.order-lg-2{order:2!important}.order-lg-3{order:3!important}.order-lg-4{order:4!important}.order-lg-5{order:5!important}.order-lg-last{order:6!important}.m-lg-0{margin:0!important}.m-lg-1{margin:.25rem!important}.m-lg-2{margin:.5rem!important}.m-lg-3{margin:1rem!important}.m-lg-4{margin:1.5rem!important}.m-lg-5{margin:3rem!important}.m-lg-auto{margin:auto!important}.mx-lg-0{margin-right:0!important;margin-left:0!important}.mx-lg-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-lg-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-lg-3{margin-right:1rem!important;margin-left:1rem!important}.mx-lg-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-lg-5{margin-right:3rem!important;margin-left:3rem!important}.mx-lg-auto{margin-right:auto!important;margin-left:auto!important}.my-lg-0{margin-top:0!important;margin-bottom:0!important}.my-lg-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-lg-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-lg-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-lg-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-lg-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-lg-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-lg-0{margin-top:0!important}.mt-lg-1{margin-top:.25rem!important}.mt-lg-2{margin-top:.5rem!important}.mt-lg-3{margin-top:1rem!important}.mt-lg-4{margin-top:1.5rem!important}.mt-lg-5{margin-top:3rem!important}.mt-lg-auto{margin-top:auto!important}.me-lg-0{margin-right:0!important}.me-lg-1{margin-right:.25rem!important}.me-lg-2{margin-right:.5rem!important}.me-lg-3{margin-right:1rem!important}.me-lg-4{margin-right:1.5rem!important}.me-lg-5{margin-right:3rem!important}.me-lg-auto{margin-right:auto!important}.mb-lg-0{margin-bottom:0!important}.mb-lg-1{margin-bottom:.25rem!important}.mb-lg-2{margin-bottom:.5rem!important}.mb-lg-3{margin-bottom:1rem!important}.mb-lg-4{margin-bottom:1.5rem!important}.mb-lg-5{margin-bottom:3rem!important}.mb-lg-auto{margin-bottom:auto!important}.ms-lg-0{margin-left:0!important}.ms-lg-1{margin-left:.25rem!important}.ms-lg-2{margin-left:.5rem!important}.ms-lg-3{margin-left:1rem!important}.ms-lg-4{margin-left:1.5rem!important}.ms-lg-5{margin-left:3rem!important}.ms-lg-auto{margin-left:auto!important}.p-lg-0{padding:0!important}.p-lg-1{padding:.25rem!important}.p-lg-2{padding:.5rem!important}.p-lg-3{padding:1rem!important}.p-lg-4{padding:1.5rem!important}.p-lg-5{padding:3rem!important}.px-lg-0{padding-right:0!important;padding-left:0!important}.px-lg-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-lg-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-lg-3{padding-right:1rem!important;padding-left:1rem!important}.px-lg-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-lg-5{padding-right:3rem!important;padding-left:3rem!important}.py-lg-0{padding-top:0!important;padding-bottom:0!important}.py-lg-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-lg-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-lg-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-lg-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-lg-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-lg-0{padding-top:0!important}.pt-lg-1{padding-top:.25rem!important}.pt-lg-2{padding-top:.5rem!important}.pt-lg-3{padding-top:1rem!important}.pt-lg-4{padding-top:1.5rem!important}.pt-lg-5{padding-top:3rem!important}.pe-lg-0{padding-right:0!important}.pe-lg-1{padding-right:.25rem!important}.pe-lg-2{padding-right:.5rem!important}.pe-lg-3{padding-right:1rem!important}.pe-lg-4{padding-right:1.5rem!important}.pe-lg-5{padding-right:3rem!important}.pb-lg-0{padding-bottom:0!important}.pb-lg-1{padding-bottom:.25rem!important}.pb-lg-2{padding-bottom:.5rem!important}.pb-lg-3{padding-bottom:1rem!important}.pb-lg-4{padding-bottom:1.5rem!important}.pb-lg-5{padding-bottom:3rem!important}.ps-lg-0{padding-left:0!important}.ps-lg-1{padding-left:.25rem!important}.ps-lg-2{padding-left:.5rem!important}.ps-lg-3{padding-left:1rem!important}.ps-lg-4{padding-left:1.5rem!important}.ps-lg-5{padding-left:3rem!important}}@media (min-width:1200px){.d-xl-inline{display:inline!important}.d-xl-inline-block{display:inline-block!important}.d-xl-block{display:block!important}.d-xl-grid{display:grid!important}.d-xl-inline-grid{display:inline-grid!important}.d-xl-table{display:table!important}.d-xl-table-row{display:table-row!important}.d-xl-table-cell{display:table-cell!important}.d-xl-flex{display:flex!important}.d-xl-inline-flex{display:inline-flex!important}.d-xl-none{display:none!important}.flex-xl-fill{flex:1 1 auto!important}.flex-xl-row{flex-direction:row!important}.flex-xl-column{flex-direction:column!important}.flex-xl-row-reverse{flex-direction:row-reverse!important}.flex-xl-column-reverse{flex-direction:column-reverse!important}.flex-xl-grow-0{flex-grow:0!important}.flex-xl-grow-1{flex-grow:1!important}.flex-xl-shrink-0{flex-shrink:0!important}.flex-xl-shrink-1{flex-shrink:1!important}.flex-xl-wrap{flex-wrap:wrap!important}.flex-xl-nowrap{flex-wrap:nowrap!important}.flex-xl-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-xl-start{justify-content:flex-start!important}.justify-content-xl-end{justify-content:flex-end!important}.justify-content-xl-center{justify-content:center!important}.justify-content-xl-between{justify-content:space-between!important}.justify-content-xl-around{justify-content:space-around!important}.justify-content-xl-evenly{justify-content:space-evenly!important}.align-items-xl-start{align-items:flex-start!important}.align-items-xl-end{align-items:flex-end!important}.align-items-xl-center{align-items:center!important}.align-items-xl-baseline{align-items:baseline!important}.align-items-xl-stretch{align-items:stretch!important}.align-content-xl-start{align-content:flex-start!important}.align-content-xl-end{align-content:flex-end!important}.align-content-xl-center{align-content:center!important}.align-content-xl-between{align-content:space-between!important}.align-content-xl-around{align-content:space-around!important}.align-content-xl-stretch{align-content:stretch!important}.align-self-xl-auto{align-self:auto!important}.align-self-xl-start{align-self:flex-start!important}.align-self-xl-end{align-self:flex-end!important}.align-self-xl-center{align-self:center!important}.align-self-xl-baseline{align-self:baseline!important}.align-self-xl-stretch{align-self:stretch!important}.order-xl-first{order:-1!important}.order-xl-0{order:0!important}.order-xl-1{order:1!important}.order-xl-2{order:2!important}.order-xl-3{order:3!important}.order-xl-4{order:4!important}.order-xl-5{order:5!important}.order-xl-last{order:6!important}.m-xl-0{margin:0!important}.m-xl-1{margin:.25rem!important}.m-xl-2{margin:.5rem!important}.m-xl-3{margin:1rem!important}.m-xl-4{margin:1.5rem!important}.m-xl-5{margin:3rem!important}.m-xl-auto{margin:auto!important}.mx-xl-0{margin-right:0!important;margin-left:0!important}.mx-xl-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-xl-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-xl-3{margin-right:1rem!important;margin-left:1rem!important}.mx-xl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-xl-5{margin-right:3rem!important;margin-left:3rem!important}.mx-xl-auto{margin-right:auto!important;margin-left:auto!important}.my-xl-0{margin-top:0!important;margin-bottom:0!important}.my-xl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-xl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-xl-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-xl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-xl-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-xl-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-xl-0{margin-top:0!important}.mt-xl-1{margin-top:.25rem!important}.mt-xl-2{margin-top:.5rem!important}.mt-xl-3{margin-top:1rem!important}.mt-xl-4{margin-top:1.5rem!important}.mt-xl-5{margin-top:3rem!important}.mt-xl-auto{margin-top:auto!important}.me-xl-0{margin-right:0!important}.me-xl-1{margin-right:.25rem!important}.me-xl-2{margin-right:.5rem!important}.me-xl-3{margin-right:1rem!important}.me-xl-4{margin-right:1.5rem!important}.me-xl-5{margin-right:3rem!important}.me-xl-auto{margin-right:auto!important}.mb-xl-0{margin-bottom:0!important}.mb-xl-1{margin-bottom:.25rem!important}.mb-xl-2{margin-bottom:.5rem!important}.mb-xl-3{margin-bottom:1rem!important}.mb-xl-4{margin-bottom:1.5rem!important}.mb-xl-5{margin-bottom:3rem!important}.mb-xl-auto{margin-bottom:auto!important}.ms-xl-0{margin-left:0!important}.ms-xl-1{margin-left:.25rem!important}.ms-xl-2{margin-left:.5rem!important}.ms-xl-3{margin-left:1rem!important}.ms-xl-4{margin-left:1.5rem!important}.ms-xl-5{margin-left:3rem!important}.ms-xl-auto{margin-left:auto!important}.p-xl-0{padding:0!important}.p-xl-1{padding:.25rem!important}.p-xl-2{padding:.5rem!important}.p-xl-3{padding:1rem!important}.p-xl-4{padding:1.5rem!important}.p-xl-5{padding:3rem!important}.px-xl-0{padding-right:0!important;padding-left:0!important}.px-xl-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-xl-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-xl-3{padding-right:1rem!important;padding-left:1rem!important}.px-xl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-xl-5{padding-right:3rem!important;padding-left:3rem!important}.py-xl-0{padding-top:0!important;padding-bottom:0!important}.py-xl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-xl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-xl-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-xl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-xl-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-xl-0{padding-top:0!important}.pt-xl-1{padding-top:.25rem!important}.pt-xl-2{padding-top:.5rem!important}.pt-xl-3{padding-top:1rem!important}.pt-xl-4{padding-top:1.5rem!important}.pt-xl-5{padding-top:3rem!important}.pe-xl-0{padding-right:0!important}.pe-xl-1{padding-right:.25rem!important}.pe-xl-2{padding-right:.5rem!important}.pe-xl-3{padding-right:1rem!important}.pe-xl-4{padding-right:1.5rem!important}.pe-xl-5{padding-right:3rem!important}.pb-xl-0{padding-bottom:0!important}.pb-xl-1{padding-bottom:.25rem!important}.pb-xl-2{padding-bottom:.5rem!important}.pb-xl-3{padding-bottom:1rem!important}.pb-xl-4{padding-bottom:1.5rem!important}.pb-xl-5{padding-bottom:3rem!important}.ps-xl-0{padding-left:0!important}.ps-xl-1{padding-left:.25rem!important}.ps-xl-2{padding-left:.5rem!important}.ps-xl-3{padding-left:1rem!important}.ps-xl-4{padding-left:1.5rem!important}.ps-xl-5{padding-left:3rem!important}}@media (min-width:1400px){.d-xxl-inline{display:inline!important}.d-xxl-inline-block{display:inline-block!important}.d-xxl-block{display:block!important}.d-xxl-grid{display:grid!important}.d-xxl-inline-grid{display:inline-grid!important}.d-xxl-table{display:table!important}.d-xxl-table-row{display:table-row!important}.d-xxl-table-cell{display:table-cell!important}.d-xxl-flex{display:flex!important}.d-xxl-inline-flex{display:inline-flex!important}.d-xxl-none{display:none!important}.flex-xxl-fill{flex:1 1 auto!important}.flex-xxl-row{flex-direction:row!important}.flex-xxl-column{flex-direction:column!important}.flex-xxl-row-reverse{flex-direction:row-reverse!important}.flex-xxl-column-reverse{flex-direction:column-reverse!important}.flex-xxl-grow-0{flex-grow:0!important}.flex-xxl-grow-1{flex-grow:1!important}.flex-xxl-shrink-0{flex-shrink:0!important}.flex-xxl-shrink-1{flex-shrink:1!important}.flex-xxl-wrap{flex-wrap:wrap!important}.flex-xxl-nowrap{flex-wrap:nowrap!important}.flex-xxl-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-xxl-start{justify-content:flex-start!important}.justify-content-xxl-end{justify-content:flex-end!important}.justify-content-xxl-center{justify-content:center!important}.justify-content-xxl-between{justify-content:space-between!important}.justify-content-xxl-around{justify-content:space-around!important}.justify-content-xxl-evenly{justify-content:space-evenly!important}.align-items-xxl-start{align-items:flex-start!important}.align-items-xxl-end{align-items:flex-end!important}.align-items-xxl-center{align-items:center!important}.align-items-xxl-baseline{align-items:baseline!important}.align-items-xxl-stretch{align-items:stretch!important}.align-content-xxl-start{align-content:flex-start!important}.align-content-xxl-end{align-content:flex-end!important}.align-content-xxl-center{align-content:center!important}.align-content-xxl-between{align-content:space-between!important}.align-content-xxl-around{align-content:space-around!important}.align-content-xxl-stretch{align-content:stretch!important}.align-self-xxl-auto{align-self:auto!important}.align-self-xxl-start{align-self:flex-start!important}.align-self-xxl-end{align-self:flex-end!important}.align-self-xxl-center{align-self:center!important}.align-self-xxl-baseline{align-self:baseline!important}.align-self-xxl-stretch{align-self:stretch!important}.order-xxl-first{order:-1!important}.order-xxl-0{order:0!important}.order-xxl-1{order:1!important}.order-xxl-2{order:2!important}.order-xxl-3{order:3!important}.order-xxl-4{order:4!important}.order-xxl-5{order:5!important}.order-xxl-last{order:6!important}.m-xxl-0{margin:0!important}.m-xxl-1{margin:.25rem!important}.m-xxl-2{margin:.5rem!important}.m-xxl-3{margin:1rem!important}.m-xxl-4{margin:1.5rem!important}.m-xxl-5{margin:3rem!important}.m-xxl-auto{margin:auto!important}.mx-xxl-0{margin-right:0!important;margin-left:0!important}.mx-xxl-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-xxl-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-xxl-3{margin-right:1rem!important;margin-left:1rem!important}.mx-xxl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-xxl-5{margin-right:3rem!important;margin-left:3rem!important}.mx-xxl-auto{margin-right:auto!important;margin-left:auto!important}.my-xxl-0{margin-top:0!important;margin-bottom:0!important}.my-xxl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-xxl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-xxl-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-xxl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-xxl-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-xxl-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-xxl-0{margin-top:0!important}.mt-xxl-1{margin-top:.25rem!important}.mt-xxl-2{margin-top:.5rem!important}.mt-xxl-3{margin-top:1rem!important}.mt-xxl-4{margin-top:1.5rem!important}.mt-xxl-5{margin-top:3rem!important}.mt-xxl-auto{margin-top:auto!important}.me-xxl-0{margin-right:0!important}.me-xxl-1{margin-right:.25rem!important}.me-xxl-2{margin-right:.5rem!important}.me-xxl-3{margin-right:1rem!important}.me-xxl-4{margin-right:1.5rem!important}.me-xxl-5{margin-right:3rem!important}.me-xxl-auto{margin-right:auto!important}.mb-xxl-0{margin-bottom:0!important}.mb-xxl-1{margin-bottom:.25rem!important}.mb-xxl-2{margin-bottom:.5rem!important}.mb-xxl-3{margin-bottom:1rem!important}.mb-xxl-4{margin-bottom:1.5rem!important}.mb-xxl-5{margin-bottom:3rem!important}.mb-xxl-auto{margin-bottom:auto!important}.ms-xxl-0{margin-left:0!important}.ms-xxl-1{margin-left:.25rem!important}.ms-xxl-2{margin-left:.5rem!important}.ms-xxl-3{margin-left:1rem!important}.ms-xxl-4{margin-left:1.5rem!important}.ms-xxl-5{margin-left:3rem!important}.ms-xxl-auto{margin-left:auto!important}.p-xxl-0{padding:0!important}.p-xxl-1{padding:.25rem!important}.p-xxl-2{padding:.5rem!important}.p-xxl-3{padding:1rem!important}.p-xxl-4{padding:1.5rem!important}.p-xxl-5{padding:3rem!important}.px-xxl-0{padding-right:0!important;padding-left:0!important}.px-xxl-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-xxl-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-xxl-3{padding-right:1rem!important;padding-left:1rem!important}.px-xxl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-xxl-5{padding-right:3rem!important;padding-left:3rem!important}.py-xxl-0{padding-top:0!important;padding-bottom:0!important}.py-xxl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-xxl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-xxl-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-xxl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-xxl-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-xxl-0{padding-top:0!important}.pt-xxl-1{padding-top:.25rem!important}.pt-xxl-2{padding-top:.5rem!important}.pt-xxl-3{padding-top:1rem!important}.pt-xxl-4{padding-top:1.5rem!important}.pt-xxl-5{padding-top:3rem!important}.pe-xxl-0{padding-right:0!important}.pe-xxl-1{padding-right:.25rem!important}.pe-xxl-2{padding-right:.5rem!important}.pe-xxl-3{padding-right:1rem!important}.pe-xxl-4{padding-right:1.5rem!important}.pe-xxl-5{padding-right:3rem!important}.pb-xxl-0{padding-bottom:0!important}.pb-xxl-1{padding-bottom:.25rem!important}.pb-xxl-2{padding-bottom:.5rem!important}.pb-xxl-3{padding-bottom:1rem!important}.pb-xxl-4{padding-bottom:1.5rem!important}.pb-xxl-5{padding-bottom:3rem!important}.ps-xxl-0{padding-left:0!important}.ps-xxl-1{padding-left:.25rem!important}.ps-xxl-2{padding-left:.5rem!important}.ps-xxl-3{padding-left:1rem!important}.ps-xxl-4{padding-left:1.5rem!important}.ps-xxl-5{padding-left:3rem!important}}@media print{.d-print-inline{display:inline!important}.d-print-inline-block{display:inline-block!important}.d-print-block{display:block!important}.d-print-grid{display:grid!important}.d-print-inline-grid{display:inline-grid!important}.d-print-table{display:table!important}.d-print-table-row{display:table-row!important}.d-print-table-cell{display:table-cell!important}.d-print-flex{display:flex!important}.d-print-inline-flex{display:inline-flex!important}.d-print-none{display:none!important}}
+/*# sourceMappingURL=bootstrap-grid.min.css.map */
\ No newline at end of file
diff --git a/webapp/src/main/webapp/themes/wilma/css/screen.css b/webapp/src/main/webapp/themes/wilma/css/screen.css
index 7e6c67f8f4..8d6127afc9 100644
--- a/webapp/src/main/webapp/themes/wilma/css/screen.css
+++ b/webapp/src/main/webapp/themes/wilma/css/screen.css
@@ -22,6 +22,7 @@ VIVO wilma theme: screen styles
 
 @charset "UTF-8";
 
+@import url("../../../bootstrap-5.3.2/css/bootstrap.css");
 @import url("reset.css");
 @import url("wilma.css");
 @import url("page-createAndLink.css");
diff --git a/webapp/src/main/webapp/themes/wilma/css/wilma.css b/webapp/src/main/webapp/themes/wilma/css/wilma.css
index 0a7c4fdb26..d66010eeac 100644
--- a/webapp/src/main/webapp/themes/wilma/css/wilma.css
+++ b/webapp/src/main/webapp/themes/wilma/css/wilma.css
@@ -76,6 +76,52 @@ h5 {
     font-size: .875em;
     color: #064d68;
 }
+
+.clearfix::after {
+    content: "";
+    clear: both;
+    display: table;
+}
+
+/* ------------------------------------------------->  */
+/* BOOTSTRAP MODIFICATION -------------------------->  */
+/* ------------------------------------------------->  */
+
+
+@media (min-width: 1400px) {
+    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
+      max-width: 970px;
+    }
+}
+
+@media (min-width: 1200px) {
+    .container-xl, .container-lg, .container-md, .container-sm, .container {
+        max-width: 970px;
+    }
+}
+
+.row-margin-fill {
+    --bs-gutter-x: 1.5rem;
+    --bs-gutter-y: 0;
+    margin-top: calc(-1 * var(--bs-gutter-y));
+    margin-right: calc(-.5 * var(--bs-gutter-x));
+    margin-left: calc(-.5 * var(--bs-gutter-x));
+}
+
+.container {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.row {
+    margin-left: 0;
+    margin-right: 0;;
+}
+
+* {
+    box-sizing: border-box;
+}
+
 /* ------------------------------------------------->  */
 /* EDITING STYLES ---------------------------------->  */
 /* ------------------------------------------------->  */
@@ -91,6 +137,7 @@ input[type="password"] {
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     margin-bottom: .8em;
+    max-width: 100%;
 }
 input.block {
     margin-bottom: 20px;
@@ -240,9 +287,23 @@ p.submit {
 .editingForm table {
     border-color: #dfe6e6;
 }
+
 .editingForm td {
     padding: 3px;
 }
+
+.editingForm tr > td:first-child {
+    width: 40%;
+}
+
+
+@media (min-width: 768px) {
+    .editingForm tr > td:first-child {
+        width: 15%;
+    }
+}
+
+
 .editingForm .entryFormHead {
     background-color: #f1f2ee;
     border-color: #dfe6e6;
@@ -308,13 +369,18 @@ a.return:active {
     line-height: 2em !important;
 }
 .row, .rowvert {
+    background-color: inherit;
+    font-size: inherit;
+    font-family: inherit;
+}
+/* .row, .rowvert {
     background-color: #f7f9f9;
     color: #5F6464;
     font-size: 10pt;
     font-style: normal;
     text-align: left;
     line-height: 2em;
-}
+} */
 .rowalternate {
     background-color: #fff;
     color: #5F6464;
@@ -446,24 +512,48 @@ hr.formDivider {
 /* HEADER ------>  */
 #branding {
     position: relative;
-    width: 970px;
+    /* width: 970px; */
     height: 114px;
     margin: 0 auto;
 }
 /* BRANDING ------>  */
 h1.vivo-logo {
     position: absolute;
-    width: 442px;
+    /* width: 442px; */
+    max-width: 442px;
+    /* width: 65%; */
+    width: 94px;
     height: 59px;
+    /* top: 13px; */
     top: 28px;
     left: 0;
     background: url(../images/VIVO-logo.png) 0 0 no-repeat;
+    background-position: top left;
+    background-size: 209px;
 }
+
 h1.vivo-logo a {
     display: block;
-    width: 386px;
+    /* width: 386px; */
+    max-width: 138px;
     height: 59px;
 }
+
+@media (min-width: 768px) {
+    h1.vivo-logo {
+        width: 50%;
+        top: 28px;
+        background-size: contain;
+
+    }
+
+    h1.vivo-logo a {
+        max-width: 386px;
+    }
+}
+
+
+
 /* HEADER NAV------>  */
 ul#header-nav {
     float: right;
@@ -495,18 +585,34 @@ ul#header-nav a.log-out {
     padding-left: 10px;
 }
 /* SEARCH ------>  */
+
 #search {
+    width: 100%;
+    margin-top: 25px;
     position: absolute;
-    width: 396px;
+    /* width: 396px; */
+    max-width: 393px;
     height: 38px;
     top: 40px;
-    right: 10px;
-    padding-top: 5px;
+    right: 0;
+    /* padding-top: 5px; */
+    padding: 5px 10px 0px;
 }
+
+@media (min-width: 768px) {
+    #search {
+        width: 50%;
+        margin-top: 0;
+    }
+}
+
 #search-field {
-    width: 396px;
+    /* width: 396px; */
+    display: flex;
     height: 38px;
     background: url(../images/search-interior-pages.png) 0 0 no-repeat;
+    background-position-x: right;
+    border-radius: 4px;
 }
 #search-field input.search {
     text-decoration: none;
@@ -514,18 +620,19 @@ ul#header-nav a.log-out {
     color: #fff;
     font-size: 14px;
     border: none;
-    padding-left: 25px;
-    padding-top: 8px;
+    padding: 0 20px;
     cursor: pointer;
 }
 input.search-vivo {
     float: left;
-    width: 290px;
+    /* width: 290px; */
+    width: 100%;
     height: 25px;
     border: 0;
     font-size: 16px;
     color: #5e6363;
     margin-left: 10px;
+    margin-right: 10px;
     margin-top: 5px;
     padding: 0;
 }
@@ -534,9 +641,9 @@ input.search-vivo {
 }
 /* MAIN NAVIGATION------>  */
 ul#main-nav {
-    display: block;
-    width: 968px;
-    height: 46px;
+    display: flex;
+    flex-wrap: wrap;
+    /* height: 46px; */
     border: 1px solid #dce4e3;
     background-color: #f7f9f9;
     margin: 0 auto;
@@ -545,7 +652,6 @@ ul#main-nav {
     color: #706a66;
 }
 #main-nav li {
-    float: left;
     line-height: 46px;
     background: url(../images/separator-main-nav.jpg) right -2px no-repeat;
 }
@@ -564,23 +670,32 @@ ul#main-nav {
     background: url(../images/selected-main-nav.jpg) left -1px no-repeat;
     margin-left: 18px;
 }
+
+ul.dropdown li#user-menu a {
+    margin-right: 0;
+}
+
 /* WRAPPER CONTENT------>  */
 #wrapper-content {
     clear: both;
-    width: 930px;
+    /* width: 930px; */
     margin: 0 auto;
     background: #fff;
+    /* padding-top: 20px; */
+}
+
+#wrapper-content > .row > .row-wrapper {
     min-height: 710px;
-    padding: 20px;
 }
 /* INTRO-BLURB ------>  */
 #intro {
     float: left;
-    width: 570px;
+    /* width: 570px; */
     padding-bottom: 50px;
+    margin-top: 20px;
 }
 body.loggedIn #intro {
-    width: 98%;
+    width: 100%;
 }
 #intro h2 {
     padding: 35px 0 12px 24px;
@@ -607,14 +722,15 @@ ul.individual-urls-people li a {
 }
 /* LOG IN------>  */
 #login {
-    float: right;
-    width: 314px;
+    /* float: right; */
+    /* width: 314px; */
     border: 1px solid #e8ece9;
-    margin-right: 25px;
+    /* margin-right: 25px; */
     padding-bottom: 30px;
     margin-bottom: 30px;
     overflow: hidden;
     margin-top: 20px;
+    padding: 15px;
 }
 body.login #login {
     float: none;
@@ -622,8 +738,8 @@ body.login #login {
 #login h2 {
     font-size: 22px;
     color: #2485ae;
-    padding-left: 15px;
-    padding-top: 18px;
+    /* padding-left: 15px; */
+    /* padding-top: 18px; */
     border-bottom: none;
 }
 h3.internal-auth:hover {
@@ -649,20 +765,27 @@ h3.internal-auth:hover {
     color: #a12424;
     padding-top: 5px;
 }
+
+#login-form > div {
+    padding: 38px;
+}
+
 #login-form label {
     display: block;
     color: #5e6363;
     padding-top: 0;
-    padding-left: 38px;
+    /* padding-left: 38px; */
     font-size: 14px;
 }
+
 #login-form input.text-field {
     border: 0;
     font-size: 14px;
     padding: 5px;
-    width: 219px;
-    height: 24px;
-    margin-left: 38px;
+    /* width: 219px; */
+    width: 100%;
+    height: 43px;
+    /* margin-left: 38px; */
     background: #fff;
     border: 1px solid #e0dfdf;
     border-radius: 5px;
@@ -674,15 +797,14 @@ h3.internal-auth:hover {
     background-color: rgba(57, 138, 172, .1);
 }
 #login-form p.submit {
-    width: 100px;
+    width: 100%;
     height: 40px;
     margin-top: 20px;
-    margin-left: 38px;
+    /* margin-left: 38px; */
 }
 #login-form p.submit-password {
     height: 40px;
     margin-top: 20px;
-    margin-left: 38px;
 }
 #login-form input.checkbox-remember-me {
     float: left;
@@ -737,13 +859,13 @@ p.password-note {
     padding: .25em;
     margin-bottom: 8px;
 }
-#flash-msg-container,
+/* #flash-msg-container,
 #welcome-msg-container {
     margin-bottom: 8px;
     margin-top: -10px;
     margin-right:-10px;
     height:34px;
-}
+} */
 p.external-auth {
     margin: 0 auto;
 }
@@ -762,8 +884,11 @@ p.external-auth a.blue:hover {
 /* HOME SEARCH ------>  */
 #search-home {
     float: left;
-    width: 533px;
+    /* width: 533px; */
+    width: 100%;
+    max-width: 533px;
     margin: 30px 0 0 0;
+    /* margin-right: 24px; */
 }
 #search-home h3 {
     padding: 0;
@@ -773,24 +898,26 @@ p.external-auth a.blue:hover {
 		padding-left: 24px;
 }
 #search-home-field {
-    width: 483px;
-    height: 44px;
+    /* width: 483px; */
+    display: flex;
+    width: 100%;
+    height: 43px;
     background: url(../images/search-field-and-button.gif) 0 0 no-repeat;
+    background-position-x: right;
 }
 #search-home-field input.search {
     text-decoration: none;
-    background-color: transparent;
+    background-color: #5e6363;
     color: #fff;
     font-size: 18px;
     border: none;
-    padding-left: 23px;
-    padding-top: 8px;
+    padding: 11px 22px;
     cursor: pointer;
 }
 input.search-home-vivo {
     float: left;
     margin: 10px 0 0 8px;
-    width: 350px;
+    max-width: 350px;
     height: 20px;
     border: 0;
     font-size: 18px;
@@ -801,24 +928,25 @@ input.search-home-vivo {
 
 /* SEARCH HOME------>  */
 
-#search-home-field {
-		background: url(../images/search-field-and-button.gif) 0 0 no-repeat;
-		width: 520px;
-}
-#search-home-field input.search {
-	 	background-color: transparent;
-	 	color: #fff;
-		border: none;
-}
+
 a.filter-search {
-	right: 109px;
+    position: relative;
+	right: initial;
 }
 input.search-homepage {
-		border: 0;
-		background-color: #f9fafa;
-		background-position: right;
-		opacity: .5;
-		text-align:right;
+    border: 0;
+    background-color: #f9fafa;
+    background-position: right;
+    opacity: .5;
+    text-align:right;
+    width: 100%;
+    flex-grow: 1;
+    margin: 0;
+    height: 100%;
+}
+
+#search-homepage .search-home-field .limit-search {
+    position: relative;
 }
 
 .filter-default {
@@ -832,7 +960,7 @@ input.search-homepage {
 		color: #fff;
 		background-color: #2d3535;
 		color: #fff;
-		right: 109px;
+		right: 0;
 }
 #filter-search-nav li {
 		background-image: none;
@@ -883,6 +1011,8 @@ a.view-all-style {
 		border-top: 1px dotted #dbe3e3; /* stroke */
 		border-bottom: 1px dotted #dbe3e3; /* stroke */
 		background-color: #fff; /* layer fill content */
+        position: relative;
+        padding-bottom: 20px;
 }
 .home-sections h4 {
 		border-top: 1px solid rgba(220,228,227,.42); /* stroke */
@@ -892,8 +1022,21 @@ a.view-all-style {
 		color: #fff;
 }
 #home-stats {
-		margin-top: 30px;
+	margin-top: 30px;
+    width: 100%;
+    height: 100%;
+    padding-bottom: 30px;
 }
+
+#stats li:first-child {
+    margin-left: 0;
+}
+
+#stats {
+    width: initial;
+    padding-left: 35px;
+}
+
 #stats li {
 		-moz-border-radius: 6px;
 		-webkit-border-radius: 6px;
@@ -911,11 +1054,26 @@ a.view-all-style {
 		color: #fff;
 		opacity: .5;
 }
-#home-research  {
-	width: 297px;
-	float: left;
-	clear: both;
+
+@media (min-width: 768px) {
+    #home-research  {
+        flex: 0 0 auto;
+        width: 33.3333333%;
+    }
+}
+
+#home-research > ul {
+    position: absolute;
+    bottom: 0;
+    right: 0;
 }
+
+#viewMoreFac {
+    position: absolute;
+    bottom: 0;
+    right: 0; 
+}
+
 #home-research table {
 	margin: 0.7em 0 0.6em 35px;
     width: calc(100% - 35px);
@@ -946,11 +1104,14 @@ a.view-all-style {
 	margin-left: 4px;
 	text-align: center;
 }
-#home-academic-depts  {
-	width: 297px;
-	margin-left: 15px;
-	float: left;
+
+@media (min-width: 768px) {
+    #home-academic-depts  {
+        flex: 0 0 auto;
+        width: 33.3333333%;
+    }
 }
+
 #home-academic-depts h4,
 #home-faculty-mbrs h4,
 #home-geo-focus h4,
@@ -962,17 +1123,28 @@ a.view-all-style {
     list-style: disc outside url(../../../images/arrowIcon.gif);
 	padding: 0.4em 0 0.6em 1.8em;
 }
+
+#home-academic-depts ul:nth-child(2) {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+}
+
+
 #home-academic-depts li {
 	line-height: 1.25em;
 	padding-top: 1.0em;
 	padding-right: 4px;
 	font-size: 0.9em;
 }
-#home-faculty-mbrs  {
-	width: 297px;
-	margin: 0 0 20px 15px;
-	float: left;
+
+@media (min-width: 768px) {
+    #home-faculty-mbrs  {
+        flex: 0 0 auto;
+        width: 33.3333333%;
+    }
 }
+
 div#tempSpacing {
     margin-top:30px;
     padding-left:20px;
@@ -1022,7 +1194,7 @@ div#adjImgHeight {
 	display: inline-block;
     margin-top: 30px;
     height: 632px;
-    width: 921px;
+    max-width: 921px;
 }
 #home-geo-focus div#timeIndicatorGeo {
     text-align:center;
@@ -1031,30 +1203,34 @@ div#adjImgHeight {
 /* FOOTER------>  */
 footer {
     clear: both;
-    width: 970px;
-    height: 88px;
+    /* width: 970px; */
+    /* height: 88px; */
     margin: 0 auto;
     font-size: .7em;
     color: #4e5051;
     background-color: #fff;
 }
 footer p.copyright {
-    float: left;
-    padding-top: 55px;
-    padding-left: 30px;
-    width: 600px;
+    padding-left: 10px;
 }
+
 footer p.copyright small {
     font-size: 1em;
 }
+
+footer > .row  {
+    padding-top: 40px;
+}
+
 ul#footer-nav {
     float: right;
     list-style: none;
-    height: 20px;
+    /* height: 20px; */
     margin: 0;
     padding: 0;
-    padding-top: 55px;
-    padding-right: 20px;
+    margin-bottom: 10px;
+    /* padding-top: 55px; */
+    /* padding-right: 20px; */
 }
 ul#footer-nav li {
     float: left;
@@ -1169,7 +1345,7 @@ ul#individual-tools-people li a {
 /* VISUAL GRAPH------>  */
 .property-group,
 #menupage-intro {
-    width: 920px;
+    width: 100%;
     background: #fff;
 }
 #menupage-intro h2 {
@@ -1184,7 +1360,7 @@ ul#individual-tools-people li a {
     border-right: 1px solid #e8ece9;
 }
 #menupage-content {
-    width: 900px;
+    max-width: 900px;
 }
 #menupage-content h3 {
     font-size: 1.5em;
@@ -1249,8 +1425,16 @@ ul#find-filters a.selected {
 }
 /* BROWSE BY ------>  */
 #browse-by {
-    width: 920px;
+    width: 100%;
+    overflow: unset;
 }
+
+/* #browse-by > nav::after {
+    content: "";
+    clear: both;
+    display: table;
+} */
+
 #browse-by h2 {
     background: #5e6363;
     font-size: 1.375em;
@@ -1261,12 +1445,33 @@ ul#browse-classes {
     border: 1px solid #dde4e3;
     border-right: 0;
     background-color: #f1f2ee;
+    width: initial;
+    float: unset;
+    margin-left: 0;
+    padding-left: 10px;
+    padding-right: 10px;
+    width: 100%;
 }
+
+@media (min-width: 768px) {
+    ul#browse-classes {
+        float: left;
+        width: 33.333333%;
+    }
+}
+
 ul#browse-classes li,
 ul#vgraph-classes li {
     border-bottom: 1px solid #dde4e3;
     font-size: 1em;
+    width: initial;
+    margin: 0;
+}
+
+ul#browse-classes a {
+    width: initial;
 }
+
 ul#browse-classes a:hover,
 ul#browse-classes a.selected {
     background: url(../images/arrow.gif) 4px 5px no-repeat;
@@ -1278,6 +1483,10 @@ ul#browse-classes .count-classes {
 /* ALPHA BROWSE------>  */
 ul#alpha-browse-individuals {
     background-color: #fff;
+    width: 100%;
+    float: unset;
+    display: flex;
+    flex-wrap: wrap;
 }
 ul#alpha-browse-individuals a:hover,
 ul#alpha-browse-individuals a.selected {
@@ -1299,13 +1508,35 @@ nav#alpha-browse-container {
     background-color: #fff;
     border-left: 1px solid #dde4e3;
     border-bottom: none;
+    width: 100%;
+    margin: 0;
+    float: unset
+}
+
+@media (min-width: 768px) {
+    nav#alpha-browse-container {
+        float: left;
+        width: 66.6666666%;
+    }
 }
+
 /* BROWSE INDIVIDUALS------>  */
 #individuals-in-class {
-    width: 629px;
+    /* width: 629px; */
+    width: 100%;
     border: 1px solid #dde4e3;
     background-color: #fff;
+    float: none;
+    margin-right: 0;
 }
+
+@media (min-width: 768px) {
+    #individuals-in-class {
+        float: left;
+        width: 66.666666%;
+    }
+}
+
 #individuals-in-class li.individual {
     border-bottom: 1px solid #dde4e3;
 }
@@ -1337,9 +1568,12 @@ article.property ul.property-list {
     border: 1px solid #DDE4E3;
 }
 #photoCropping {
-    margin-left: 20px;
-    padding-left: 40px;
+    /* margin-left: 20px; */
+    padding-left: 60px;
     background: url(../images/pointToCropPreview.jpg) 0 30px no-repeat;
+    background-position-x: 20px;
+    overflow-x: auto;
+    max-width: 100%;
 }
 #photoCroppingPreview {
     width: 210px;
@@ -1394,6 +1628,30 @@ h2#webpage {
 img.individual-photo {
     border: 7px solid #ebebeb;
 }
+
+ul.propertyTabsList {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+ul.propertyTabsList > li {
+    text-wrap: nowrap;
+}
+
+ul.propertyTabsList > li.groupTabSpacer:last-child {
+    width: initial !important;
+    flex-grow: 1;
+}
+
+.scroll-up {
+    right: -12px;
+}  
+@media (min-width: 768px) {
+    .scroll-up {
+        right: -21px;
+    }    
+}
+
 .rdf-url {
     padding-top: .8em;
     display: block;
@@ -1401,6 +1659,17 @@ img.individual-photo {
 ul#individual-tools {
     color: #8AA149
 }
+
+#share-contact {
+    float: unset;
+}
+
+@media (min-width: 768px) {
+    #share-contact {
+        float: left;
+    }
+}
+
 #share-contact a.email,
 #share-contact a.tel,
 .editingForm .entryFormHead h2,
@@ -1428,6 +1697,15 @@ h2#mainImage,
 h3.internal-auth {
     color: #5e6363;
 }
+
+#individual-info {
+    width: 100%;
+}
+
+#individual-info > header {
+    width: 100%;
+}
+
 #individual-info h1.fn {
     font-size: 1.375em;
     color: #595B5B;
@@ -1442,6 +1720,12 @@ h3.internal-auth {
     font-size: 1.125em;
     line-height: 1.2em;
 }
+
+#individual-intro.person #individual-info {
+    width: 75%;
+    /* float: unset; */
+}
+
 ul#individual-personInPosition {
     font-size: 1em;
     list-style: url("../../../images/individual/arrow-green.gif");
@@ -1482,6 +1766,27 @@ a.all-vivo-publications {
 img.co-author {
     border: 2px solid #ebebeb;
 }
+
+section#right-hand-column:after {
+    content: "";
+    clear: both;
+    display: table;
+}
+
+#right-hand-column {
+    float: unset;
+    width: 100%;
+    padding: 0 0 20px 0;
+}
+
+@media (min-width: 768px) {
+    #right-hand-column {
+        padding: 0 0 0 20px;
+        width: initial;
+        float: right;
+    }
+}
+
 #co-authors h3,
 #right-hand-column h3 {
     font-size: 1.25em;
@@ -1489,7 +1794,8 @@ img.co-author {
 }
 /* PROPERTY GROUP MENU ------>  */
 #property-group-menu {
-    width: 920px;
+    /* Style not used */
+    max-width: 920px;
     background: #f1f2ee;
 }
 #property-group-menu li {
@@ -1509,7 +1815,8 @@ section.property-group h2,
     font-weight: normal;
 }
 article.property {
-    width: 852px;
+    /* width: 852px; */
+    width: 100%;
 }
 article.property h3 {
     background: #fafaf9;
@@ -1528,6 +1835,7 @@ article.property .data-property-statement {
 article.property ul.property-list li a {
     /*color: #2485ae;*/   /* cappadona: seems unnecessarily specific and is overriding .more-less from individual.css so I'm commenting out for now */
     line-height: 1.6em;
+    word-break: break-all
 }
 /* MISCELLANEOUS ------>  */
 .displace {
@@ -1542,6 +1850,7 @@ a {
 }
 input[type="submit"] {
     cursor: pointer;
+    text-wrap: balance;
 }
 input[type="search" i] {
     margin: 2px;
@@ -1559,9 +1868,31 @@ p.address-line {
 /* ------------------------------------------------->  */
 /* SITE ADMIN DASHBOARD ---------------------------->  */
 /* ------------------------------------------------->  */
+#adminDashboard {
+    display: flex;
+    flex-wrap: wrap;
+}
+
 #adminDashboard .pageBodyGroup {
   padding: 0 1em .5em 1em;
+  width: 100%;
 }
+
+@media (min-width: 768px) {
+    #adminDashboard .pageBodyGroup {
+        flex: 0 0 auto;
+        width: 50%;
+    }
+}
+
+#addIndividualClass #submit {
+    text-wrap: wrap;
+}
+
+#adminDashboard .pageBodyGroup {
+    padding: 0 1em .5em 1em;
+}
+
 #adminDashboard .pageBodyGroup h3 {
   background-color: #fff;
   border-bottom: 1px dotted #AFB2B2;
@@ -1587,7 +1918,14 @@ p.address-line {
 }
 
 
+.staticPageBackground input[type="file"] {
+    width: 100%;
+    text-wrap: wrap;
+}
 
+#pageList {
+    overflow-x: auto;
+}
 
 /* ------------------------------------------------->  */
 /* REVISION INFO ----------------------------------->  */
@@ -1733,3 +2071,367 @@ span.subclassExpandMinus {
     background:url(../images/green_minus_sign.gif) right center no-repeat;
     min-height:18px;
 }
+
+/* ------------------------------------------------->  */
+/* CAPABILITY MAP  --------------------------------->  */
+/* ------------------------------------------------->  */
+
+#wrapper-content #main-content #container {
+    width: initial !important;
+    margin-left: initial !important;
+}
+
+#helptext {
+    width: 100%;
+}
+
+
+#right-container {
+    width: 100%;
+    position: relative;
+    float: left;
+}
+
+.tabs {
+    width: 100%;
+}
+
+.tabs ul.titles li a, .tabs ul.titles li a{
+    width: 50%;
+}
+
+#center-container {
+    position: relative;
+    width: 100% !important;
+}
+
+@media (min-width: 768px) {
+    #adminDashboard .pageBodyGroup {
+        flex: 0 0 auto;
+        width: 50%;
+    }
+
+    #right-container {
+        width: 30%;
+        position: absolute;
+    }
+
+    #helptext {
+        width: 70%;
+        padding-right: 10px;
+    }
+
+    #center-container {
+        position: absolute;
+    }
+    
+}
+
+#cutofflabel {
+    width: initial;
+}
+
+#queryform input[type="text"], select, input[type="password"]{
+    max-width: 100%;
+}
+
+#queryCutoff {
+    margin-left: -54px;
+}
+
+#infovis {
+    width: 100% !important;
+}
+
+#infovis > svg {
+    width: 100% !important;
+}
+
+/* Author Network */
+
+.propertyTabsList {
+    display: flex;
+}
+
+#body {
+    min-width: initial;
+}
+
+#chord {
+    width: 100%;
+    float: left !important;
+    overflow: auto;
+}
+
+
+#chord > svg {
+    transform-origin: 0 50%;
+    -webkit-transform-origin: 0 50%;
+    -ms-transform-origin: 0 50%;
+    transform-origin: 0 50%;
+}
+
+@media (max-width: 360px) {
+    #chord > svg {
+        scale: 0.3;
+    }
+    
+    #chord-info-div {
+        scale: 0.7;
+    }
+}
+
+@media (min-width: 361px) and (max-width: 399px) {
+    #chord > svg {
+        scale: 0.4;
+    }
+    
+    #chord-info-div {
+        scale: 0.7;
+    }
+}
+
+
+@media (min-width: 400px) and (max-width: 449px) {
+    #chord > svg {
+        scale: 0.44;
+    }
+    
+    #chord-info-div {
+        scale: 0.7;
+    }
+}
+
+
+
+@media (min-width: 450px) and (max-width: 499px) {
+    #chord > svg {
+        scale: 0.5;
+    }
+    
+    #chord-info-div {
+        scale: 0.7;
+    }
+}
+
+
+
+@media (min-width: 500px) and (max-width: 575px) {
+    #chord > svg {
+        scale: 0.55;
+    }
+    
+    #chord-info-div {
+        scale: 0.8;
+    }
+}
+
+@media (min-width: 576px) and (max-width: 767px) {
+    #chord > svg {
+        scale: 0.6;
+    }
+}
+
+
+@media (min-width: 768px) and (max-width: 991px) {
+    #chord > svg {
+        scale: 0.8;
+    }
+}
+
+
+
+#sparkline-container-full > #publication-count-sparkline-include {
+    width: 100%;
+    margin-bottom: 0px;
+}
+
+
+#sparkline-container-full > #coauthor-count-sparkline-include {
+    width: 100%;
+    margin-bottom: 0px;
+}
+
+#sparkline-container-full .google-visualization-sparkline-default img.google-visualization-sparkline-image {
+    max-width: 100%;
+}
+
+
+#body .vis-tables {
+    width: 100%;
+    margin-bottom: 0px;
+}
+
+@media (min-width: 768px) {
+    #sparkline-container-full > #publication-count-sparkline-include {
+        width: 50%;
+        margin-bottom: 15px;
+    }
+    #sparkline-container-full > #coauthor-count-sparkline-include {
+        width: 50%;
+        margin-bottom: 15px;
+    }
+    #body .vis-tables {
+        width: 48%;
+        margin-bottom: 15px;
+    }
+}
+
+#graphContainer {
+    width: 100%;
+    position: relative;
+    overflow-x: auto;
+    height: 100%;
+}
+
+#leftblock {
+    width: 100%;
+}
+
+#rightblock {
+    width: 100%;
+    margin-right: 0;
+}
+
+@media (min-width: 768px) {
+    #leftblock {
+        width: 39%;
+    }
+    
+    #rightblock {
+        width: 54%;
+    }
+}
+
+#temporal-graph {
+    height: 100%;
+    overflow-x: auto;
+}
+
+#temporal-graph-response > .blockUI  {
+    width: 100%;
+    max-width: 420px;
+    left: 0;
+}
+
+
+.editingForm > table > tbody > tr {
+    text-wrap: wrap;
+    line-break: anywhere;
+    line-height: unset;
+}
+
+table.form-background tr td {
+    width: 100%;
+    display: block;
+}
+
+#wrapper-content > div > div > div > div > table > tbody > tr > td > div > form > div {
+    display: flex;
+    flex-direction: column;
+}
+
+#wrapper-content  table > tbody > tr.header > td.verticalfieldlabel {
+    width: 100px;
+}
+
+#container section table tbody .subclassCell {
+    word-wrap: break-word;
+}
+
+table.classHierarchy {
+    min-width: auto;
+    width: 100%;
+    margin-left: 0;
+}
+
+section#container div {
+    width: initial;
+}
+
+section#container div {
+    width: initial;
+}
+
+#noLocalOntologyExists {
+    width: 100%;
+}
+
+#noLocalOntologyExists blockquote {
+    text-wrap: wrap;
+    word-break: break-word;
+}
+
+.proxy-profile {
+    width: 100%;
+}
+
+.proxy-profile .proxy {
+    width: 100%;
+}
+
+.proxy-profile .profile {
+    width: 100%;
+    padding-left: 0;
+}
+
+@media (min-width: 768px) {
+    .proxy-profile .proxy {
+        width: 50%;
+    }
+    
+    .proxy-profile .profile {
+        width: 50%;
+        padding-left: 12px;
+    }
+}
+
+ul.menuItems {
+    max-width: 300px;
+    width: initial;
+}
+
+section#floatRight {
+    width: initial;
+}
+
+#managePage #floatRight {
+    width: 100%;
+    float: unset;
+}
+
+#managePage #leftSide {
+    width: 100%;
+}
+
+@media (min-width: 768px) {
+    #managePage #floatRight {
+        width: initial;
+        float: right;
+    }
+    
+    #managePage #leftSide {
+        width: initial;
+    }
+}
+
+.customForm {
+    width: 100%;
+    overflow-x: auto;
+}
+
+.classHierarchy {
+    word-break: break-all;
+}
+
+#startup-trace h4, #startup-trace li{
+    overflow-wrap: anywhere;
+}
+
+#indexer {
+    overflow-x: auto;
+}
+
+form li {
+    overflow-wrap: break-word;
+}
\ No newline at end of file
diff --git a/webapp/src/main/webapp/themes/wilma/templates/footer.ftl b/webapp/src/main/webapp/themes/wilma/templates/footer.ftl
index dc8931517a..797ae8e635 100644
--- a/webapp/src/main/webapp/themes/wilma/templates/footer.ftl
+++ b/webapp/src/main/webapp/themes/wilma/templates/footer.ftl
@@ -3,31 +3,33 @@
 </div> <!-- #wrapper-content -->
 
 <footer role="contentinfo">
-    <p class="copyright">
-        <#if copyright??>
-            <small>&copy;${copyright.year?c}
-            <#if copyright.url??>
-                <a href="${copyright.url}" title="${i18n().menu_copyright}">${copyright.text}</a>
-            <#else>
-                ${copyright.text}
+    <div class="row">
+        <p class="copyright col-sm-7">
+            <#if copyright??>
+                <small>&copy;${copyright.year?c}
+                <#if copyright.url??>
+                    <a href="${copyright.url}" title="${i18n().menu_copyright}">${copyright.text}</a>
+                <#else>
+                    ${copyright.text}
+                </#if>
+                | <a class="terms" href="${urls.termsOfUse}" title="${i18n().menu_termuse}">${i18n().menu_termuse}</a></small> |
             </#if>
-             | <a class="terms" href="${urls.termsOfUse}" title="${i18n().menu_termuse}">${i18n().menu_termuse}</a></small> |
-        </#if>
-        ${i18n().menu_powered} <a class="powered-by-vivo" href="http://vivoweb.org" target="_blank" title="${i18n().menu_powered} VIVO"><strong>VIVO</strong></a>
-        <#if user.hasRevisionInfoAccess>
-             | ${i18n().menu_version} <a href="${version.moreInfoUrl}" title="${i18n().menu_version}">${version.label}</a>
-        </#if>
-    </p>
-
-    <nav role="navigation">
-        <ul id="footer-nav" role="list">
-            <li role="listitem"><a href="${urls.about}" title="${i18n().menu_about}">${i18n().menu_about}</a></li>
-            <#if urls.contact??>
-                <li role="listitem"><a href="${urls.contact}" title="${i18n().menu_contactus}">${i18n().menu_contactus}</a></li>
+            ${i18n().menu_powered} <a class="powered-by-vivo" href="http://vivoweb.org" target="_blank" title="${i18n().menu_powered} VIVO"><strong>VIVO</strong></a>
+            <#if user.hasRevisionInfoAccess>
+                | ${i18n().menu_version} <a href="${version.moreInfoUrl}" title="${i18n().menu_version}">${version.label}</a>
             </#if>
-            <li role="listitem"><a href="http://www.vivoweb.org/support" target="blank" title="${i18n().menu_support}">${i18n().menu_support}</a></li>
-        </ul>
-    </nav>
+        </p>
+
+        <nav role="navigation" class="col-sm-5">
+            <ul id="footer-nav" role="list">
+                <li role="listitem"><a href="${urls.about}" title="${i18n().menu_about}">${i18n().menu_about}</a></li>
+                <#if urls.contact??>
+                    <li role="listitem"><a href="${urls.contact}" title="${i18n().menu_contactus}">${i18n().menu_contactus}</a></li>
+                </#if>
+                <li role="listitem"><a href="http://www.vivoweb.org/support" target="blank" title="${i18n().menu_support}">${i18n().menu_support}</a></li>
+            </ul>
+        </nav>
+    </div>
 </footer>
 
 <#include "scripts.ftl">
diff --git a/webapp/src/main/webapp/themes/wilma/templates/head.ftl b/webapp/src/main/webapp/themes/wilma/templates/head.ftl
index 06af8d7a2f..5f0417c2e4 100644
--- a/webapp/src/main/webapp/themes/wilma/templates/head.ftl
+++ b/webapp/src/main/webapp/themes/wilma/templates/head.ftl
@@ -1,5 +1,6 @@
 <#-- $This file is distributed under the terms of the license in LICENSE$ -->
 
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta charset="utf-8" />
 <!-- Google Chrome Frame open source plug-in brings Google Chrome's open web technologies and speedy JavaScript engine to Internet Explorer-->
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
@@ -18,6 +19,8 @@
     </#if>
 </#if>
 
+${headScripts.add('<script type="text/javascript" src="${urls.base}/bootstrap-5.3.2/js/bootstrap.min.js"></script>')}
+
 <#include "stylesheets.ftl">
 <link rel="stylesheet" href="${urls.theme}/css/screen.css" />
 
diff --git a/webapp/src/main/webapp/themes/wilma/templates/menu.ftl b/webapp/src/main/webapp/themes/wilma/templates/menu.ftl
index 580454bbdb..2e14177fd6 100644
--- a/webapp/src/main/webapp/themes/wilma/templates/menu.ftl
+++ b/webapp/src/main/webapp/themes/wilma/templates/menu.ftl
@@ -4,13 +4,15 @@
 
 <#include "developer.ftl">
 
-<nav role="navigation">
-    <ul id="main-nav" role="list">
-        <#list menu.items as item>
-            <li role="listitem"><a href="${item.url}" title="${item.linkText} ${i18n().menu_item}" <#if item.active> class="selected" </#if>>${item.linkText}</a></li>
-        </#list>
-    </ul>
-</nav>
+<div>
+    <nav role="navigation" class="row">
+        <ul id="main-nav" role="list">
+            <#list menu.items as item>
+                <li role="listitem"><a href="${item.url}" title="${item.linkText} ${i18n().menu_item}" <#if item.active> class="selected" </#if>>${item.linkText}</a></li>
+            </#list>
+        </ul>
+    </nav>
+</div>
 
 <div id="wrapper-content" role="main">
     <#if flash?has_content>
@@ -24,7 +26,6 @@
             </section>
         </#if>
     </#if>
-
     <!--[if lte IE 8]>
     <noscript>
         <p class="ie-alert">This site uses HTML elements that are not recognized by Internet Explorer 8 and below in the absence of JavaScript. As a result, the site will not be rendered appropriately. To correct this, please either enable JavaScript, upgrade to Internet Explorer 9, or use another browser. Here are the <a href="http://www.enable-javascript.com"  title="java script instructions">instructions for enabling JavaScript in your web browser</a>.</p>
diff --git a/webapp/src/main/webapp/themes/wilma/templates/page-home.ftl b/webapp/src/main/webapp/themes/wilma/templates/page-home.ftl
index 78ce860db9..f370c2a1bb 100644
--- a/webapp/src/main/webapp/themes/wilma/templates/page-home.ftl
+++ b/webapp/src/main/webapp/themes/wilma/templates/page-home.ftl
@@ -26,89 +26,103 @@
 
     <body class="${bodyClasses!}" onload="${bodyOnload!}">
     <#-- supplies the faculty count to the js function that generates a random row number for the search query -->
-        <@lh.facultyMemberCount  vClassGroups! />
-        <#include "identity.ftl">
-
-        <#include "menu.ftl">
-
-        <section id="intro" role="region">
-            <h2>${i18n().intro_title}</h2>
-
-            <p>${i18n().intro_para1}</p>
-            <p>${i18n().intro_para2}</p>
-
-            <section id="search-home" role="region">
-                <h3>${i18n().intro_searchvivo} <span class="search-filter-selected">filteredSearch</span></h3>
-
-                <fieldset>
-                    <legend>${i18n().search_form}</legend>
-                    <form id="search-homepage" action="${urls.search}" name="search-home" role="search" method="GET" >
-                        <div id="search-home-field">
-                            <input type="text" name="querytext" class="search-homepage" value="" autocapitalize="off" />
-                            <input type="submit" value="${i18n().search_button}" class="search" />
-                            <input type="hidden" name="filters_category"  value="" autocapitalize="off" />
-                        </div>
-
-                        <a class="filter-search filter-default" href="#" title="${i18n().intro_filtersearch}">
-                            <span class="displace">${i18n().intro_filtersearch}</span>
-                        </a>
-
-                        <ul id="filter-search-nav">
-                            <li><a class="active" href="">${i18n().all_capitalized}</a></li>
-                            <@lh.allClassGroupNames vClassGroups! />
-                        </ul>
-                    </form>
-                </fieldset>
-            </section> <!-- #search-home -->
-
-        </section> <!-- #intro -->
-
-        <@widget name="login" />
-
-        <!-- List of research classes: e.g., articles, books, collections, conference papers -->
-        <@lh.researchClasses />
-
-        <!-- List of four randomly selected faculty members -->
-        <@lh.facultyMbrHtml />
-
-        <!-- List of randomly selected academic departments -->
-        <@lh.academicDeptsHtml />
-
-        <#if geoFocusMapsEnabled >
-            <!-- Map display of researchers' areas of geographic focus. Must be enabled in runtime.properties -->
-            <@lh.geographicFocusHtml />
-        </#if>
-
-        <!-- Statistical information relating to property groups and their classes; displayed horizontally, not vertically-->
-        <@lh.allClassGroups vClassGroups! />
-
-        <#include "footer.ftl">
-        <#-- builds a json object that is used by js to render the academic departments section -->
-        <@lh.listAcademicDepartments />
-    <script>
-        var i18nStrings = {
-            researcherString: '${i18n().researcher?js_string}',
-            researchersString: '${i18n().researchers?js_string}',
-            currentlyNoResearchers: '${i18n().currently_no_researchers?js_string}',
-            countriesAndRegions: '${i18n().countries_and_regions?js_string}',
-            countriesString: '${i18n().countries?js_string}',
-            regionsString: '${i18n().regions?js_string}',
-            statesString: '${i18n().map_states_string?js_string}',
-            stateString: '${i18n().map_state_string?js_string}',
-            statewideLocations: '${i18n().statewide_locations?js_string}',
-            researchersInString: '${i18n().researchers_in?js_string}',
-            inString: '${i18n().in?js_string}',
-            noFacultyFound: '${i18n().no_faculty_found?js_string}',
-            placeholderImage: '${i18n().placeholder_image?js_string}',
-            viewAllFaculty: '${i18n().view_all_faculty?js_string}',
-            viewAllString: '${i18n().view_all?js_string}',
-            viewAllDepartments: '${i18n().view_all_departments?js_string}',
-            noDepartmentsFound: '${i18n().no_departments_found?js_string}'
-        };
-        // set the 'limmit search' text and alignment
-        if  ( $('input.search-homepage').css('text-align') == "right" ) {
-             $('input.search-homepage').attr("placeholder","${i18n().limit_search} \u2192");
-        }
-    </script>
+        <div class="container">
+            <@lh.facultyMemberCount  vClassGroups! />
+            <#include "identity.ftl">
+
+            <#include "menu.ftl">
+
+            <div class="row">
+                <section id="intro" role="region" class="col-md-7">
+                    <h2>${i18n().intro_title}</h2>
+
+                    <p>${i18n().intro_para1}</p>
+                    <p>${i18n().intro_para2}</p>
+
+                    <section id="search-home" role="region">
+                        <h3>${i18n().intro_searchvivo} <span class="search-filter-selected">filteredSearch</span></h3>
+
+                        <fieldset>
+                            <legend>${i18n().search_form}</legend>
+                            <form id="search-homepage" action="${urls.search}" name="search-home" role="search" method="post" >
+                                <div id="search-home-field">
+                                    <input type="text" name="querytext" class="search-homepage" value="" autocapitalize="off" />
+                                    <div class="limit-search">
+                                        <a class="filter-search filter-default" href="#" title="${i18n().intro_filtersearch}">
+                                            <span class="displace">${i18n().intro_filtersearch}</span>
+                                        </a>
+
+                                        <ul id="filter-search-nav">
+                                            <li><a class="active" href="">${i18n().all_capitalized}</a></li>
+                                            <@lh.allClassGroupNames vClassGroups! />
+                                        </ul>                                
+                                    </div>
+                                    <input type="submit" value="${i18n().search_button}" class="search" />
+                                    <input type="hidden" name="filters_category"  value="" autocapitalize="off" />
+                                </div>
+
+
+                            </form>
+                        </fieldset>
+                    </section> <!-- #search-home -->
+
+                </section> <!-- #intro -->
+
+                <div class="col-md-5">
+                    <@widget name="login" />
+                </div>
+            </div>
+
+            <div class="row">
+                <!-- List of research classes: e.g., articles, books, collections, conference papers -->
+                <@lh.researchClasses />
+
+                <!-- List of four randomly selected faculty members -->
+                <@lh.facultyMbrHtml />
+
+                <!-- List of randomly selected academic departments -->
+                <@lh.academicDeptsHtml />
+
+                <#if geoFocusMapsEnabled >
+                    <!-- Map display of researchers' areas of geographic focus. Must be enabled in runtime.properties -->
+                    <@lh.geographicFocusHtml />
+                </#if>
+            </div>
+
+            <div class="row">
+
+                <!-- Statistical information relating to property groups and their classes; displayed horizontally, not vertically-->
+                <@lh.allClassGroups vClassGroups! />
+            </div>
+
+            <#include "footer.ftl">
+            <#-- builds a json object that is used by js to render the academic departments section -->
+            <@lh.listAcademicDepartments />
+        </div>
+        <script>
+            var i18nStrings = {
+                researcherString: '${i18n().researcher?js_string}',
+                researchersString: '${i18n().researchers?js_string}',
+                currentlyNoResearchers: '${i18n().currently_no_researchers?js_string}',
+                countriesAndRegions: '${i18n().countries_and_regions?js_string}',
+                countriesString: '${i18n().countries?js_string}',
+                regionsString: '${i18n().regions?js_string}',
+                statesString: '${i18n().map_states_string?js_string}',
+                stateString: '${i18n().map_state_string?js_string}',
+                statewideLocations: '${i18n().statewide_locations?js_string}',
+                researchersInString: '${i18n().researchers_in?js_string}',
+                inString: '${i18n().in?js_string}',
+                noFacultyFound: '${i18n().no_faculty_found?js_string}',
+                placeholderImage: '${i18n().placeholder_image?js_string}',
+                viewAllFaculty: '${i18n().view_all_faculty?js_string}',
+                viewAllString: '${i18n().view_all?js_string}',
+                viewAllDepartments: '${i18n().view_all_departments?js_string}',
+                noDepartmentsFound: '${i18n().no_departments_found?js_string}'
+            };
+            // set the 'limmit search' text and alignment
+            if  ( $('input.search-homepage').css('text-align') == "right" ) {
+                $('input.search-homepage').attr("placeholder","${i18n().limit_search} \u2192");
+            }
+        </script>
     </body>
 </html>
diff --git a/webapp/src/main/webapp/themes/wilma/templates/page.ftl b/webapp/src/main/webapp/themes/wilma/templates/page.ftl
index 9b4785605f..f03e13d3d4 100644
--- a/webapp/src/main/webapp/themes/wilma/templates/page.ftl
+++ b/webapp/src/main/webapp/themes/wilma/templates/page.ftl
@@ -9,19 +9,25 @@
     </head>
 
     <body class="${bodyClasses!}" onload="${bodyOnload!}">
-        <#include "identity.ftl">
-        <#include "search.ftl">
-        <#include "menu.ftl">
+        <div class="container">
+            <#include "identity.ftl">
+            <#include "search.ftl">
+            <#include "menu.ftl">
 
-		<#-- VIVO OpenSocial Extension by UCSF -->
-		<#if openSocial??>
-			<#if openSocial.visible>
-            	<div id="gadgets-tools" class="gadgets-gadget-parent"></div>
-            </#if>
-		</#if>
+            <div class="row">
+                <div class="row-wrapper">
+                <#-- VIVO OpenSocial Extension by UCSF -->
+                <#if openSocial??>
+                    <#if openSocial.visible>
+                        <div id="gadgets-tools" class="gadgets-gadget-parent"></div>
+                    </#if>
+                </#if>
 
-        ${body}
+                ${body}
+                </div>
+            </div>
 
-        <#include "footer.ftl">
+            <#include "footer.ftl">
+        </div>
     </body>
 </html>

From bd9de0e9707affceb79c1b6ea168180360e6cd20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milo=C5=A1=20Popovi=C4=87?= <misa01523@gmail.com>
Date: Mon, 22 Jan 2024 11:43:33 +0100
Subject: [PATCH 2/9] fix: css for login width, inline form labels, site admin
 menu, data property control panel buttons (#3932)

---
 .../main/webapp/themes/wilma/css/wilma.css    | 36 ++++++++-----------
 1 file changed, 15 insertions(+), 21 deletions(-)

diff --git a/webapp/src/main/webapp/themes/wilma/css/wilma.css b/webapp/src/main/webapp/themes/wilma/css/wilma.css
index d66010eeac..9537f36590 100644
--- a/webapp/src/main/webapp/themes/wilma/css/wilma.css
+++ b/webapp/src/main/webapp/themes/wilma/css/wilma.css
@@ -145,6 +145,7 @@ input.block {
 label {
     margin-top: .5em;
     margin-bottom: .5em;
+    display: block;
 }
 label.inline {
     display: inline;
@@ -288,17 +289,17 @@ p.submit {
     border-color: #dfe6e6;
 }
 
-.editingForm td {
+.editingForm > table > tbody > tr > td.verticalfieldlabel {
     padding: 3px;
 }
 
-.editingForm tr > td:first-child {
+.editingForm > table > tbody > tr > td.verticalfieldlabel:first-child {
     width: 40%;
 }
 
 
 @media (min-width: 768px) {
-    .editingForm tr > td:first-child {
+    .editingForm > table > tbody > tr > td.verticalfieldlabel:first-child {
         width: 15%;
     }
 }
@@ -723,13 +724,13 @@ ul.individual-urls-people li a {
 /* LOG IN------>  */
 #login {
     /* float: right; */
-    /* width: 314px; */
+    max-width: 332px;
     border: 1px solid #e8ece9;
     /* margin-right: 25px; */
     padding-bottom: 30px;
     margin-bottom: 30px;
     overflow: hidden;
-    margin-top: 20px;
+    margin-top: 30px;
     padding: 15px;
 }
 body.login #login {
@@ -767,7 +768,7 @@ h3.internal-auth:hover {
 }
 
 #login-form > div {
-    padding: 38px;
+    padding: 10px 28px;
 }
 
 #login-form label {
@@ -859,13 +860,10 @@ p.password-note {
     padding: .25em;
     margin-bottom: 8px;
 }
-/* #flash-msg-container,
+#flash-msg-container,
 #welcome-msg-container {
-    margin-bottom: 8px;
-    margin-top: -10px;
-    margin-right:-10px;
-    height:34px;
-} */
+    padding: 10px;
+}
 p.external-auth {
     margin: 0 auto;
 }
@@ -1868,10 +1866,6 @@ p.address-line {
 /* ------------------------------------------------->  */
 /* SITE ADMIN DASHBOARD ---------------------------->  */
 /* ------------------------------------------------->  */
-#adminDashboard {
-    display: flex;
-    flex-wrap: wrap;
-}
 
 #adminDashboard .pageBodyGroup {
   padding: 0 1em .5em 1em;
@@ -2321,10 +2315,10 @@ span.subclassExpandMinus {
     line-height: unset;
 }
 
-table.form-background tr td {
+/* table.form-background tr td {
     width: 100%;
     display: block;
-}
+} */
 
 #wrapper-content > div > div > div > div > table > tbody > tr > td > div > form > div {
     display: flex;
@@ -2340,9 +2334,9 @@ table.form-background tr td {
 }
 
 table.classHierarchy {
-    min-width: auto;
-    width: 100%;
-    margin-left: 0;
+    min-width: initial;
+    max-width: initial;
+    width: calc(100% - 25);
 }
 
 section#container div {

From 24521d173f72a3ea3c329318923a4683049abd6a Mon Sep 17 00:00:00 2001
From: milospp <misa01523@gmail.com>
Date: Tue, 9 Apr 2024 17:16:49 +0200
Subject: [PATCH 3/9] Avoided !important tags

---
 .../css/visualization/capabilitymap/graph.css |  4 +-
 .../visualization/capabilitymap/graph_new.js  |  4 +-
 .../personlevel/coAuthorPersonLevelD3.ftl     |  3 +-
 .../personlevel/coPIPersonLevelD3.ftl         |  3 +-
 .../main/webapp/themes/wilma/css/wilma.css    | 69 ++++++++++++-------
 5 files changed, 49 insertions(+), 34 deletions(-)

diff --git a/webapp/src/main/webapp/css/visualization/capabilitymap/graph.css b/webapp/src/main/webapp/css/visualization/capabilitymap/graph.css
index 51cb46c9b1..20e6264c99 100755
--- a/webapp/src/main/webapp/css/visualization/capabilitymap/graph.css
+++ b/webapp/src/main/webapp/css/visualization/capabilitymap/graph.css
@@ -41,7 +41,9 @@ body {
 
 /* Contains all the graphics. */
 #container {
-    /*width: 1200px;*/width:940px;
+    /*width: 1200px;*/
+    max-width:940px;
+    width: 100%;
     height: auto;
     /* margin:0 auto; */
     /*margin-left:-130px;*/
diff --git a/webapp/src/main/webapp/js/visualization/capabilitymap/graph_new.js b/webapp/src/main/webapp/js/visualization/capabilitymap/graph_new.js
index e461dcdcad..9f2d87d13f 100755
--- a/webapp/src/main/webapp/js/visualization/capabilitymap/graph_new.js
+++ b/webapp/src/main/webapp/js/visualization/capabilitymap/graph_new.js
@@ -1025,11 +1025,9 @@ var unhide = function() {
     $("#resetButton").removeAttr("disabled");
     if ($(window).width() > 1230) {
         $("#container").css("box-shadow", "0px 0px 20px -6px #000000");
-        $("#container").animate({"height" : "600px", "width" : "1200px", "margin-bottom" : "20px", "margin-left" : (($("#main-content").width() - 1200) / 2) + "px"}, 500);
-        $("#center-container").css("width", "900px");
+        $("#container").animate({"height" : "600px", "width" : "auto", "margin-bottom" : "20px"}, 500);
     } else {
         $("#container").animate({"height" : "600px"});
-        $("#center-container").css("width", "640px");
     }
     $("#helptext").fadeOut();
     $("#center-container").fadeIn();
diff --git a/webapp/src/main/webapp/templates/freemarker/visualization/personlevel/coAuthorPersonLevelD3.ftl b/webapp/src/main/webapp/templates/freemarker/visualization/personlevel/coAuthorPersonLevelD3.ftl
index ee785e41c3..f4362386f4 100644
--- a/webapp/src/main/webapp/templates/freemarker/visualization/personlevel/coAuthorPersonLevelD3.ftl
+++ b/webapp/src/main/webapp/templates/freemarker/visualization/personlevel/coAuthorPersonLevelD3.ftl
@@ -135,8 +135,7 @@ $(document).ready(function(){
     // #9edae5
 
     var svg = d3.select('#chord').append('svg')
-            .attr('width', width+padding)
-            .attr('height', height+padding)
+            .attr('width', '100%')
             .append('g').attr('transform', 'translate(' + (width+padding) / 2 + ',' + (height+padding) / 2 +')')
             .datum(chord(matrix));
 
diff --git a/webapp/src/main/webapp/templates/freemarker/visualization/personlevel/coPIPersonLevelD3.ftl b/webapp/src/main/webapp/templates/freemarker/visualization/personlevel/coPIPersonLevelD3.ftl
index e2845a9825..983fe392d4 100644
--- a/webapp/src/main/webapp/templates/freemarker/visualization/personlevel/coPIPersonLevelD3.ftl
+++ b/webapp/src/main/webapp/templates/freemarker/visualization/personlevel/coPIPersonLevelD3.ftl
@@ -139,8 +139,7 @@ $(document).ready(function(){
     // #9edae5
 
     var svg = d3.select('#chord').append('svg')
-            .attr('width', width+padding)
-            .attr('height', height+padding)
+            .attr('width', '100%')
             .append('g').attr('transform', 'translate(' + (width+padding) / 2 + ',' + (height+padding) / 2 +')')
             .datum(chord(matrix));
 
diff --git a/webapp/src/main/webapp/themes/wilma/css/wilma.css b/webapp/src/main/webapp/themes/wilma/css/wilma.css
index 9537f36590..210ebecb8b 100644
--- a/webapp/src/main/webapp/themes/wilma/css/wilma.css
+++ b/webapp/src/main/webapp/themes/wilma/css/wilma.css
@@ -1637,7 +1637,7 @@ ul.propertyTabsList > li {
 }
 
 ul.propertyTabsList > li.groupTabSpacer:last-child {
-    width: initial !important;
+    width: initial;
     flex-grow: 1;
 }
 
@@ -2071,8 +2071,7 @@ span.subclassExpandMinus {
 /* ------------------------------------------------->  */
 
 #wrapper-content #main-content #container {
-    width: initial !important;
-    margin-left: initial !important;
+    display: flex;
 }
 
 #helptext {
@@ -2096,7 +2095,7 @@ span.subclassExpandMinus {
 
 #center-container {
     position: relative;
-    width: 100% !important;
+    width: 100%;
 }
 
 @media (min-width: 768px) {
@@ -2106,18 +2105,13 @@ span.subclassExpandMinus {
     }
 
     #right-container {
-        width: 30%;
-        position: absolute;
+        width: 34%;
     }
 
     #helptext {
         width: 70%;
         padding-right: 10px;
     }
-
-    #center-container {
-        position: absolute;
-    }
     
 }
 
@@ -2133,14 +2127,6 @@ span.subclassExpandMinus {
     margin-left: -54px;
 }
 
-#infovis {
-    width: 100% !important;
-}
-
-#infovis > svg {
-    width: 100% !important;
-}
-
 /* Author Network */
 
 .propertyTabsList {
@@ -2153,7 +2139,8 @@ span.subclassExpandMinus {
 
 #chord {
     width: 100%;
-    float: left !important;
+    height: 100%;
+    float: left;
     overflow: auto;
 }
 
@@ -2163,11 +2150,17 @@ span.subclassExpandMinus {
     -webkit-transform-origin: 0 50%;
     -ms-transform-origin: 0 50%;
     transform-origin: 0 50%;
+    height: 100%;
 }
 
 @media (max-width: 360px) {
-    #chord > svg {
+    #body > #bodyPannel {
+        height: 360px;
+    }
+
+    #chord > svg > * {
         scale: 0.3;
+        overflow: hidden;
     }
     
     #chord-info-div {
@@ -2176,7 +2169,11 @@ span.subclassExpandMinus {
 }
 
 @media (min-width: 361px) and (max-width: 399px) {
-    #chord > svg {
+    #body > #bodyPannel {
+        height: 360px;
+    }
+
+    #chord > svg > * {
         scale: 0.4;
     }
     
@@ -2187,7 +2184,11 @@ span.subclassExpandMinus {
 
 
 @media (min-width: 400px) and (max-width: 449px) {
-    #chord > svg {
+    #body > #bodyPannel {
+        height: 400px;
+    }
+    
+    #chord > svg > * {
         scale: 0.44;
     }
     
@@ -2199,7 +2200,11 @@ span.subclassExpandMinus {
 
 
 @media (min-width: 450px) and (max-width: 499px) {
-    #chord > svg {
+    #body > #bodyPannel {
+        height: 450px;
+    }
+    
+    #chord > svg > * {
         scale: 0.5;
     }
     
@@ -2211,7 +2216,11 @@ span.subclassExpandMinus {
 
 
 @media (min-width: 500px) and (max-width: 575px) {
-    #chord > svg {
+    #body > #bodyPannel {
+        height: 500px;
+    }
+    
+    #chord > svg > * {
         scale: 0.55;
     }
     
@@ -2221,14 +2230,22 @@ span.subclassExpandMinus {
 }
 
 @media (min-width: 576px) and (max-width: 767px) {
-    #chord > svg {
+    #body > #bodyPannel {
+        height: 576px;
+    }
+    
+    #chord > svg > * {
         scale: 0.6;
     }
 }
 
 
 @media (min-width: 768px) and (max-width: 991px) {
-    #chord > svg {
+    #body > #bodyPannel {
+        height: 768px;
+    }
+    
+    #chord > svg > * {
         scale: 0.8;
     }
 }

From ca4438b8065c3af17585a920e05c15cefb7d0100 Mon Sep 17 00:00:00 2001
From: milospp <misa01523@gmail.com>
Date: Tue, 9 Apr 2024 18:29:04 +0200
Subject: [PATCH 4/9] Fixed capability map animation

---
 .../css/visualization/capabilitymap/graph.css      | 14 +++++++++++---
 .../js/visualization/capabilitymap/graph_new.js    |  1 +
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/webapp/src/main/webapp/css/visualization/capabilitymap/graph.css b/webapp/src/main/webapp/css/visualization/capabilitymap/graph.css
index 20e6264c99..9b690834e8 100755
--- a/webapp/src/main/webapp/css/visualization/capabilitymap/graph.css
+++ b/webapp/src/main/webapp/css/visualization/capabilitymap/graph.css
@@ -45,11 +45,19 @@ body {
     max-width:940px;
     width: 100%;
     height: auto;
-    /* margin:0 auto; */
-    /*margin-left:-130px;*/
     position:relative;
-    /*box-shadow:0px 0px 20px -6px #000000;*/
     margin-top:15px;
+    transition: 0.5s ease all;
+
+}
+
+@media (min-width: 1200px) {
+    #container.wide-container {    
+        width: 1200px;
+        max-width: 1200px;
+        margin-left:-130px;
+        margin-right:-130px;
+    }
 }
 
 #left-container,
diff --git a/webapp/src/main/webapp/js/visualization/capabilitymap/graph_new.js b/webapp/src/main/webapp/js/visualization/capabilitymap/graph_new.js
index 9f2d87d13f..e33575dbb6 100755
--- a/webapp/src/main/webapp/js/visualization/capabilitymap/graph_new.js
+++ b/webapp/src/main/webapp/js/visualization/capabilitymap/graph_new.js
@@ -1026,6 +1026,7 @@ var unhide = function() {
     if ($(window).width() > 1230) {
         $("#container").css("box-shadow", "0px 0px 20px -6px #000000");
         $("#container").animate({"height" : "600px", "width" : "auto", "margin-bottom" : "20px"}, 500);
+        $("#container").addClass("wide-container");
     } else {
         $("#container").animate({"height" : "600px"});
     }

From 091fbe33eb2364d03429c10fdd1eae0315e05423 Mon Sep 17 00:00:00 2001
From: Milos Popovic <misa01523@gmail.com>
Date: Mon, 27 May 2024 16:42:15 +0200
Subject: [PATCH 5/9] Removed debug prints

---
 webapp/src/main/webapp/js/individual/propertyGroupControls.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/webapp/src/main/webapp/js/individual/propertyGroupControls.js b/webapp/src/main/webapp/js/individual/propertyGroupControls.js
index 1b50991dfe..2ec42b5e2b 100644
--- a/webapp/src/main/webapp/js/individual/propertyGroupControls.js
+++ b/webapp/src/main/webapp/js/individual/propertyGroupControls.js
@@ -155,7 +155,6 @@ $(document).ready(function(){
                     // deselect the default first tab
 
                     if ( groupName == "viewAll" ) {
-                        console.log("View all")
                         showAllTabs();
                     } else {
 

From c704233cb5ed800ae95f2b82280109b0cc556811 Mon Sep 17 00:00:00 2001
From: Milos Popovic <misa01523@gmail.com>
Date: Mon, 27 May 2024 18:04:56 +0200
Subject: [PATCH 6/9] Reverted search form to GET method

---
 webapp/src/main/webapp/themes/wilma/templates/page-home.ftl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/main/webapp/themes/wilma/templates/page-home.ftl b/webapp/src/main/webapp/themes/wilma/templates/page-home.ftl
index f370c2a1bb..910e2cf776 100644
--- a/webapp/src/main/webapp/themes/wilma/templates/page-home.ftl
+++ b/webapp/src/main/webapp/themes/wilma/templates/page-home.ftl
@@ -44,7 +44,7 @@
 
                         <fieldset>
                             <legend>${i18n().search_form}</legend>
-                            <form id="search-homepage" action="${urls.search}" name="search-home" role="search" method="post" >
+                            <form id="search-homepage" action="${urls.search}" name="search-home" role="search" method="GET" >
                                 <div id="search-home-field">
                                     <input type="text" name="querytext" class="search-homepage" value="" autocapitalize="off" />
                                     <div class="limit-search">

From 3cdfb65a43d153a476f664a6cac43a23ec67b99c Mon Sep 17 00:00:00 2001
From: Milos Popovic <misa01523@gmail.com>
Date: Mon, 27 May 2024 18:29:03 +0200
Subject: [PATCH 7/9] Removed mistakenly added Bootstrap 5 from Nemo theme.

---
 webapp/src/main/webapp/themes/nemo/templates/head.ftl | 1 -
 1 file changed, 1 deletion(-)

diff --git a/webapp/src/main/webapp/themes/nemo/templates/head.ftl b/webapp/src/main/webapp/themes/nemo/templates/head.ftl
index 837d8f1c79..c4bdb490e7 100644
--- a/webapp/src/main/webapp/themes/nemo/templates/head.ftl
+++ b/webapp/src/main/webapp/themes/nemo/templates/head.ftl
@@ -20,7 +20,6 @@
     </#if>	
 </#if>	
 
-<script src="${urls.base}/bootstrap-5.3.2/js/bootstrap.min.js"></script> 
 
 <#include "stylesheets.ftl">
 <#-- <link rel="stylesheet" href="${urls.theme}/css/screen.css" /> -->

From 28f87eba9d2e48978c854b5abea1758b35d28b8b Mon Sep 17 00:00:00 2001
From: Milos Popovic <misa01523@gmail.com>
Date: Wed, 5 Jun 2024 15:57:18 +0200
Subject: [PATCH 8/9] Reverted bootstrap location refactor

---
 webapp/src/main/webapp/themes/nemo/templates/headScripts.ftl  | 2 +-
 webapp/src/main/webapp/themes/tenderfoot/css/screen.css       | 4 ++--
 .../themes/tenderfoot/templates/page/partials/headScripts.ftl | 2 +-
 webapp/src/main/webapp/themes/wilma/css/screen.css            | 2 +-
 webapp/src/main/webapp/themes/wilma/templates/head.ftl        | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/webapp/src/main/webapp/themes/nemo/templates/headScripts.ftl b/webapp/src/main/webapp/themes/nemo/templates/headScripts.ftl
index 2b76e03104..be26ee797a 100644
--- a/webapp/src/main/webapp/themes/nemo/templates/headScripts.ftl
+++ b/webapp/src/main/webapp/themes/nemo/templates/headScripts.ftl
@@ -15,7 +15,7 @@ var i18nStrings = {
 
 <script type="text/javascript" src="${urls.base}/js/vitroUtils.js"></script>
 
-<script src="${urls.base}/bootstrap/js/bootstrap.min.js"></script> 
+<script src="${urls.base}/js/bootstrap/js/bootstrap.min.js"></script> 
 
 <script src="${urls.theme}/js/publicationTableFilter.js"></script>
 
diff --git a/webapp/src/main/webapp/themes/tenderfoot/css/screen.css b/webapp/src/main/webapp/themes/tenderfoot/css/screen.css
index cacef769c0..936519191a 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/css/screen.css
+++ b/webapp/src/main/webapp/themes/tenderfoot/css/screen.css
@@ -16,8 +16,8 @@ VIVO tenderfoot theme: screen styles
 
 @charset "UTF-8";
 
-@import url("../../../bootstrap/css/bootstrap.min.css");
-@import url("../../../bootstrap/css/bootstrap-theme.min.css");
+@import url("../../../js/bootstrap/css/bootstrap.min.css");
+@import url("../../../js/bootstrap/css/bootstrap-theme.min.css");
 @import url("reset.css");
 @import url("tenderfoot.css");
 @import url("edit.css");
diff --git a/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/headScripts.ftl b/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/headScripts.ftl
index 49c9181a9c..80b863bb7f 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/headScripts.ftl
+++ b/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/headScripts.ftl
@@ -15,7 +15,7 @@ var i18nStrings = {
 <script type="text/javascript" src="${urls.base}/js/html5.js"></script>
 <![endif]-->
 
-<script src="${urls.base}/bootstrap/js/bootstrap.min.js"></script>
+<script src="${urls.base}/js/bootstrap/js/bootstrap.min.js"></script>
 <script type="text/javascript">
 	$(document).ready(function(){
         $('#nav-wrapper').height($("#nav").height());
diff --git a/webapp/src/main/webapp/themes/wilma/css/screen.css b/webapp/src/main/webapp/themes/wilma/css/screen.css
index 8d6127afc9..e1655f44eb 100644
--- a/webapp/src/main/webapp/themes/wilma/css/screen.css
+++ b/webapp/src/main/webapp/themes/wilma/css/screen.css
@@ -22,7 +22,7 @@ VIVO wilma theme: screen styles
 
 @charset "UTF-8";
 
-@import url("../../../bootstrap-5.3.2/css/bootstrap.css");
+@import url("../../../webjars/bootstrap/css/bootstrap.min.css");
 @import url("reset.css");
 @import url("wilma.css");
 @import url("page-createAndLink.css");
diff --git a/webapp/src/main/webapp/themes/wilma/templates/head.ftl b/webapp/src/main/webapp/themes/wilma/templates/head.ftl
index 5f0417c2e4..0eeb8b73e8 100644
--- a/webapp/src/main/webapp/themes/wilma/templates/head.ftl
+++ b/webapp/src/main/webapp/themes/wilma/templates/head.ftl
@@ -19,7 +19,7 @@
     </#if>
 </#if>
 
-${headScripts.add('<script type="text/javascript" src="${urls.base}/bootstrap-5.3.2/js/bootstrap.min.js"></script>')}
+${headScripts.add('<script type="text/javascript" src="${urls.base}/webjars/bootstrap/js/bootstrap.min.js"></script>')}
 
 <#include "stylesheets.ftl">
 <link rel="stylesheet" href="${urls.theme}/css/screen.css" />

From b91bc6cc45352d710e59583167a3ed5cbf72bc2f Mon Sep 17 00:00:00 2001
From: Milos Popovic <misa01523@gmail.com>
Date: Sun, 4 Aug 2024 20:56:43 +0200
Subject: [PATCH 9/9] Fixed geo focus map responsiveness

---
 webapp/src/main/webapp/css/home-page-maps.css     | 3 +--
 webapp/src/main/webapp/themes/wilma/css/wilma.css | 1 -
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/webapp/src/main/webapp/css/home-page-maps.css b/webapp/src/main/webapp/css/home-page-maps.css
index 9e004e0301..ecdb85a393 100644
--- a/webapp/src/main/webapp/css/home-page-maps.css
+++ b/webapp/src/main/webapp/css/home-page-maps.css
@@ -17,8 +17,7 @@ div#researcherTotal {
 }
 .mapArea {
     height:540px;
-    width:885px;
-    margin: 2px 0 16px 16px;
+    margin: 2px 16px 16px 16px;
 }
 .divIconCount {
     border: none;
diff --git a/webapp/src/main/webapp/themes/wilma/css/wilma.css b/webapp/src/main/webapp/themes/wilma/css/wilma.css
index 210ebecb8b..9df0481c6c 100644
--- a/webapp/src/main/webapp/themes/wilma/css/wilma.css
+++ b/webapp/src/main/webapp/themes/wilma/css/wilma.css
@@ -1192,7 +1192,6 @@ div#adjImgHeight {
 	display: inline-block;
     margin-top: 30px;
     height: 632px;
-    max-width: 921px;
 }
 #home-geo-focus div#timeIndicatorGeo {
     text-align:center;