Index: lams_monitoring/web/tblmonitor/teams.jsp
===================================================================
diff -u -r8085e1dec2f404603e5147fdb99380631edd3ffb -r35dd47046a83ab2f9e80f76dc22d1521412219b5
--- lams_monitoring/web/tblmonitor/teams.jsp	(.../teams.jsp)	(revision 8085e1dec2f404603e5147fdb99380631edd3ffb)
+++ lams_monitoring/web/tblmonitor/teams.jsp	(.../teams.jsp)	(revision 35dd47046a83ab2f9e80f76dc22d1521412219b5)
@@ -1,46 +1,29 @@
 <%@ include file="/taglibs.jsp"%>
 <style>
-
-	#tbl-teams-tab-title {
-		text-align: center;
-		margin: 23px 0 0 100px;
-	}
 	
-	.font-weight-bold {
-		font-weight: bold;
-	}
-	
-	.group-title {
+	#tbl-teams-tab-content .card-header,
+	#tbl-teams-tab-content a.card-title,
+	#tbl-teams-tab-content a.ira-modal-link {
 	   	cursor: pointer;
 	}
 	
-	.fa-arrow-circle-down {
-		color: #d9534f;
+	#tbl-teams-tab-content .fa-arrow-circle-down {
+		color: var(--bs-red);
 	}
 	
-	.fa-arrow-circle-up {
-		color: #5cb85c;
+	#tbl-teams-tab-content .fa-arrow-circle-up {
+		color: var(--bs-green);
 	}
 	
-	.fa-arrow-circle-left {
+	#tbl-teams-tab-content .fa-arrow-circle-left {
 		visibility: hidden;
 	}
 </style>
 
-<!-- ChartJS-->
-<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/chart.bundle.min.js"></script>
-<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/portrait.js"></script>
 <script>
 	$(document).ready(function(){
 		initializePortraitPopover(LAMS_URL);
 
-		//use jqeury toggle instead of bootstrap collapse 
-		$(".group-title").on('click', function () {
-			var div =  $("#collapse-" + $(this).data("groupid"));
-			div.toggleClass("in");
-			$(this).toggleClass("collapsed");
-		});
-
 		<c:if test="${not empty chartNamesDataset}">
 			// summary chart
 			var summaryChartIraDataset = JSON.parse('${chartIraDataset}'),
@@ -53,13 +36,13 @@
 						datasets : [ {
 							label: "<fmt:message key='label.ira' />",
 							data : summaryChartIraDataset,
-							backgroundColor : 'rgba(255, 195, 55, 1)'
+							backgroundColor : 'rgba(249, 248, 113, 0.85)'
 											  
 						},
 						{
 							label: "<fmt:message key='label.tra' />",
 							data : summaryChartTraDataset,
-							backgroundColor : 'rgba(5, 204, 214, 1)'
+							backgroundColor : 'rgba(1, 117, 226, 0.85)'
 											  
 						}],
 						labels : summaryChartNamesDataset
@@ -80,7 +63,7 @@
 									scaleLabel : {
 										display : true,
 										labelString : "<fmt:message key='label.ira.tra.correct.count'/>",
-										fontSize : 15
+										fontSize : 16
 									}
 								}
 							]
@@ -128,13 +111,13 @@
 					datasets : [ {
 						label: "iRAT",
 						data : iraScores,
-						backgroundColor : 'rgba(255, 195, 55, 1)'
+						backgroundColor : 'rgba(249, 248, 113, 0.85)'
 										  
 					},
 					{
 						label: "tRAT",
 						data : traScores,
-						backgroundColor : 'rgba(5, 204, 214, 1)'
+						backgroundColor : 'rgba(1, 117, 226, 0.85)'
 										  
 					}],
 					labels : userNames
@@ -181,7 +164,8 @@
 			$('#ira-correct-answer-count').html(userScore);
 
 			//load modal dialog content using Ajax
