Index: lams_central/web/css/components.css
===================================================================
diff -u -r1024255b15cb1a0dcb4722623c6023ce6c5c8378 -r738f59e40c50f794e0ff39eed87e88485a420006
--- lams_central/web/css/components.css	(.../components.css)	(revision 1024255b15cb1a0dcb4722623c6023ce6c5c8378)
+++ lams_central/web/css/components.css	(.../components.css)	(revision 738f59e40c50f794e0ff39eed87e88485a420006)
@@ -1,15 +1,5 @@
-@font-face {
-	font-family: mont-bold;
-	src: url(/lams/includes/fonts/FontsFree-Net-Mont-Bold.ttf);
-}
-
-@font-face {
-	font-family: mont-regular;
-	src: url(/lams/includes/fonts/FontsFree-Net-Mont1.ttf);
-}
-
 body.component {
-	font-family: mont-regular, sans-serif;
+	font-family: Arial, sans-serif;
 	background-color: var(--lams-background-gray);
 }
 
@@ -161,7 +151,6 @@
 
 body.component .portrait-color-2 {
 	color: var(--bs-yellow);
-	filter: brightness(70%);
 }
 
 body.component .portrait-color-3 {
@@ -230,52 +219,86 @@
   border-radius: 50%;
 }
 
-.component-page-wrapper {
-	min-height: 100vh;
-	border-radius: 2rem;
-	overflow: hidden;
+body.component .cke_textarea_inline {
+  /* From bootstrap form-control */
+  display: block;
+  width: 100%;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  color: #555;
+  background-color: var(--bs-white);
+  background-image: none;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
+  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  border: thin solid var(--bs-secondary);
+  overflow: hidden;
+  /* keeps floating objects within ckeditor area */
+  /* LAMS -  min height is set in ckconfig_custom.js but keep the default here too so that most fields 
+   * are the right size and only the ones where the height is overridden does the size change.  */
+  min-height: 60px;
+  -webkit-appearance: textfield;
 }
+body.component .cke_textarea_inline:focus {
+  border-color: var(--bs-blue);
+  outline: 0;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
+}
 
-.component-page-wrapper .btn {
+body.component .cke_float {
+  width: 70% !important;
+}
+
+/** Overwrite CKEditor's default CSS, so that content in an editor is displayed the same way as in real life */
+body.component .cke_widget_inline {
+  display: block !important;
+}
+
+body.component .btn {
 	border-radius: 1.0rem;
 }
 
-.component-page-wrapper i.fa[role="button"] {
+body.component i.fa[role="button"] {
 	cursor: pointer;
 }
 
-.component-page-wrapper table.table thead th {
+body.component table.table thead th {
 	border: none;
 	border-bottom: 2px solid var(--bs-blue);
 }
 
-.component-page-wrapper table.table tbody td,
-.component-page-wrapper table.table tbody th,
-.ui-jqgrid-bdiv .ui-row-ltr.jqgrow td {
+body.component table.table tbody td,
+body.component table.table tbody th,
+body.component .ui-jqgrid-bdiv .ui-row-ltr.jqgrow td {
 	border: none;
 	border-bottom: 2px solid var(--bs-gray-200) !important;
 }
 
-.component-page-wrapper .card-header {
+body.component .card-header {
 	background-color: var(--bs-gray-200);
 }
 
-.component-page-wrapper input:focus,
-.component-page-wrapper button:focus,
-.component-page-wrapper textarea:focus {
+body.component input:focus,
+body.component button:focus,
+body.component textarea:focus {
 	outline: none;
 }
 
-.component-page-wrapper input::placeholder {
+body.component input::placeholder {
 	opacity: 0.7;
 }
 
-.component-page-wrapper a:hover,
-.component-page-wrapper a:focus {
+body.component a:hover,
+body.component a:focus {
 	text-decoration: none;
 }
 
-.component-page-wrapper .switch input {
+body.component .switch input {
 	position: absolute;
 	height: 1px;
 	width: 1px;
@@ -287,7 +310,7 @@
 	padding: 0;
 }
 
-.component-page-wrapper .switch input ~ label {
+body.component .switch input ~ label {
 	position: relative;
 	min-width: calc(calc(2.375rem * .8)* 2);
 	border-radius: calc(2.375rem * .8);
@@ -302,8 +325,8 @@
 	margin-bottom: 0;
 }
 
-.component-page-wrapper .switch input ~ label::before,
-.component-page-wrapper .switch input ~ label::after {
+body.component .switch input ~ label::before,
+body.component .switch input ~ label::after {
 	content: '';
 	position: absolute;
 	top: 0;
@@ -313,14 +336,14 @@
 	display: block;
 }
 
-.component-page-wrapper .switch input ~ label::before {
+body.component .switch input ~ label::before {
 	right: 0;
 	background-color: var(--bs-gray);
 	border-radius: calc(2.375rem * .8);
 	transition: 0.2s all;
 }
 
-.component-page-wrapper .switch input ~ label::after {
+body.component .switch input ~ label::after {
 	top: 2px;
 	left: 2px;
 	width: calc(calc(2.375rem * .8) - calc(2px * 2));
@@ -330,70 +353,76 @@
 	transition: 0.2s all;
 }
 
-.component-page-wrapper .switch input:checked ~ label::before {
+body.component .switch input:checked ~ label::before {
 	background-color: var(--bs-green);
 }
 
-.component-page-wrapper .switch input:checked ~ label::after {
+body.component .switch input:checked ~ label::after {
 	margin-left: calc(2.375rem * .8);
 }
 
-.component-page-wrapper .switch input:focus ~ label::before {
+body.component .switch input:focus ~ label::before {
 	outline: none;
 	box-shadow: 0 0 0 0.2rem rgba(0, 136, 221, 0.25);
 }
 
-.component-page-wrapper .switch input:disabled ~ label {
+body.component .switch input:disabled ~ label {
 	color: #868e96;
 	cursor: not-allowed;
 }
 
-.component-page-wrapper .switch input:disabled ~ label::before {
+body.component .switch input:disabled ~ label::before {
 	background-color: #e9ecef;
 }
 
-.component-page-wrapper .switch.switch-sm {
+body.component .switch.switch-sm {
 	font-size: 1rem;
 }
 
-.component-page-wrapper .switch.switch-sm input ~ label {
+body.component .switch.switch-sm input ~ label {
 	min-width: calc(calc(1.9375rem * .8)* 2);
 	height: calc(1.9375rem * .8);
 	line-height: calc(1.9375rem * .8);
 	text-indent: calc(calc(calc(1.9375rem * .8)* 2)+ .5rem);
 }
 
-.component-page-wrapper .switch.switch-sm input ~ label::before {
+body.component .switch.switch-sm input ~ label::before {
 	width: calc(calc(1.9375rem * .8)* 2);
 }
 
-.component-page-wrapper .switch.switch-sm input ~ label::after {
+body.component .switch.switch-sm input ~ label::after {
 	width: calc(calc(1.9375rem * .8) - calc(2px * 2));
 	height: calc(calc(1.9375rem * .8) - calc(2px * 2));
 }
 
-.component-page-wrapper .switch.switch-sm input:checked ~ label::after {
+body.component .switch.switch-sm input:checked ~ label::after {
 	margin-left: calc(1.9375rem * .8);
 }
 
-.component-page-wrapper .switch+.switch {
+body.component .switch+.switch {
 	margin-left: 1rem;
 }
 
-.component-page-wrapper .editable-click,
-.component-page-wrapper a.editable-click,
-.component-page-wrapper a.editable-click:hover {
+body.component .editable-click,
+body.component a.editable-click,
+body.component a.editable-click:hover {
 	border-bottom: none;
 }
 
-.component-page-wrapper .card.ui-jqgrid-view {
+body.component .card.ui-jqgrid-view {
 	overflow-x: hidden;
 }
 
-.component-page-wrapper .ui-jqgrid.ui-jqgrid-bootstrap .ui-search-toolbar .ui-search-table td {
+body.component .ui-jqgrid.ui-jqgrid-bootstrap .ui-search-toolbar .ui-search-table td {
 	border-bottom: none !important;
 }
 
+.component-page-wrapper {
+	min-height: 100vh;
+	border-radius: 2rem;
+	overflow: hidden;
+}
+
 .component-page-wrapper .component-sidebar {
 	position: absolute;
 	height: initial;