@import url(v11.97/App.Icons.16.css);
@import url(v11.97/App.Icons.48.css);

/* lato-regular - latin */
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	src: local('Lato Regular'), local('Lato-Regular'),
	url('../../fonts/lato-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
	url('../../fonts/lato-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
	url('../../fonts/lato-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
	url('../../fonts/lato-v16-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}
/* lato-700 - latin */
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 700;
	src: local('Lato Bold'), local('Lato-Bold'),
	url('../../fonts/lato-v16-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
	url('../../fonts/lato-v16-latin-700.woff') format('woff'), /* Modern Browsers */
	url('../../fonts/lato-v16-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
	url('../../fonts/lato-v16-latin-700.svg#Lato') format('svg'); /* Legacy iOS */
}

p
{
	margin: 0 0 12px 0;
	padding: 0;
}

span.NoWrap
{
	white-space: nowrap;
}

.NoWrap a span {
    pointer-events: none;
}

#FormBody
{
	margin: 15px;
	height: 100%;
}

html > body #FormBody
{
	height: auto;
}

label
{
	white-space: nowrap;
	margin: 0 10px 0 0;
}

label.wrap, span.wrap label
{
	white-space: normal;
}

*.margin-right-medium {
	margin-right: 25px;
}

*.margin-right-5 {
	margin-right: 5px;
}

*.margin-right-15 {
	margin-right: 15px;
}

*.margin-right-20 {
	margin-right: 20px;
}

*.margin-left {
	margin-left: 5px;
}


*.margin-right-gargantuan {
	margin-right: 215px;
}

.padding-left-5 {
	padding-left: 5px;
}

.padding-left-10 {
	padding-left: 10px;
}

.padding-left {
	padding-left: 20px;
}

.padding-left-25 {
	padding-left: 25px;
}

*.margin-right-40 {
	margin-right: 40px;
}

*.margin-right-10 {
	margin-right: 10px;
}

*.margin-right-5 {
	margin-right: 5px;
}

*.section-margin-below{
	margin-bottom: 56px;
}

.max-width-290 {
	max-width: 290px;
}

input {
	font-family: Lato,Verdana,Sans-Serif;
	font-size: 1em;
	vertical-align: middle;
	padding: 2px;
	margin: 0 2px 0 0;
}

input[type="password"],
input[type="text"] {
	height: 30px;
	border-radius: 2px;
	border: solid 1px #606060;
	background-color: #ffffff;
	padding-left: 7px;
	padding-right: 2px;
	width: 279px;
	margin-top: 4px;
	margin-right: 5px;
}

input[type="text"].SmallerTextBox {
	width: 41px;
}

input[type="text"].SmallTextBox {
	width: 114px;
}

input[type="text"].LongTextBox {
	width: 100%;
}

input[type="text"].NoMarginAbove {
	margin-top: 0;
}

select.SmallSelect {
	width: 125px;
}

select.SmallSelect:disabled {
	background-color: white;
}

input[type=checkbox]:not(.cc-lang-bar__default--checkbox) {
	display: none;
}

input[type="checkbox"]:not(.cc-lang-bar__default--checkbox) + label {
	position: relative;
	cursor: pointer;
	user-select: none;
	vertical-align: bottom;
}

input[type="checkbox"]:not(.cc-lang-bar__default--checkbox) + label:before {
	width: 16px;
	height: 16px;
	border-radius: 2px;
	border: solid 1px #606060;
	background-color: #ffffff;
	content: '';
	display: inline-block;
	vertical-align: bottom;
	margin-right: 8px;
	margin-top:10px;
}

td > span > input[type="checkbox"]:not(.cc-lang-bar__default--checkbox) + label:before,
td > input[type="checkbox"]:not(.cc-lang-bar__default--checkbox) + label:before {
	margin: 0px;
}

.reverse-color-checkbox{
	padding: 0 0 0 14px;
	margin-top: -2px;
	line-height: 36px;
	width: 25px;
}
span.reverse-color-checkbox input[type="checkbox"] + label:before {
	width: 16px;
	height: 16px;
	border-radius: 2px;
	background-color: #606060;
	border: solid 1px #ffffff;
	content: '';
	vertical-align:middle;
	display: inline-block;
	margin-top: 0px;
}

span.reverse-color-checkbox input[type="checkbox"]:checked + label:before {
	background: #606060 url(../../Common/Icons/tick-white.svg) center no-repeat;
}

input[type="checkbox"]:checked + label:before {
	background: #ffffff url(../../Common/Icons/tick-grey.svg) center no-repeat;
}

input[disabled] + label:before {
	border-color: #949494 !important;
	cursor: default !important;
}

input[disabled]:hover + label {
	cursor: default;
}

input[disabled]:checked + label:before {
	background: url(../../Common/Icons/tick-grey-disabled.svg) center no-repeat #ffffff !important;
}

input[type="checkbox"]:focus + label:before {
	outline: none;
}

/* Base for label styling */
span.pmbCheckboxWithEmptyMessage input[type="checkbox"] {
	display: none;
}

	span.pmbCheckboxWithEmptyMessage input[type="checkbox"] + label {
		position: relative;
		cursor: pointer;
		user-select: none;
	}

span.pmbCheckboxWithEmptyMessage input[type="checkbox"] + label:before {
	width: 14px;
	height: 14px;
	border-radius: 2px;
	border: solid 1px #606060;
	background-color: #ffffff;
	content: '';
	display: inline-block;
	margin: 0px;
}

	span.pmbCheckboxWithEmptyMessage input[type="checkbox"]:checked + label:before {
		background-image: url(../../Common/Icons/tick-grey.svg);
		background-repeat: no-repeat;
		background-position: center;
	}

input[type="password"]:disabled,
input[type="text"]:disabled {
	color: #949494;
	background-color: #ffffff;
	border-color: #949494;
}

input[type="radio"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 16px;
	height: 16px;
	background: url(../../Common/Icons/radio.svg) center no-repeat;
	margin: 6px 8px 0px 0px;
}

input[type='radio'] + label {
	vertical-align: -29%;
}

.BiggerRadio input[type="radio"] + label{
	vertical-align: -25%;
	font-size: 15px;
}

input[type="radio"]:checked {
	background: url(../../Common/Icons/radio-selected.svg) center no-repeat;
}

input[type="radio"][disabled]:checked {
	background: url(../../Common/Icons/radio-disabled-selected.svg) center no-repeat;
}

input[type="radio"][disabled] {
	background: url(../../Common/Icons/radio-disabled.svg) center no-repeat;
}

input[type="radio"]:focus {
	outline: none;
}

input[type="file"] {
	display:none;
}

select {
	font-family: Lato,Verdana,Sans-Serif;
	font-size: 1em;
	vertical-align: middle;
	padding: 0px 30px 0px 7px;
	height: 36px;
	border-radius: 2px;
	border: solid 1px #606060;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: #ffffff url(../../Common/Icons/icon-chevron-down.svg) no-repeat right 8px center;
	width: 290px;
	margin-top: 4px;
	margin-right: 5px;
}

select::-ms-expand {
	display: none;
}

select:disabled {
	background-color: #F3F3F3;
	border-color: #949494;
}

textarea {
	font-family: Lato,Verdana,Sans-Serif;
	font-size: 1em;
	line-height: 25px;
	border-radius: 2px;
	border: solid 1px #606060;
	background-color: #ffffff;
	padding: 8px 2px 2px 7px;
	margin-top: 4px;
	margin-bottom:5px;
	vertical-align: top;
}

_:-ms-fullscreen, :root .textarea-max-length { margin-bottom: 6px; }

p.PageBreak
{
	page-break-after: always;
}

hr
{
	clear: both;
	color: #606060;
	background-color: #606060;
	border: none 0 #606060;
	height: 1px;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	display: block;
}
html > body hr
{
	margin: 8px 0 14px 0;
}

hr.GroupSeparator
{
	clear: both;
	color: #1c5f84;
	height: 5px;
}

.CalendarOtherMonth {
	color: #696969;
}

.CalendarSelectedDay {
	font-family: Lato,Verdana,Sans-Serif;
	font-size: xx-small;
	background-color: #239c8b;
	color: white;
}

.CalendarHighlightedDay {
	background-color: #239c8b;
	opacity: 0.35;
}

.ajax__calendar .ajax__calendar_container .ajax__calendar_header div {
	zoom: 0 !important;
}

.ajax__calendar .ajax__calendar_container .ajax__calendar_body td
{
	padding: 0 !important;
}

.Error
{
	font-weight: bold;
	color: red;
}

div.Normal
{
	font-size: 11px;
	color: #888;
}

div.list {
	overflow-x: hidden;
	overflow-y: auto;
}

div.list-overflow-visible {
	overflow: visible;
}

div.list-overflow-hidden {
	overflow: hidden;
}

div.object-title
{
	overflow-x: hidden;
}

div.scrollable-list
{
	max-height: 400px;
	overflow-x: hidden;
}

div.nodivborder
{
	border: none !important;
}

div.left,
div.FloatLeft
{
	float: left;
}

*.left-padding-small 
{
	padding-left: 10px
}

*.left-padding-large 
{
	padding-left: 20px;
}

div.right,
div.FloatRight
{
	float: right;
}

.shrink-to-fit 
{
	width: 1px;
	vertical-align: top;
}

.full-width { width:100% }

/* This class hides the element from the screen, but allows a screen reader to process it as normal. */
.HiddenVisual
{
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.Information
{
	font-weight: bold;
	color: black;
}

.required:before {
	content: "* ";
}

input.HiddenButton {
	width: 0;
	border-top-style: none;
	font-family: Lato,Verdana,Sans-Serif;
	border-right-style: none;
	border-left-style: none;
	background-color: transparent;
	text-align: center;
	text-decoration: none;
	border-bottom-style: none;
}


/*
 * Tab buttons
 */

a.TabButton
{
	margin: 1px 1px 1px 0;
	cursor: hand;
	color: #555;
	background: transparent url("Images/TabButton-Right.png") no-repeat scroll right top;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	display: inline-block;
	height: 22px;
	line-height: 22px;
	font-weight: normal;
	font-size: 10pt;
	width: auto !important;
}

a.TabButton span
{
	background: transparent url("Images/TabButton-Left.png") no-repeat scroll left top;
	display:block;
	padding:0 4px 0 6px;
	margin-right: 2px;
	line-height: 22px;
}

a.TabButton:hover {color: #000;}

a.TabButton.Selected
{
	color: #EEE;
	background: transparent url("Images/TabButtonSelected-Right.png") no-repeat scroll right top;
}

a.TabButton.Selected span {background: transparent url("Images/TabButtonSelected-Left.png") no-repeat scroll left top;}
a.TabButton.Selected:hover {color: #FFF;}

ul.TabButton
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

ul.TabButton.left	{float: left;}
ul.TabButton.right	{float: right;}

.TabButton li
{
	display: inline;
	margin: 0;
	padding: 0;
	float: left;
}

div.lesson-tab-background {
	background-color: #606060;
}

.CourseButtonsColumn a,
.courseButtons a
{
	margin-right: 5px;
}

#Banner
{
	margin: 10px;
	color: white;
	background-color: #ffffff;
}

#Banner a
{
	color: white;
	text-decoration: none;
}

#Banner img
{
	vertical-align: text-bottom;
	float: none;
}

/*
* Assignment Filter
*/
ul.AssignmentFilter {
	list-style-type: none;
	padding-left: 0px;
}

ul.AssignmentFilter li:last-child {
	padding-right:20px;
}

ul.AssignmentFilter li {
	float:left;
}

a.AssignmentFilter {
	background: none;
	padding: 5px 5px;
	border-radius: 2px;
	text-decoration: none;
	-webkit-user-select: none; /* Chrome/Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
}

	a.AssignmentFilter:hover {
		background: #f3f3f3;
		text-decoration: underline;
	}

	a.AssignmentFilter.Selected {
		background: #434143;
		color: #ffffff;
		text-decoration: none;
		cursor: default;
	}

/*Edit Assignments
*/
.editAssignments {
	margin-left: 10px;
}

.editAssignmentsTop div {
	margin-top: 15px;
}

.btn-link-with-right-border {
	border-right: 1px solid #949494;
	padding-right: 10px;
	margin-right: 7px;
}

.editAssignmentsButtons {
	margin-bottom: 15px;
	padding-left: 16px;
}

/*
 * Navigation bar
 */

#BannerNavigationBar
{
	display: block;
	clear: both;
}

#BannerNavigationBar ul
{
	list-style-type: none;
}

#BannerNavigationBar li
{
	display: inline;
	padding-left:4px; 
	margin-left:4px; 
	border-left:1px solid
}

#BannerNavigationBar li:first-child 
{
	padding-left:0; 
	margin-left:0; 
	border-left:none;
}

#BannerNavigationBar #Menu
{
	float: right;
}

.tmp-nav ul
{
	list-style: none; 
	margin: 0;
}

.tmp-nav ul li
{
	display:inline;
}

/*
 * Administration elements
 */
 
.ItemExpired
{
	color: #696969;
	vertical-align: top;
}

a.ItemExpired
{
	color: #696969;
}

.ItemAttribute
{
	font-size: 7pt;
}

a.InfoLink
{
	text-decoration: none;
	font-weight: bold;
	color: #ff6300;
}

.radio-indent {
	margin-top:4px;
	margin-left: 25px;
}

div.PhotoPanel
{
	float:left;
	margin-right:20px;
}

.UserPhoto
{
	border: 2px groove;
	margin: 5px 5px 5px 5px;
	width: 90px;
	height: 90px;
}

/*
 * Edit Training Record
 */
.edit-header-row-textbox-label {
	margin-top: 4px;
	height: 25.5px;
	padding-top: 10px;
}


/*
 * Max length Textarea control
 */

#CharacterCount
{
	color: Gray;
	font-size: 7pt;
	margin: 0 0 10px 0;
	padding: 0 0 0 0;
}

/* SCORM 2004 player */
/* Body containing the content - prevents extra scroll bars appearing in Kiosk Mode */
.SCORM2004Body
{
	*position: absolute;
	*overflow: hidden;
	*height: 100%;
	*width: 100%;
	*margin:0 0 0 0;
}

/* frame containing list of content titles */
.frameSCORMList
{
	position: absolute;
	z-index: 1;
	width: 220px;
	left: -200px;
	height: 100%;
	top: 0;
	overflow: hidden;
}
/* background for navigation buttons & course-contents list */
DIV.SCORMListBack
{
	width: 420px;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	background-color: #e6eaee;
	z-index: 0;
}

/* scrolling list of course contents */
DIV.SCORMContents
{
	left: 0;
	overflow: auto;
	z-index: 2;
	width: 220px;
	position: relative;
	top: 60px;
	border-right: 1px solid #666666;
}
/* 2-column tables that sit inside the Divs */
TABLE.SCORMContents
{
	left: 0;
	width: 420px;
	position: relative;
	height: 1px;
	overflow: hidden;
	vertical-align: top;
	z-index: 1;
}

TABLE.SCORMCourseTitle
{
	left: 0;
	width: 400px;
	position: absolute;
	top: 20px;
	bottom: 40px;
	overflow: hidden;
	z-index: 3;
}
/* width of table rows */
TD.SCORMList
{
	z-index: 1;
	width: 200px;
}
TD.SCORMCourseProgress
{
	z-index: 1;
	width: 178px;
}
DIV.SCORMCourseProgress
{
	/* progress information for the whole course */
	z-index: 3;
	font-size: 14px;
	font-weight: bold;
	color: #003366;
	background-color: #e8eaec;
	padding: 2px;
	display: block;
	border: 1px solid #666666;
	height: 20px;
}
/* Title of chapter or cluster (not a SCO)*/

.SCORMLeftTitle
{
	font-size: 14px;
	font-weight: bold;
	color: #003366;
	background-color: #e8eaec;
	border: 1px solid #666666;
	padding: 2px;
	margin: 3px 0 3px 0;
	display: block;
	height: auto;
}
/*use for highlighting section that you're in*/
.SCORMLeftTitle-highlight
{
	font-size: 14px;
	font-weight: bold;
	color: #003366;
	background-color: #e0edf5;
	border: 1px solid #666666;
	padding: 2px;
	margin: 3px 0 3px 0;
}

.SCORMLeft-btn
{
	font-size: 12px;
	color: #20295F;
	background-color: #e6eaee;
	border: 1px solid #e6eaee;
	padding: 2px;
	text-decoration: none;
	display: block;
	margin: 3px 0 3px 0;
	z-index: 0;
}

.SCORMLeft-btn:hover
{
	color: #003366;
	background: #e8eaec;
	border: 1px solid #666666;
	z-index: 0;
}
/*use for highlighting section that you're in*/
.SCORMLeft-btn-highlight
{
	font-size: 12px;
	color: #20295F;
	background-color: #cee1ec;
	border: 1px solid #666666;
	padding: 2px;
	text-decoration: none;
	display: block;
	margin: 3px 0 3px 0;
	z-index: 0;
}
.SCORMLeft-btn-highlight:hover
{
	color: #003366;
	background: #e8eaec;
	border: 1px solid #666666;
	z-index: 0;
}
/* unavailable SCOs */
.SCORMLeft-btn-disabled
{
	font-size: 12px;
	color: #666FA6;
	background-color: #e6eaee;
	padding: 1px;
	text-decoration: none;
	display: block;
	margin: 3px 0 3px 0;
	z-index: 0;
}

/* SCO Frame for displaying content */
.frameSCO0
{
	position: absolute;
	z-index: 0;
	width: 100%;
	height: 100%;
	border: none 0;
	padding: 0;
	top: 0;
	left: 20px;
	overflow: auto;
}
/*SCO frame when buttons are displayed above*/
.frameSCO1
{
	position: absolute;
	z-index: 0;
	width: 99%;
	border: none 0;
	padding: 0;
	top: 30px;
	left: 20px;
	overflow: auto;
}
/* SCO frame when buttons are below*/
.frameSCO2
{
	position: absolute;
	z-index: 0;
	width: 99%;
	border: none 0;
	padding: 0;
	left: 20px;
	top: 0;
	overflow: auto;
}
.hidden
{
	display: none;
	visibility: hidden;
}
.display-none 
{
	display: none !important;
}


/* vertical tab for course contents - contains show/hide button and scrollbar*/
.SCORMstrip
{
	position: absolute;
	z-index: 10;
	left: 200px;
	width: 20px;
	top: 0;
	height: 100%;
	background-color: #e6eaee;
	border: solid 1px #666666;
	font-family: Webdings;
	font-size: 14px;
}

/* button for showing/hiding contents	*/
.SCORMtab
{
	position: absolute;
	left: 0;
	top: 0;
	cursor: hand;
	width: 18px;
	height: 18px;
	font-size: 14pt;
}
.SCORMtab:hover
{
	cursor: hand;
	background-color: #ffffff;
}
DIV.SCORMButtonBar0
{
	visibility: hidden;
}

/* buttons across top of player */
DIV.SCORMButtonBar1
{
	left: 20px;
	top: 0;
	width: 99%;
	height: 30px;
	background-color: #e6eaee;
	visibility: visible;
	position: absolute;
}
/* buttons across bottom of player */
DIV.SCORMButtonBar2
{
	position: absolute;
	left: 20px;
	width: 99%;
	height: 30px;
	background-color: #e6eaee;
	visibility: visible;
}
/* Left-aligned items in button bar (contains title from current page)*/
.SCORMButtonBarLeft
{
	float: left;
	margin-right: 0;
	visibility: inherit;
	font-size: 20px;
	font-weight: bold;
}
/* Right-aligned items in button bar - contains navigation buttons*/
.SCORMButtonBarRight
{
	float: right;
	margin-right: 16px;
	visibility: inherit;
}

.visible
{
	display: inline;
	visibility: visible;
}

.clear
{
	clear: both;
}

/* display:none prevents the controls being shown when JavaScript is not present */
#controls {display:none; text-align:right}

/* add formatting for the scrolling text */
#tag {margin:2px 0}


/*
 * Catalogue
 */
ul.CatalogueCategoryList,
ul.CatalogueList
{
	list-style-position: inside;
	list-style-type: none;
	list-style-image: url("Images/LearningObjectIcons/folder.gif");
}

div.CatalogueItems 
{
	margin-top: 25px;
}

li.CatalogueCategoryItem,
li.CatalogueItem,
li.CatalogueCourseItem
{
	padding: 2px 2px 2px 2px;
}

li.CatalogueCourseItem a.LessonTypeImage,
li.CatalogueCourseItem span.LessonTypeImage
{
	padding: 2px 2px 2px 20px;
}

.CatalogueCategoryItem h1
{
	background: url("Images/FolderOpen.gif") no-repeat;
	padding: 2px 2px 2px 20px;
	margin: 0;
	font-size: 9pt;
	text-decoration: inherit;
}

.CatalogueItem h2
{
	background: url("Images/FolderOpen.gif") no-repeat;
	margin: 0;
	padding: 2px 2px 2px 20px;
	text-decoration: inherit;
}

div.CatalogueCategoryContentsPanel,
div.CatalogueCatalogueContentsPanel
{
	margin: 0 0 0 20px;
}

.CatalogueCourseItem
{
	margin: 0; 
}

li.CatalogueCategoryItem a,
a.CatalogueItem,
li.CatalogueCourseItem a
{
	text-decoration: none;
}

li.CatalogueCategoryItem a:hover,
a.CatalogueItem:hover,
li.CatalogueCourseItem a:hover
{
	text-decoration: underline;
}

li.CatalogueCategoryItem a.InactiveLink:hover,
li.CatalogueCourseItem a.InactiveLink:hover
{
	text-decoration: none;
	color: Black;
	cursor: default;
}

.CatalogueRating
{
	float:right;
}

.CourseRatingControl
{
	float:left;
	margin-right:10px;
}

.CatalogueLessonButtons ul.LearningViewCourseButtons
{
		float: left;
}

.CatalogueLessonButtons
{
	float:right;
	width: 50px;
}

/*
 * Collapsible Panel styling
*/

.CollapsiblePanel {
    font-weight: bold;
    color: #eee;
    height: 22px;
    background: url("Images/GreyGradient.gif") repeat-x #B4B4B4;
    margin: 0px;
    border-collapse: collapse;
    -moz-user-select: none;
    -khtml-user-select: none;
}

.CollapsiblePanel h2 {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    margin-top: inherit;
}

.CollapsiblePanel td {
    border-spacing: 0px;
    padding: 2px 0;
    border: 0 !important;
    overflow: hidden;
}

.CollapsiblePanel td span {
    line-height: 16px;
}

.CollapsiblePanel td.width25 {
    width: 25px;
}

 /*
 * Lesson auto reset
 */

span.ResetResults
{
	font-size: 7pt;
	font-weight: normal;
	color:#DDDDDD;
}


/*
 * Lesson deadline passed image
 */

span.DeadlineExpiry
{
	font-size: 7pt;
	font-weight: normal;
	color:#DDDDDD;
}

span.DeadlineExpiryPassed
{
	font-size: 7pt;
	font-weight: normal;
	color:#DDDDDD;
	background: url("Images/LearningObjectStatus/DeadlinePassed.png") no-repeat;
	padding: 2px 0 0 16px;
}

.courseTitle span.DeadlineExpiry,
.courseTitle span.DeadlineExpiryPassed,
.courseTitle span.ResetResults
{
	margin-right: 20px;
	color:#999999;
}

/*
 * Lesson statuses
 */
.courseStatus .LessonStatusImage,
.eventStatus .LessonStatusImage
{
	margin: 0 5px 0 0;
	padding: 0 0 0 20px;
	cursor: default;
}

.LessonStatusImage span 									{display: none;}

.LessonStatusImage.StatusComplete       	{background: url("Images/LearningObjectStatus/Complete.gif") no-repeat;}
.LessonStatusImage.StatusAttended       	{background: url("Images/LearningObjectStatus/Complete.gif") no-repeat;}
.LessonStatusImage.StatusBooked         	{background: url("Images/LearningObjectStatus/NotAttempted.gif") no-repeat;}
.LessonStatusImage.StatusCancelled      	{background: url("Images/LearningObjectStatus/NotAttempted.gif") no-repeat;}
.LessonStatusImage.StatusDidNotAttend   	{background: url("Images/LearningObjectStatus/NotAttempted.gif") no-repeat;}
.LessonStatusImage.StatusDeclined					{background: url("Images/LearningObjectStatus/NotAttempted.gif") no-repeat;}
.LessonStatusImage.StatusWithdrawn      	{background: url("Images/LearningObjectStatus/NotAttempted.gif") no-repeat;}
.LessonStatusImage.StatusWaitingList    	{background: url("Images/LearningObjectStatus/Incomplete.gif") no-repeat;}
.LessonStatusImage.StatusBrowsed        	{background: url("Images/LearningObjectStatus/Incomplete.gif") no-repeat;}
.LessonStatusImage.StatusIncomplete     	{background: url("Images/LearningObjectStatus/Incomplete.gif") no-repeat;}
.LessonStatusImage.StatusPassed         	{background: url("Images/LearningObjectStatus/Passed.gif") no-repeat;}
.LessonStatusImage.StatusFailed         	{background: url("Images/LearningObjectStatus/Failed.gif") no-repeat;}
.LessonStatusImage.StatusExempt         	{background: url("Images/LearningObjectStatus/Exempt.gif") no-repeat;}
.LessonStatusImage.StatusExpired					{background: url("Images/LearningObjectStatus/DeadlinePassed.png") no-repeat;}
.LessonStatusImage.StatusNotStarted     	{background: url("Images/LearningObjectStatus/NotAttempted.gif") no-repeat;}
.LessonStatusImage.StatusAwaitingApproval	{background: url("Images/LearningObjectStatus/NotAttempted.gif") no-repeat;}

.courseStatus span,
.eventStatus span
{
	float: left;
	white-space: nowrap;
}

/*
 * Course ratings
 */

.ratingStarReadOnly
{
	font-size: 0;
	width: 17px;
	height: 17px;
	padding: 0;
	cursor: default;
	display: block;
	background-repeat: no-repeat;
}

.ratingStar
{
	font-size: 0;
	width: 17px;
	height: 17px;
	padding: 0;
	cursor: pointer;
	display: block;
	background-repeat: no-repeat;
}

.filledRatingStar
{
	background-image: url("Images/FilledStar.svg");
}

.emptyRatingStar
{
	background-image: url("Images/EmptyStar.svg");
}

.waitingRatingStar
{
	background-image: url("Images/WaitingStar.png");
}

.ButtonCourseClearRating
{
	background: url("Images/ClearRatings.png") no-repeat;
	width: 16px;
	height: 16px;
	border: none;
	display: inline-block;
}

.CourseRatingsColumn .ButtonCourseClearRating:hover
{
	background: url("Images/ClearRatings.png") no-repeat;
}

.CourseRatingsColumn .ButtonCourseClearRating span
{
	display: none;
}

/*
 * External courses
 */
.ButtonAddExternalCourse
{
	float: right;
}

.fileContainer label {
	width: 22px;
	line-height: 27px;
	background: url(../../Common/Icons/file.svg) no-repeat left;
	background-size: contain;
	padding: 9px 0 5px 30px;
	margin-left: 5px;
}

div.fileContainer {
	border-top: 3px solid #606060;
	border-bottom: 1px solid #d8d8d8;
	display: inline-block;
	width: 100%;
	padding: 13px 0 18px 0;
	margin-top: 10px;
}


.fileDownload {
	width: 22px;
	line-height: 27px;
	background: url(../../Common/Icons/file-download.svg) no-repeat left;
	background-size: contain;
	padding: 9px 0 5px 30px;
	margin-left: 5px;
}

user-information.user-trainingrecords, table.list td, table.list th {
	padding-left: 10px!important;
	padding-right: 10px!important;
}

/*
 * Settings User Information
 */
.user-information, table.list td, table.list th {
	padding-left: 16px;
	padding-right: 16px;
}

.user-information a {
	margin-top: 3px;
}

/*ADMIN: Data Import*/
div.messages {width: 100%; display: block; margin-bottom: 15px;}

.success ul, .fail ul, .info ul, .warning ul, .wait ul, .new-feature-info ul {list-style-type: none; margin: 0; padding: 0;}
.success ul li, .fail ul li, .info ul li, .warning ul li, .wait ul li, .new-feature-info ul li {padding-right: 5px;}
.success, .fail, .info, .warning, .wait, .new-feature-info {
	color: #434143;
	line-height: 15px;
	margin: 20px 0;
	border-width: 1px;
	border-style: solid;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	padding: 12.5px 10px 12.5px 32px;
	margin-left: 4px;
	position: relative;
}

.success::before, .fail::before, .info::before, .warning::before, .wait::before {
	display: block;
	content: "";
	border-left: 5px solid;
	border-bottom-left-radius: 2px;
	border-top-left-radius: 2px;
	position: absolute;
	top: -1px;
	bottom: -1px;
	left: -5px;
}

.success {
	border-color: rgba(40, 155, 14, 0.25);
	background: #e6f5e4 url(../../Common/Icons/success-icon.svg) no-repeat 8px 11px;
}

.success::before {
	border-left-color: #23880c;
}

.fail {
	line-height: 25px;
	border-color: rgba(219, 0, 0, 0.25);
	background: #ffebeb url(../../Common/Icons/error-icon.svg) no-repeat 8px 11px;
	padding-top: 7.5px;
	padding-bottom: 7.5px;
}

.fail::before {
	border-left-color: #db0000;
}

.info 
{
	border-color: #d8d8d8;
	background: #f3f3f3 url(../../Common/Icons/information-icon.svg) no-repeat 8px 11px;
}

.info::before {
	border-left-color: #606060;
}

.warning {
	border-color: rgba(204, 126, 0, 0.25);
	background: #ffe6bd url(../../Common/Icons/warning-icon.svg) no-repeat 8px 11px;
}

.warning::before {
	border-left-color: #a86800;
}

.wait {border: 1pt solid #88DDFF; background: #FFF url("Images/ajax-loader.gif") no-repeat 4px 50% !important;}
div#Messages ul li{list-style-type:none;margin-left:15px !important}

.new-feature-info {
    border: 1pt solid #E8E800;
    background: #FFFFB9 url("Images/Information.png") no-repeat 7px 11% !important;
    padding: 15px 0px 5px 30px;
}

.new-feature-info a {
    color: #444;
    text-decoration: underline;
}

.competency-check-state {
    display: block;
    padding-top: 10px;
}

a.goto
{
	background: transparent url("Images/blueArrowRightTrans.png") no-repeat 0 0;
	height: 15px;
	display: block;
	padding-left: 25px;
	text-decoration: none;
}

a.goto:hover
{
	text-decoration: underline;
}

a.AjaxWait
{
	background: transparent url("Images/ajax-loader.gif") no-repeat 10px 3px;
	height: 25px;
	display: inline;
	text-decoration: none;
	padding: 4px 5px 4px 35px;
	position: relative;
	top: 5px;
}

td.removeRow
{
	width: 20px;
}
table.tblmapping td
{
	padding: 2px 5px 2px 5px;
}
.mappingValidation
{
	background-color: #FFAABB;
}

table.MappingView
{
		border-collapse:collapse; 
}

table.MappingView th
{
	padding: 5px;
}

table.MappingView td 
{
		padding-top: 4px;
		padding-bottom: 4px 
}
table.MappingView td.col2
{
	padding-left: 10px;
}

table.MappingView td.col4
{
	text-align: center;
}

table.MappingView tr.fieldMapHeader td
{
		font-weight:normal;
		background-color:#AAA;
		color:#FFF
}

table.MappingView tr.valueMap td
{
		background-color:#FFDED3;
		padding-left:10px; 
}

div.ExpandCollapse
{
	width: 100%;
}
div.ExpandCollapse .area_title
{
	background-color: #e1eaff;
	border: 1px solid #d2ddef;
	padding: 3px;
	cursor: pointer;
	font-weight: normal;
	font-size: 9pt;
	color: #030C55;
	margin-top: 10px;
}

div.ExpandCollapse .area_title a
{
	text-decoration: none;
}

a.show
{
	background: url("Images/button_collapse.jpg") no-repeat 0 1px;
	padding-left:15px;
	text-decoration:none;
	cursor: pointer;
}
a.hide
{
	background: url("Images/button_expand.jpg") no-repeat 0 1px;
	padding-Left:15px;
	text-decoration:none;
	cursor: pointer;
}

div.ExpandCollapse .contents
{
	padding: 10px;
}
div.importDetails ul 
{
		padding-left: 30px
}

.validation {background-color:#FECDCB}

.ImportsImageCross {
	width: 16px;
	height: 16px;
	background: url("Images/cross.svg") no-repeat;
	background-size: cover;
	display: inline-block
}

.ImportsImageTick {
	width: 16px;
	height: 16px;
	background: url("Images/tick.svg") no-repeat;
	background-size: cover;
	display: inline-block
}

.ImportsMappingImageRemove {
	width: 24px;
	height: 24px;
	background: url("../../Common/Icons/clear.svg") no-repeat;
	background-size: cover;
	display: inline-block;
	margin-top: 8px;
}

/*END - ADMIN: Data Import*/


/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window
{
	font: 12px Arial, Helvetica, sans-serif;
	color: #333333;
}

#TB_secondLine
{
	font: 10px Arial, Helvetica, sans-serif;
	color: #666666;
}

#TB_window a:link
{
	color: #666666;
}
#TB_window a:visited
{
	color: #666666;
}
#TB_window a:hover
{
	color: #000;
}
#TB_window a:active
{
	color: #666666;
}
#TB_window a:focus
{
	color: #666666;
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay
{
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.TB_overlayMacFFBGHack
{
	background: url("Images/macFFBgHack.png") repeat;
}
.TB_overlayBG
{
	background-color: #000;
	filter: alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
}

* html #TB_overlay
{
	/* ie6 hack */
	position: absolute;
	height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_window
{
	position: fixed;
	background: #ffffff;
	z-index: 102;
	color: #000000;
	display: none;
	border: 4px solid #525252;
	text-align: left;
	top: 50%;
	left: 50%;
}

* html #TB_window
{
	/* ie6 hack */
	position: absolute;
	margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_window img#TB_Image
{
	display: block;
	margin: 15px 0 0 15px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #666;
	border-left: 1px solid #666;
}

#TB_caption
{
	height: 25px;
	padding: 7px 30px 10px 25px;
	float: left;
}

#TB_closeWindow
{
	height: 25px;
	padding: 11px 25px 10px 0;
	float: right;
}

#TB_closeAjaxWindow
{
	padding: 7px 10px 5px 0;
	margin-bottom: 1px;
	text-align: right;
	float: right;
}

#TB_ajaxWindowTitle
{
	float: left;
	padding: 7px 0 5px 10px;
	margin-bottom: 1px;
}

#TB_title
{
	background-color: #e8e8e8;
	height: 27px;
}

#TB_ajaxContent
{
	clear: both;
	padding: 2px 15px 15px 15px;
	overflow: auto;
	text-align: left;
	line-height: 1.4em;
}

#TB_ajaxContent.TB_modal
{
	padding: 15px;
}

#TB_ajaxContent p
{
	padding: 5px 0 5px 0;
}

#TB_load
{
	position: fixed;
	display: none;
	height: 13px;
	width: 208px;
	z-index: 103;
	top: 50%;
	left: 50%;
	margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}

* html #TB_load
{
	/* ie6 hack */
	position: absolute;
	margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_HideSelect
{
	z-index: 99;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #fff;
	border: none;
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	height: 100%;
	width: 100%;
}

* html #TB_HideSelect
{
	/* ie6 hack */
	position: absolute;
	height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_iframeContent
{
	clear: both;
	border: none;
	margin-bottom: -1px;
	margin-top: 1px;
	_margin-bottom: 1px;
}

/*
 * Reports
 */
 
td.reportTitle
{
	width: 260px;
}

td.reportTitle a
{
	line-height: 21px;
}

.ReportTitle .ReportTypeImage
{
	float: left;
	width: 0;
	height: 17px;
	margin: 0 5px 0 0;
	cursor: default;
	padding: 0 0 0 17px;
	overflow: hidden;
}

.ReportTypeImage span {display: none;}

.ReportTypeImage.TypeInteractive {
	background: url("../../Common/Icons/report.svg") no-repeat left center;
	padding: 5px 0 7px 27px;
}

.ReportTypeImage.TypeLive {
	background: url("../../Common/Icons/report_live.svg") no-repeat left center;
	padding: 5px 0 7px 27px;
}

.report-section-heading {background-color: #CCC; font-weight:bold}

.folder-heading a.expandable-link {
	background: url("../../Common/Icons/folder.svg") no-repeat 1.2% 50%, url("../../Common/Icons/icon-chevron-down-white-thick.svg") no-repeat 98.3% 50%;
	background-color: #606060;
	padding: 4px 40px 0 40px;
	border-radius: 2px;
}

.folder-heading a.expandable-link-expanded {
	background: url("../../Common/Icons/folder.svg") no-repeat 1.2% 50%, url("../../Common/Icons/icon-chevron-up-white-thick.svg") no-repeat 98.3% 50% !important;
	background-color: #606060 !important;
	padding: 4px 40px 0 40px;
	border-radius: 2px;
}

.section-heading a.expandable-link {
	background: url("../../Common/Icons/icon-chevron-down-white-thick.svg") no-repeat 98.3% 50%;
	background-color: #606060;
	padding: 4px 40px 0 4px;
	border-radius: 2px;
}

.section-heading a.expandable-link-expanded {
	background: url("../../Common/Icons/icon-chevron-up-white-thick.svg") no-repeat 98.3% 50% !important;
	background-color: #606060 !important;
	padding: 4px 40px 0 4px;
	border-radius: 2px;
}

.colorbox {
	float: left;
	margin: 2px;
	width: 12px;
	height: 12px;
	border: 1px solid black;
}

/* Styles for "Resource Planner (Month) (HTML only)" and "Resource Planner (Yearly) (HTML only)" reports */
table.list.year-planner th, table.list.year-planner td,
table.list.month-planner th, table.list.month-planner td
 {
		padding-left: 3px !important;
		padding-right: 3px !important;
	    width:20px;
}

table.year-planner th.year-planner-month, table.year-planner td.year-planner-month,
table.month-planner th.month-planner-month, table.month-planner td.month-planner-month 
{
	width:112px;
}

table.list.year-planner .CalendarSelectedDay,
table.list.month-planner .CalendarSelectedDay
{
	/* Selected calendar day has a border of 2px, so the width is adjusted accordingly */
	width:18px;
}

div.list.year-planner,
div.list.month-planner
{
	/* Stop scroll bars being shown in some browsers, when they seem to calculate the width to be 1px more than 100% width */
		overflow:visible;
}
/* End of styles for "Resource Planner (Month) (HTML only)" and "Resource Planner (Yearly) (HTML only)" reports */

/* Styles for reports that use the iframe in the ReportViewerFrame.aspx page */
body.iframe-report
{
	background-color: #ffffff;
}
.tmp-body-l.iframe-report
{
	width: 965px;
}
.tmp-body-inner.iframe-report
{
	padding-bottom: 10px;
}

/*
 * jQuery Tooltips
 */
#tooltip {
	position: absolute;
	z-index: 3000;
	border: 1px solid #111;
	background-color: #eee;
	padding: 5px;
	opacity: 0.85;
}

#tooltip.opaque {
	opacity: 1 !important;
} 

#tooltip h3, #tooltip div { margin: 0; }

#tooltip.pretty {
	font-size:9pt;
	border: none;
	width: 210px;
	padding:20px;
	height: 90px;
	opacity: 0.8;
	background: url("Images/jQueryTooltipPretty.png");
	left: -100px; 
}
#tooltip.pretty h3 {
	margin-bottom: 0.75em;
	font-size: 10pt;
	width: 210px;
	text-align: center;
}
#tooltip.pretty div { width: 220px; text-align: left; }


/*
 * Course Import Wizard styles
 */
.importInfo {display:block; padding-bottom: 5px}
.highlight {background-color: #EB9A9A}
.image-select.highlight {background-color: #EB9A9A}
input[type="text"].highlight {background-color: #EB9A9A}

.lessonHeader
{
	font-weight: bolder;
	padding-top: 20px;
	padding-bottom: 10px;
}

.fileQueue
{
	font-size: 1em;
	padding-left: 20px;
	display: inline;
}

.fileQueue a
{
	padding-left: 20px;
	margin-left: 30px;
}

/* jQuery tab widget styles */
/* docs here: https://api.jqueryui.com/tabs/ */

.tabs,
.ui-tabs-nav,
.ui-tabs-nav li,
.ui-tabs-nav li .tab-l,
.ui-tabs-nav li a,
.ui-tabs-nav li a:hover
.ui-tabs-selected a {
	padding-left: 0;
	padding-bottom: 0;
	margin: 0;
}

.tabs {
	width: 100%;
}

.ui-tabs-nav {
	float: left;
	outline: none;
}

.ui-tabs-nav li {
	list-style: none;
	float: left;
	display: inline;
	color: #000000;
	font-family: Lato;
	font-size: 17px;
	outline: none;
}

.ui-tabs-nav li:first-child a {
	padding-left: 0px;
}

.ui-tabs-nav li a {
	text-align: center;
	float: left;
	padding-right: 5px;
	text-decoration: none;
	cursor: pointer;
	display: block;
	font-family: Lato;
	font-size: 15px;
	outline: none;
	padding: 5px 40px 5px 10px;
}

.ui-tabs-tab {
	font-weight: normal;
}

.ui-tabs-tab:hover {
	border-bottom: solid;
	border-bottom-width: 2px;
	border-color: #d8d8d8;
}

.ui-tabs-active {
	border-bottom: solid;
	border-color: #239c8b;
	border-bottom-width: 2px;
	font-weight: bold;
}

.ui-tabs-active:hover {
	border-bottom: solid;
	border-color: #239c8b;
	border-bottom-width: 2px;
	font-weight: bold;
}

.ui-tabs .ui-tabs-hide {
	display: none !important;
}

/* -------- */
div.theme-image
{
	background: url("Images/ThemeImage.png") repeat scroll 0 0 #FFFFFF;
	border: 1px solid #999999;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1) inset;
	margin-bottom: 10px;
}

.ui-dialog.ui-widget.ui-widget-content 
{
	padding-bottom: 0em;
	padding-left: 0em;
	padding-right: 0em;
	padding-top: 0em;
}

/*	Footer styles	*/
body.tmp-with-footer {
	position: relative;
	min-height: 100vh;
}

div.tmp-background {
	padding-bottom: 185px;
}

div#uxAdminReactFooterContainer {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 185px;
}
div.tmp-app-footer {
	background: url("Images/Footer.png") repeat-x 0 0 rgb(153, 153, 153);
}
div.tmp-app-footer-inner {
	background: url("Images/Footer.png") repeat-x 0 0 rgb(153, 153, 153);
	border-top: solid 1px rgb(68, 68, 68);
	margin: 0 auto;
	padding: 20px 10px;
	width: 1125px;
	color: rgb(255, 255, 255);
}
div.tmp-app-footer-inner img {border: 0 currentColor;}
div.tmp-app-footer-inner a {color: rgb(255, 255, 255); text-decoration: none;}
div.tmp-app-footer-inner a:hover {text-decoration: underline;}
div.tmp-app-footer-inner div.strapline {color: rgb(204, 204, 204); font-size: 8pt; margin-top: 5px;}

#FooterText{text-align: right;}
#FooterImage{width:142px; height:32px; background: url("Images/ProductTitleBar.png")}
/* -------- */

.report-window-width
{
	width: 99% !important;
}

.report-window-padding
{
	padding: 12px 0 48px !important;
}

/* jQuery ui: Modal popup styles */
.ui-widget-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000000; opacity: .50;filter:Alpha(Opacity=50); }

.ui-dialog { position: fixed; padding: .2em; width: 300px; overflow: hidden; z-index: 1000; background-color: #ffffff}
.ui-dialog .ui-dialog-content { position: relative; border: 0; background: none; overflow: hidden; zoom: 1; margin:10px;}

.space-links-vertically a {margin: 5px 0 !important; display:block}
.inner-table-padding td {padding:1px !important}

/* MS Ajax toolkit override: Keeps the calendar control on top, above other elements including button images */
.ajax__calendar_container {z-index:1}

/* This will trim a section of text down into the given width and if the text goes beyond that width, will provide elipsis marks*/
.ellipsis-trim-text, .ellipsis-trim-text span, .fixed-table-layout .lp-title-c {
  white-space: nowrap;                  
  overflow: hidden;              /* "overflow" value must be different from "visible" */ 
  text-overflow: ellipsis;
}

.text-wrap { word-break: break-all;}
.text-hidden, .text-hidden a.i { overflow: hidden; } /* Hide any button text which would otherwise cause the size of the area to increase */

.fixed-table-layout {table-layout:fixed;}

/* Used to remove unwanted border and padding on tables within KallidusDataGrid controls with nested tables*/
table.list table.list-inner-table td {padding:1px 10px; border:none}
table.list table.list-inner-table-no-padding tr {
	padding: 0 !important;
	border: none;
	background: none;
}
table.list table.list-inner-table-no-padding td {padding: 0 !important; border:none !important;}

/* Used in the new transposed table layouts for lists with many data elements */
.item-row-height-small {
	min-height: 16px
}
.item-row-height1 {min-height:20px}
.item-row-height1_1 {min-height:30px}
.item-row-height1_2 {min-height:40px}
.item-row-height1_3 {min-height:50px}
.edit-item-row-height1 {min-height:25px}

.vertical-align-middle {vertical-align: middle !important}

a.popup-tooltip { cursor: default }
.popup-tooltip-text { display:none }
#tooltip.width500 { max-width:500px }
#tooltip.width500 h3 
{
	margin-bottom: 5px;
	font-size: 10pt;
}

.icon-list a {display: block; padding-bottom: 5px}
.icon-list-horizontal a {margin-right: 15px;}

/*Sort out the padding issues with the icon link buttons in IE7 and IE9Compat mode */
*+html a.i span {padding-left: 3px}

.wide-column-header {float:left; position:relative; top: -1px}

.no-border {border:none !important}
.no-padding {padding: 0 0 !important}
.no-margin {margin: 0 0 !important}

.expandable-notice p {margin: 0 0 !important}

.center-text {text-align: center !important}
.small-padding th, .small-padding td {padding:2px}
.no-margin-above, input[type="text"].no-margin-above {margin-top: 0}
.margin-above-70 {margin-top: 70px}
.margin-above-14 {margin-top: 14px}
.small-margin-above {margin-top: 5px}
.small-margin-below {margin-bottom: 5px}
.small-padding-above {padding-top: 5px}
.margin-below-15 {margin-bottom: 15px}
.notice-small-margin p {
	margin-bottom: 5px !important;
	margin-top: 0 !important;
}
.no-left-margin {margin-left: 0px;}
.margin-left {margin-left: 15px;}
.margin-left-5 {margin-left: 5px;}
.margin-left-25 {
	margin-left: 25px;
}
.label-margin {margin-top: 4px;}
*.no-margin-above {margin-top: 0;}
.margin-above-8 {
	margin-top: 8px;
}

.line-height-15 {
	line-height: 15px;
}

.display-block {
	display: block;
}

.invalid-cpd-values {color: Red; font-weight:bold}
.input-disabled {background-color: #ECECEC}

.dialog-background-colour {background-color: #fff}

.search-message tbody tr td, .search-message thead tr td {
	padding: 20px 20px 0 20px;
}

.pmb-message tbody tr:nth-child(2n), .pmb-message thead tr:nth-child(2n) {
	background-color: transparent !important;
}

.pmb-message tbody tr td, .pmb-message thead tr td {
	border: none !important;
	background-color: transparent !important;
}

.shorter-textbox { width: 100%; }
.short-textbox { width: 100%; }
.medium-textbox { width: 100%; }
.long-textbox { width: 100%; }
.allow-wrap, .allow-wrap label { white-space: normal !important }

ul.ui-autocomplete { z-index: 9999 !important; }

.vertical-align-top { vertical-align: top; }
.vertical-align-text-top { vertical-align: text-top; }

.unknown-approver {color: Red; font-weight:bold}


/*Start of ExternalCourseList styles*/
.externalcourse-title-column, .externalcourse-title {
	width: 478px;
}

.externalcourse-score-column { width: 90px; }
.externalcourse-lastused-column { width: 150px; }
.externalcourse-buttons-column { width: 80px; }

.externalcourse-title {
	width: 490px;
}

.externalcourse-score
{
	width: 90px;
	text-align: left;
	white-space: nowrap;
	padding-left: 10px;
}

.externalcourse-lastused { width: 150px; }

.externalcourse-buttons
{
	padding: 6px 10px;
	width: 80px;
	text-align: center;
}

.externalcourse-header-panel
{
	font-weight: bold;
	height: 22px;
	margin: 0;
	border-collapse: collapse;
	-moz-user-select: none;
	-khtml-user-select: none;
}

.externalcourse-header-panel th
{
	border-spacing: 0;
	border: 0 !important;
	overflow: hidden;
	text-align: left;
}

.externalcourse-header-panel th span
{
	line-height: 16px;
}

.externalcourse-title .LessonTypeImage
{
	float: left;
	width: 0;
	height: 16px;
	margin: 0 5px 0 0;
	cursor: default;
	padding: 0 0 0 16px;
	overflow: hidden;
}

.externalcourse-panel .externalcourse-panel
{
	padding: 4px 2px 8px 2px;
}

.externalcourse-panel div
{
	border: 0;
}

.externalcourse-lesson-panel
{
	height: 27px;
	-moz-user-select: none;
	-khtml-user-select: none;
	width: 99%;
	margin-bottom: 4px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	top: 0;
	border-collapse: collapse;
}

*+html .externalcourse-lesson-panel
{
	width: 99.2%;
}

.externalcourse-lesson-panel .externalcourse-title
{
	font-weight: normal;
}
/*End of ExternalCourseList styles*/


/*Start of ExternalCourseList styles for just the Admin Pages*/
#Admin .externalcourse-panel .externalcourse-panel
{
	padding: 0 !important;
	margin: 0 !important;
}

#Admin .externalcourse-lesson-panel
{
	width: 100%;
	padding: 0 !important;
	margin: 0 !important;
}

#Admin table.list tbody tr td
{
	_border-top-width: 1px;
}

#Admin table.list tbody tr:first-child td
{
	border-top-width: 1px;
}

/*End of ExternalCourseList styles for just the Admin Pages*/

 .accreditation-icon-list {
	 margin-top: 5px;
 }

 .accreditation-icon-list img {
	 min-height: 32px;
	 min-width: 32px;
	 max-height: 50px;
	 max-width: 50px;
	 margin-right: 5px;
	 margin-top: 5px;
 }

 #uxImpersonateUserWarningArea {
     background-color: red;
     color: white;
     font-size: 14px;
     font-weight: bold;
     text-align: center;
     width: 100%;
     padding-top: 10px;
     padding-bottom: 10px;
 }

 #uxImpersonateUserWarningArea span {
      background-image: url("../../Common/Icons/16/Warning.png");
      background-repeat: no-repeat;
      padding-left: 25px;
  }

.div-section-border {
	border: 1px solid #D8D8D8;
	display: block;
	padding: 15px 25px 15px 25px;
	border-radius: 2.5px;
}

/* Change placeholder colour to improve contrast to meet WCAG 2.0 accessibility standards https://css-tricks.com/almanac/selectors/p/placeholder/ */
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #696969;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #696969;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #696969;
}
:-moz-placeholder { /* Firefox 18- */
  color: #696969;
}

/* Keep alive control on the portal page */
#KeepAlive {
    display: none;
    border: none; 
    width: 1px; 
    height: 1px; 
    position: absolute;
}

#ExchangeIntegrationTable label {
	white-space: normal;
}

/* Lesson selection groups */

#SelectionGroupsSection.p {
    max-width: 500px;
}

.uxSelectionGroupsHeader {
    margin-bottom: 5px;
    display: block;
    font-weight: bold;
	font-size: 25px;
}

/* Image Selector Controls*/

.ui-dialog-titlebar-close {
	border: none;
    color: transparent;
    background-color: transparent;
    user-select: none;
    cursor: pointer;
    padding-top: 6px;
    height: 40px;
}

.ui-dialog-titlebar-close span {
	display: none;
}

.ui-dialog-titlebar-close:focus {
	outline: none;
}

.ui-dialog-titlebar-close:before {
	content: url(../../Common/Icons/icon-close.svg);
	display: block;
}

.image-selector-control 
{
	display: flex;
	margin-bottom: 20px;
}  

.image-border
{
	position: relative;
	width: 220px;
	height: 110px;
	border: hidden;
	background-color: #f3f3f3;
	margin-right: 20px;
	margin-top: 4px;
}

.image-select 
{
	position: absolute;
	width: 200px;
	height: 90px;
	border: dashed 1px #979797;
	background-color: #ffffff;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	text-decoration: underline;
}

.image-select:hover 
{
	border: dashed 1px #434143;
	text-decoration: none;
	cursor: pointer;
}

.image-preview {
	object-fit: cover;
	border: 1px solid #D8D8D8;
	display:block;
}

.image 
{
	width: 100%;
	height: 110px;
	object-fit: cover;
	border: 1px solid #D8D8D8;
}

img#uxWait 
{
	margin: 40px;
}

/* Photo Selector Controls*/

div.photo-upload-panel {
	position: relative;
	width: 100%;
	padding-top: 8px;
	padding-bottom: 22px;
	border-bottom: 1px solid #d8d8d8;
}

div.photo-selector-border {
	position: relative;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background-color: #f3f3f3;
}

div.photo-select {
	position: absolute;
	width: 130px;
	height: 130px;
	border: dashed 1px #979797;
	border-radius: 50%;
	background-color: #ffffff;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	text-decoration: underline;
}

div.photo-select:hover {
	border: dashed 1px #434143;
	text-decoration: none;
	cursor: pointer;
}

img.photo {
	width: 149px;
	height: 149px;
	object-fit: cover;
	border: 1px solid #D8D8D8;
	border-radius: 50%;
}

span.photo-upload-file-name {
	position: absolute;
	left: 160px;
	top: 43%;
}

div.photo-upload-button-row {
	position: absolute;
	right: 0px;
	top: 36%;
	line-height: 40px;
}

/* Search Filter Controls*/
.search-filters-outer, .search-filter-background {
	margin-bottom: 20px;
	border-radius: 2px;
	background-color: #f3f3f3;
	padding: 12px 15px 9px 15px;
}

.padding-bottom-15 {
	padding-bottom: 15px;
}

.padding-top-0 {
	padding-top: 0;
}

.padding-top-12 {
	padding-top: 12px;
}

.padding-top-20 {
	padding-top: 20px;
}

.padding-left-7 {
	padding-left: 7px;
}

.search-row,
.filters-row-outer,
.filters-row-inner,
.filter-row
{
	display:inline-block;
}

.search-row,
.filters-row-inner,
.filter-button-row {
	padding-bottom: 12px;
}

.search-label {
	font-weight: bold;
}

.centered {
	vertical-align: -webkit-baseline-middle;
}



input[type="text"].search-textbox {
	margin-right: 10px;
	color: #606060;
}

.filter-label 
{
	font-weight: bold;
}

.filter-dropdown 
{
	width: 290px;
	margin-right: 10px;
	color: #606060;
}

.filter-button-row
{
	display: inline-block;
	vertical-align: -10%;
}

.fieldLabel {
	font-size: 13px;
	font-weight: bold;
}

.sectionHeading {
	font-size: 17px;
	font-weight: bold;
}

hr 
{
	color: #949494;
}

div.advanced-filter-field {
	float: left;
	padding-right: 20px;
	padding-bottom: 20px;
}
/* Limited override of the Tiny MCE control border style */
.mce-panel {
	border-color: #606060 !important;
	border-radius: 2px !important;
	margin-top: 4px !important;
}

/*Rect Modal date picker*/

.datepicker-wrapper input[type=text] {
	padding: 2px 4px 2px 7px;
}

.datepicker-wrapper svg {
	padding-top: 4px;
	padding-bottom: 2px;
}

/* Language Selector bar*/
.language-selector-panel {
	display: flex;
	align-items: center;
	background-color: #606060;
	color: #ffffff;
	border-radius: 2px;
	height: 36px;
	padding-left: 10px;
	margin-bottom: 20px;
}

.language-selector-label {
	background: url(../../Common/Icons/icon-translate-languages.svg) no-repeat left;
	padding: 10px 14px 10px 42px;
	line-height: 34px;
}

.language-selector-secondary-label {
	padding: 0px 14px 0px 0px;
	line-height: 34px;
	font-weight: 400;
}

.language-selector-dropdown {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	position: relative;
	width: 210px;
	height: 100%;
	background: #434143;
	font-family: Lato;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
	background: #434143 url(../../Common/Icons/icon-chevron-down-white.svg) no-repeat right 8px center;
}

.language-selector-dropdown-selected {
	padding-left: 10px;
	font-weight: 700;
}

.language-selector-dropdown-expandable {
	display: block;
	max-height: 228px;
	overflow: auto;
	z-index: 1;
	list-style-type: none;
	margin: 0;
	padding-left: 0;
	position: absolute;
	top: 100%;
	background: #434143;
	width: 210px;
}

.language-selector-dropdown-option {
	display: flex;
	justify-content: space-between;
	padding: 10px;
	border-top: 1px solid #606060;
	font-size: 14px;
}

.language-selector-dropdown-option:hover {
		background: #606060;
}

.default-span {
	font-size: 10px;
	font-style: italic;
	align-self: flex-end;
}

.language-selector-separtor {
	margin-left: 7px;
	margin-right: 7px;
	color: #434143;
	font-size: 20px;
	line-height: 36px;
}

/* Date Picker Styling*/
.ajax__calendar .ajax__calendar_header, .ajax__calendar_body thead {
	background-color: #f3f3f3 !important;
	padding:4px 0px;
}

.ajax__calendar .ajax__calendar_header{
	height:auto;
}

.ajax__calendar .ajax__calendar_prev {
	background-image: url(../../Common/Icons/calender-previous.svg);
}

.ajax__calendar .ajax__calendar_next {
	background-image: url(../../Common/Icons/calender-next.svg);
}
.ajax__calendar .ajax__calendar_title,
.ajax__calendar .ajax__calendar_dayname {
	font-family: Lato;
	font-size: 11px;
	font-weight: 700;
	line-height: 15px;
	color: #434143 !important;
	text-align: center;
}
.ajax__calendar .ajax__calendar_years td,
.ajax__calendar .ajax__calendar_months td {
	height: 62px;
	width: 45px;
}
	.ajax__calendar .ajax__calendar_container {
	width: 203px !important;
	padding: 0 0;
}
.ajax__calendar .ajax__calendar_body, .ajax__calendar .ajax__calendar_months, .ajax__calendar .ajax__calendar_years {
	width: 203px;
	height: 185px;
	background-color: #ffffff;
}
.ajax__calendar .ajax__calendar_dayname,
.ajax__calendar div.ajax__calendar_day,
.ajax__calendar div.ajax__calendar_month,
.ajax__calendar div.ajax__calendar_year {
	font-family: Lato;
	font-size: 11px;
	color: #434143;
	border-radius: 2px;
	border-style: none;
	text-align: center;


}
.ajax__calendar .ajax__calendar_dayname,
.ajax__calendar div.ajax__calendar_day {
	width: 23px;
	height: 23px;
	margin: 1.5px 1px;
	line-height: 23px;
}
.ajax__calendar .ajax__calendar_other div.ajax__calendar_day {
	color: #949494;
}

.ajax__calendar div.ajax__calendar_day:hover, .ajax__calendar div.ajax__calendar_month:hover, .ajax__calendar div.ajax__calendar_year:hover {
	text-decoration: underline;
	background-color: #f3f3f3;
	color: #434143;
}

.ajax__calendar_active div.ajax__calendar_day,
.ajax__calendar_active div.ajax__calendar_day:hover,
.ajax__calendar_active div.ajax__calendar_month,
.ajax__calendar_active div.ajax__calendar_month:hover,
.ajax__calendar_active div.ajax__calendar_year,
.ajax__calendar_active div.ajax__calendar_year:hover {
	background-color: #434143 !important;
	color: #ffffff !important;
	text-decoration: none;
}

.ajax__calendar .ajax__calendar_footer {
	display: none;
}

/*Page Spacing*/
.section-margin-below
{
	margin-bottom: 56px;
}

.modal-dialog-background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0,0,0,0.7);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-dialog-container {
	background: #fff;
	width: 80vw;
	height: 80vh;
	position: relative;
	padding: 32px 24px 24px 24px;
	border-radius: 2px;
	box-shadow: 0 2px 16px rgba(0,0,0,0.2);
}

.modal-dialog-title {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 16px;
}

.modal-dialog-close-button {
	border: none;
	background: transparent;
	cursor: pointer;
	width: 40px;
	height: 40px;
	position: absolute;
	top: 16px;
	right: 16px;
	padding: 0;
}

.modal-dialog-close-button::before {
	content: url(../../Common/Icons/icon-close.svg);
	display: block;
	width: 32px;
	height: 32px;
}