@mixin checkboxInTable {
	margin: 0 5px 0px 0px;
	border: none;
}

/********** GENERAL/DIALOG STYLES **********/
#loadingOverlay {
	width: 100%;
	height: 100%;
	z-index: 2000;
	position: absolute;
	background-color: $body-bg;
	text-align: center;
}

#loadingOverlay img {
	margin-top: 30%;
}

dd {
	margin-bottom: 10px;
}

#content {
	width: 100%;
	padding: 0;
}

#content > .panel {
	border: none;
	border-shadow: none;
	box-shadow: none;
}

#content .panel-monitor-page, #content .panel-monitor-body  {
	margin-bottom: 0;
	padding-bottom: 0;
}

input[type="checkbox"] {
	@include checkboxInTable;
}

.modal-header button .fa {
    font-size: 16px;
    margin-left: 10px;
}

.ui-front {
	z-index: 1100;
}

.dialogContainer {
	display: none;
	-webkit-overflow-scrolling: touch !important;
	overflow: auto;
}

.dialogContainer iframe {
	width: 100%;
	height: 100%;
	border: none;
}

.dialogContainer .dialogList {
	overflow: auto;
	padding: 5px;
	padding-bottom: 2px;
}

.dialogContainer .modal-body {
	height : 100%;
	max-height: calc(100% - 56px);
	padding: 10px;
	overflow: auto;
}

div.dialogListItem {
	padding: 3px 0px 3px 0px;
	cursor: pointer;
}

div.dialogListItemSelected {
	background-color: $brand-primary-mid !important;
	color: white !important;
}

div.dialogListItemDisabled {
	color: grey !important;
}

.dialogTitle {
	padding: 0px 0px 5px 0px;
	height: 15px;
	font-size: small;
	font-weight: bold;
	text-align: center;
}

div.dialogContainer td {
	padding: 0;
}

div.dialogContainer td.navCell {
	padding: 5px 0;
	cursor: pointer;
}

div.dialogContainer td.navCell:hover {
	background-color: $brand-primary-light;
}

div.dialogContainer td.navCell span {
	margin: auto;
}

div.dialogContainer td.pageCell {
	text-align: center;
	width: 100px;
}

span#learnerGroupMultiSelectLabel {
	font-size: 10px;
}

#learnerGroupDialogContents .btn-group {
	margin-top: 10px;
}

#forceBackwardsDialog .modal-body {
	padding: 10px;
}
#forceBackwardsDialog .ui-resizable-s {
	bottom: 0px;	
}

/********** LESSON TAB STYLES **********/
div#tabLesson {
/*	height: 540px;*/
	overflow: auto;
}

table#tabLessonTable {
	table-layout: fixed;
}

table#tabLessonTable td {
	padding: 7px;
}

td.fieldLabel {
	font-weight: bold;
	width: 150px;
}

td.sectionHeader {
	font-weight: bold;
	background-color: $brand-primary-light;
}

.topButtonsContainer {
	height: 30px;
	padding: 0px !important;
}

.topButtonsContainer a {
	float: right;
	margin: 5px 5px 5px 0;
}

.topButtonsContainer button {
	float: right;
	margin: 5px 5px 5px 0;
}

.lessonManageField {
	margin-right: 5px;
}

#disableLessonButton {
	display: none;
}

#lessonScheduler label {
	margin-top: 5px;
}

#lessonStartApply {
	margin-bottom: 5px;
}

#lessonStateLabel, #lessonScheduler input {
	font-size:13px; // Larger than buttons but smaller than the date text next to it.
}

#lessonStateField {
	width: 114px;
}

#learnerURLField {
	width: 450px;
}

#copyLearnerURL {
	display: none;
}

#lessonStartDateCell *, #presenceAvailableCount {
	display: none;
}

table#tabLessonTable #contributeHeader {
	display: none;
}

table#tabLessonTable td.contributeActivityCell {
	padding: 0 0 0 5px;
	font-weight: bold;
}

table#tabLessonTable td.contributeEntryCell {
	padding: 0 5px 0 15px;
}

td.contributeEntryCell a {
	float: right;
}

#classDialogTable > tbody > tr > td {
	vertical-align: top;
}

#classDialogTable #classMonitorSearchRow {
	height: 23px;
}

#classDialogTable input[type="checkbox"] {
	@include checkboxInTable;
}

#classLearnerTable #addAllLearnersButton {
	margin-right: 10px;
}

#leftLearnerTable {
	float: left;
	min-width: 250px;
	height: 100%;
}

#rightMonitorTable {
	height: 100%;
	min-width: 250px;
}

.dialogSearchPhrase {
	width: 90%;
}

.dialogSearchPhraseIcon {
	margin-top: 2px;
}

.dialogSearchPhraseClear {
	visibility: hidden;
	margin-top: 3px;
	cursor: pointer;
}

#emailDialog {
	width: 100%;
}

#chartDiv {
	width: 150px;
	height: 150px;
	padding: 0;
}

#emailProgressTable input[type="checkbox"] {
	@include checkboxInTable;
}


@media (min-width: 768px) {
#lessonActions {
	display: inline-block;
}

#lessonActions2 {
	display: block;
	margin-top: 5px;
	}
}

@media (max-width: 767px) {
#lessonActions {
	display: inline;
}
}

