/*
1. 	Global Settings
	1.1 Buttons
	1.2 Form Elements
	1.3 Fonts
	1.4 Utility Classes
	1.5 Animation
	1.6 Links
2.	Structure
3.	Component - Header
4.	Component - Content
	4.1 Content Heading
	4.2 Content Block
	4.3 Table
	4.3.1 Table - Striped
	4.3.2 Table - Bordered
	4.3.3 Table - Advanced
	4.3.4 Table - Role Configuration
	4.3.5 Table - Attendance
	4.4 Form Elements
	4.5 Pagination
	4.5.1 Test Pagination
	4.6 Course Navigation
	4.7 Course Card
	4.8 User Card
	4.9 Decision Card
	4.10 Definition List
	4.11 Homepage Channels
	4.12 Tests & Test Scores
5.	Component - Footer
6.	Component - Notifications
7.  Component - Dialog
	7.1 FAQ
	7.2 Reorder
8.	Component - Registrar Console
9 	Component - Instructor Console
10.	Component - Lab Manager
11. Component - VM Editing
12.	Component - Security Monitoring
13. Component - ckEditor
14. Component - Confirm New Users
15. Component - User Manager
16.	Overrides - Choices
*/

/**********************
 * 1. Global Settings *
 **********************/
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-weight: 400;
	font-size: 16px;
	color: #333;
	background-color: #ecf0f1;
	border-top: solid 4px var(--accent-color);
	/* for sticky footer */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, legend{
	font-family: 'Lato', Arial, sans-serif;
}

a{
	color: inherit;
	text-decoration: none;
}

/***************
 * 1.1 Buttons *
 ***************/
button,
.cke_reset_all button{
	font-family: 'Lato', Arial, sans-serif;
	cursor: pointer;
	padding: .5em 1em;
	border-radius: 4px;
}

	button.btn-primary{
		color: #fff;
		background-color: var(--accent-color);
		border: solid 1px var(--accent-color);
	}
	
	button.btn-secondary{
		background-color: #fff;
		border: solid 1px #fff;
	}
		
	button[role="switch"]{
		display: flex;
		padding: 0;
		border: none;
	}
	
	button[role="switch"] span{
		padding: .5em 1em;
		background-color: #f3f3f3;
		border-top: solid 1px #ccc;
		border-bottom: solid 1px #ccc;
	}
	
	[role="switch"] span:first-child{
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
		border-left: solid 1px #ccc;
	}

	[role="switch"] span:last-child{
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
		border-right: solid 1px #ccc;
	}
	
	[role="switch"][aria-checked="true"] :first-child{
		background-color: #2f6f2f;
		color: #fff;
	}

	[role="switch"][aria-checked="false"] :last-child{
		background-color: #802420;
		color: #fff;
	}

	button:disabled,
	button[disabled]{
		cursor: default;
		border: 1px solid #999;
		background-color: #ccc;
		color: #666;
	}
	
/*********************
 * 1.2 Form Elements *
 *********************/
input,
select,
textarea{
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 13.3333px;
	border: solid 1px #999;
	border-radius: 4px;
	padding: .4em .85em;
	box-shadow: inset 0 2px 4px 0 hsla(0, 0%, 0%, 0.08);
	transition: all 0.3s linear;
}

	input[type="text"],
	input[type="email"],
	input[type="password"],
	textarea{
		width: 100%;
	}

	@media screen and (min-width: 981px){
		input[type="text"],
		input[type="email"],
		input[type="password"],
		textarea{
			width: auto;
		}
		
		table input[type="text"]{
			width: 100%; /* test answers */
		}
	}
	
	input:focus,
	select:focus,
	textarea:focus{
		box-shadow: 0 0 5px rgba(81, 203, 238, 1);
		border: 1px solid rgba(81, 203, 238, 1);
		outline: none;
	}
	
	/* Classroom Reports */
	select#courseSel,
	/* Clone an existing virtual machine */
	select#vmCreateCloneSelections,
	/* Choose a premade virtual machine */
	select#vmCreateFromLibSelections{ 
		width: 100%;
	}

input[type="range"],
input[type="color"],
input[type="file"]{
	border: none;
	border-radius: 0;	
	padding: 0;
	box-shadow: none;
}

	input[type="color"]{
		-webkit-appearance: none;
		width: 64px;
		height: 23px;
		cursor: pointer;
		background-color: inherit;
	}
	
		input[type="color"]::-webkit-color-swatch-wrapper{
			padding: 0;
		}

		input[type="color"]::color-swatch-wrapper{
			padding: 0;
		}
		
		input[type="color"]::-webkit-color-swatch{
			border: none;
		}
		
	input[type="file"]{
		background-color: #fff;
	}

fieldset{
	position: relative;
	border: none;
}

	fieldset + fieldset{
		margin-top: 18px;
	}
	
	legend{
		font-weight: 700;
		font-size: 120%;
	}

		fieldset + fieldset > legend{
			width: 100%;
			border-top: solid 1px #eee;
			padding-top: 18px;
		}

@media screen and (min-width: 981px){
	fieldset + fieldset > legend{
		width: auto;
		min-width: 380px;
	}
}		
		
