@import url('https://use.typekit.net/pcm2ijz.css');

/*****************************************************************************/
/*****************************************************************************/
/************** start legacy app.css *****************************************/
/* -- Primary action colour -- */
a {
  color: #009ca6;
  text-decoration: underline;
  cursor: pointer;
}
a:hover,
a:focus {
  color: #262626;
  text-decoration: underline;
}

.btn {
	border-width: 3px;
  border-radius: 0px;
  font-weight: bold;
}

.btn-primary {
  color: #fff !important;
  background-color: #009ca6;
  border-color: #009ca6;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  color: #262626 !important;
  background-color: transparent !important;
  border-color: #009ca6 !important;
}
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
  color: #ffffff !important;
  background-color: #009ca6 !important;
  border-color: #009ca6 !important;
}

.btn-default,
.btn-default.dropdown-toggle,
.input-group-addon {
  background-color: #f2f2f2 !important;
  border-color: #f2f2f2 !important;
  color: #262626 !important;
  box-shadow: none !important;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.btn-default.active:hover,
.btn-default.active:focus,
.btn-default.dropdown-toggle:hover,
.btn-default.dropdown-toggle:focus {
  background-color: transparent !important;
  border-color: #f2f2f2 !important;
  color: #262626 !important;
}

#search.form-control {
  border: 3px solid #f2f2f2;
  height: 38px;
}

.btn-info {
  color: #ffffff !important;
  background-color: #d62598;
  border-color: #d62598;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active {
  color: #262626 !important;
  background-color: transparent !important;
  border-color: #d62598 !important;
}

.btn-success {
  color: #ffffff !important;
  background-color: #009ca6;
  border-color: #009ca6;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
  color: #262626 !important;
  background-color: transparent !important;
  border-color: #009ca6 !important;
}

.btn-danger {
  color: #ffffff !important;
  background-color: #d62598;
  border-color: #f05050;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
  color: #262626 !important;
  background-color: transparent;
  border-color: #d62598;
}
  
.btn-rounded {
  border-radius: 50px !important;
}

.btn-rounded i {
  top: -3px !important;
}

.bg-primary {
  background-color: #009ca6;
}
.bg-primary a {
  color: #ffffff;
}
.bg-primary a:hover {
  color: #fff;
}

.bg-white a {
  color: #009ca6;
}
.bg-white a:hover {
  color: #009ca6;
}

.bg-dark {
	background-color: #009ca6;
}

a.bg-light:hover {
  color: #009ca6;
}
a.bg-primary:hover {
  background-color: #cb0d51;
}
a.text-primary:hover {
  color: #cb0d51;
}
.text-primary {
  color: #009ca6;
}

.bg-primary.dker,
.bg-primary .dker{
	background-color: #005f66; /* plus 15% */
}

.bg-primary.lter,
.bg-primary .lter{
	background-color: #00becc; /* minus 10% */
}

.stroke-primary {
	stroke: #009ca6;
}

.stroke-primary.dker,
.stroke-primary .dker {
	stroke: #005f66;  /* plus 15% */
}

.stroke-primary.lter,
.stroke-primary .lter {
	stroke: #00becc;  /* minus 10% */
}

.fill-primary {
	fill: #009ca6; 
}

.fill-primary.dker,
.fill-primary .dker {
	fill: #005f66; /* plus 15% */
}

.fill-primary.lter,
.fill-primary .lter {
	fill: #00becc; /* minus 10% */
}

.rounded {
  border-radius: 500px;
}

.progress-bar-success,
.i-switch,
.bg-success,
.bg-success .bg,
.bg-success.bg,
.avatar i.on {
  background-color: #009ca6;
}

.text-success {
  color: #009ca6;
}

.b-success {
  border-color: #009ca6;
}

.arrow.bottom.arrow-success:after {
  border-top-color: #009ca6;
}

.b-l-success,
.arrow.right.arrow-success:after {
  border-left-color: #009ca6;
}

.arrow.top.arrow-success:after {
  border-bottom-color: #009ca6;
}

.arrow.left.arrow-success:after {
  border-right-color: #009ca6;
}

.b-danger {
  border-color: #d62598;
}

.arrow.bottom.arrow-danger:after {
  border-top-color: #d62598;
}

.b-l-danger,
.arrow.right.arrow-danger:after {
  border-left-color: #d62598;
}

.arrow.top.arrow-danger:after {
  border-bottom-color: #d62598;
}

.arrow.left.arrow-danger:after {
  border-right-color: #d62598;
}

/* -- Header bar colour -- */

.navbar {
  background-color: #ffffff;
}

