body.component .dialogContainer .dialogSearchPhraseClear {
	visibility: hidden;
}

body.component .dialogContainer .dialogContainer .pageCell {
	vertical-align: middle;
}

body.component .dialogContainer .dialogListItem {
	height: 3rem;
	border-color: var(--bs-gray-300);
	border-bottom-width: 2px;
	cursor: pointer;
}

body.component .dialogContainer .dialogListItem:hover {
	background-color: var(--bs-gray-200);
}

body.component .dialogContainer .dialogListItem .portrait-sm {
	margin: 7px 0 0 7px;
}

body.component .dialogContainer .dialogListItem .portrait-generic-sm {
	margin-top: 2px;
}

body.component .dialogContainer .dialogListItem  .portrait-sm-lineheight {
	display: inline-block;
	margin-top: 2px;
}

body.component .dialogContainer .dialogListItem .portrait-sm + .portrait-sm-lineheight {
	margin-left: 8px;
}

body.component .dialogContainer .dialogListItem.dialogListItemSelected {
	background-color: rgba(0, 145, 74, 0.1) !important;
}

body.component .dialogContainer #classMonitorSearchRow {
	height: 70px;
}

body.component .dialogContainer #classDialogTable,
body.component .dialogContainer #emailProgressDialogTable {
	width: calc(100% - 12px);
}

.component-page-wrapper #lesson-name {
	margin-left: 1.8rem;
}

.monitoring-page-wrapper button.btn:not(.navigate-btn) {
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);/*copied from .shadow class*/
}
.monitoring-page-wrapper #learners-accordion {
	margin-right: -0.8rem;
    margin-left: -0.8rem;
}

body.component #sequenceInfoDialog {
	cursor: pointer;
}

.monitoring-page-wrapper #sequenceSearchPhraseContainer {
	width: 20rem;
	margin-left: 1rem;
}

.monitoring-page-wrapper #sequenceSearchPhrase {
	width: 15rem;
}

.monitoring-page-wrapper #sequenceSearchPhraseButton {
	border: none;
	height: 3rem;
}

.monitoring-page-wrapper #sequenceSearchPhraseClearIcon {
	display: none;
}

.component-page-wrapper .component-sidebar {
	width: 7rem;
	border-radius: 0 0 1.2rem 1.2rem;
	transform: translateX(-7rem);
}

.component-page-wrapper .component-sidebar.active {
	transform: translateX(0);
}

.monitoring-page-wrapper .component-sidebar.active.expanded {
	width: 25rem;
}

.monitoring-page-wrapper .component-sidebar.active.expanded ~ .monitoring-page-content.active {
	padding-left: 25.8rem;
}

.monitoring-page-wrapper .component-sidebar .lesson-properties {
	padding-left: 2rem;
	text-align: left;
	visibility: hidden;
	height: 0;
}

.monitoring-page-wrapper .component-sidebar .lesson-properties.active {
	visibility: visible;
	height: initial;
}

.monitoring-page-wrapper .component-sidebar .lesson-properties #lessonDetails {
	opacity: 0;
}

.monitoring-page-wrapper .component-sidebar .lesson-properties #lessonDetails > * {
	display: none;
}

.monitoring-page-wrapper .component-sidebar .lesson-properties.active #lessonDetails {
	max-width: 256px;
	opacity: 1;
	transition: opacity .3s ease .3s;
}

.monitoring-page-wrapper .component-sidebar .lesson-properties.active #lessonDetails > * {
	display: block;
}


.monitoring-page-wrapper .component-sidebar .lesson-properties #lessonDetails .btn {
	margin-top: .5rem;
}

.monitoring-page-wrapper .component-sidebar .lesson-properties #lessonDetails .btn,
.monitoring-page-wrapper .component-sidebar .lesson-properties #lessonDetails select,
.monitoring-page-wrapper .component-sidebar .lesson-properties #lessonDetails input[type="text"] {
	width: 90%;
}