/*************
 * 1.3 Fonts *
 *************/
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	src: url(/assets/fonts/Lato-400-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	src: url(/assets/fonts/Lato-400-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 700;
	src: url(/assets/fonts/Lato-700-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 700;
	src: url(/assets/fonts/Lato-700-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'icomoon';
	src:  url('/assets/fonts/icomoon.eot?7ksoio');
	src:  url('/assets/fonts/icomoon.eot?7ksoio#iefix') format('embedded-opentype'),
	url('/assets/fonts/icomoon.woff2?7ksoio') format('woff2'),
	url('/assets/fonts/icomoon.ttf?7ksoio') format('truetype'),
	url('/assets/fonts/icomoon.woff?7ksoio') format('woff'),
	url('/assets/fonts/icomoon.svg?7ksoio#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"],
[class*="icon-"]{
	font-family: 'icomoon';
	color: var(--accent-color);	
}

/***********************
 * 1.4 Utility Classes *
 ***********************/
.clhidden,
.input-block.clhidden{
	display: none !important;
}

.striped{}

.clearfix{
	overflow: auto;
}

	.clearfix:after{
		content: "";
		clear: both;
		display: table;
	}

.grid{
	display: flex;
	flex-wrap: wrap;
}

.a11y,
.cke_reset_all .a11y{
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
}

.badge{
	display: inline-block;
	padding: .25em .4em;
	font-size: 75%;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: .25rem;
	-webkit-user-select: none;
	user-select: none;
}

	.badge-success{
		color: #fff;
		background-color: #28a745;
	}
	
	.badge-danger{
		color: #fff;
		background-color: #dc3545;
	}

.info{
	background-color: #d9edf7;
	border-left: solid 4px #31708f;
}

.warning{
	background-color: #f8d7da;
	border-left: solid 4px #721c24;
}

.fade-out{
	opacity: 1;
	animation: fadeOut .5s ease-in-out 5s forwards;
}

.or-break{
	border-bottom: 1px solid #e4e4e4;
	color: #999;
	font-size: 13px;
	line-height: 0;
	margin: 2em -2em;
	text-align: center;
}

	.or-break > span{
		background: #fff;
		padding: 0 10px;
	}

@media screen and (min-width: 981px){
	.half-size{
		width: 50%;
		margin: 0 auto;
	}
	
	.sticky{
		position: sticky;
		top: 2em;
	}
	
	.grid > *{
		width: 50%;
	}
}

/*****************
 * 1.5 Animation *
 *****************/
@keyframes fadeInDown{
	from{ transform: translateY(50px); opacity: 0; }
	to{ transform: translate(0px); opacity: 1; }
}

@keyframes fadeOut{
	to{ opacity: 0; }
}

/*************
 * 1.6 Links *
 *************/
.clclickable,
.content-block a,
/* bug titles */
.clbugoneline,
/* test questions */
#questList span[id^="qtext_"],
/* Recent Certificates channel */
#recentcertslink{
	cursor: pointer;
	color: var(--accent-color);
	text-decoration: underline;
}

	#labmgrsummaryvirvirts .clclickable{
		color: #fff;
		text-decoration: none;
	}

/****************
 * 2. Structure *
 ****************/
main{
	display: flex;
	flex-direction: column;
	padding-bottom: 2em;
	/* for sticky footer */
	flex: 1 0 auto;
	/* off-canvas .cltestnotes */
	position: relative;
	overflow: hidden;
}

	.studentMode > main{
		background: repeating-linear-gradient(45deg, #daddde, #daddde 10px, #ecf0f1 10px, #ecf0f1 20px);
	}

	aside{
		border-radius: 4px;
		margin: 4em 5% 0 5%;
		margin-top: 4em;
	}
	
	#content{
		margin-bottom: 1.75em;
		padding: 2em;
		line-height: 1.5;
	}

@media screen and (min-width: 981px){
	main.columns{
		flex-direction: row;
	}

	aside:not(.clhidden) + #content{
		width: 80%;
		margin-left: 0;
	}

	aside{
		width: 20%;
	}
	
	#content{
		margin-right: 4em;
		margin-left: 4em;
	}
}

/*************************
 * 3. Component - Header *
 *************************/
header[role="banner"]{
	background-color: #fff;
}

#branding-primary{
	padding-top: .5em;
	text-align: center;
	border-bottom: solid 1px #ecf0f1;
}

	.tagline{
		color: #56585a;
		display: block;
		font-family: 'Montserrat', sans-serif;
		font-size: 17px;
		line-height: 1.7;
	}

	#branding-primary h1{
		font-size: 24px;
		line-height: 1.5;
	}
	
		#branding-primary h1 > sup{
			font-size: 75%;
			line-height: 0;
			position: relative;
			vertical-align: baseline;
			top: -0.5em;
			margin-left: .25em;			
		}

@media screen and (min-width: 981px){
	#branding-primary{
		display: flex;
		align-items: stretch;
		padding: 0;
		width: 90%;
		margin: 0 auto;
		text-align: left;
	}
		
		#branding-primary #branding-primary_logo,
		#branding-primary h1{
			align-items: flex-start;
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin: 1em 0 1em 1em;
		}
}

#nav-primary li,
#nav-secondary li{
	list-style: none;
}

.clmainNav_navItem,
.clmainNav_navSubParent,
.cltopNav_navItem{
	display: flex;
	flex-direction: column;
	cursor: pointer;
	color: #4d4d4d;
	padding: 0 1em;
	line-height: 35px;
	border-left: solid 3px transparent;
	border-bottom: solid 1px #ecf0f1;
	transition: all .3s ease-in-out;
}

	.clmainNav_navItem:hover,
	.clmainNav_navItem.active,
	.clmainNav_navSubParent:hover,
	.clmainNav_navSubParent.active,
	.cltopNav_navItem:hover{
		color: #101010;
		border-left: solid 3px var(--accent-color);
		padding-left: calc(1em + 3px);
	}
	
	#nav-primary [aria-expanded]:before{
		font-family: 'icomoon';
		font-size: 24px;
		line-height: 35px;
		position: absolute;
		right: 1em;		
	}
	
		#nav-primary [aria-expanded="false"]:before{
			content: "\e900";
		}
		
		#nav-primary [aria-expanded="true"]:before{
			content: "\e901";
		}

#nav-secondary{
	margin-top: .5em;
	text-align: left;
	border-top: solid 1px #ecf0f1;
}

	.cltopNav_navItem:last-child{
		border-bottom: none;
	}
		
@media screen and (min-width: 981px){
	#nav-secondary{
		margin-top: 0;
		margin-left: auto;
		border-top: none;
	}
	
		#nav-secondary ul{
			display: table;
			width: 100%;	
			height: 100%;
		}
		
			.clmainNav_navItem,
			.clmainNav_navSubParent,
			.cltopNav_navItem{
				border-left: none;
				border-bottom: solid 3px transparent;
				transition: all .3s ease-in-out;				
			}
			
			.cltopNav_navItem{
				display: table-cell;
				vertical-align: middle;
			}
			
				.clmainNav_navItem:hover,
				.clmainNav_navItem.active,
				.clmainNav_navSubParent:hover,
				.clmainNav_navSubParent.active,
				.cltopNav_navItem:hover{
					color: #101010;
					border-left: none;
					border-bottom: solid 3px var(--accent-color);
					padding-left: 1em;
				}

				.cltopNav_navItem:last-child{
					background-color: var(--accent-color);
					color: #fff;
					border-bottom: solid 3px var(--accent-color);
					transition: all .3s ease-in-out;
				}
				
					.cltopNav_navItem:last-child:hover{
						background-color: #fff;
						color: #181818;
					}
}

#nav-primary .dropdown{
	background-color: #ecf0f1;
}

#nav-primary .dropdown .clmainNav_navItem{
	border-bottom: solid 1px #fff;
}

	#nav-primary .dropdown .clmainNav_navItem:last-child{
		border-bottom: none;
	}

