Index: lams_central/web/css/components.scss
===================================================================
diff -u -rf0206ca043e253b03bc1b6f99b345bbfe4b85dd2 -r21aea119939539ce08a947354f84cb7dc6980d38
--- lams_central/web/css/components.scss	(.../components.scss)	(revision f0206ca043e253b03bc1b6f99b345bbfe4b85dd2)
+++ lams_central/web/css/components.scss	(.../components.scss)	(revision 21aea119939539ce08a947354f84cb7dc6980d38)
@@ -5,6 +5,15 @@
     @extend .container-lg;
 }
 
+@media (width <= 768px) {
+	#container-main {
+		--bs-gutter-x: 0.1rem;
+		--bs-gutter-y: 0.1rem;
+		padding-right: calc(var(--bs-gutter-x) * -5.5);
+		padding-left: calc(var(--bs-gutter-x) * 0.5);
+	}
+}
+
 .btn-secondary-darker {
 	@extend .btn-secondary;
 	background-color: shade-color($secondary, 20%);
@@ -14,8 +23,6 @@
 	margin-bottom: 1.5rem;
 	padding-bottom: 0.5rem;
     padding-top: 1rem;
-    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
-    box-shadow: 0 1px 1px rgba(0,0,0,.05);
 }
 
 /* For Boostrap 3 & 5 compability */
@@ -86,6 +93,14 @@
   background-color: var(--lams-background-gray);
 }
 
+@media (width <= 768px) {
+    body.component {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+      font-size: 12px;
+      background-color: unset;
+    }
+}
+
 body.component .btn-success,
 body.component .btn-success:hover {
   color: #fff;
@@ -217,27 +232,27 @@
 }
 
 body.component .portrait-color-0 {
-  color: black;
+  color: $portrait-color-0;
 }
 
 body.component .portrait-color-1 {
-  color: var(--bs-red);
+  color: $portrait-color-1;
 }
 
 body.component .portrait-color-2 {
-  color: var(--bs-yellow);
+  color: $portrait-color-2;
 }
 
 body.component .portrait-color-3 {
-  color: var(--bs-gray);
+  color: $portrait-color-3;
 }
 
 body.component .portrait-color-4 {
-  color: var(--bs-green);
+  color: $portrait-color-4;
 }
 
 body.component .portrait-color-5 {
-  color: var(--bs-blue);
+  color: $portrait-color-5;
 }
 
 /* lineheight setting to use on the name if it is next to portrait, as generated by the Portrait tag. e.g. in Peer Review*/
@@ -253,7 +268,7 @@
 }
 
 body.component .portrait-generic-sm:before {
-  content: "\f2be";
+  content: "\f2bd";
   font-family: FontAwesome;
   font-style: normal;
   font-size: 35px;
@@ -268,7 +283,7 @@
 }
 
 body.component .portrait-generic-md:before {
-  content: "\f2be";
+  content: "\f2bd";
   font-family: FontAwesome;
   font-style: normal;
   font-size: 80px;
@@ -283,7 +298,7 @@
 }
 
 body.component .portrait-generic-lg:before {
-  content: "\f2be";
+  content: "\f2bd";
   font-family: FontAwesome;
   font-style: normal;
   font-size: 200px;
@@ -634,6 +649,11 @@
   pointer-events: auto !important;
 }
 
+/*----------Hack for jquery.validate.js----------------*/
+label.is-invalid {
+	@extend .invalid-feedback;
+}
+
 /*----------Ratings----------------*/
 .rating-comment{
   background-image: none;
@@ -1796,4 +1816,4 @@
 .gate-opened-icon {
 	cursor: pointer;
 }
-*/
\ No newline at end of file
+*/