.monitoring-page-wrapper .component-sidebar .lesson-properties #lessonDetails #lessonUrlCopyToClipboardButton {
	width: initial;
	vertical-align: baseline;
}

.monitoring-page-wrapper .component-sidebar .lesson-properties #lessonDetails dt {
	font-weight: bold;
	margin-top: 1rem;
}

.component-page-wrapper .monitoring-page-content {
	padding: 1rem 4rem 2rem 8rem;
}

.monitoring-page-wrapper .monitoring-panel {
	display: inline-block;
	width: 100%;
	height: 100%;
	box-shadow: 0px 20px 20px var(--bs-gray-200);
	background-color: var(--bs-white);
	border-radius: 1.2rem;
	margin-bottom: 3rem;
	padding: 1.5rem 2rem;
}

.monitoring-page-wrapper .monitoring-panel h6 {
	color: var(--bs-gray);
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1.4px;
	margin-bottom: 2rem;
}

.monitoring-page-wrapper #sequence-tab-content {
	text-align: center;
}

.monitoring-page-wrapper #sequence-tab-content .countdown-timeout {
	color: var(--bs-red) !important;
}

.monitoring-page-wrapper #sequence-tab-content .sequence-tab-layout-column {
	margin-bottom: 2rem;
	padding-right: 0;
	padding-left: var(--bs-gutter-x);
}

.monitoring-page-wrapper #sequence-tab-content  #completion-chart-panel {
	min-width: 250px;
}

.monitoring-page-wrapper #sequence-tab-content  #completion-chart-panel .panel-body {
	height: 351px;
}

.monitoring-page-wrapper #sequence-tab-content  #completion-chart-panel #completion-chart {
	margin: auto;
}

.monitoring-page-wrapper #sequence-tab-content #required-tasks {
	min-width: 410px;
}

.monitoring-page-wrapper #sequence-tab-content #required-tasks .row {
	margin-bottom: 1.5rem;
}

.monitoring-page-wrapper #sequence-tab-content #required-tasks .label.contribute-activity-title {
	font-weight: bold;
}

.monitoring-page-wrapper #sequence-tab-content #required-tasks .contribute-go-button {
	min-width: 5rem;
}

.monitoring-page-wrapper #sequence-tab-content #required-tasks .dropdown-menu {
	padding: 0;
}

.monitoring-page-wrapper #sequence-tab-content #required-tasks .dropdown-item {
	font-size: .9rem;
}


/********** CANVAS STYLES **********/

.monitoring-page-wrapper #sequence-tab-content #canvas-container {
	min-height: 420px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.monitoring-page-wrapper #sequence-tab-content #canvas-container div#sequenceCanvas {
	width: 100%;
	display: flex;
	overflow: auto;
	align-items: center;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.monitoring-page-wrapper #sequence-tab-content #canvas-container.svg-learner-draggable-area.force-completing,
.monitoring-page-wrapper #sequence-tab-content #canvas-container.svg-learner-draggable-area.force-completing div#sequenceCanvas svg.svg-learning-design,
.monitoring-page-wrapper #sequence-tab-content #canvas-container.svg-learner-draggable-area.force-completing div#sequenceCanvas svg.svg-learning-design * {
	cursor: wait !important;
}

.monitoring-page-wrapper #sequence-tab-content #canvas-container div#sequenceCanvas div.learner-icon-container {
	position: fixed;
}

.monitoring-page-wrapper #sequence-tab-content #canvas-container div#sequenceCanvas div.learner-icon-container div.learner-icon,
.monitoring-page-wrapper #sequence-tab-content #completedLearnersContainer div.learner-icon {
	border-radius: 20px;
	background-color: #FFFFFF;
}

.monitoring-page-wrapper #sequence-tab-content #canvas-container div#sequenceCanvas div.learner-icon-container div.learner-icon,
.monitoring-page-wrapper #sequence-tab-content #canvas-container div#sequenceCanvas div.learner-icon-container div.more-learner-icon {
	position: absolute;
}