@media screen and (min-width: 981px){
	#nav-primary{
		width: 90%;
		margin: 0 auto;
		border-bottom: solid 1px #ecf0f1;
	}
	
		#nav-primary ul{
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
		}
		
			#nav-primary li{
				position: relative;
				flex: 0 0 auto;
			}
			
			#nav-primary [aria-expanded]:before{
				content: "";		
			}

		#nav-primary .dropdown{
			visibility: hidden;
			opacity: 0;
			position: absolute;
			top: 38px;
			left: 0;
			background-color: transparent;
			width: auto;
			min-width: 200px;
			margin-left: 0;
			padding-top: 3px;
			flex-direction: column;
			box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);
			transition: all 0.3s ease-in-out;
		}

		#nav-primary li:hover > .dropdown,
		#nav-primary li.focus > .dropdown,
		#nav-primary .dropdown:hover,
		#nav-primary .dropdown:focus{
			z-index: 1;
			visibility: visible;
			opacity: 1;
		}

		#nav-primary li:focus-within > .dropdown{
			z-index: 1;
			visibility: visible;
			opacity: 1;
		}

		#nav-primary .dropdown .clmainNav_navItem{
			background-color: #fff;
			border-bottom: solid 1px #ecf0f1;
			border-left: solid 3px transparent;
			transition: all .3s ease-in-out;
		}
		
			#nav-primary .dropdown .clmainNav_navItem:last-child{
				border-bottom: solid 1px #ecf0f1;
			}	

			#nav-primary .dropdown .clmainNav_navItem:hover,
			#nav-primary .dropdown .clmainNav_navItem:focus,
			#nav-primary .dropdown .clmainNav_navItem.active{
				border-bottom: solid 1px #ecf0f1;
				border-left: solid 3px var(--accent-color);
				padding-left: calc(1em + 3px);
			}
}

.page-info{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 70px;
	padding: 0 5%;
}

	.page-info h1{
		font-size: 24px;
	}

/**************************
 * 3. Component - Sidebar *
 **************************/
.aside-block{
	position: relative;
	margin-bottom: 48px;
}
	
	aside label,
	aside h3,
	.choices__card h3{
		display: block;
		font-family: 'Lato', Arial, sans-serif;
		font-size: 13px;
		font-weight: 700;
		text-transform: uppercase;
		color: #666;
		letter-spacing: .05em;
	}

	aside button{
		width: 100%;
	}
	
		aside h3 + .btn-secondary{
			width: auto;
			background-color: transparent;
			border-color: transparent;
			position: absolute;
			top: -.5em;
			right: 0;
		}

	aside li{
		cursor: pointer;
		list-style: none;
		margin: .5em 0;
		padding: .35em .65em;
		background-color: #ecf0f1;
		transition: background-color .3s ease-in-out;
	}

		aside li:hover,
		aside li.active{
			background-color: #fff;
		}
		
		aside .chosen-results li{
			background-color: #fff;
			transition: none;
		}

.aside-listing > li > ul{
	display: none;
}

	.aside-listing > li.active > ul{
		display: block;
	}

/**************************
 * 4. Component - Content *
 **************************/
#content p,
dialog p,
#content ul,
dialog ul{
	margin-bottom: 1em;
}

	#content .content-block_body > *:last-child{
		margin-bottom: 0;
	}

#content h2 + h3,
dialog h2 + h3,
h2#corDispLessonTitle + #corDispLessonContent,
h3#pgTitle + *{
	margin-top: 1em;
}

.disclaimer{
	font-size: 13px;
	background-color: #f6f6f6;
	border: solid 1px #ccc;
	border-radius: 4px;
	margin-top: 2em;
	padding: .5em 1.5em;
}

.meta-info{
	font-size: 13px;
	font-weight: normal;
	color: #666;
}

	.meta-info li{
		list-style-type: none;
	}

li.bucket{
    float: left;
    list-style: none;
    position: relative;
    margin: 3px 5px 3px 0;
    padding: 3px 20px 3px 5px;
    border: 1px solid #aaa;
	width: 100%;
    border-radius: 3px;
    background-color: #eee;
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(20%,#f4f4f4),color-stop(50%,#f0f0f0),color-stop(52%,#e8e8e8),to(#eee));
    background-image: linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);
    background-size: 100% 19px;
    background-repeat: repeat-x;
    background-clip: padding-box;
    -webkit-box-shadow: 0 0 2px #fff inset,0 1px 0 rgba(0,0,0,.05);
    box-shadow: 0 0 2px #fff inset,0 1px 0 rgba(0,0,0,.05);
    color: #333;
    line-height: 1.3;
    cursor: pointer;
	font-size: 13.333px;
}

	@media screen and (min-width: 640px){
		li.bucket{
			width: calc(50% - 5px);
		}
	}

	@media screen and (min-width: 981px){
		li.bucket{
			width: calc(33.33% - 5px);
		}
	}

	@media screen and (min-width: 1366px){
		li.bucket{
			width: calc(25% - 5px);
		}
	}

	@media screen and (min-width: 1800px){
		li.bucket{
			width: calc(16.66% - 5px);
		}
	}

	li.bucket:after{
		font-family: "Lato", sans-serif;
		font-weight: 700;
		font-size: 18px;
		position: absolute;
		top: 0;
		right: 3px;
		color: #9d9d9d;
		content: "\00d7";
	}

		.dragfrom li.bucket:after{
			transform: rotate(45deg);
		}

		li.bucket:hover:after{
			color: #5c5c5c;
		}

/* start - details polyfill */
details,
summary{
	display: block;
}

details:not([open]) > *:not(summary){
	display: none;
}
/* end - details polyfill */

/***********************
 * 4.1 Content Heading *
 ***********************/
.content-block > header{
	display: flex;
	margin-top: 2em;
}

	.content-block > header:first-child{
		margin-top: 0;
	}

	/* style the last element only if the header contains 2 child elements */
	.content-block > header > *:nth-last-child(n+2) ~ *:last-child{
		display: flex;
		margin-left: auto;
		justify-content: flex-end;
		align-items: center;
	}
	
		.content-block > header select{
			margin-left: 4px;
		}

		.content-block > header button.btn-secondary{
			background-color: #ecf0f1;
			border: solid 1px #ecf0f1;
		}
	
	.content-block > header > h2 > span{
		font-size: 75%;
	}

/*********************
 * 4.2 Content Block *
 *********************/
.content-block + .content-block,
#virStatusCont + .content-block{
	margin-top: 2em;
}