-			var url = "${isIraMcqAvailable}" == "true" ? "<lams:LAMSURL/>tool/lamc11/tblmonitoring/getModalDialogForTeamsTab.do" : "<lams:LAMSURL/>tool/laasse10/tblmonitoring/getModalDialogForTeamsTab.do";
+			var url = "${isIraMcqAvailable}" == "true" ? "<lams:LAMSURL/>tool/lamc11/tblmonitoring/getModalDialogForTeamsTab.do" 
+													   : "<lams:LAMSURL/>tool/laasse10/tblmonitoring/getModalDialogForTeamsTab.do";
 			$('#ira-modal .modal-body').load(
 				url, 
 				{
@@ -225,13 +209,20 @@
 		});
 
 		$('[data-toggle="tooltip"]').tooltip();
+
+		if (sequenceSearchedLearner) {
+			 $('html,body').animate({scrollTop: $('#user-name-' + sequenceSearchedLearner).offset().top},'slow');
+		}
 	});
 
 	function showChangeLeaderModal(groupID) {
-		$('#change-leader-modals').empty()
+		var modalContainer = $('#change-leader-modals');
+		modalContainer.empty()
 		.load('<lams:LAMSURL/>tool/lalead11/monitoring/displayChangeLeaderForGroupDialog.do',{
 			leaderSelectionToolContentId : '${leaderSelectionToolContentId}',
 			groupId : groupID
+		}, function(){
+			modalContainer.children('.modal').modal('show');
 		});
 	}
 
@@ -246,42 +237,40 @@
 </script>            
 
 
+<div id="tbl-teams-tab-content" class="container-fluid">
+	<!-- Tables -->
 
-<!-- Tables -->
-<div class="row no-gutter">
-<div class="col-xs-2"></div>
-<div class="col-xs-8">
-
-	<c:if test="${not empty groupsSetupUrl}">
-		<div onClick="javascript:openPopUp('<lams:LAMSURL/>${groupsSetupUrl}','GroupsSetup', 800, 1280, true)" type="button"
-			    class="btn btn-default pull-right voffset20">
-			<fmt:message key="label.teams.setup"/>
+	<div class="row">
+		<div class="col-4 offset-4">
+			<h3 id="tbl-teams-tab-title" class="text-center">
+				<fmt:message key="label.students.teams"/>
+			</h3>
 		</div>
-	</c:if>
-	
-	<h3 id="tbl-teams-tab-title">
-		<fmt:message key="label.students.teams"/>
-	</h3>
-	
-	<c:if test="${not empty chartNamesDataset}">
-		<canvas id="summary-chart" class="voffset20"></canvas>
-	</c:if>
-	
-	<div class="panel panel-default voffset20">
-		<div class="panel-heading">
-			<h4 class="panel-title panel-collapse">
-				<a data-toggle="collapse" data-groupid="0" class="collapsed group-title">
-					<fmt:message key="label.ira.tra.summary"/>
-				</a>
-			</h4>
+		<div class="col-2 text-end">
+			<c:if test="${not empty groupsSetupUrl}">
+				<button onClick="javascript:openPopUp('<lams:LAMSURL/>${groupsSetupUrl}','GroupsSetup', 800, 1280, true)" type="button"
+					    class="btn btn-secondary">
+					<fmt:message key="label.teams.setup"/>
+				</button>
+			</c:if>
 		</div>
-
-		<div id="collapse-0" class="panel-collapse collapse in">
-			<div class="panel-body">
-				
-				
+	</div>
+	<div class="row">
+		<div class="col-8 offset-2">
+			<c:if test="${not empty chartNamesDataset}">
+				<canvas id="summary-chart" class="mt-3"></canvas>
+			</c:if>
+			
+			<div class="card mt-5 mb-3">
+				<h5 class="card-header" data-bs-toggle="collapse" data-bs-target="#collapse-0">
+					<a class="text-decoration-none">
+						<fmt:message key="label.ira.tra.summary"/>
+					</a>
+				</h4>
+		
+				<div id="collapse-0" class="card-body collapse show">
 					<div class="table-responsive">
-						<table class="table table-striped table-hover table-condensed">
+						<table class="table table-hover table-condensed">
 							<thead>
 								<tr>
 									<th style="width: 30%">
@@ -439,225 +428,217 @@
 							</tbody>
 						</table>
 					</div>
+				</div>
 			</div>