.navbar .nav > li:hover > a,
.navbar .nav > li.active > a,
.navbar-toggle:hover,
.navbar-toggle.active {
  color: #009ca6;
  background-color: transparent;
  text-decoration: none;
}

.navbar .nav > li > a,
.navbar .nav > li:focus > a,
.navbar-toggle,
.navbar-toggle:focus {
  color: #262626;
  background-color: transparent !important;
}

.nav .open> a,
.nav .open> a:focus,
.nav .open> a:hover,
.nav > li > a:focus,
.nav > li > a:hover {
  background-color: transparent;
}

.navbar-toggle .fa {
  background-color: transparent;
  color: #262626;
}

.navbar-toggle:hover .fa {
  color: #262626;
  background-color: transparent;
}

.navbar support-link,
.navbar support-link > a {
  color: #262626;
  text-decoration: none;
}

.navbar .nav > li > a {
  color: #262626;
  font-weight: 600;
  text-decoration: none;
}

.navbar .nav > li > a:hover,
.navbar support-link a:hover,
.navbar a:hover support-link a {
  color: #009ca6 !important;
  text-decoration: none;
  background-color: transparent;
}

.dropdown-toggle:hover {
  color: #009ca6 !important;
  background-color: transparent !important;
  text-decoration: none !important;
}

.dropdown-toggle,
.dropdown-toggle:visited,
.dropdown-toggle:focus,
.dropdown-toggle.active {
  color: #262626 !important;
  background-color: transparent !important;
  text-decoration: none !important;
}

/* -- Dropdown menu link colour -- */

.dropdown-menu {
	background-color: #ffffff;
  font-size: 12px;
}

.dropdown-menu .m-b-sm {
	border: none transparent 0px;
	background-color: #f2f2f2;
}

.dropdown-menu > li > a {
	color: #262626 !important;
  background-color: transparent !important;
	font-weight: bold;
	text-transform: none !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  background-color: transparent !important;
  color: #009ca6 !important;
}

/* overlays */

.modal-content {
  border-radius: 0px !important;
}

/* catalogue */
 
#landing-page #title {
  font-size: 36px !important;
	color: #ffffff !important;
}


/* achievements */

.app-private-account-achievements .bg-info .h3 {
  color: #ffffff !important;
}

.app-private-account-achievements .bg-info .col-xs-4 {
  background-color: #33b0b8 !important;
}

.app-private-account-achievements .bg-info .col-xs-4.dk {
  background-color: #009ca6 !important;
}

/* team dashboard */

.app-private-team-dashboard .label-aditional-info {
  color: #262626 !important;
  fill: #262626 !important;
}


.app-private-team-member .text-lg {
  font-family: "Museo Sans", sans-serif;
}

.app-private-team-dashboard h2,
.app-private-team-member h2,
.app-private-team-dashboard .label-title,
.app-private-team-member text.grey {
  color: #262626 !important;
  fill: #262626 !important;
  font-weight: 500 !important;
}

.graph line,
.grid line,
.x-grid,
.tear,
#def-tear {
  stroke: #009ca6 !important;
}

.teamMemberEvent {
  text-decoration: none !important;
}

.app-private-team-dashboard .team-members .active-user {
  color: #009ca6 !important;
  text-decoration: underline !important;
}

.app-private-team-dashboard .team-members .active-user:hover {
  color: #262626 !important;
  text-decoration: underline !important;
}

.app-private-team-member .panel .blue-text {
  color: #262626;
}

@media (max-width: 1098px) {
  .banner .col-xs-push-1 {
    max-width: 49.180vw;
  }
}

@media (max-width: 965px) {
  .banner .col-xs-push-1 {
    max-width: 474px;
  }
}