.content-block_body{
	background-color: #fff;
	padding: 1.5em 2em;
	box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);
}

	.content-block > footer,
	._clContentPage > footer{
		background-color: #f6f6f6;
		box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);
		padding: 1em;
	}

		.content-block > footer > .input-block,
		._clContentPage > footer > .input-block{
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
			.content-block > footer > .input-block > .btn-primary,
			._clContentPage > footer > .input-block > .btn-primary,
			.content-block > footer > .input-block > .btn-secondary,
			._clContentPage > footer > .input-block > .btn-secondary{
				margin: 0 4px;
				box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);
			}

	.course-navigation + .content-block ul{
		margin-left: 1em;
	}
			
/*************
 * 4.3 Table *
 *************/
table{
	width: 100%;
	border-spacing: 0;
}

	table caption{
		caption-side: top;
		text-align: left;
		border-bottom: solid 1px #ecf0f1;
	}

	table th,
	.cke_reset_all table th,
	table td,
	.cke_reset_all table td{
		padding: 4px;
		background-color: #fff;
	}

	table th,
	.cke_reset_all table th{
		text-align: left;
		border-bottom: solid 1px #ecf0f1;
	}
	
		table th[align="center"]{
			text-align: center;
		}

		table td.warning{
			background-color: yellow !important;
		}

		table td.danger{
			background-color: rgba(255, 0, 0, 25%) !important;
		}

@media screen and (min-width: 981px){
	table.half-size{
		width: 50%;
		margin: 0;
	}

		table.half-size th,
		table.half-size td{
			padding: 4px 8px;
		}
}

/*************************
 * 4.3.1 Table - Striped *
 *************************/
/*
stripe table tbodys if there are more than 1 tbody
stripe table rows if there is only 1 tbody
stripe fullwidth table tbodys if there are more than 1 tbody
stripe fullwidth table rows if there is only 1 tbody
vertically stripe table headings
vertically stripe table cells
*/
table.striped tbody ~ tbody:nth-child(even) td,
table.striped tbody:only-of-type tr:nth-child(odd) td,
table.striped-fullwidth tbody ~ tbody:nth-child(even) td,
table.striped-fullwidth tbody:only-of-type tr:nth-child(odd) td,
table.striped-vertical th:nth-child(even),
table.striped-vertical td:nth-child(even){
	background-color: #ecf0f1;
}

table.striped-fullwidth{
	width: calc(100% + 4em); /* padding-right + padding-left of .content-block_body */
	margin-left: -2em;
}
	
	table.striped-fullwidth td{
		vertical-align: top;
	}

	table.striped-fullwidth tr > th:first-child,
	table.striped-fullwidth tr > td:first-child{
		padding-left: calc(2em + 4px); /* padding-left of .content-block_body + standard padding */
	}
			
	table.striped-fullwidth tr > th:last-child,
	table.striped-fullwidth tr > td:last-child{
		padding-right: calc(2em + 4px); /* padding-right of .content-block_body + standard padding */
	}
	
/*************************
 * 4.3.2 Table - Bordered *
 *************************/
table.bordered,
table.bordered > tbody{
	border-top: solid 1px #ecf0f1;
	border-left: solid 1px #ecf0f1;
}

	table.bordered th,
	table.bordered td{
		border-right: solid 1px #ecf0f1;
		border-bottom: solid 1px #ecf0f1;
	}

/**************************
 * 4.3.3 Table - Advanced *
 **************************/
/*
hide all but first table row
CSAT Interactive Checklist and Security Monitoring
*/
table.advanced tbody tr + tr{
	display: none;
}

	table.advanced tbody tr.active + tr{
		display: table-row;
	}

table.advanced th{
	vertical-align: bottom;
}

#roleConfigTable > thead{
	background-color: #fff;
	position: sticky;
	top: 0;
}

	#content #roleConfigTable > thead th,
	#content #roleConfigTable > tbody td{
		text-align: center;
	}

		#content #roleConfigTable > thead > tr > th:first-child,
		#content #roleConfigTable > tbody > tr > td:first-child{
			text-align: left;
		}

/*************************************
 * 4.3.4 Table - Security Monitoring *
 *************************************/
#roleConfigTable td.clRoleLvB{ padding-left: 2em; }
#roleConfigTable td.clRoleLvC{ padding-left: 4em; }
#roleConfigTable td.clRoleLvD{ padding-left: 6em; }

.clRoleFeature{
	color: white;
	font-weight: bold;
	cursor: pointer;
}

	.clFeatureIncluded{
		background-color: blue;
	}

		.clFeatureIncluded.clUserDefined {
			background-color: green;
		}

	.clFeatureDefault {
		background-color: #6A5ACD;
	}
	
/****************************
 * 4.3.5 Table - Attendance *
 ****************************/
#attendanceTable th:first-child{
	min-width: 200px; /* name column */
}

#attendanceTable thead > tr:last-child > td{
	text-align: center; /* center the buttons */
}

#attendanceTable button[data-date]{
	padding: .4em;
	border: none;
	background-color: #ecf0f1;
	font-size: 12px;
}

td[class^="_claentry"]{
	color: #fff;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
}

td.clAttnState_P{ background-color: rgba(0, 128, 0, .5); }
td.clAttnState_L{ background-color: rgba(255, 165, 0, .65); }
td.clAttnState_A{ background-color: rgba(255, 0, 0, .5); }
td.clAttnState_E{ background-color: rgba(0, 0, 0, .25); }

/*********************
 * 4.4 Form Elements *
 *********************/
.input-block{
	padding: .5em;
}

	/* zebra striping with hidden rows */
	.striped .input-block,
	.striped .input-block.clhidden:nth-child(even) + .input-block:nth-of-type(odd) + .input-block:nth-of-type(even),
	.striped .input-block.clhidden:nth-child(even) + .input-block.clhidden:nth-child(odd) ~ .input-block:nth-of-type(odd){
		background-color: #fff;
	}

	/* zebra striping with hidden rows */
	.striped .input-block:nth-child(even),
	.striped .input-block.clhidden:nth-child(even) ~ .input-block:nth-of-type(odd),
	.striped .input-block.clhidden:nth-child(even) + .input-block.clhidden:nth-child(odd) ~ .input-block:nth-of-type(even){ 
		background-color: #ecf0f1; 
	}
	
	.input-block.block-center{
		text-align: center;
		justify-content: center;
		margin-top: 1em;
	}
	
.description{
	margin-top: 4px;
	margin-bottom: 0;
	color: #666;
	font-size: 13px;
	font-style: italic;
}

	input[type="color"] + .description{
		margin-top: 0;
	}