-		</div>
-	</div>
-
-	<c:forEach var="groupDto" items="${groupDtos}">
-		<div class="panel panel-default" id="teams-panel-${groupDto.groupID}">
-			<div class="panel-heading">
-				<h4 class="panel-title panel-collapse">
-					<a data-toggle="collapse" data-groupid="${groupDto.groupID}" class="collapsed group-title" id="group-name-${groupDto.groupID}">
-						<c:out value="${groupDto.groupName}" />
-					</a>
-				</h4>
-			</div>
-	
-			<div id="collapse-${groupDto.groupID}" class="panel-collapse collapse in">
-				<div class="panel-body">
-					<c:if test="${isScratchieAvailable}">
-						<c:choose>
-							<c:when test="${empty groupDto.traCorrectAnswerCount}">
-								-
-							</c:when>
-							<c:when test="${empty groupDto.groupLeader}">
-								<h4><fmt:message key="label.tra.correct.count"/>: ${groupDto.traCorrectAnswerCount}</h4>
-							</c:when>
-							<c:otherwise>
-								<a data-toggle="modal" href="#tra-modal"
-								   data-user-id="${groupDto.groupLeader.userID}"
-								   data-tra-correct-answer-count="${groupDto.traCorrectAnswerCount}">
-								   <h4><fmt:message key="label.tra.correct.count"/>:
-										${groupDto.traCorrectAnswerCount}
-								   </h4>
-								</a>
-							</c:otherwise>
-						</c:choose>
-					</c:if>
-					
-					<c:if test="${isIraAssessmentAvailable || isIraMcqAvailable}">
-						<div class="table-responsive">
-							<table class="table table-striped table-hover table-condensed">
-								<thead>
-									<tr>
-										<th>
-											<fmt:message key="label.student"/>
-										</th>
-										
-										<th class="text-center">
-											<fmt:message key="label.ira.correct.count"/>
-										</th>
-										
-										<c:if test="${isScratchieAvailable}">
-																					
-											<th class="text-center">
-												<fmt:message key="label.ira.tra.delta"/>
-											</th>
-										</c:if>
-									</tr>
-								</thead>
 		
-								<tbody>
-									<c:set var="iraHighestCorrectAnswerCount" value="${groupDto.iraHighestCorrectAnswerCount}" />
-									<c:set var="iraLowestCorrectAnswerCount" value="${groupDto.iraLowestCorrectAnswerCount}" />
-									<c:set var="highestCorrectAnswerCountPercentDelta" value="${groupDto.highestCorrectAnswerCountPercentDelta}" />
-									<c:set var="lowestCorrectAnswerCountPercentDelta" value="${groupDto.lowestCorrectAnswerCountPercentDelta}" />
-									
-									<c:forEach var="userDto" items="${groupDto.userList}">
-									
-										<tr>
-											<td class="">
-												<c:choose>
-													<c:when test="${empty userDto.iraCorrectAnswerCount}">
-														<c:out value="${userDto.lastName}" />,&nbsp;<c:out value="${userDto.firstName}" />
-													</c:when>
-													<c:otherwise>
-														<a data-toggle="modal" href="#ira-modal"
-														   data-user-id="${userDto.userID}"
-														   data-ira-correct-answer-count="${userDto.iraCorrectAnswerCount}">
-															<span id="user-name-${userDto.userID}" class="belong-to-group-${groupDto.groupID} new-popover <c:if test="${userDto.groupLeader}">font-weight-bold</c:if>" 
-																	data-portrait="${userDto.portraitUuid}" data-fullname="${userDto.lastName},&nbsp;${userDto.firstName}">
-																<c:out value="${userDto.lastName}" />,&nbsp;<c:out value="${userDto.firstName}" />
-															</span>
-														</a>
-													</c:otherwise>
-												</c:choose>
-												<c:if test="${userDto.groupLeader}">
-													<abbr title="Leader" class="fa fa-user-plus" style="color:darkorange"></abbr>
+			<c:forEach var="groupDto" items="${groupDtos}">
+				<div class="card mb-3" id="teams-panel-${groupDto.groupID}" tabindex="0">
+					<h5 class="card-header" data-bs-toggle="collapse" data-bs-target="#collapse-${groupDto.groupID}">
+						<a class="text-decoration-none" id="group-name-${groupDto.groupID}">
+							<c:out value="${groupDto.groupName}" />
+						</a>
+					</h5>
+			
+					<div id="collapse-${groupDto.groupID}" class="card-body collapse show">
+							<c:if test="${isScratchieAvailable}">
+								<c:choose>
+									<c:when test="${empty groupDto.traCorrectAnswerCount}">
+										-
+									</c:when>
+									<c:when test="${empty groupDto.groupLeader}">
+										<h5 class="card-title"><fmt:message key="label.tra.correct.count"/>: ${groupDto.traCorrectAnswerCount}</h5>
+									</c:when>
+									<c:otherwise>
+										<a data-bs-toggle="modal" data-bs-target="#tra-modal"
+										   data-user-id="${groupDto.groupLeader.userID}"
+										   data-tra-correct-answer-count="${groupDto.traCorrectAnswerCount}"
+										   class="card-title text-decoration-none">
+										   <h5><fmt:message key="label.tra.correct.count"/>:
+												${groupDto.traCorrectAnswerCount}
+										   </h5>
+										</a>
+									</c:otherwise>
+								</c:choose>
+							</c:if>
+							
+							<c:if test="${isIraAssessmentAvailable || isIraMcqAvailable}">
+								<div class="table-responsive">
+									<table class="table table-hover table-condensed">
+										<thead>
+											<tr>
+												<th>
+													<fmt:message key="label.student"/>
+												</th>
+												
+												<th class="text-center">
+													<fmt:message key="label.ira.correct.count"/>
+												</th>
+												
+												<c:if test="${isScratchieAvailable}">
+																							
+													<th class="text-center">
+														<fmt:message key="label.ira.tra.delta"/>
+													</th>
 												</c:if>