#lessonDetails #description, #lessonDetails #intro {
	overflow: hidden;
}

/********** SEQUENCE TAB STYLES **********/
div#sequenceCanvas {
  width: 100%;
  display: flex;
  justify-content: center;
  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;  
}
  
div#sequenceCanvas div.learner-icon-container {
	position: relative;
}
  
div#sequenceCanvas div.learner-icon-container div.learner-icon, #completedLearnersContainer div.learner-icon {
  border-radius: 20px;
  background-color: #FFFFFF;
}
  
div#sequenceCanvas div.learner-icon-container div.learner-icon, div#sequenceCanvas div.learner-icon-container div.more-learner-icon {
	position: absolute;
}

#completedLearnersContainer div.learner-icon {
  margin-right: 5px;
}

div#sequenceCanvas div.more-learner-icon, #completedLearnersContainer div.more-learner-icon {
  display: inline-block;
  width: 35px;
  height: 35px;
  line-height: 35px;
  font-size: 16px;
  border-radius: 20px;
  cursor: pointer;
  background-color: #e7e7e7;
  text-align: center;
}

div#sequenceCanvas div.learner-icon.learner-searched {
  border: red 3px solid;
  border-radius: 25px;
  z-index: 109 !important;
}

div#sequenceCanvas div.portrait-generic-sm.learner-icon.learner-searched {
  border: none;
}

div#sequenceCanvas div.portrait-generic-sm.learner-icon.learner-searched::before {
  border: red 3px solid;
  border-radius: 25px;
}


div#sequenceCanvas .activity-requires-attention {
  cursor: pointer;
  width: 16px;
  height: 16px;
}
  
#completedLearnersContainer #completedLessonLearnersIcon {
  width: 35px;
  height: 35px;
  margin-right: 5px;
}
  

div#sequenceCanvas svg.svg-learning-design {
	display: block;
	overflow: visible;
}

div#sequenceCanvas svg.svg-learning-design g.gate svg {
	display: none;
}

img#sequenceCanvasLoading {
	padding: 5px 0 0 100px;
	display: none;
}

.topButtonsContainer #sequenceSearchPhrase {
	float: right;
	margin: 6px 5px 5px 0;
}

.topButtonsContainer #sequenceSearchPhraseIcon {
	float: right;
	margin: 9px 7px 5px 0;
}

.topButtonsContainer #sequenceSearchPhraseClear {
	float: right;
	cursor: pointer;
	margin: 9px 25px 5px 0;
	visibility: hidden;
}

.ui-menu-item-wrapper.autocomplete-menu-item-with-portrait {
	display: flex;
	justify-content: space-between;
}

.ui-menu-item-wrapper.autocomplete-menu-item-with-portrait > p {
	padding-top : 10px;
}

img#sequenceSearchedLearnerHighlighter {
	position: absolute;
	display: none;
}

div#completedLearnersContainer {
	display: flex;
	padding: 4px 0px 3px 5px;
	border-top: $border-thin-dotted;
}

div#completedLearnersContainer span {
	font-family: Verdana;
	font-size: 10px;
	cursor: default;
	vertical-align: top;
	margin-right: 5px;
}

#sequenceInfoDialog {
	cursor: pointer;
}

/********** LEARNERS TAB STYLES **********/

#tabLearnerControlTable td {
	padding: 0px;
	text-align: center;
}

td.learnersHeaderCell {
	font-size: 10px;
	border-right: $border-thin-solid;
}

#learnersSearchPhraseIcon {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 4px;
}

#learnersSearchPhrase {
	width: 80%;
}

#learnersSearchPhraseClear {
	cursor: pointer;
	float: right;
	margin: 3px 2px 0 0;
	display: none; 
}

td.learnersHeaderPageCell, td.learnersPageShifter {
	min-width: 25px;
	cursor: pointer;
}

td.learnersPageShifter span {
	margin: auto;
}

td.learnersHeaderPageCell:hover,td.learnersPageShifter:hover {
	background-color: $brand-primary-light;
}

td.selectedLearnersHeaderPageCell {
	background-color: $brand-primary-mid;
}

div#tabLearnersContainer {
	overflow: auto;
}

td.progressBarLabel {
	line-height: 1 !important;
}

/********** INSTRUCTIONS TAB STYLES **********/

#lesson-instructions {
	padding: 10px 15px 20px 15px;
}

/********** BOOTSTRAP ADDITIONS **********/

.contributeActivityCell {
	font-weight: 600;
	margin-top: 10px;
}

.contributeEntryCell {
	height: 25px;
	margin-left: 25px;
	
}

.contributeEntryCell .gate-opened {
	color: #5cb85c;
	font-weight: 700;
	margin-right: 10px;
}

/***** Group View Page **/
.group-table>tbody>tr:nth-of-type(odd){
   background-color:$brand-primary-light;
}
.group-table>tbody>tr>td, .table>tfoot>tr>td {
    border-top: none;
}

/********** RENAME LESSON FEATURE **********/

/* when item is editable - show pencil icon on hover */
#lesson-name-strong:hover +span+ i {  /* when link is hovered select i */
	visibility: visible;
}
#lesson-name-strong +span+ i { /* in all other case hide it */
	visibility: hidden;
}