.input-block.input-group .input-block_input{
	display: flex;
}

	.input-group input:first-child{
		border-bottom-right-radius: 0;
		border-top-right-radius: 0;
	}
	
	.input-block.input-group .input-block_addon{
		display: flex;
		width: auto;
		align-items: center;
		font-size: 14px;
		color: #666;
		background-color: #ecf0f1;
		padding: 0 .85em 0 .35em;
		border: solid 1px #999;
		margin-left: -1px;
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
	}
	
		.input-block.input-group .input-block_addon input[type="checkbox"]{
			display: none;
		}

	.icon-eye:before{
		font-size: 18px;
		content: "\e904";
	}
	
	.icon-eye-slash:before{
		font-size: 18px;
		content: "\e902";		
	}

@media screen and (min-width: 981px){
	.input-block{
		display: flex;
		align-items: center;
	}

		.input-block > label{
			display: inline-block;
			width: 25%;
			min-width: 135px;
		}
		
		.input-block .input-block_input{
			display: inline-block;
		}
		
	.input-block.input-group{
		flex-wrap: wrap;
	}

	.input-block.input-group > .description{
		flex: 0 0 75%;
		margin-left: 25%;
	}
}

/******************
 * 4.5 Pagination *
 ******************/
#pagination{
	display: flex;
	justify-content: center;
	margin-top: 2em;
}

	#content + #pagination{
		margin-top: 0;
	}

	#pagination ul{
		display: flex;
		flex-wrap: wrap;
	}
	
		#pagination li{
			text-align: center;
			cursor: pointer;
			line-height: 2;
			list-style: none;
			min-width: 38px;
			margin: 0 .5em .5em .5em;
			padding: 0 .5em;
			color: #fff;
			background-color: var(--accent-color);
			border: solid 1px var(--accent-color);
			border-radius: 4px;
			transition: all .3s ease-in-out;
		}
		
			#pagination li:hover,
			#pagination li.active{
				color: #101010;
				background-color: #ecf0f1;
				border: solid 1px #ecf0f1;
			}

/*************************
 * 4.5.1 Test Pagination *
 *************************/
._clContentPage_showPaginatedTest fieldset + fieldset,
._clContentPage_showPaginatedIFBTest fieldset + fieldset{
    margin-top: 0;
}

	._clContentPage_showPaginatedTest fieldset + fieldset > legend,
	._clContentPage_showPaginatedIFBTest fieldset + fieldset > legend{
		border-top: none;
		padding-top: 0;
	}

/*************************
 * 4.6 Course Navigation *
 *************************/
.icon{
	display: inline-block;
	width: 1em;
	height: 1em;
	stroke-width: .5;
	stroke: currentColor;
	fill: currentColor;
	vertical-align: middle;
}

	.icon-keyboard_arrow_left,
	.icon-keyboard_arrow_right{
		font-size: 50px;
	}

	.icon-chevron-left,
	.icon-chevron-right{
		font-size: 30px;
	}

	.icon-angle-left,
	.icon-angle-right{
		font-size: 50px;
		font-weight: bold;
	}

	.icon-chevron-right:before {
		content: "\e906";
	}

	.icon-chevron-left:before {
		content: "\e907";
	}

	.icon-angle-right:before {
		content: "\e905";
	}
	.icon-angle-left:before {
		content: "\e903";
	}

.course-navigation{
	display: flex;
	justify-content: center;
	margin: 0 auto;
}

	.course-navigation:first-child{
		margin-bottom: 1em;
	}
	
	.course-navigation:last-child{
		margin-top: 1em;
	}

	#content .course-navigation ul{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 0;
	}

	.course-navigation li{
		list-style: none;
	}
	
	._clCorDispPageBack:hover,
	._clCorDispPageNext:hover{
		cursor: pointer;
	}

p.returnText{
	margin-top: 1em;
}

/*******************
 * 4.7 Course Card *
 *******************/
.course-card > summary{
	display: flex;
	flex-direction: column;
	cursor: pointer;
}

	.course-card > summary::-webkit-details-marker{
		display: none;
	}
	
	.course-card > summary .badge{
		margin-left: .5em;
	}
	
	.course-card > summary .btn-primary{
		pointer-events: none; /* make the button for Chrome */
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;   
	}
	
	.course-card .course-card_cta{
		display: flex;
		margin-left: auto;
		justify-content: flex-end;
		align-items: center;
	}

	@media screen and (min-width: 481px){
		.course-card > summary{
			flex-direction: row;
		}
	}

.course-card .course-card_desc{
	padding-top: 1.5em;
}

.course-card_lessons ul{
	margin-left: 1em;
}
		
	.course-card_lessons li{
		margin-bottom: .75em;
	}

	.course-card_lessons .clclickable{
		color: rgb(0, 0, 238);
		text-decoration: none;
	}
	
		.course-card_lessons .clclicable > span{
			border-bottom: solid 1px #fff;
			transition: border-bottom .3s ease-in-out;
		}

			.course-card_lessons .clclickable > span:hover{
				border-bottom: solid 1px rgb(0, 0, 238);
			}

.coursePubCodeU,
.coursePubCodeW,
.modulePubCodeU{
	font-style: italic;
}

.clLessonGroupHeading{
	font-weight: 600;
}

	/* unbold child list items in Course Manager */
	ul[class^="_clmlSubmenu"] li{
		font-weight: normal;
	}

.clLessonIndent_0{}
.clLessonIndent_1{ margin-left: 1em; }
.clLessonIndent_2{ margin-left: 2em; }
.clLessonIndent_3{ margin-left: 3em; }
.clLessonIndent_4{ margin-left: 4em; }
.clLessonIndent_5{ margin-left: 5em; }
.clLessonIndent_6{ margin-left: 6em; }
.clLessonIndent_7{ margin-left: 7em; }
.clLessonIndent_8{ margin-left: 8em; }
.clLessonIndent_9{ margin-left: 9em; }
.clLessonIndent_10{ margin-left: 10em; }

/*****************
 * 4.8 User Card *
 *****************/
.user-card details{
	margin-right: auto;
}

	.user-card .user-card_desc > details{
		width: 100%; /* Gradebook */
	}
 
	.user-card summary{
		display: list-item;
		cursor: pointer;
	}

	.user-card details ul{
		margin-left: 1.5em;
	}
	
	.user-card details table{
		margin-left: calc(1.5em - 8px);
	}

	.user-card details a{
		color: rgb(0, 0, 238);
		border-bottom: solid 1px #fff;
		transition: border-bottom .3s ease-in-out;
	}

		.user-card details a:hover{
			border-bottom: solid 1px rgb(0, 0, 238);
		}