@media (max-width: 768px) {

	.navbar-right {
		height: auto !important;
	}
    .navbar-right li .navbar-link {
		height: 50px !important;
		padding: 15px 15px !important;
	}
	.dropdown-toggle .img-circle {
		margin-top: 5px;
	}

	.catalogue .col-sm-5,
  .catalogue .col-sm-6 {
		float: none !important;
	}

  .panel-text .row {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
}

/**************** end legacy app.css *****************************************/
/*****************************************************************************/
/*****************************************************************************/

/* Page overrides */

html {
	background-color: #ffffff;
}

body {
	color: #262626;
	font-family: 'Museo Sans', sans-serif;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4 {
  font-weight: 700;
}

h1, .h1,
h2, .h2 {
  color: #009ca6;
}

.timeline .btn-info,
.timeline .btn-info:hover,
.timeline .btn-info:active {
	background-color: transparent !important;
	border: 3px solid #f2f2f2 !important;
	color: #262626 !important;
	font-weight: bold;
	cursor: default;
	-webkit-box-shadow: inset 0 0px 0px rgba(0,0,0,0) !important;
	box-shadow: inset 0 0px 0px rgba(0,0,0,0) !important;
}

h2, .h2 {
	font-size: 24px;
}

h4 {
  font-size: 16px;
}

.navbar-collapse .navbar-right {
	display: block;
}

.navbar-nav {
  display: none;
}


.navbar-nav a,
.navbar-right a,
#site-footer a {
	background-color: transparent !important;
}

.dropdown-menu a {
	font-weight: normal !important;
  text-decoration: none !important;
}

.navbar-toggle {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  padding-top: 15px;
  padding-bottom: 15px;
}

.navbar-header {
  width: inherit;
}

.navbar .navbar-brand {
}

.navbar .navbar-brand img {
  max-height: 20px;
}

/* Page specific overides */

/* Signin etc. */

.signin-panel form .text-white,
.forgot-panel form .text-white,
.signup-panel form .text-white,
.recover-panel form .text-white,
.thanks-panel form .text-white,
.scope-panel form .text-white {
  color:#000;
}

.app-public-access-signin .b-a,
.app-public-access-forgot .b-a,
.app-public-access-signup .b-a,
.app-public-access-recover .b-a,
.app-public-access-thanks .b-a,
.app-public-access-scope .b-a {
	border: 0px none transparent !important;
}

.app-public-access-signin body,
.app-public-access-forgot body,
.app-public-access-signup body,
.app-public-access-recover body,
.app-public-access-thanks body,
.app-public-access-scope body {
	margin-bottom: 0px !important;
}

.app-public-access-signin .signin-panel {
	background-color: #ffffff;
	display: table; /*required to avoid display bug in Chrome*/
}


.app-public-access-forgot .forgot-panel,
.app-public-access-signup .signup-panel,
.app-public-access-recover .recover-panel,
.app-public-access-thanks .thanks-panel,
.app-public-access-scope .scope-panel {
	background-color: #ffffff;
	display: table; /*required to avoid display bug in Chrome*/
}

.app-public-access-signin #app,
.app-public-access-forgot #app,
.app-public-access-signup #app,
.app-public-access-recover #app,
.app-public-access-thanks #app,
.app-public-access-scope #app {
	padding-bottom: 50px;
  position: relative;
  top: 50px;
}

.app-public-access-signin .signin-panel a,
.app-public-access-forgot .forgot-panel a,
.app-public-access-signup .signup-panel a,
.app-public-access-recover .recover-panel a,
.app-public-access-thanks .thanks-panel a,
.app-public-access-scope .scope-panel a {
  color: #00818a;
}

.app-public-access-signin .signin-panel a:hover,
.app-public-access-forgot .forgot-panel a:hover,
.app-public-access-signup .signup-panel a:hover,
.app-public-access-recover .recover-panel a:hover,
.app-public-access-thanks .thanks-panel a:hover,
.app-public-access-scope .scope-panel a:hover {
  color: #31006f !important;
}

.app-public-access-signin .signin-panel .ng-scope,
.app-public-access-forgot .forgot-panel .ng-scope,
.app-public-access-signup .signup-panel .ng-scope,
.app-public-access-recover .recover-panel .ng-scope,
.app-public-access-thanks .thanks-panel .ng-scope,
.app-public-access-scope .scope-panel .ng-scope {
	text-align: center;
}

.app-public-access-signin .signin-panel .text-right,
.app-public-access-forgot .forgot-panel .text-right,
.app-public-access-signup .signup-panel .text-right,
.app-public-access-recover .recover-panel .text-right,
.app-public-access-thanks .thanks-panel .text-right,
.app-public-access-scope .scope-panel .text-right {
	text-align: right !important;
}

.app-public-access-signin .signin-panel .brand img,
.app-public-access-forgot .forgot-panel .brand img,
.app-public-access-signup .signup-panel .brand img,
.app-public-access-recover .recover-panel .brand img,
.app-public-access-thanks .thanks-panel .brand img,
.app-public-access-scope .scope-panel .brand img {
	width: 80%;
	height: auto !important;
	padding: 40px 0px;
}

.app-public-access-signin .signin-panel .m-b-lg,
.app-public-access-forgot .forgot-panel .m-b-lg,
.app-public-access-signup .signup-panel .m-b-lg,
.app-public-access-recover .recover-panel .m-b-lg,
.app-public-access-thanks .thanks-panel .m-b-lg,
.app-public-access-scope .scope-panel .m-b-lg {
	margin-bottom: 20px !important;
}