-											</td>
+											</tr>
+										</thead>
+				
+										<tbody>
+											<c:set var="iraHighestCorrectAnswerCount" value="${groupDto.iraHighestCorrectAnswerCount}" />
+											<c:set var="iraLowestCorrectAnswerCount" value="${groupDto.iraLowestCorrectAnswerCount}" />
+											<c:set var="highestCorrectAnswerCountPercentDelta" value="${groupDto.highestCorrectAnswerCountPercentDelta}" />
+											<c:set var="lowestCorrectAnswerCountPercentDelta" value="${groupDto.lowestCorrectAnswerCountPercentDelta}" />
 											
-											<td class="text-center">
-												<c:choose>
-													<c:when test="${empty userDto.iraCorrectAnswerCount}">
-														-													
-													</c:when>
-													<c:otherwise>
-														<a data-toggle="modal" href="#ira-modal"
-																data-user-id="${userDto.userID}"
-																data-ira-correct-answer-count="${userDto.iraCorrectAnswerCount}">
-															${userDto.iraCorrectAnswerCount}
-														</a>
-														
-														<c:if test="${fn:length(groupDto.userList) > 1}">
+											<c:forEach var="userDto" items="${groupDto.userList}">
+											
+												<tr>
+													<td>
+														<c:choose>
+															<c:when test="${empty userDto.iraCorrectAnswerCount}">
+																<c:out value="${userDto.lastName}" />,&nbsp;<c:out value="${userDto.firstName}" />
+															</c:when>
+															<c:otherwise>
+																<a class="text-decoration-none ira-modal-link" data-bs-toggle="modal" data-bs-target="#ira-modal"
+																   data-user-id="${userDto.userID}"
+																   data-ira-correct-answer-count="${userDto.iraCorrectAnswerCount}">
+																	<span id="user-name-${userDto.userID}" class="belong-to-group-${groupDto.groupID} new-popover <c:if test="${userDto.groupLeader}">fw-bold</c:if>" 
+																			data-portrait="${userDto.portraitUuid}" data-fullname="${userDto.lastName},&nbsp;${userDto.firstName}">
+																		<c:out value="${userDto.lastName}" />,&nbsp;<c:out value="${userDto.firstName}" />
+																	</span>
+																</a>
+															</c:otherwise>
+														</c:choose>
+														<c:if test="${userDto.groupLeader}">
+															<abbr title="Leader" class="fa fa-user-plus" style="color: var(--bs-red)"></abbr>
+														</c:if>
+													</td>
+													
+													<td class="text-center">
+														<c:choose>
+															<c:when test="${empty userDto.iraCorrectAnswerCount}">
+																-													
+															</c:when>
+															<c:otherwise>
+																<a class="text-decoration-none ira-modal-link" data-bs-toggle="modal" data-bs-target="#ira-modal"
+																		data-user-id="${userDto.userID}"
+																		data-ira-correct-answer-count="${userDto.iraCorrectAnswerCount}">
+																	${userDto.iraCorrectAnswerCount}
+																</a>
+																
+																<c:if test="${fn:length(groupDto.userList) > 1}">
+																	<c:choose>
+																		<c:when test="${not empty iraHighestCorrectAnswerCount && userDto.iraCorrectAnswerCount >= iraHighestCorrectAnswerCount}">
+																			&nbsp;<i class="fa fa-arrow-circle-up" data-toggle="tooltip" title="<fmt:message key="label.ira.tra.highest"/>"></i>
+																		</c:when>
+																		<c:when test="${not empty iraLowestCorrectAnswerCount && userDto.iraCorrectAnswerCount <= iraLowestCorrectAnswerCount}">
+																			&nbsp;<i class="fa fa-arrow-circle-down" data-toggle="tooltip" title="<fmt:message key="label.ira.tra.lowest"/>"></i>
+																		</c:when>
+																		<c:otherwise>
+																			&nbsp;<i class="fa fa-arrow-circle-left"></i>
+																		</c:otherwise>
+																	</c:choose>		
+																</c:if>
+															</c:otherwise>
+														</c:choose>
+													</td>
+													
+													
+													<c:if test="${isScratchieAvailable}">
+																								
+														<td class="text-center">
 															<c:choose>