.user-card .user-card_desc{
	display: flex;
	margin-top: .5em;
}

	.user-card .user-card_cta{
		display: flex;
		align-self: flex-start;
		align-items: center;
		margin-left: auto;
	}
	
		.user-card .user-card_cta .btn-primary,
		.user-card .user-card_cta .btn-secondary{
			white-space: nowrap;
		}
		
			.user-card .user-card_cta .btn-primary{
				min-width: 105px;
			}

			.user-card .user-card_cta .btn-primary.close{
				background-color: #802420;
				border: solid 1px #802420;
			}
			
		.user-card_chip{
			font-family: 'Lato', Arial, sans-serif;
			border: solid 3px var(--accent-color);
			border-radius: 4px;
			background-color: var(--accent-color);
			width: 75px;
			text-align: center;
			text-transform: uppercase;
			color: #fff;
			padding: 0;
			line-height: 18px;
			margin-left: 4px;
		}

			.user-card_chip:before{
				font-family: 'icomoon';
				color: var(--accent-color);
				background-color: #fff;
				display: block;
				height: 40px;
				font-size: 40px;
				line-height: 40px;
				content: "\e90b"; /* default to Lock */
			}

				.user-card_chip.icon-mouse-pointer:before {
					content: "\e90a";
					font-size: 30px;
				}

				.user-card_chip.icon-eye:before {
					content: "\e904";
				}

				.user-card_chip.icon-lock:before {
					content: "\e90b";
				}

/*********************
 * 4.9 Decision Card *
 *********************/
dialog.decision{
	background-color: transparent;
}

.decision__card{
	display: flex;
	flex-direction: column;
	background-color: #fff;
	box-shadow: 0px 0px 0px 10px #fff;
	min-width: 320px;
	margin: 2em 2% 0 2%;
	border: solid 1px var(--accent-color);
	border-radius: 6px;
	text-align: center;
	min-height: 50vh;
	animation-name: fadeInDown;
	animation-duration: 1s;
	animation-fill-mode: backwards;
}

	.decision__card:nth-child(2){ animation-delay: .1s; }
	.decision__card:nth-child(3){ animation-delay: .2s; }
	.decision__card:nth-child(4){ animation-delay: .3s; }

.decision__card h3{
	padding: 2em 0;
	order: 2;
}

.decision__card > svg{
	order: 1;
}

.decision__card p{
	padding: 0 2em;
	order: 3;
}

.decision__card .input-block{
	display: flex;
	align-items: center;
	justify-content: center;
	order: 4;
}

	.decision__card .input-block > label{
		display: inline-block;
		width: 25%;
	}

	.decision__card .input-block_input{
		text-align: left;
		width: 50%;
	}

	.decision__card input[type="number"]{
		width: 60px;
	}

.decision__card > footer{
	margin-top: auto;
	order: 5;
}

	.decision__card button{
		width: 100%;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}

.decision-close{
	display: block;
	color: #fff;
	font-size: 50px;
	cursor: pointer;
	width: auto;
	text-align: right;
}

.icon-terminal,
.icon-books,
.icon-duplicate{
	margin: 1em auto 0 auto;
	font-size: 60px;
	stroke: initial;
}

@media screen and (min-width: 981px){
	.decision-container{
		display: flex;
		justify-content: center;
	}

	.decision__card{
		width: 22%;
		margin-top: 0;
	}

	.decision-close{
		display: inline-block;
		position: absolute;
		right: 10%;
		top: -20%;
	}	
}

/***********************
 * 4.10 Definition List *
 ***********************/
dt{
	font-weight: bold;
	float: left;
	clear: left;
	width: 50%;
}

dd{
	margin-left: 51%;
	width: 49%;
	padding-bottom: 8px;
}

@media screen and (min-width: 981px){
	dl{
		columns: 3;
	}
}

/**************************
 * 4.11 Homepage Channels *
 **************************/
@media screen and (min-width: 888px){
	.channels{
		/* grid fallback */
		display: flex;
		flex-wrap: wrap;
		/* grid supported */
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
		grid-column-gap: 1.5em;
		grid-row-gap: 1.5em;
	}

		.channels > .content-block_body{
			max-height: 350px;
			overflow-y: auto;
		}
}

.channels > .content-block_body{
	display: flex;
	flex-direction: column;
	font-size: 14px;
	animation-name: fadeInDown;
	animation-duration: 1s;
	animation-fill-mode: backwards;
	/* grid fallback */
	margin: 0 .75em 1.5em; 
	flex: 1 1 300px;
}

	/* if grid is supported, remove the margin set for the fallback */
	@supports (display: grid){
		@media screen and (min-width: 888px){
			.channels > .content-block_body{
				margin: 0;
			}
		}
	}	

	.channels > .content-block_body:nth-child(2){ animation-delay: .1s; }
	.channels > .content-block_body:nth-child(3){ animation-delay: .2s; }
	.channels > .content-block_body:nth-child(4){ animation-delay: .3s; }
	.channels > .content-block_body:nth-child(5){ animation-delay: .4s; }
	.channels > .content-block_body:nth-child(6){ animation-delay: .5s; }
	.channels > .content-block_body:nth-child(7){ animation-delay: .6s; }
	.channels > .content-block_body:nth-child(8){ animation-delay: .7s; }
	.channels > .content-block_body:nth-child(9){ animation-delay: .8s; }
	.channels > .content-block_body:nth-child(10){ animation-delay: .9s; }
	.channels > .content-block_body:nth-child(11){ animation-delay: 1s; }
	.channels > .content-block_body:nth-child(12){ animation-delay: 1.1s; }

	.channels > .content-block_body > h3{
		font-size: 14px;
		text-transform: uppercase;
		border-bottom: solid 1px #ccc;
		padding-bottom: 2px;
		margin-bottom: 4px;
		color: var(--accent-color);
		letter-spacing: .05em;
	}

	.channels > .content-block_body a{
		color: rgb(0, 0, 238);
		text-decoration: none;
		border-bottom: solid 1px #fff;
	}

		.channels > .content-block_body a:hover{
			border-bottom: solid 1px rgb(0,0,238);
		}
		
		.channels > .content-block_body a > time{
			color: initial;
			padding-right: 5px;
		}
		
			.channels > .content-block_body a:hover > time{
				border-bottom: solid 1px #fff;
			}

/****************************
 * 4.12 Tests & Test Scores *
 ****************************/
.cltestquest{
	width: 100%; /* line wrapping for IE11 */
}

fieldset[id^="qrow"] ul{
	list-style: none;
}

	fieldset[id^="qrow"] li{
		margin-bottom: .5em;
	}
	
		fieldset[id^="qrow"] li:last-child{
			margin-bottom: 0;
		}
 
