@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*****************************************************************************/
/*****************************************************************************/
/************** start legacy app.css *****************************************/
/* -- Primary action colour -- */
a {
  color: #ff5000;
  text-decoration: none;
  cursor: pointer;
}
a:hover,
a:focus {
  color: #ff9666;
  text-decoration: none;
}

.btn {
  border-radius: 0px !important;
  text-decoration: none !important;
}

.btn-primary {
  color: #fff !important;
  background-color: #ff5000;
  border-color: #ff5000;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  color: #fff !important;
  background-color: #ff9666 !important;
  border-color: #ff9666 !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,
.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info {
  background-color: #ff5000 !important;
  border-color: #ff5000 !important;
}

.btn-info,
.btn-success {
  color: #fff !important;
  background-color: #ff5000;
  border-color: #ff5000;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-primary,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-primary  {
  color: #fff !important;
  background-color: #ff9666 !important;
  border-color: #ff9666 !important;
}

.btn-rounded {
  border-radius: 50px !important;
}

.bg-primary {
  background-color: #ff5000;
  color: #ffffff;
}
.bg-primary a {
  color: #ffffff;
}
.bg-primary a:hover {
  color: #fff;
}

.bg-white a {
  color: #ff5000;
}
.bg-white a:hover {
  color: #ff5000;
}

a.bg-light:hover {
  color: #ff5000;
}
a.bg-primary:hover {
  background-color: #ff9966;
}
a.text-primary:hover {
  color: #ff9666;
}
.text-primary {
  color: #ff5000;
}

.bg-primary.dker,
.bg-primary .dker{
	background-color: #b33900; /* plus 15% */
}

.bg-primary.lter,
.bg-primary .lter{
	background-color: #ff9666;
}

.stroke-primary {
	stroke: #ff5000;
}

.stroke-primary.dker,
.stroke-primary .dker {
	stroke: #b33900; /* plus 15% */
}

.stroke-primary.lter,
.stroke-primary .lter {
	stroke: #ff9666;
}

.fill-primary {
	fill: #ff5000; 
}

.fill-primary.dker,
.fill-primary .dker {
	fill: #cc2200; /* plus 15% */
}

.fill-primary.lter,
.fill-primary .lter {
	fill: #ff9666;
}

.rounded {
  border-radius: 500px !important;
}

/* -- Header bar colour -- */

.navbar {
  background-color: #ff5000;
}
  
.navbar .nav > li:hover > a,
.navbar .nav > li.active > a,
.navbar-toggle:hover,
.navbar-toggle.active {
  color: #ffffff;
  background-color: transparent;
  text-decoration: underline;
}

.navbar .nav > li > a,
.navbar .nav > li:focus > a,
.navbar-toggle,
.navbar-toggle:focus {
  color: #ffffff;
  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: #ffffff;
}

.navbar-toggle:hover .fa {
  color: ffffff;
  background-color: transparent;
}

.navbar support-link,
.navbar support-link > a {
  color: #ffffff;
  text-decoration: none;
}

.navbar .nav > li > a {
  color: #ffffff;
  text-decoration: none;
}

.navbar .nav > li > a:hover,
.navbar support-link a:hover,
.navbar a:hover support-link a {
  color: ffffff !important;
  text-decoration: underline;
  background-color: transparent;
}
  
.dropdown-toggle:hover {
  color: ffffff !important;
  background-color: transparent !important;
  text-decoration: none !important;
}

.dropdown-toggle,
.dropdown-toggle:visited,
.dropdown-toggle:focus,
.dropdown-toggle.active {
  background-color: transparent !important;
  text-decoration: none !important;
}

/* -- Dropdown menu link colour -- */

.dropdown-menu {
	background-color: #ffffff;
  font-size: 12px;
}

.dropdown-menu > li > a {
	color: #ff5000 !important;
  background-color: transparent !important;
  text-decoration: 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: #ff9666 !important;
}
 
/* -- Landing page -- */

#landing-page .row.bg-primary {
	background-color: #e7edf2 !important;
}

#landing-page .row.bg-primary h1 {
	color: #333333 !important;
}

.timeline .btn-info,
.timeline .btn-info:hover,
.timeline .btn-info:active {
	background-color: #ffffff !important;
	border: 1px solid #dee0e5 !important;
	color: #000000 !important;
	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;
}

/* -- Calendar -- */

.app-private-catalogue-calendar .fc-header-title h2 {
	color: #3c484b !important;
  background-color: transparent !important;
  padding: 0px !important;
}

/* -- Achievements -- */

.app-private-account-achievements #app > .ng-scope > .ng-scope > .ng-scope > .ng-scope {
  text-align: center;
}

