@import url("https://use.fontawesome.com/releases/v5.5.0/css/all.css");
@import url("https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i");
@import url("/Content/Redesign/sky-mega-menu-complynet.css");

/* Defaults and widgets */
body{
	padding: 0 !important;
	margin: 0 !important;
	background-size: cover;
	font-family: 'Roboto', sans-serif;
}
.col-xs-12{
	padding: 0 !important;
}
.ui-learn-widget-header{
	color: #fff ;
}
.control-label{
	color: #000 !important;
}
.ui-learn-widget-header{
	background: #0277bd;
}
#ldcLCPageContentTD {
	padding: 0;
}
.ui-learn-widget-header .ui-learn-widget-header-actions a:not([role*="menuitem"]){
	color: #fff;
}
.ui-learn-widget-header .ui-learn-widget-header-actions > .disabled span{
	color: #aaa;
}

/* Loader */

#loader{
	position: fixed; 
	width: 100%; 
	height: 100%; 
	top: 0; 
	left: 0; 
	background: #fff; 
	z-index: 99999;
}
.loader {
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.loader span {
	display: inline-block;
	background-color: #1160e3;
	width: 25px;
	height: 25px;
	margin: 0 2px;
	-webkit-animation: 1.8s preload ease-in-out infinite;
	animation: preload 1.8s ease-in-out infinite;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
	border-radius:50%;
}

.loader span:nth-child(1) {
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}
.loader span:nth-child(2) {
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}
.loader span:nth-child(3) {
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.4s;
}
.loader span:nth-child(4) {
	-webkit-animation-delay: 0.6s;
	animation-delay: 0.6s;
}
.loader span:nth-child(5) {
	-webkit-animation-delay: 0.8s;
	animation-delay: 0.8s;
}

@-webkit-keyframes preload {
	0% {
		-webkit-transform:scale(0);
		transform:scale(0);
		transform: translate(1px);
	}
	50% {
		-webkit-transform:scale(1);
		transform:scale(1);
		transform: translate(10px);
	}
	100% {
		-webkit-transform:scale(0);
		transform:scale(0);
	}
}

@keyframes preload {
	0% {
		-webkit-transform:scale(0);
		transform:scale(0) ;
		opacity: 0;
	}
	35% {
		-webkit-transform:scale(1);
		transform:scale(1) ;
		opacity: 1;
	}
	65% {
		-webkit-transform:scale(1);
		transform:scale(1) ;
		opacity: 1;
	}
	100% {
		-webkit-transform:scale(0);
		transform:scale(1);
		opacity: 0;
	}
}

/* Preheader */

.pre-header {
	background-color: #0277bd;
	text-align: left;
	position: relative;
	z-index: 1000;
	overflow: hidden;
}
.logo {
	width: 175px;
	margin: 7px 10px 6px;
}

.top-nav {
	float: right;
	padding-right: 25px; 
}
.top-nav a, .top-nav span{
	line-height: 60px;
	font-size: 16px;
	color: #fff;
	transition: 0.3s;
}
.top-nav span{
	margin-right: 25px;
}
.top-nav a:hover{
	border-bottom: 1px solid;
}
.ui-learn-widget-list-item .ui-learn-list-item-properties .ui-learn-field{
	width: 24% !important;
}
.ui-learn-widget-list-item .ui-learn-list-item-properties .ui-learn-field-value{
	width: 48%;
}

/* Home Content */

.thin-banner {
	height: 100%;
	overflow: hidden;
	background: url(/content/images/bannerzz.jpg);
	background-size: cover;
	background-position: 50%;
}
.banner-content-container{
	height: 100%;
	max-width: 1100px;
	margin: auto;
	position: relative;
}
#trainingChart, #policiesChart{
	position: absolute;
	left: 300px;
}
.banner-content{
	background: rgba(0, 0, 0, 0.5);
	width: 300px;
	height: 100%;
	overflow: hidden;
	padding: 25px;
}
.banner-content h1{
	color: #fff;
	font-weight: bold;
	font-size: 26px;
}
.banner-content p{
	color: #fff;
	font-size: 14px;
	margin-bottom: 15px;
}
.banner-content button{
	display: block;
	border: none;
	margin: 10px 0;
	width: 175px;
	padding: 3px 10px 5px;
	background: #fff;
	color: #0277bd;
	border-radius: 4px;
	transition: 0.2s;
	text-align: left;
	position: relative;
}
.myteam-dropdown{
	margin: 0 7px 0 5px;
}
.banner-content button span{
	opacity: 0;
	position: absolute;
	right: 5px;
	background: red;
	color: #fff;
	text-align: center;
	padding: 1px 7px 1px 8px;
	border-radius: 4px;
}
.banner-content button:hover{
	color: #fff;
	background: #0277bd;
}
.tabs-container > div{
	max-width: 1100px;
	margin: 25px auto;
}
.switcher-btns{
	max-width: 1100px;
	padding: 10px 15px;
	margin: 50px auto -10px;
}
.tabs-container{
	height: 0;
	overflow: hidden;
	transition: 0.3s;
	background: #fafafa;
	position: relative;
	box-shadow: 0 7px 13px -8px #9b9b9b inset, 0 -7px 13px -8px #9b9b9b inset;
}
#closeTab{
	position: absolute;
	right: 10px;
	top: 5px;
	font-size: 30px;
}
.switcher-btns button{
	border: 0;
	background-color: #0277bd;
	color: #fff;
	font-size: 16px;
	padding: 5px 15px;
	margin-right: 5px;
	border-radius: 4px 4px 0 0;
}
.switcher-btns .inactive-tab{
	background-color: #52a6d8;
}
.switcher-btns .inactive-tab:hover{
	background-color: #088ddd;
}