.monitoring-page-wrapper #sequence-tab-content #canvas-container div#sequenceCanvas div.learner-icon.learner-searched {
	border: red 3px solid;
	border-radius: 25px;
	z-index: 109 !important;
}

.monitoring-page-wrapper #sequence-tab-content #canvas-container div#sequenceCanvas div.portrait-generic-sm.learner-icon.learner-searched
{
	border: none;
}

.monitoring-page-wrapper #sequence-tab-content #canvas-container div#sequenceCanvas div.portrait-generic-sm.learner-icon.learner-searched::before
{
	border: red 3px solid;
	border-radius: 25px;
}

.monitoring-page-wrapper #sequence-tab-content #canvas-container div#sequenceCanvas .activity-requires-attention {
	cursor: pointer;
	width: 16px;
	height: 16px;
}

.monitoring-page-wrapper #sequence-tab-content #canvas-container div#sequenceCanvas svg.svg-learning-design {
	display: block;
	overflow: visible;
	margin: auto;
}

.monitoring-page-wrapper #sequence-tab-content #canvas-container div#sequenceCanvas svg.svg-learning-design g.gate svg {
	display: none;
}

.monitoring-page-wrapper #sequence-tab-content #canvas-container img#sequenceCanvasLoading {
	padding: 5px 0 0 100px;
	display: none;
}

.monitoring-page-wrapper #sequence-tab-content #canvas-container img#sequenceSearchedLearnerHighlighter {
	position: absolute;
	display: none;
}

.monitoring-page-wrapper #sequence-tab-content #canvas-container div#completedLearnersContainer {
	display: flex;
	padding: 4px 0px 3px 5px;
	border-top: thin dotted #AAAAAA;
}

.monitoring-page-wrapper #sequence-tab-content #canvas-container div#completedLearnersContainer span {
	font-family: Verdana;
	font-size: 10px;
	cursor: default;
	vertical-align: top;
	margin-right: 5px;
}

.monitoring-page-wrapper #sequence-tab-content #completedLearnersContainer #completedLessonLearnersIcon {
	width: 35px;
	height: 35px;
	margin-right: 5px;
}

.monitoring-page-wrapper #sequence-tab-content #completedLearnersContainer {
	overflow: auto;
}

.monitoring-page-wrapper #sequence-tab-content #completedLearnersContainer div.learner-icon {
	margin-right: 5px;
	min-width: 35px;
}

.monitoring-page-wrapper #sequence-tab-content #canvas-container div#sequenceCanvas div.more-learner-icon,
.monitoring-page-wrapper #sequence-tab-content #completedLearnersContainer div.more-learner-icon {
	display: inline-block;
	width: 35px;
	height: 35px;
	line-height: 35px;
	font-size: 15px;
	border-radius: 20px;
	cursor: pointer;
	background-color: #e7e7e7;
	text-align: center;
}

.monitoring-page-wrapper #learners-accordion .accordion-item .accordion-button:after {
	margin-left: 0;
}

.monitoring-page-wrapper #learners-accordion .no-progress {
	display: none;
	text-align: center;
	position: relative;
	top: 33%;
}

.monitoring-page-wrapper #learners-accordion .learners-accordion-login .fa-user,
.monitoring-page-wrapper #learners-accordion .learners-accordion-email .fa-envelope {
	margin-right: 10px;
}

.monitoring-page-wrapper #learners-accordion .learners-accordion-email a {
	text-decoration: none;
}

.monitoring-page-wrapper #learners-accordion .learners-accordion-portrait > div {
	border-radius: 10px;
}

.monitoring-page-wrapper #learners-accordion .vertical-timeline-container {
	display: none;
	background-color: var(--lams-background-gray);
	padding-top: 5px;
	border-radius: 10px;
}

.monitoring-page-wrapper #learners-accordion .vertical-timeline {
	transform: translateX(-25%);
}

.monitoring-page-wrapper #learners-accordion .vertical-timeline:before  {
	bottom: 90px;
}