.app-private-account-achievements #statusFilter {
  display: none;
}

#gamification {
  text-align: left !important;
}

.bg-info {
  background-color: #ff5000;
}

.bg-info .dk,
.bg-info.dk {
  background-color: #ff9666;
}

.bg-info .text-muted {
  color: #ffffff !important;
}

/* -- Content catalogue -- */

.app-private-catalogue-index #categoryFilterOptions li a {
    white-space: normal !important;
    padding-left: 33px !important;
}

.app-private-catalogue-index #categoryFilterOptions #all-categoriesFilter a {
    padding-left: 15px !important;
}

.app-private-catalogue-index #categoryFilterOptions li a .fa.fa-fw {
    display: none;
}

.app-private-catalogue-index #categoryFilterOptions li a .fa.fa-fw.fa-check {
    display: inline-block;
}

.b-success {
  border-color: #ff5000;
}

.text-success {
  color: #ff5000;
}

/* -- CPD -- */

.app-private-cpd-list #action_export {
  background-color: #ff5000 !important;
  border-color: #ff5000 !important;
}

.app-private-cpd-list #action_export:hover,
.app-private-cpd-list #action_export:focus,
.app-private-cpd-list #action_export:active,
.app-private-cpd-list #action_export.active {
  background-color: #ff9666 !important;
  border-color: #ff9666 !important;
}

.app-private-cpd-item .control-label {
  font-weight: 600;
  color: #ff5000;
}

/* -- Team dashboard -- */
.app-private-team-dashboard .label-aditional-info {
  color: #ff5000 !important;
  fill: #ff5000 !important;
}

.app-private-team-dashboard h2,
.app-private-team-member h2,
.app-private-team-dashboard .label-title,
.app-private-team-member text.grey {
  color: #ff5000 !important;
  fill: #ff5000 !important;
  background-color: transparent !important;
  padding: 0px !important;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
}

.graph line,
.grid line,
.x-grid,
.tear,
#def-tear {
  stroke: #ff5000 !important;
}

.app-private-team-dashboard .team-members a {
  text-decoration: none;
}

.app-private-team-dashboard .team-members .active-user {
  color: #ff5000 !important;
}

.app-private-team-dashboard .team-members .active-user:hover {
  color: #ff9666;
  text-decoration: none;
}

.app-private-team-member .panel .blue-text {
  color: #000000;
}

.text-muted {
  color: #4c5056 !important;
}

.app-private-team-member .light-blue {
  background-color: #ff9666 !important;
}

.app-private-team-member .blue {
  background-color: #ff7333 !important;
}

.app-private-team-member .dark-blue {
  background-color: #ff5000 !important;
}

.app-private-team-member circle.light-blue {
  stroke: #ff9666 !important;
}

.app-private-team-member circle.blue {
  stroke: #ff7333 !important;
}

.app-private-team-member circle.dark-blue {
  stroke: #ff5000 !important;
}

/* -- Footer -- */

#site-footer {
  color: #ffffff;
  background-color: #ff5000;
  border-top: 0px;
  height: auto !important;
  padding-bottom: 10px;
}

@media (max-width: 640px) {
  .app-private-catalogue-index .col-sm-12 .form-group .text-right {
    max-width: 210px !important;
  }
  
  .app-private-catalogue-index #categoryFilterOptions {
    max-width: 290px !important;
  }
}
/**************** end legacy app.css *****************************************/
/*****************************************************************************/
/*****************************************************************************/
/* Custom fonts */

/* Page overides */
html {
	background-color: #ffffff;
}

body {
  color: #4c5056;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  margin-bottom: 70px;
}

h1, .h1,
h2, .h2,
h3, .h3 {
  color: #ff5000;
  font-weight: 700;
}

h4, .h4 {
  font-weight: 700;
}

.navbar-header {
  width: inherit;
}

.navbar-nav {
  display: none;
}

.navbar-collapse .navbar-right {
  display: block;
}

/* Page specific overides */

  
/* sign-in */


.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:#4c5056;
}