.app-public-access-signin .container.m-t-sm,
.app-public-access-forgot .container.m-t-sm,
.app-public-access-signup .container.m-t-sm,
.app-public-access-recover .container.m-t-sm,
.app-public-access-thanks .container.m-t-sm,
.app-public-access-scope .container.m-t-sm {
	background-color: #ffffff;
	margin-top: -1px;
	padding: 0px 20px 20px 20px !important;
  border-radius: 0px 0px 3px 3px;
	margin-bottom: 0px;
}

.app-private-instructors-session h2 {
	color: #fff;
}

#landing-page .back-button:hover {
	padding-top: 5px !important;
	padding-bottom: 3px !important;
	padding-left: 7px !important;
}

footer#site-footer {
	height: auto !important;
  background-color: #009ca6;
  padding-bottom: 14px;
  border-top: none;
  font-weight: 300;
  color: #ffffff;
}

#site-footer .footer-top {
  background-image: url(/content/assets/footer_plus.svg);
  background-size: auto 40%;
  background-position: bottom 20px right 20px;
  background-repeat: no-repeat;
  background-color: #009ca6 !important;
}

/* cpd overrides */
.app-private-cpd-plan .multi-select-dropdown-toggle {
	font-size: 12px;
	color: #555 !important;
}

.app-private-catalogue-task .tabs div.active,
.app-private-catalogue-task .filters div.active {
  background-color: #d62598;
}

@media (max-width: 768px) {
	.navbar-brand img{
	  top: 24px;
	}

	.app-public-access-signin #app,
	.app-public-access-forgot #app,
	.app-public-access-signup #app,
	.app-public-access-recover #app,
	.app-public-access-thanks #app,
	.app-public-access-scope #app	{
		width: 100%;
		margin-left: 0px;
		margin-right: 0px;
	}

	.app-public-access-signin .signin-panel,
	.app-public-access-forgot .forgot-panel,
	.app-public-access-signup .signup-panel,
	.app-public-access-recover .recover-panel,
	.app-public-access-thanks .thanks-panel,
	.app-public-access-scope .scope-panel {
		width: 100%;
	}

	.app-public-access-signin .signin-panel .brand img,
	.app-public-access-forgot .forgot-panel .brand img,
	.app-public-access-signup .signup-panel .brand img,
	.app-public-access-recover .recover-panel .brand img,
	.app-public-access-thanks .thanks-panel .brand img,
	.app-public-access-scope .scope-panel .brand img {
		max-width: 320px !important;
	}

	.support-link a.ng-scope {
		padding: 0px !important;
	}

	.header-img {
		margin-right: 0px;
	}

	.section-header h1::before {
		content:"\a";
		white-space: pre;
	}

	.section-header h1 {
		line-height: 1.5em;
	}
}

@media (max-width: 450px) {
  #site-footer .footer-top {
    background-image: none !important;
  }
}

/* dashboard migration styles */

.app-public-access-signin,
.app-public-access-forgot,
.app-public-access-signup,
.app-public-access-recover,
.app-public-access-thanks,
.app-public-access-scope,
.app-public-access-verify {
  background-image: url(/content/assets/login-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
	overflow: hidden;
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

.app-private-dashboard .banner-item {
	height: 320px !important;
}
 
 .app-private-dashboard .banner-text {
	line-height: 1.1em !important;
	color: #009ca6 !important;
	padding-left: 150px;
	left: 0;
	position: absolute;
	max-width: 700px;
 }

 .app-private-dashboard .banner-text h2:before {
	content: "{ ";
	font-weight: normal;
	font-size: 46px;
	color: #d62598;
	left: -40px;
	top: 0;
 }

 .app-private-dashboard .banner-text h2 {
	padding-bottom: 0px;
	margin-bottom: 0px;
 }

 .app-private-dashboard .banner-text div {
	position: relative;
	padding-left: 30px;
 }
 
 .app-private-dashboard .banner-container .banner-item:after {
	content: "}";
	text-align: left;
	padding-left: 10px;
	font-weight: normal;
	font-size: 34px;
	height: 50px;
	width: 50px;
	color: #ffffff;
	background-color: #d62598;
	display: block;
	position: absolute;
	vertical-align: center;
	bottom: 10px;
	right: 10px;
 }

 .app-private-dashboard a {
	text-decoration: none;
	text-decoration-line: none;
 }

 .app-private-dashboard .default-tile.panel h2 {
	font-size: 26px !important;
	font-weight: 500;
	margin-bottom: 20px;
 }

 .app-private-dashboard .default-tile.panel p {
	font-size: 1.2em;
	font-weight: 300;
 }

 .app-private-dashboard .default-tile .panel-view-divider {
	background: #d62598;
  }

 @media (max-width: 768px) {
  .app-private-dashboard .banner-text {
    margin-left: 16px;
    margin-right: 60px;
		padding-left: 10px;
  }
}