.cltestans {
    color: #000;
    list-style-type: circle;
}

.cltestansright {
	color: green;
	text-decoration: underline;
}

.cltestanswrong {
	color: red;
}

.cltestauxtext {
    font-style: italic;
}

.cltestreflink{
	font-family: 'Lato', Arial, sans-serif;
	font-size: 13px;
	cursor: pointer;
	color: #666;
	display: block;
	margin-bottom: .5em;
}

#testScoreCont > fieldset:last-child{
	margin-bottom: 18px;
}

#testScoreCont ul{
	list-style: none;
	margin-top: .5em;
}

	#testScoreCont li{
		display: flex;
		margin-bottom: 2px;
	}
	
		#testScoreCont li > label{
			order: 2;
			margin-left: 4px;
		}

#rating{
	display: flex;
	flex-flow: row-reverse;
	justify-content: flex-end;
}

	#rating svg{
		width: 2em;
		height: 2em;
		stroke: #333;
		stroke-width: 4;
		fill: white;
		pointer-events: none;
	}

		#rating .rating_star.is-selected svg, 
		#rating .rating_star.is-selected ~ .rating_star svg,
		#rating .rating_star:hover svg, 
		#rating .rating_star:hover ~ .rating_star svg{
			fill: gold;
		}

.cltestnotes{
	position: absolute;
	top: 0;
	right: 0px;
	z-index: 2;
	width: 320px;
	height: 100%;
	overflow-y: scroll;
	background-color: #f6f6f6;
	padding: 40px 40px 0 40px;
	box-sizing: border-box;
	box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);
	-webkit-transform: translateX(320px);
	-moz-transform: translateX(320px);
	-ms-transform: translateX(320px);
	transform: translateX(320px);
	-webkit-transition: all .25s linear;
	-moz-transition: all .25s linear;
	-ms-transition: all .25s linear;
	transition: all .25s linear;
}

	.cltestnotes.open{
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}

	.cltestnotes h3{
		text-align: center;
		margin-bottom: 1em;
	}

	#testnotescontents,
	.cltestnotes p{
		margin-bottom: 1em;
		line-height: 1.5;
	}
	
	.cltestnotes footer{
		padding-bottom: 40px;
		margin-bottom: 0;
	}

/*************************
 * 5. Component - Footer *
 *************************/
footer#main-footer{
	background-color: #000;
	width: 100%;
	height: 60px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* for sticky footer */
	flex-shrink: 0;	
}

	#branding-secondary{
		padding-left: 2em;
	}

	#branding-tertiary{
		padding-right: 2em;
	}
	
	footer#main-footer nav li{
		font-size: 13px;
		list-style: none;
		color: rgba(255, 255, 255, .85);
		cursor: pointer;
	}

/********************************
 * 6. Component - Notifications *
 ********************************/
#notification{
	position: fixed;
	right: 0;
	bottom: 0;
	padding: 1em;
	min-width: 320px;
	z-index: 100149; /* 1 more than <dialog> elements */
}

/*************************
 * 7. Component - Dialog *
 *************************/
dialog {
	position: absolute;
	left: 0; right: 0;
	width: -moz-fit-content;
	width: -webkit-fit-content;
	width: fit-content;
	height: -moz-fit-content;
	height: -webkit-fit-content;
	height: fit-content;
	margin: auto;
	border: none;
	display: block;
	top: 50%; /* RF */
	transform: translateY(-50%); /* RF */	
}

dialog:not([open]) {
	display: none;
}

dialog::backdrop{
	background: rgba(0, 0, 0, 0.75);
}

dialog + .backdrop,
.backdrop{
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	background: rgba(0, 0, 0, 0.75);
}

._dialog_overlay {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
}

dialog.fixed {
	position: fixed;
	top: 50%;
	transform: translate(0, -50%);
}

dialog p + .meta-info{
	margin-top: 1em;
}

dialog .content-block_body{
	max-height: 80vh;
	overflow-y: auto;
}

/***********
 * 7.1 FAQ *
 ***********/
#dialog-faq h3{
	margin-bottom: 1em;
}

#dialog-faq h4{
	margin-bottom: .25em;
}

#dialog-faq details + h4{
	margin-top: 1em;
}

#dialog-faq summary{
	display: list-item;
	cursor: pointer;
	margin-bottom: 4px;
}

.clfaqupdsub,
.clfaqquest{
	cursor: pointer;
}

/***************
 * 7.2 Reorder *
 ***************/
#dialog-curriculum,
#dialog-curriculum > .content-block{
	height: 80vh;
}

	#dialog-curriculum > .content-block,
	#dialog-curriculum .content-block_body{
		display: flex;
		flex-direction: column;
	}
	
		#dialog-curriculum .content-block_body,
		#dialog-curriculum .nested-sortable.list-group{
			flex: 1;
		}

			.nested-sortable .list-group-item{
				position: relative;
				display: block;		
				width: 100%;
				margin-top: 10px;
				padding: 20px;
				background-color: #ecf0f1;
			}

				.nested-sortable .list-group-item .list-group-item{
					border: solid 1px hsla(0, 0%, 0%, 0.2);
				}

/************************************
 * 8. Component - Registrar Console *
 ************************************/
#regConStuResults,
#regConTabs-stu{
	margin-left: .5em;
}
 
#regConStuResults + #regConTabs-stu{
	padding-top: .5em;
	border-top: dashed 3px #eee;
}

#content ul.dragfrom,
#content ul.dragto{
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0 5px;
    width: 100%;
    height: auto;
}

	#content ul.dragto{
		display: flex;
		flex-wrap: wrap;
		border: 1px solid #aaa;
		background-color: #fff;
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(1%,#eee),color-stop(15%,#fff));
		background-image: linear-gradient(#eee 1%,#fff 15%);
	}

/*************************************
 * 9. Component - Instructor Console *
 *************************************/
#questList li.bucket{
	width: 100%;
	padding: .65em .5em;
	margin-bottom: 6px;
	cursor: auto;
}

	#questList li.bucket > a{
		color: rgb(0, 0, 238);
		border-bottom: solid 1px transparent;
		transition: border-bottom .3s ease-in-out;
	}

		#questList li.bucket > a:hover{
			border-bottom: solid 1px rgb(0, 0, 238);
		}

	#questList li.bucket:after{
		content: '';
	}

	#questList li.bucket > .remove:after{
		font-family: "Lato", sans-serif;
		font-weight: 700;
		font-size: 18px;
		position: absolute;
		top: 0;
		right: 3px;
		color: #9d9d9d;
		content: "\00d7";
		cursor: pointer;
	}

		#questList li.bucket > .remove:hover:after{
			color: #5c5c5c;
		}