-																<c:when test="${not empty iraHighestCorrectAnswerCount && userDto.iraCorrectAnswerCount >= iraHighestCorrectAnswerCount}">
-																	&nbsp;<i class="fa fa-arrow-circle-up" data-toggle="tooltip" title="<fmt:message key="label.ira.tra.highest"/>"></i>
+																<c:when test="${empty userDto.correctAnswerCountPercentDelta}">
+																	-													
 																</c:when>
-																<c:when test="${not empty iraLowestCorrectAnswerCount && userDto.iraCorrectAnswerCount <= iraLowestCorrectAnswerCount}">
-																	&nbsp;<i class="fa fa-arrow-circle-down" data-toggle="tooltip" title="<fmt:message key="label.ira.tra.lowest"/>"></i>
-																</c:when>
 																<c:otherwise>
-																	&nbsp;<i class="fa fa-arrow-circle-left"></i>
+																	${userDto.correctAnswerCountPercentDelta}%
+																	
+																	<c:if test="${fn:length(groupDto.userList) > 1}">
+																		<c:choose>
+																			<c:when test="${not empty highestCorrectAnswerCountPercentDelta && userDto.correctAnswerCountPercentDelta >= highestCorrectAnswerCountPercentDelta}">
+																				&nbsp;<i class="fa fa-arrow-circle-up" data-toggle="tooltip" title="<fmt:message key="label.ira.tra.highest"/>"></i>
+																			</c:when>
+																			<c:when test="${not empty lowestCorrectAnswerCountPercentDelta && userDto.correctAnswerCountPercentDelta <= lowestCorrectAnswerCountPercentDelta}">
+																				&nbsp;<i class="fa fa-arrow-circle-down" data-toggle="tooltip" title="<fmt:message key="label.ira.tra.lowest"/>"></i>
+																			</c:when>
+																			<c:otherwise>
+																				&nbsp;<i class="fa fa-arrow-circle-left"></i>
+																			</c:otherwise>
+																		</c:choose>		
+																	</c:if>
 																</c:otherwise>
-															</c:choose>		
-														</c:if>
-													</c:otherwise>
-												</c:choose>
-											</td>
+															</c:choose>
+														</td>
+													</c:if>
+												</tr>
+											</c:forEach>
 											