.app-public-access-signin,
.app-public-access-forgot
.app-public-access-signup,
.app-public-access-recover,
.app-public-access-thanks,
.app-public-access-scope {
  background-image: url(/content/assets/login-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

.app-public-access-signin .signin-panel .control-label,
.app-public-access-forgot .forgot-panel .control-label,
.app-public-access-signup .signup-panel .control-label,
.app-public-access-recover .recover-panel .control-label,
.app-public-access-thanks .thanks-panel .control-label,
.app-public-access-scope .scope-panel .control-label {
  font-weight: 700 !important;
}

.app-public-access-signin,
.app-public-access-forgot,
.app-public-access-signup,
.app-public-access-recover,
.app-public-access-thanks,
.app-public-access-scope {
  background-color: #ff5000;
 }

.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,
.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 {
  padding: 30px;
}

.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 {
  background-color: #ffffff;
  display: table; /*required to avoid display bug in Chrome*/
  margin-top: 0px;
  margin-bottom: 0px;
}

.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 {
  position: relative;
  top: 40px;
}

.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,
.app-public-access-signin .container.m-t-sm a,
.app-public-access-forgot .container.m-t-sm a,
.app-public-access-signup .container.m-t-sm a,
.app-public-access-recover .container.m-t-sm a,
.app-public-access-thanks .container.m-t-sm a,
.app-public-access-scope .container.m-t-sm a  {
  color: #ff5000;
}

.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,
.app-public-access-signin .container.m-t-sm a:hover,
.app-public-access-forgot .container.m-t-sm a:hover,
.app-public-access-signup .container.m-t-sm a:hover,
.app-public-access-recover .container.m-t-sm a:hover,
.app-public-access-thanks .container.m-t-sm a:hover,
.app-public-access-scope .container.m-t-sm a:hover {
  color: #ff9666 !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: 100%;
  max-width: 320px;
  height: auto !important;
  margin-top: 0px;
  padding: 10px 10px 20px 10px;
}

.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 .signin-panel .btn-primary,
.app-public-access-forgot .forgot-panel .btn-primary,
.app-public-access-signup .signup-panel .btn-primary,
.app-public-access-recover .recover-panel .btn-primary,
.app-public-access-thanks .thanks-panel .btn-primary,
.app-public-access-thanks .thanks-panel .btn-default,
.app-public-access-scope .scope-panel .btn-primary {
  color: #ffffff !important;
  background-color: #ff5000;
  border-color: #ff5000;
}
.app-public-access-signin .signin-panel .btn-primary:hover,
.app-public-access-signin .signin-panel .btn-primary:focus,
.app-public-access-signin .signin-panel .btn-primary:active,
.app-public-access-signin .signin-panel .btn-primary.active,
.app-public-access-forgot .forgot-panel .btn-primary:hover,
.app-public-access-forgot .forgot-panel .btn-primary:focus,
.app-public-access-forgot .forgot-panel .btn-primary:active,
.app-public-access-forgot .forgot-panel .btn-primary.active,
.app-public-access-signup .signup-panel .btn-primary:hover,
.app-public-access-signup .signup-panel .btn-primary:focus,
.app-public-access-signup .signup-panel .btn-primary:active,
.app-public-access-signup .signup-panel .btn-primary.active,
.app-public-access-recover .recover-panel .btn-primary:hover,
.app-public-access-recover .recover-panel .btn-primary:focus,
.app-public-access-recover .recover-panel .btn-primary:active,
.app-public-access-recover .recover-panel .btn-primary.active,
.app-public-access-thanks .thanks-panel .btn-primary:hover,
.app-public-access-thanks .thanks-panel .btn-primary:focus,
.app-public-access-thanks .thanks-panel .btn-primary:active,
.app-public-access-thanks .thanks-panel .btn-primary.active,
.app-public-access-thanks .thanks-panel .btn-default:hover,
.app-public-access-thanks .thanks-panel .btn-default:focus,
.app-public-access-thanks .thanks-panel .btn-default:active,
.app-public-access-thanks .thanks-panel .btn-default.active,
.app-public-access-scope .scope-panel .btn-primary:hover,
.app-public-access-scope .scope-panel .btn-primary:focus,
.app-public-access-scope .scope-panel .btn-primary:active,
.app-public-access-scope .scope-panel .btn-primary.active {
  color: #ffffff !important;
  background-color: #ff9666;
  border-color: #ff9666;
}

.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: 0px;
  padding: 0px 20px 20px 20px !important;
  margin-bottom: 0px;
  background-size: 100% 6px;
  background-repeat: no-repeat;
}

@media (max-width: 991px) {
  body {
    margin-bottom: 90px !important;
  }
}

@media (max-width: 767px) {  
  .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% !important;
	}
}

/* dashboard migration styles */

.app-private-dashboard .banner-text {
	width: 80% !important;
	max-width: 500px !important;
	padding-bottom: 0px !important;
}


.app-private-dashboard .banner-text h2 {
	font-weight: normal;
	line-height: 1.1em !important;
  text-shadow: none !important;
	margin-bottom: 0px !important;
}

.app-private-dashboard .banner-text p {
  margin-top: 10px;
  margin-bottom: 0px;
  font-weight: normal;
  margin-bottom: 20px;
}