.imp-section{
	padding: 20px 10px;
	overflow: hidden;
	background: #eee;
}
.imp-items{
	max-width: 1100px;
	margin: auto;
	overflow: hidden;
	text-align: center;
}
.imp-box{
	width: 300px;
	height: 335px;
	background: #220ffc;
	display: inline-block;
	margin: 5px 25px;
	padding: 10px 15px;
	position: relative;
	border-radius: 7px;
	text-align: left;
	overflow: hidden;
}
.imp-box:first-child{
	background: #ff7994;
}
.imp-box:nth-child(2){
	background: lightblue;
}
.imp-box:nth-child(3){
	background: lightgreen;
}
.imp-box h1{
	font-size: 50px;
	color: #fff;
	margin: 10px 3px;
}
.imp-box h2{
	font-size: 23px;
	font-weight: bold;
	color: #333
}
.imp-box p{
	font-size: 16px;
}
.go-link{
	font-size: 45px;
	color: #fff;
	position: absolute;
	right: 20px;
	bottom: 12px;
}

/* Sub Pages */

.a-section{
	max-width: 1100px;
	margin: auto;
}
.sub-hero{
	max-width: 1100px;
	margin: 35px auto;
	overflow: hidden;
}
.sub-hero h1{
	font-weight: 500;
	color: #0277bd;
	margin: 10px 0;
	font-size: 36px;
	line-height: 1.1;
}
.sub-hero p{
	font-size: 15px;
	color: #333;
	line-height: 1.42857143;
	margin: 0 0 10px;
}

/* Change Password DO */

.dashboard-frame{
	max-width: 1100px;
	height: 800px;
	margin: 25px auto;
}
.dashboard-frame iframe{
	width: 100%;
	height: 100%;
	border: 1px solid #ddd;
}

/* Change Password DO */