-											
-											<c:if test="${isScratchieAvailable}">
-																						
-												<td class="text-center">
-													<c:choose>
-														<c:when test="${empty userDto.correctAnswerCountPercentDelta}">
-															-													
-														</c:when>
-														<c:otherwise>
-															${userDto.correctAnswerCountPercentDelta}%
-															
-															<c:if test="${fn:length(groupDto.userList) > 1}">
-																<c:choose>
-																	<c:when test="${not empty highestCorrectAnswerCountPercentDelta && userDto.correctAnswerCountPercentDelta >= highestCorrectAnswerCountPercentDelta}">
-																		&nbsp;<i class="fa fa-arrow-circle-up" data-toggle="tooltip" title="<fmt:message key="label.ira.tra.highest"/>"></i>
-																	</c:when>
-																	<c:when test="${not empty lowestCorrectAnswerCountPercentDelta && userDto.correctAnswerCountPercentDelta <= lowestCorrectAnswerCountPercentDelta}">
-																		&nbsp;<i class="fa fa-arrow-circle-down" data-toggle="tooltip" title="<fmt:message key="label.ira.tra.lowest"/>"></i>
-																	</c:when>
-																	<c:otherwise>
-																		&nbsp;<i class="fa fa-arrow-circle-left"></i>
-																	</c:otherwise>
-																</c:choose>		
-															</c:if>
-														</c:otherwise>
-													</c:choose>
-												</td>
+											<c:if test="${fn:length(groupDto.userList) > 1}">
+												<tr>
+													<th><fmt:message key="label.ira.tra.average"/></th>
+													
+													<td class="text-center">
+														<fmt:formatNumber type="number" minFractionDigits="0" maxFractionDigits="2" value="${groupDto.iraCorrectAnswerCountAverage}" />
+													</td>
+													
+													<td class="text-center">
+														<fmt:formatNumber type="number" minFractionDigits="0" maxFractionDigits="2" value="${groupDto.correctAnswerCountPercentDeltaAverage}" />%
+													</td>
+												</tr>
 											</c:if>
-										</tr>
-									</c:forEach>
-									
-									<c:if test="${fn:length(groupDto.userList) > 1}">
-										<tr>
-											<th><fmt:message key="label.ira.tra.average"/></th>
-											
-											<td class="text-center">
-												<fmt:formatNumber type="number" minFractionDigits="0" maxFractionDigits="2" value="${groupDto.iraCorrectAnswerCountAverage}" />
-											</td>
-											
-											<td class="text-center">
-												<fmt:formatNumber type="number" minFractionDigits="0" maxFractionDigits="2" value="${groupDto.correctAnswerCountPercentDeltaAverage}" />%
-											</td>
-										</tr>
+										</tbody>
+									</table>
+								</div>
+							</c:if>	
+							
+							<!-- Change leader and Compare buttons -->
+							<div class="row">
+								<div class="col-xs-12 col-md-12 col-lg-12">
+									<c:if test="${(isIraAssessmentAvailable || isIraMcqAvailable) && isScratchieAvailable && not empty groupDto.userList && not empty groupDto.traCorrectAnswerCount}">
+										<button href="#" data-bs-toggle="modal" data-bs-target="#comparison-modal" type="button" class="btn btn-sm btn-secondary float-end"
+												data-ira-scores="
+												<c:forEach var="userDto" items="${groupDto.userList}">
+													<c:if test="${userDto.iraCorrectAnswerCount != null}">
+														${userDto.iraCorrectAnswerCount},
+													</c:if>
+												</c:forEach>" 
+												data-tra-scores="${groupDto.traCorrectAnswerCount}" 
+												data-group-id="${groupDto.groupID}"
+												data-user-names="">
+											<i class="fa fa-bar-chart"></i> 
+											<fmt:message key="label.comparison"/>
+										</button>
 									</c:if>
