/*** general ***/
body{font-family: "Arial", sans-serif; font-size: 11px; margin: 0; padding: 0 0 20px 0; /*text-align: center;*/ height: 100%;}
html{height: 100%;}
h1, h2, h3, h4, h5, h6{font-weight: normal; margin: 0; padding: 0 0 15px 0;}
h1{font-size: 18px;}
h2{font-size: 16px;}
h3{font-size: 14px;}
h3.documents{padding: 0 0 5px 0;}
h4{font-size: 13px;}
h5{font-size: 11px;}
h6{font-size: 11px;}
a{color: #003375;}
ol{margin: 0; margin-left: 20px; padding: 0;}
ul{margin: 0; margin-left: 15px; padding: 0;}
li{line-height: 17px;}
.page_img{padding-right: 10px; width: 30px; height: 30px; vertical-align: middle; border: none; outline: none; box-sizing: content-box;}
.dashboardLabel{display: block; padding-left: 15px; text-indent: -15px;}
.dashboardInput{width: 13px; height: 13px; padding: 0; margin: 0; vertical-align: bottom; position: relative; top: -1px; *overflow: hidden;}

/*** common use items ***/
.half_column{float: left; padding-right: 10px; width: 48%;}
.clear_float{clear: both; height: 0; margin: 0; overflow: hidden; padding: 0;}
.price{color: #FF0000; font-size: 13px;}

/*** wrappers ***/
#wrapper{background-color: #FFFFFF; /*margin: 0 auto;*/ /*min-height: 100%;*/ /*padding: 0 6px 6px;*/ /*position: relative;*/ /*text-align: left;*/ /*overflow: auto;*/ /*max-width: 1000px*/}
#wrapper_content{min-height: 100%; overflow-y: hidden; overflow: auto; /*padding-top: 108px;*/ position: relative; overflow-x: hidden; z-index: 1;}
#container_content hr{border: none; border-top: 1px solid #BBA37D; font-size: 1px; height: 0; line-height: 0; max-height: 0; margin: 6px 0px; padding: 0px;}
#container_content_admin{border: 1px solid #3D454D; min-height: 100%;}
#container_content_admin hr{border: none; border-top: 1px solid #3D454D; font-size: 1px; height: 0; line-height: 0; max-height: 0; margin: 6px 0px; padding: 0px;}
#content{min-height: 100%; margin-left: 0; padding: 10px; position: relative;}
/*** navigation ***/
.clear{/* generic container (i.e. div) for floating buttons */overflow: hidden; width: 100%;}
.navigation{/*left: 2px;*/ position: relative; text-align: left; /*top: 47px;*/ white-space: nowrap; width: 100%;}
.navigation p {font-weight: bold}
.navigation ul{list-style: none; margin: 0px; padding: 0px;}
.navigation > ul > li {background-color:#ffffff; display:inline; float:left; padding-right:6px; position:relative;}
.navigation > ul > li.last {padding-right:0;}
.navigation > ul > li:not(.last):before{background-color: transparent; bottom: -11px; content: ' '; display: block; height: 11px; left: 0; position: absolute; width: 40px;}
.navigation ul li a{display: inline-block; line-height: 17px; text-decoration: none;}
.navigation > ul ul{min-width:166px;}
.navigation > ul ul a{color:black;}
.navigation > ul .button_inactive_tab:hover ul, .navigation > ul .button_selected_tab:hover ul {display: block;}
.button_selected_tab:after {background-color:transparent; bottom:-7px; content:' '; display:block; height:3px; left:0; position:absolute; width:90px;}
.button_img{padding-top: 17px; padding-right: 0px; padding-left: 22px; padding-bottom: 8px; width: 45px; height: 45px; vertical-align: middle; border: none; outline: none;}
/*.button_imgmodern{padding-right: 0px; width: 90px; height: 90px; vertical-align: middle; border: none; outline: none;}*/
.button_imghome{padding-right: 0px; width: 90px; height: 90px; vertical-align: middle; border: none; outline: none;}

/*** sub navigation ***/
.sub_navigation{/*left: 10px;*/ /*position: absolute;*/ /*text-align: right;*/ /*top: 90px;*/ /*white-space: nowrap;*/ margin: 0 0 -6px 10px; float: left;}

/*** header ***/
#container_header{/*height: 88px;*/ margin: 20px 0 0;}
#logo{border: none; position: absolute; left: 15px; top: 15px;}
#tagline{background: url("../images/dots.jpg") no-repeat 0 0; /*color: #7B95BA;*/ font-size: 19px; font-variant: small-caps; height: 40px; letter-spacing: 2px; line-height: 39px; padding-left: 108px; position: absolute; right: 24px; top: 15px;}

/*** footer ***/
#container_footer{padding-top: 10px;}
#footer{background-color: #E0E6EF; color: #003375; font-size: 10px; height: 26px; line-height: 26px; margin: 0; overflow: hidden; padding: 0; position: relative; white-space: nowrap;}
#footer a{text-decoration: none;}
#footer a:hover{text-decoration: underline;}
#copyright{left: 9px; position: absolute; top: 0; white-space: nowrap;}

/*** navigation footer ***/
#footer_navigation{position: absolute; right: 9px; top: 0;}
#footer_navigation ul{margin: 0; padding: 0;}
#footer_navigation ul li{display: inline; line-height: 26px;}

/*** header/footer rounded corners ***/
.rc_hf_container{background-color: #FFFFFF;}
.rc_hf_container *{background-color: #E0E6EF; height: 1px; overflow: hidden;}
.rc_hf_1px{margin: 0 1px;}
.rc_hf_2px{margin: 0 2px;}

/*** breadcrumbs ***/
#breadcrumbs{margin-bottom: 10px;}
#breadcrumbs span{font-weight: bold;}
#breadcrumbs ol{display: inline; margin: 0 0 0 5px; padding: 0;}
#breadcrumbs ol li{display: inline; padding-right: 3px;}
#breadcrumbs ol li a{color: #000000; text-decoration: underline;}

/*** alpha navigation ***/
#alpha_navigation{padding-bottom: 5px;}
#alpha_navigation ul{margin: 0px; padding: 0px;}
#alpha_navigation ul li{border-left: 1px solid #000000; font-weight: bold; display: inline; margin: 0; padding: 0 7px;}
#alpha_navigation ul li.first{border-left: none;}
#alpha_navigation ul li a{font-weight: normal;}

/*** see all departments ***/
a.branch{text-decoration: none;}
a.branch:hover{text-decoration: underline;}

/*** tabular data ***/
table.tabular_data{border-collapse: collapse; margin: 10px 0px; width: 100%; overflow: auto; height: 100%;}
table.tabular_data thead tr#head_student th, table.tabular_data thead tr#head_admin th{/*background-color: #DDDDBE;*/ background-color: #DDDDDD; /*color: #6E6556;*/ color: #3D454D;}
table.tabular_data thead tr th{border: 1px solid #FFFFFF; font-size: 10px; padding: 5px; text-align: center;}
table.tabular_data tbody tr td{padding: 5px; text-align: center;}
table.tabular_data tbody tr td a{color: #000000; text-decoration: underline;}
table.tabular_data tbody tr.inactive_row td{color: #CCCCCC;}
table.tabular_data tbody tr.inactive_row td a{color: #CCCCCC;}
table.tabular_data .left_alignment{text-align: left; width: 45%;}
table.tabular_data .right_alignment{text-align: right;}
table.tabular_data tbody tr td.sale_price{color: #FF0000; font-weight: bold;}
table.tabular_data tbody tr td.tabular_data_footer{padding: 5px 10px; text-align: right;}
table.tabular_data tbody tr td#footer_student{/*background-color: #DDDDBE;*/ background-color: #DDDDDD;}
table.tabular_data tbody tr td#footer_admin{background-color: #DDDDDD;}
table.tabular_data tbody tr td.tabular_data_footer input{font-size: 11px;}
.catalogHeader{background-color: #e0e6ef; font-weight: bold; padding: 5px 0px 5px 5px;}

/*** pagination ***/
.pagination{font-size: 16px; margin: 10px 0; justify-content: center;}

/*** forms ***/
form{margin: 0; padding: 0;}
label{font-weight: bold; display: block;}
label[for="terms_of_service"]{display: inline;}
label.optional{font-weight: normal;}
label span{color: #FF0000; font-style: italic; font-weight: bold; padding-left: 6px;}
label.upload{float: left; height: 28px; line-height: 28px; padding-right: 8px;}
.message{line-height: 18px; margin-bottom: 15px; padding: 5px;}
.message_icon{float: left; margin-right: 5px;}
form .entry_field{padding-bottom: 8px;}
form .entry_field input{border: 1px solid #C1C1C1; width: 100%;}
form .entry_field input[type="checkbox"]{border: 1px solid #C1C1C1; width: auto;}
form .entry_field textarea{border: 1px solid #C1C1C1;}
form .entry_field_short input{border: 1px solid #C1C1C1; width: 35px;}
form .entry_list{border: 1px solid #C1C1C1; height: 354px; margin-bottom: 8px; overflow-x: hidden; overflow-y: scroll; padding: 5px 20px 5px 5px; width: 622px; position: relative;}
form .entry_list A{color: #000000; position: relative; text-decoration: none;}
form .entry_list_container > IMG{display: none; position: absolute; top: 50%; left: 50%; margin: -27px 0 0 -27px; z-index: 999999;}
form .entry_list_container .overlay{display: none; background-color: #ffffff; opacity: 0.7; filter: alpha(opacity=70); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999;}
.entry_list_container{width: 377px; height: 366px; position: relative; margin-bottom: 8px;}
form .entry_list ul{list-style: none;}
.expand{display: inline-block; width: 10px; text-align: center;}
form .entry_list > ul{margin-left: 0px;}
form .buttons{padding-top: 8px;}
.courseFiles{padding-left: 5px; padding-top: 8px;}

/*** misc ***/
.license_agreement{height: 260px; overflow-x: hidden; overflow-y: scroll; padding-right: 20px;}
/*min-height: 100%; taken from iframe - for google translator menu over lap */
iframe{overflow-x: hidden; overflow-y: auto; width: 100%;}
iframe.dashboard{min-height: 650px; width: 100%;}
iframe.hierarchies{min-height: 500px; width: 100%;}
iframe.events{min-height: 500px; width: 100%;}
iframe.calendar{min-height: 800px; width: 100%;}
iframe.calendarItems{min-height: 500px; width: 100%;}
iframe.announcements{min-height: 500px; width: 100%;}
iframe.adminSupport{min-height: 1120px; width: 100%;}
iframe.adminResources{min-height: 600px; width: 100%;}
iframe.authcourse{min-height: 500px; width: 100%;}
iframe.author_quiz{min-height: 500px; width: 100%;}
iframe.admin_main{min-height: 400px; width: 100%;}
iframe.transcript{min-height: 400px; width: 100%;}
iframe.custom_pages{min-height: 500px; width: 100%;}
iframe.email{min-height: 600px; width: 100%;}
iframe.sub_admin{min-height: 600px; width: 100%;}
.eventDocuments{list-style-type: none;}
.staticurl{/*FONT-SIZE: 12px;*/color: navy; text-decoration: none;}
.spacer{height: 1px !important; font-size: 1px !important; color: #DDD; background-color: #DDD; padding: 0px 0px 0px 0px !important;}

/* begin css tabs */
ul#tabnav{/* general settings */ text-align: left; /* set to left, right or center */ margin: 1em 0 1em 0; /* set margins as desired */ font: bold 11px; /* set font as desired */ border-bottom: 1px solid #6c6; /* set border COLOR as desired */ list-style-type: none; padding: 3px 10px 3px 10px; /* THIRD number must change with respect to padding-top (X) below */}
ul#tabnav li{/* do not change */display: inline;}
body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4{/* settings for selected tab */border-bottom: 1px solid #fff; /* set border color to page background color */ background-color: #fff; /* set background color to match above border color */}
body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a{/* settings for selected tab link */background-color: #fff; /* set selected tab background color as desired */ color: #000; /* set selected tab link color as desired */ position: relative; top: 1px; padding-top: 4px; /* must change with respect to padding (X) above and below */}
ul#tabnav li a{/* settings for all tab links */padding: 3px 4px; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */ border: 1px solid #6c6; /* set border COLOR as desired; usually matches border color specified in #tabnav */ background-color: #cfc; /* set unselected tab background color as desired */ color: #666; /* set unselected tab link color as desired */ margin-right: 0px; /* set additional spacing between tabs as desired */ text-decoration: none; border-bottom: none;}
ul#tabnav a:hover{/* settings for hover effect */background: #fff; /* set desired hover color */}

/*** CHART STYliNG ***/
#chart2Div, #chart3Div{margin-top: 0;}
#chart4Div{margin-left: 0;}
.view-prereqs{color: #a61414; cursor: pointer; float: right; position: relative; text-decoration: underline;}
.prereq-list{display: none; position: absolute; left: 115%; bottom: -40px; width: auto; z-index: 99999999; cursor: default;}
.prereq-list td{padding: 0 !important;}
.prereq-list h4, .view-desc h4{color: #000000 !important; font-size: 11px !important; font-weight: bold !important; margin-bottom: 10px; padding-bottom: 0; white-space: nowrap;}
.view-desc{display: none; position: absolute; right: -360px; bottom: -40px; z-index: 99999999;}
.product-container .view-desc{left: 100%; right: auto; top: -62px;}
.last-two .product-container .view-desc{right: 100%; left: auto;}
.view-desc td{padding: 0 !important;}
.view-desc td span{min-height: 200px; width: 300px; display: block;}
.product-title{position: relative;}
.product-title:hover .view-desc{display: block;}
.view-prereqs:hover .prereq-list{display: block;}
.prereq-list ul{cursor: default;}
.prereq-list li{color: #000000; line-height: 200%; text-align: left;}
.prereq-list h4{text-align: left;}
span.product-title{position: relative;}
.pointer-img{position: relative; left: -11px; bottom: 15px; z-index: 9999;}
.product-container .pointer-img{top: 5px;}
.product-container .view-desc .pointer-img.right{display: none;}
.last-two .product-container .view-desc .pointer-img.right{display: inline; -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; top: 5px; right: -11px; left: auto;}
.last-two .product-container .view-desc .pointer-img.left{display: none;}
.west_nt_foot{clear: both;}
.west_net_foot_prnt{float: left; width: auto; margin-right: 8px;}
.chart-back-button{background-color: #D3D3D3; border: 1px solid #666666; cursor: pointer; font-family: Arial; font-size: 11px; font-weight: bold; padding: 2px; width: 25px; margin-left: 96%;}

/*** new style 13/01/2021 */

/*** header */

header{padding-top: 10px;}
header .header-banner{height: 118px; background-size: 100%; background-repeat: no-repeat; margin: 10px 0 0; background-position: center; border-radius: 10px;}
header .header-preferences{text-align: center; padding: 10px 0;}
header .header-preferences img{vertical-align: middle; width: 32px;}

/*** main */

main{}

/*** element: menu main */

ul.menu-m{list-style: none; overflow: hidden; margin: 10px -10px 15px -10px;}
ul.menu-m img{max-width: 100%;}
ul.menu-m li a{padding: 0 10px; color: #fff; display: block; float: left; font-weight: 400; font-size: 13px; line-height: 1.4; text-align: center; text-decoration: none; width: 12.5%; position: relative;}
ul.menu-m li a .name{bottom: 25px; position: relative;}
ul.menu-m li a .name.active{font-weight: 700;}
@media only screen and (max-width: 1220px), only screen and (max-device-width: 1220px){
  ul.menu-m li a{font-weight: 400; font-size: 10px; line-height: 1.4;}
}
@media only screen and (max-width: 930px), only screen and (max-device-width: 930px){
  ul.menu-m li a{width: 25%; margin-bottom: 5%; font-weight: 400; font-size: 11px; line-height: 1.4;}
  ul.menu-m li:last-child a, ul.menu-m li:nth-child(4) a{border-right: none;}
  ul.menu-m li:nth-child(5) a, ul.menu-m li:nth-child(6) a, ul.menu-m li:nth-child(7) a, ul.menu-m li:nth-child(8) a{border-bottom: none;}
}
@media only screen and (max-width: 580px), only screen and (max-device-width: 580px){
  ul.menu-m li a{width: 50%; font-weight: 400; font-size: 12px; line-height: 1.4; padding-top: 12px; padding-bottom: 12px;}
  ul.menu-m li:nth-child(even) a{border-right: none;}
}
@media only screen and (max-width: 320px), only screen and (max-device-width: 320px){
  ul.menu-m li a{font-weight: 400; font-size: 11px; line-height: 1.4;}
}
/**
 * element: Google Translate
 */

.goog-te-gadget-icon{background: none !important;}
.goog-te-banner-frame.skiptranslate{display: none !important;}
body{top: 0px !important;}
.goog-tooltip{display: none !important;}
.goog-tooltip:hover{display: none !important;}
.goog-text-highlight{background-color: transparent !important; border: none !important; box-shadow: none !important;}
body{top: 0px !important; position: static !important;}
.goog-te-banner-frame{display: none !important;}

/**
 * footer
 */

footer{padding-bottom: 10px;}
#footer_navigation ul{text-align: right;}
/**
 * transferred from header, footer, etc
 */

.slide-out-div{padding: 20px; width: 860px; height: 550px; background: #ccc; border: 1px solid #29216d;}

/***** header navigation design *****/
.navigation ul li.button_inactive_tab > a, .navigation ul li.button_selected_tab > a{width: 90px; height: 90px;}
.navigation ul li.button_inactive_tab > a img, .navigation ul li.button_selected_tab > a img{width: 100%; height: 100%; padding-left: 0; margin-left: 0;}
.navigation > ul > li:first-child > a img{width: 90px; height: 90px; margin: 0;}
.navigation > ul ul hr{margin: 10px 0;}
.navigation-label {
	bottom: 5px;
    left: 0px;
    position: absolute;
    background: #6b6b6b94;
    width: 100%;
    text-align: center;
}
.menu-left .navigation-container,
.menu-left .navigation-container .navigation a,
.menu-left .navigation-container .navigation img{
		transition: .5s;
	}
	
.navigation-container #sidebarCollapse{
	display: none;
}
@media (min-width: 768px) {
	.menu-left .navigation-container.navposition-left {
		position: sticky;
		top: 10px;
		height: 130vh;
		z-index: 2;
	}
	.menu-left .navigation-container.navposition-left:not(.show) {
		width: 40px;
	}
	.menu-left .navigation-container.navposition-left:not(.show) .navigation > ul ul {
    left: 45px;
  }
	.navigation-container.navposition-left #sidebarCollapse{
		display: block;
	}
}

.navigation-container.navposition-left:not(.show) .navigation ul li.button_inactive_tab > a, .navigation-container.navposition-left:not(.show)  .navigation ul li.button_selected_tab > a{width: 40px; height: 40px;}
.navigation-container.navposition-left:not(.show) .navigation > ul > li:first-child > a img{width: 40px; height: 40px; }
.navigation-container.navposition-left:not(.show) .navigation .navigation-label { display: none; transition: 1s;}
.navigation-container.navposition-left:not(.show) .navigation img.button_imghome { width: 23px !important; height: 23px !important;}

.menu-left .navigation-container.navposition-left .navigation > ul > li {
	background-color: unset;
}
.navigation-container #sidebarCollapse i {
	transition: .5s;
}
.navigation-container.show #sidebarCollapse i:before{
	content: "\f00d" !important;
}
.white-text {
	color: #fff;
}
.button_selected_tab span > IMG, .button_inactive_tab span > IMG{width: 100%;}
.navigation{margin-top: 10px;}
/***** header banner responsive *****/
@media(max-width: 520px){
  header .header-banner{height: 78px;}
}
/***** catalog index *****/
@media(max-width: 640px){
  body .theDataWrapper .tabularData td{width: 50% !important; display: inline-block !important; float: left;}
}
@media(min-width: 641px) and (max-width: 991px){
  body .theDataWrapper .tabularData td{width: 50% !important; display: inline-block !important; float: left;}
}
/**** inner page navigation ****/
.container nav ul.menu-m{background: -webkit-gradient(linear, 0 0, 0 bottom, from(#3c84ad), to(#3c84ad)); background: -moz-linear-gradient(#3c84ad, #3c84ad); background: linear-gradient(#3c84ad, #3c84ad); -pie-background: linear-gradient(#3c84ad, #3c84ad); behavior: url(http://127.0.0.1/system/application/views/lms/common/PIE.php); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#3c84ad', endColorstr='#3c84ad'); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; left: 2px; position: relative; text-align: left; /* top: 47px; */ white-space: nowrap; width: 100%; margin-bottom: 20px; position: relative;}
.container nav ul.menu-m > li{background-color: #ffffff; display: inline; float: left; padding-right: 6px; position: relative;}
.container nav ul.menu-m > li a{background: -webkit-gradient(linear, 0 0, 0 bottom, from(#3c84ad), to(#3c84ad)); background: -moz-linear-gradient(#3c84ad, #3c84ad); background: linear-gradient(#3c84ad, #3c84ad); -pie-background: linear-gradient(#3c84ad, #3c84ad); behavior: url(http://127.0.0.1/system/application/views/lms/common/PIE.php); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#3c84ad', endColorstr='#3c84ad'); display: inline-block; line-height: 17px; text-decoration: none; width: 90px; height: 90px; text-align: left;}
.container nav ul.menu-m > li:first-child a{padding: 0;}
.container nav ul.menu-m > li a img{padding: 0;}
@media(min-width: 581px){
  .container nav ul.menu-m > li a{padding: 10px;}
  ul.menu-m li a .name{bottom: -10px;}
  ul.menu-m li a div{bottom: -8px !important;}
  ul.menu-m li:first-child a .name{bottom: 25px !important; left: 8px;}
}
@media(max-width: 930px){
  ul.menu-m li a{margin-bottom: 0;}
}
@media(max-width: 580px){
  ul.menu-m li a .name{bottom: -7px;}
  ul.menu-m{margin: 10px 0;}
  .container nav ul.menu-m > li:first-child a .name{padding-left: 12px; bottom: 25px;}
}
@media(max-width: 1024px){
  .navigation, .container nav ul.menu-m{background: none;}
  .navigation > ul > li.last{display: none;}
  .navigation > ul > li{padding-bottom: 6px;}
}
/**** access page responsive ****/
@media(max-width: 767px){
  .media_embed table{width: 100% !important;}
  .media_embed table img{width: 100% !important; height: auto !important;}
  #footer{padding: 0 10px; height: auto;}
  #copyright, #footer_navigation{position: inherit; top: auto; left: auto;}
}
@media(max-width: 640px){
  .media_embed table tr td{width: 100%; display: block; float: left;}   
}

/**** chat form ****/
@media(max-width: 700px){
  .fancybox-opened{width: calc(100% - 40px) !important;}
  .fancybox-opened .fancybox-inner, .fancybox-opened .fancybox-inner textarea{width: 100%;}
}

/**** help page ****/
@media(max-width: 870px){
  .slide-out-div{width: 100% !important;}
}

/**** content overflow ****/
#content{overflow: auto;}

/**** feedback changes ****/
@media(max-width: 767px){
	.login_btn.navigation{display: none;}
	form .entry_list, form .entry_field textarea{width: 100%;}
}

/**** popover ****/
.popover-header, .popover-body{
	font-family:	Arial, sans-serif;
	font-size:		11px;
}

.important-message {
	color: #FF0000;
	font-weight:bold;
}
#graphical-icons-title {
	margin: 10px 0;
	font-weight:bold;
	display: block;
}
.icon-selection label {
	font-weight: normal;
}
.icon-selection a {
	display: block;
	margin-bottom: .5rem;
}

.icon-selection .color-notice{
	padding: 5px 10px;
    display: block;
}
    
/*** training-status style ***/
#training-status-container {
	color: #787878;
	border: 1px solid #999999;
	border-radius: 10px;
	box-shadow: 0 3px 4px #555555;
	overflow: hidden;
	/*width: 900px;*/
	width: 100%;
	margin: 0 auto;
	margin-bottom: 2rem;
	padding: 10px;
	max-height: 800px !important;
	overflow: scroll;
}

#training-status-container div.vertical
{
	writing-mode: vertical-rl;
	transform: rotate(-180deg);
	max-height: 150px; 
	white-space: nowrap; 
	/*overflow: hidden; 
	text-overflow: ellipsis;*/
}

#training-status-container .course-title {
	cursor: pointer;
}

#training-status-loader {
	display: block;
	margin: 0 auto;
	padding: 3rem 0;
}
#training-status-header{
	font-weight: bold;	
	text-align: center;
}

#training-status {
	border-collapse: separate;
	border-spacing: 0px;
}

#training-status thead th {
	background-color: white;
}

.description-header a{
	text-decoration: none;
    padding-right: 20px;
    float: right;
}

/*	#training-status th.description-header{
	background-color: rgba(0,0,0,.05);
}

#training-status thead tr th{
	background: white;
	position: sticky;
	top: 0;
	z-index: 10;
  }*/

#training-status td, #training-status th {
	padding: .55rem;
}

#training-status-container .fa-exclamation-triangle {
	color: red;
}

#training-status-container img.status-icon {
	width: 13px;
}
#training-status-container img.email-icon {
	width: 30px;
}

.chart-section {
	width: 900px;
	margin: 0 auto;
	margin-bottom: 2rem;
}

.highcharts-container-bordered {
	border: 1px solid #999999;
	border-radius: 10px;
	box-shadow: 0 3px 4px #555555;
}
.highcharts-container {
	border-radius: 10px;
}
/*** training-status style ***/

.my_learning .progress {
	border: 1px solid #28a745!important;
}
.my_learning .progress .bg-success {
	background-color: #19c240a1!important
}
.my_learning .progress-bar {
	color: grey;
    font-weight: bold;
}
img.optional-icon {
	width: 16px;
}

.section-title {
		width: 100%;
		text-align: left;
		margin-top: 1em;
		border: 0;
		font-size: 1.3em;
		display: block;
		transition: all .75s ease-in-out;
		background-color: rgba(0,0,0,.03);
		border: 1px solid rgba(0,0,0,.125) !important;
		border-radius: .25rem !important;
	}
	
	.section-content {
		padding-bottom: 1em;
		border-bottom: 1px solid gray;
		margin-bottom: 1em;
		border: 1px solid rgba(0,0,0,.125);
		  border-top: 0;
		  padding: 1em;
  
	}
	
	
	.section-title:after {
	  content: "\f067";
	  font-family: 'Font Awesome 5 Free';
	  font-weight: 900;
	  float: right;
	}

	.section-title.collapsed {
	  color: black;
	}

	.section-title.collapsed:after {
	  content: "\f067";
	}
	.section-title:not(.collapsed):after {
	  content: "\f068";
	}