/*******************************
 * 10. Component - Lab Manager *
 *******************************/		
#labmgrsummaryvirvirts .badge{
	display: table-cell;
	vertical-align: middle;
	padding: 0;
	font-size: 100%;
	border-top: solid 4px #fff;
	border-right: solid 2em #fff;
	border-radius: 0;
}

table.vironline{
	border-top: solid 5px green;
}

table.viroffline{
	border-top: solid 5px red;
}

/******************************
 * 11. Component - VM Editing *
 ******************************/
#vmAttrsForm summary{
    display: list-item;
    cursor: pointer;
	font-weight: 700;
	font-size: 120%;
}

	#vmAttrsForm details + details{
		border-top: solid 1px #eee;
		padding-top: 18px;	
	}
	
	#vmAttrsForm details > details{
		margin-top: .5em;
		margin-left: 1.5em;
	}
	
		#vmAttrsForm details > details > summary{
			font-weight: 600;
			font-size: inherit;
			border-top: none;
			padding-top: 0;
		}

/***************************************
 * 12. Component - Security Monitoring *
 ***************************************/
#secmon td{
	white-space: nowrap;
}

#secmon th,
#secmon td{
	font-size: 13px;
	text-align: center;
}
	
#secmon th[title],
#secmon td[title]{
	cursor: pointer;
}

#secmon tbody > tr:first-child > td:first-child:before{
	content: '+';
}

	#secmon tbody > tr.active:first-child >td:first-child:before{
		content: '- ';
	}

/****************************
 * 13. Component - ckEditor *
 ****************************/
/* File Manager plugin */
#uploadBtnBar{
	display: flex;
	align-items: center;
}

	#uploadBtnBar > div{
		margin-left: auto
	}
	
	.cke_reset_all #browseButton{
		display: block;
		font-family: 'Lato', Arial, sans-serif;
		cursor: pointer;
		padding: .5em 1em;
		border-radius: 4px;
		color: #fff;
		background-color: var(--accent-color);
		border: solid 1px var(--accent-color);
	}

#ckeFMlisting thead,
#ckeFMlisting tbody{
	display: block;
}

#ckeFMlisting tbody{
	height: 400px;
	overflow-y: scroll;
}

#ckeFMlisting tbody tr:hover{
	background-color: #ccc;
}

#ckeFMlisting td{
    vertical-align: middle;
}

#ckeFMlisting tbody tr td:nth-child(2) {
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
	word-break: break-all;
    word-break: break-word;
}
 
#ckeImagePreview{
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 36px;
	z-index: 999;
}

.cke_reset_all .ckeImageThumb,
.cke_reset_all .ckeFileTypeIcon{
	width: 49px;
}

.cke_reset_all .ckeFileTypeIcon{
	background-image: url(/_js/ckeditor/plugins/filemanager/images/filetype.png);
	height: 67px;
	background-repeat: none;
	border: none;
	display: inline-block;
	background-color: transparent;
	cursor: pointer;
}

	.cke_reset_all .ckeFileTypeIcon.pdf{ background-position: -61px -154px; }
	.cke_reset_all .ckeFileTypeIcon.word{ background-position: -120px -154px; }
	.cke_reset_all .ckeFileTypeIcon.xcl{ background-position: -3px -154px; }
	.cke_reset_all .ckeFileTypeIcon.ppt{ background-position: -179px -154px; }
	.cke_reset_all .ckeFileTypeIcon.generic{ background-position: -592px -77px; }	

/*************************************
 * 14. Component - Confirm New Users *
 *************************************/
#userconfirm > div{
	padding: 1em;
}
 
#userconfirm.striped > div:nth-child(odd){
	background-color: #ecf0f1;
}

div[id^="userconfirmactions"] > label{
	margin-right: 1em;
}
	
	div[id^="userconfirmactions"] > label > input{
		margin-right: 4px;
	}

/********************************
 * 15. Component - User Manager *
 ********************************/
#curmergedstid{
	pointer-events: none;
}

/***************************
 * 16. Overrides - Choices *
 ***************************/
.choices__inner{
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
	min-height: auto;
    border: 1px solid #aaa;
	border-radius: 4px;
    background-color: #fff;
    background-image: linear-gradient(#eee 1%,#fff 15%);
    cursor: text;
}

	.choices[data-type*="select-one"] .choices__inner{
		display: block;
		padding: 0 0 0 8px;
		border: 1px solid #aaa;
		border-radius: 5px;
		background-color: #fff;
		background: linear-gradient(#fff 20%,#f6f6f6 50%,#eee 52%,#f4f4f4 100%);
		background-clip: border-box;
		background-clip: padding-box;
		box-shadow: 0 0 3px #fff inset,0 1px 1px rgba(0,0,0,.1);
		color: #999;
		text-decoration: none;
		white-space: nowrap;
	}

.choices__input{
	margin-bottom: 0;
	padding: .4em .85em;
	background-color: #fff;
	font-size: 13px;
	width: auto !important;
}

	.choices[data-type*="select-one"] .choices__input{
		width: 100% !important;
	}

.choices__list--dropdown .choices__item--selectable{
    padding-right: 0;
}

.choices__list--multiple .choices__item{
    position: relative;
    margin: 3px 5px 3px 0;
    padding: 3px 20px 3px 5px;
    border: 1px solid #aaa;
    max-width: 100%;
    border-radius: 3px;
    background-color: #eee;
    background-image: linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);
    background-size: 100% 19px;
    background-repeat: repeat-x;
    background-clip: padding-box;
    box-shadow: 0 0 2px #fff inset,0 1px 0 rgba(0,0,0,.05);
    color: #333;
    line-height: 13px;
    cursor: default;
    float: left;
}

	.choices__list--multiple .choices__item:first-child{
		margin-left: 5px;
	}
	
.choices[data-type*="select-multiple"] .choices__button,
.choices[data-type*="text"] .choices__button{
	position: absolute;
	top: 4px;
	right: 3px;
	display: block;
	width: 12px;
	height: 12px;
	border-left: none;
	font-size: 1px;
	background-image: url(/assets/css/cross-inverse.svg);
	background-size: 8px;
}

.choices__list--multiple .choices__item[data-deletable]{
	padding-right: 20px;
}

.choices__placeholder{
	opacity: 1;
}

#coursesrchcont .choices[data-type*="select-one"] .choices__inner{
	width: 320px;
}

.choices[aria-activedescendant^="choices-prereq-course"]{
	width: 290px;
}