-								</tbody>
-							</table>
-						</div>
-					</c:if>	
-					
-					<!-- Change leader and Compare buttons -->
-					<div class="row">
-						<div class="col-xs-12 col-md-12 col-lg-12">
-							<c:if test="${(isIraAssessmentAvailable || isIraMcqAvailable) && isScratchieAvailable && not empty groupDto.userList && not empty groupDto.traCorrectAnswerCount}">
-								<button href="#" data-toggle="modal" data-target="#comparison-modal" type="button" class="btn btn-sm btn-default pull-right"
-										data-ira-scores="
-										<c:forEach var="userDto" items="${groupDto.userList}">
-											<c:if test="${userDto.iraCorrectAnswerCount != null}">
-												${userDto.iraCorrectAnswerCount},
-											</c:if>
-										</c:forEach>" 
-										data-tra-scores="${groupDto.traCorrectAnswerCount}" 
-										data-group-id="${groupDto.groupID}"
-										data-user-names="">
-									<i class="fa fa-bar-chart"></i> 
-									<fmt:message key="label.comparison"/>
-								</button>
-							</c:if>
-
-							<c:if test="${not empty leaderselectionToolActivityId and not empty groupDto.userList}">
-								<button onClick="javascript:showChangeLeaderModal(${groupDto.groupID})" type="button"
-									    class="btn btn-sm btn-default pull-right" style="margin-right: 5px">
-									<fmt:message key="label.change.leader"/>
-								</button>
-							</c:if>
-						</div>
+		
+									<c:if test="${not empty leaderselectionToolActivityId and not empty groupDto.userList}">
+										<button onClick="javascript:showChangeLeaderModal(${groupDto.groupID})" type="button"
+											    class="btn btn-sm btn-secondary float-end me-2">
+											<fmt:message key="label.change.leader"/>
+										</button>
+									</c:if>
+								</div>
+							</div>
+							<!-- End change leader -->                       
+			
+			
 					</div>
-					<!-- End change leader -->                       
-	
 				</div>
-	
-			</div>
+			</c:forEach>     
+		
 		</div>
-	</c:forEach>     
-
+		<div class="col-2"></div>
+	</div>
 </div>
-<div class="col-xs-2"></div>
-</div>
 
 <!-- modal chart -->
 <div class="modal fade" id="comparison-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 	<div class="modal-header">
-		<button type="button" class="close" data-dismiss="modal">
-			<span aria-hidden="true"><i class="fa fa-close"></i></span>
-			<span class="sr-only">
-				<fmt:message key="button.close"/>
-			</span>
-		</button>
 		<h4 class="modal-title" id="exampleModalLabel">
 			<fmt:message key="label.bar.chart"/>
 		</h4>
+		<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 	</div>
           
 	<div class="modal-body">
@@ -674,20 +655,20 @@
 <div class="modal-content">
 
 	<div class="modal-header">
-		<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-close"></i></button>
-		<h4 class="modal-title">
-			<fmt:message key="label.ira.responses.for"/>: <span id="ira-user-name-label"></span> 
-		</h4>
-		<fmt:message key="label.ira.correct.count"/>: <span id="ira-correct-answer-count"></span>
+		<div class="modal-title">
+			<h4>
+				<fmt:message key="label.ira.responses.for"/>: <span id="ira-user-name-label"></span> 
+			</h4>
+			<fmt:message key="label.ira.correct.count"/>: <span id="ira-correct-answer-count"></span>
+		</div>
+		<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 	</div>
           
-	<!-- Begin -->
 	<div class="modal-body">
 	</div>
-	<!-- end -->  
 	
 	<div class="modal-footer">	
-		<a href="#" data-dismiss="modal" class="btn btn-default">
+		<a href="#" data-bs-dismiss="modal" class="btn btn-primary">
 			<fmt:message key="button.ok"/>
 		</a>
 	</div>
@@ -703,11 +684,13 @@
 <div class="modal-content">
 
 	<div class="modal-header">
-		<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-close"></i></button>
-		<h4 class="modal-title">
-			<fmt:message key="label.tra.responses.for"/>: <span id="tra-user-name-label"></span> 
-		</h4>
-		<fmt:message key="label.tra.correct.count"/>: <span id="tra-correct-answer-count"></span>
+		<div class="modal-title">
+			<h4>
+				<fmt:message key="label.tra.responses.for"/>: <span id="tra-user-name-label"></span> 
+			</h4>
+			<fmt:message key="label.tra.correct.count"/>: <span id="tra-correct-answer-count"></span>
+		</div>
+		<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 	</div>
           
 	<!-- Begin -->
@@ -716,7 +699,7 @@
 	<!-- end -->  
 	
 	<div class="modal-footer">	
-		<a href="#" data-dismiss="modal" class="btn btn-default">
+		<a href="#" data-bs-dismiss="modal" class="btn btn-primary">
 			<fmt:message key="button.ok"/>
 		</a>
 	</div>