#ldcDCTChangeYourPasswordHeader {
	border: 0;
	background: #0277bd;
	border-radius: 4px 4px 0 0;
	overflow: hidden;
}
#ldcDCTChangeYourPasswordHeader span{
	color: #fff;
	padding: 5px;
	display: block;
	font-size: 16px;
}
#ldcDCTChangeYourPassword{
	border: 1px solid #ccc;
	border-top: 0;
	padding-top: 5px;
	margin-bottom: 35px;
	border-radius: 0 0 4px 4px;
}
#ldcDCTChangeYourPassword table tr:nth-child(-n+3) td:nth-child(1){
	text-align: left;
	padding-left: 10px;
	width: 15%;
	min-width: 115px;
	font-weight: 500;
	font-size: 14px;
	color: #333;
}
#ldcDCTChangeYourPassword table tr:nth-child(+n+4) td:nth-child(1){
	text-align: left;
	padding-left: 10px;
}
#ldcDCTChangeYourPassword table tr:nth-child(-n+3) input{
	width: 30%;
	max-width: 225px;
	min-width: 150px;
	border: 1px solid #ccc;
	height: 20px;
	margin-top: 5px;
}
.ldcControlPanelInnerDiv td{
	border: 0 ;
}

/* Accordion */

.xaccordion {
	background-color: #eee;
	color: #444;
	cursor: pointer;
	padding: 15px;
	margin: 0;
	border-top: 1px solid #ccc !important;
	width: 100%;
	text-align: left;
	outline: none;
	font-size: 18px;
	transition: 0.4s;
}
.xaccordion:first-child{
	border: 0;
}
.xaccordion:hover {
	background-color: rgba(2, 119, 189, 0.7);
}
.xaccordion:after {
	content: '\002B';
	font-weight: bold;
	float: right;
	margin-left: 5px;
}
.xactive{
	background: rgba(2, 119, 189, 1) !important;
	color: #fff;
}
.xactive:after {
	content: "\2212";
}
.xpanel {
	padding: 0 10px;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	background-color: white;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}

.x-container{
	max-width: 1100px;
	margin: 25px auto;
	overflow: hidden;
	border-top: 3px solid #19d259;
	border-bottom: 3px solid #19d259;
	border-radius: 3px;
}

/* Resources Table */

.resources{
	margin: 10px 0;
}
.resources table{
	width: 100%;
}
.resources td:first-child{
	width: 70%;
}
.table-title{
	background: #19d259;
	font-weight: 600;
	font-size: 16px;
	padding: 0;
}
.table-title td{
	padding: 7px 15px !important;
}
.resources td{
	padding: 10px 15px;
	border: 1px solid #eee;
}
.resources a{
	font-weight: 500;
	transition: color 0.3s;
}
.resources a:hover{
	border-bottom: 1px solid;
	text-decoration: none;
	color: #666;
	border-bottom: 2px solid #19d259;
}

/* Widget Launch Button */


.new-course-player { /*this and the :after style below is used to create a course launch button; overrides the default course launch icon*/
	background:none !important;
	background-position:unset !important;
	background-color:#0277bd !important;
	border-color: #fff !important;
	display:block !important;
	width: 100% !important; 
	height: 32px !important; 
	padding:  10px 15px; 
	color:  #fff; 
	border-radius:  6px; 
	text-shadow: 0 1px 0 rgba(13, 107, 115, .2);
  transition: 0.2s;

}
.new-course-player:after { /*this is used in conjunction with the above to insert text content for the course launch button*/
	content:"Launch" !important;
}
.new-course-player:hover {/*hover styles for the custom course launch button*/
	background-color: #19d259 !important;    
	border-color: #fff !important;
	cursor: pointer !important;
}

.ui-learn-widget-list-item.has-actions .ui-learn-widget-item-header, .ui-learn-widget-list-item.has-actions .ui-learn-widget-item-description { /*applies to the LP description so as not to get cut off by the new launch button. default right margin is 60px*/
    margin-right: 170px;
}

/* footer */

.footer{
	overflow: hidden;
	margin: 0 0;
	background: #01619b;
	color: #fff;
	border-top: 75px solid #0277bd;
}
.footer h3{
	max-width: 1100px;
	margin: 15px auto;
	font-size: 13px;
	font-weight: 500;
}		
.admin-links{
	float: right;
}
.admin-links a {
    color: #fff;
}
.admin-links a:hover {
    color: #fff;
    text-decoration: underline;
}