@import url('https://fonts.googleapis.com/css?family=Lato');

/*****************************************************************************/
/*****************************************************************************/
/************** start legacy app.css *****************************************/
/* -- Primary action colour -- */
a {
  color: #f26522;
  text-decoration: none;
  cursor: pointer;
}

a:hover,
a:focus {
  color: #d54d0d;
}

.btn {
  font-weight: bold;
}

.btn-primary,
.app-private-catalogue-landingpage .btn-success {
  color: #fff !important;
  background-color: #f26522;
  border-color: #f26522;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary,
.app-private-catalogue-landingpage .btn-success:hover,
.app-private-catalogue-landingpage .btn-success:focus,
.app-private-catalogue-landingpage .btn-success:active,
.app-private-catalogue-landingpage .btn-success.active {
  color: #fff !important;
  background-color: #d54d0d;
  border-color: #d54d0d;
}

.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 {
  background-color: #f26522;
  border-color: #f26522;
}

.bg-primary {
  background-color: #f26522;
  color: #f4f3f9;
}

.bg-primary a {
  color: #ffffff;
}

.bg-primary a:hover {
  color: #fff;
}

.bg-white a {
  color: #f26522;
}

.bg-white a:hover {
  color: #d54d0d;
}

.bg-dark {
  background-color: #f26522;
}

a.bg-light:hover {
  color: #d54d0d;
}

a.bg-primary:hover {
  background-color: #f26522;
}

a.text-primary:hover {
  color: #f26522;
}

.text-primary {
  color: #f26522;
}

.bg-primary.dker,
.bg-primary .dker {
  background-color: #d54d0d;
}

.bg-primary.lter,
.bg-primary .lter {
  background-color: #f58956;
}

.stroke-primary {
  stroke: #f26522;
}

.stroke-primary.dker,
.stroke-primary .dker {
  stroke: #d54d0d;
}

.stroke-primary.lter,
.stroke-primary .lter {
  stroke: #f58956;
}

.fill-primary {
  fill: #f26522;
}

.fill-primary.dker,
.fill-primary .dker {
  fill: #d54d0d;
}

.fill-primary.lter,
.fill-primary .lter {
  fill: #f58956;
}

/* -- Header bar colour -- */

.navbar .nav>li:hover>a,
.navbar .nav>li:focus>a,
.navbar .nav>li.active>a {
  color: #f26522;
}

.navbar .nav>li>a {
  color: #e4e7e8 !important;
  padding: 25px 9px 25px 9px;
  font-size: 14px;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

.navbar support-link,
.navbar support-link>a {
  color: #e4e7e8 !important;
  padding: 0px !important;
  margin: 0px !important;
  text-decoration: none !important;
}

.navbar support-link>a>span>div {
  padding: 25px 15px 25px 15px !important;
}

.navbar .nav>li>a:hover,
.navbar .nav>li>a:focus,
.navbar support-link a:hover,
.navbar support-link a:focus {
  color: #f26522 !important;
  background-color: transparent;
}

.navbar .nav .open>a {
  background-color: transparent;
  color: #e4e7e8;
}

/* -- Dropdown menu link colour -- */

.dropdown-toggle {
  padding-right: 15px !important;
}

.dropdown-menu,
.dropdown-menu .wrapper {
  background-color: #2c2c2c !important;

}

.dropdown-menu .wrapper strong {
  color: #e4e7e8;
}


.dropdown-menu .wrapper small {
  color: #e4e7e8;
  opacity: 0.4;
}

.dropdown-menu .wrapper {
  border-bottom: 1px solid #808080;
}

.dropdown-menu .divider {
  background-color: #808080;
}

.dropdown-menu>li>a {
  font-size: 14px;
  color: #e4e7e8 !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: #f26522 !important;
}

/* carousel */
.carousel {}

.carousel h2 {}

.carousel-control {
  width: 10%;
}

.banner {
  background-color: #575756 !important;
  text-align: center;
  background-position: 50% 0%;
  background-repeat: no-repeat;

}

.banner .container-fluid {
  padding: 0px;
  height: 300px;
}

.banner .row {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  /*IE*/
  -moz-transform: translateY(-50%);
  /*Firefox*/
  -webkit-transform: translateY(-50%);
  /*Chrome, Safari, Opera*/
}

.banner .col-xs-push-1 {
  padding: 20px 20px 20px 10px !important;
  left: 0px;
  width: 92%;
  display: inline-block !important;
  float: none;
  margin-bottom: 20px;
}

.carousel-indicators {
  margin-bottom: 0px;
  bottom: 10px !important;
}

.banner-text {
  padding: 25px;
}

@media (min-width: 1194px) {
  .banner .col-xs-push-1 {
    max-width: 1094px;
    float: none !important;
  }

  .banner .row {
    margin: auto !important;
  }
}


/* dashboard */

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 0px !important;
  margin-bottom: 0px !important;
}

.row.display-flex .col-lg-3 {
  padding: 8px;
  margin-bottom: 0px !important;
}

.dashpan {
  border-radius: 0px !important;
  border: 0px none transparent !important;
  padding-top: 120px !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
  padding-bottom: 0px !important;
  margin-bottom: 0px !important;
  box-shadow: none !important;
  background-color: #ffffff;
  height: 100% !important;
  cursor: pointer;

}

.dashpan .h3 {
  padding: 10px;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.8);
  margin-top: auto !important;
}

.dashpan:hover .h3 {
  color: #d54d0d;
}

.timeline .btn-info,
.timeline .btn-info:hover,
.timeline .btn-info:active {
  background-color: #ffffff !important;
  border: 1px solid #dee0e5 !important;
  color: #414042 !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;
}

.navbar .badge {
  background-color: #f26522 !important;
  position: relative;
  top: -3px;
  font-size: 14px;
  line-height: 10px;
  text-shadow: none;
}

.dropdown-toggle .img-circle {
  position: relative;
  top: -3px;
}

@media (max-width: 1170px) {
  .banner {
    background-image: none;
  }
}

@media (max-width: 767px) {
  .navbar-right {
    height: auto !important;
  }

  .navbar .nav>li>a {
    height: 50px !important;
    padding: 15px 15px !important;
  }

  .navbar support-link a span div {
    padding: 0px !important;
  }

  .dropdown-toggle .img-circle {
    margin-top: 5px;
  }

  .dashpan {
    padding-top: 140px !important;
  }
}

/**************** end legacy app.css *****************************************/
/*****************************************************************************/
/*****************************************************************************/
/* Page overides */

html {
  background-color: #ebeced;
}

body {
  color: #414042;
  font-family: "Lato", sans-serif !important;
  font-size: 13px;
  margin-bottom: 130px !important;
}

h1,
.h1,
h2,
.h2 {
  color: #414042;
  font-weight: bold;
}

h3,
.h3,
h4,
.h4 {
  color: #414042;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
.banner-title {
  font-family: "Lato", sans-serif !important;
}

h1,
.h1 {
  font-size: 38px;
}

.btn {
  font-size: 13px;
}

.navbar {
  background-color: #2c2c2c;
  background-image: url(/content/assets/bg.png);
}

.navbar-header {
  height: 70px;
}

.navbar-right {}

.navbar-collapse .navbar-right {
  display: block;
}


.navbar-nav a,
.navbar-right a {
  background-color: transparent !important;
  font-family: "Lato" !important;
}

.navbar-toggle {
  border: 0px none transparent;
  border-radius: 0px;
  margin: 0px !important;
  padding: 25px 25px !important;
  color: #e4e7e8 !important;
}

.navbar-toggle:hover,
.navbar-toggle:focus,
.navbar-toggle.active {
  color: #f26522 !important;
  background-repeat: repeat-x !important;
  background-position: 0% 100% !important;
}

.navbar-header {
  width: inherit;
}


.navbar-brand img {
  height: 45px;
  width: auto;
  margin-top: 13px;
  max-height: 45px;
  font-size: 14px;
}

/* Page specific overides */

#gamification .panel-heading,
#gamification .panel-footer {
  background-color: #f26522 !important;
  color: #ffffff;
}

#gamification .col-xs-4 .h3,
#gamification .col-xs-4 .text-muted {
  color: #ffffff !important;
}

#gamification .dk {
  background-color: #163656;
}


.img-small {
  display: block;
}

.img-large {
  display: none;
}

/* sign-in */
.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,
.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.png);
  background-repeat: no-repeat;
  background-position: 50% 0%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.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 .signin-panel {
  background-color: #ffffff;
  display: table !important;
  /*required to avoid display bug in Chrome*/
  margin-top: 0px;
  margin-bottom: 0px;
  width: 100%;
}

.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 !important;
  /*required to avoid display bug in Chrome*/
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 30px 30px 15px 30px;
  width: 100%;
}

.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 {
  background-image: url(/content/assets/bg.png);
  position: absolute;
  top: 50% !important;
  left: 50% !important;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  min-width: 400px;
}

.app-public-access-signin .signin-panel .text-white,
.app-public-access-forgot .forgot-panel .text-white,
.app-public-access-signup .signup-panel .text-white,
.app-public-access-recover .recover-panel .text-white,
.app-public-access-thanks .thanks-panel .text-white,
.app-public-access-scope .scope-panel .text-white {
  color: #555555;
}

.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: #f26522 !important;
}

.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: #d54d0d !important;
}

.app-public-access-signin .signin-panel button,
.app-public-access-forgot .forgot-panel button,
.app-public-access-signup .signup-panel button,
.app-public-access-recover .recover-panel button,
.app-public-access-thanks .thanks-panel button,
.app-public-access-scope .scope-panel button {
  margin-left: auto;
  margin-right: auto;
}

.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-thanks .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 {
  max-width: 320px;
  width: 100%;
  margin-bottom: 20px;
}

.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 .m-t-sm,
.app-public-access-forgot .m-t-sm,
.app-public-access-signup .m-t-sm,
.app-public-access-recover .m-t-sm,
.app-public-access-thanks .m-t-sm,
.app-public-access-scope .m-t-sm {
  background-color: #ffffff;
  margin-top: -1px;
  padding: 0px 20px 15px 20px;
  margin-bottom: 0px;
  width: 100%;
}

.app-private-dashboard {
  background-image: url(/content/assets/bg.png);
}

.app-private-catalogue-landingpage h4:nth-child(1) {
  display: none;
}

.tile-link:focus img,
.tile:hover img {
  opacity: 1 !important;
}

.tile-link:focus,
.tile:hover {
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8) !important;
  -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8) !important;
}

.tile-link,
.tile {
  border: 0px transparent none !important;
  transition: box-shadow 0.5s ease;
  transition: -webkit-box-shadow 0.5s ease;
}

.tile-link .tile-body .ng-scope .m-b-xs:nth-child(3) p {
  text-transform: uppercase;
  color: #630460 !important;
  opacity: 0.6;
  font-weight: bold;
}

.tile-title {
  color: #555555 !important;
  text-decoration: none !important;
}

.tile-body {
  color: #555555 !important;
}

.tile-link {
  text-decoration: none !important;
}

.tile-link:hover .tile-title {
  text-decoration: none !important;
}

.tile-head .bg-primary {
  background-color: #ffffff !important;
}

footer#site-footer {
  color: #e4e7e8;
  background-color: #2c2c2c;
  height: auto !important;
  padding-bottom: 15px;
  font-size: 14px;
}

#site-footer .row {
  margin-bottom: 0px;
  padding-bottom: 0px;
}

#site-footer a {
  color: #e4e7e8;
  opacity: 0.4;
}

#site-footer .footer-link {
  width: 250px !important;
  margin: auto !important;
}

#site-footer a:hover,
#site-footer a:focus {
  color: #e4e7e8;
  opacity: 0.8;
}

#site-footer .copyright:after {
  white-space: pre;
  content: " | ";
}

.app-private-dashboard .col-lg-3,
#site-footer .col-lg-3 {
  height: auto !important;
}

#site-footer .poweredby-link::before {
  content: " ";
}

.dropdown-toggle .img-circle {
  font-size: 12px;
}

.app-private-instructors-session .bg-primary h2 {
  color: #fff;
}

#landing-page .row.bg-primary {
  background-color: #d20f0a;
  background-size: cover;
  background-image: url(/content/assets/banner-bg.png);
  background-position: 50% 26%;
}

#landing-page .row.bg-primary h1,
#landing-page .row.bg-primary .h1,
#landing-page .row.bg-primary h2,
#landing-page .row.bg-primary .h2,
#landing-page .row.bg-primary h3,
#landing-page .row.bg-primary .h3,
#landing-page .row.bg-primary h4,
#landing-page .row.bg-primary .h4,
#landing-page .row.bg-primary h5,
#landing-page .row.bg-primary .h5,
#landing-page .row.bg-primary h6,
#landing-page .row.bg-primary .h6 {
  color: #ffffff;
  text-shadow: rgb(0, 0, 0) 0px 0px 5px;
}

.banner .banner-logo {
  display: inline-block;
  width: 240px;
  height: 143px;
  background-image: url(/content/assets/banner-logo.png);
  background-repeat: no-repeat !important;
}

.banner .col-xs-push-1 {
  margin-bottom: 0px !important;
}

.banner .banner-bg {
  background-size: cover;
  background-color: #d20f0a;
}

.app-private-dashboard #banner-item-2 {
  background-size: 70%;
}

.app-private-cpd-list .modal-dialog {
  width: 680px;
}

@media (max-width: 1920px) {

  #landing-page .row.bg-primary,
  .banner .banner-bg {
    background-size: 1920px auto;
  }
}

@media (min-width: 1200px) {
  .app-private-dashboard .container-widgets {
      width: 1200px;
  }
}

@media (max-width: 1199px) {
  body {
    margin-bottom: 170px !important;
  }
}

@media (max-width: 767px) {
  .app-private-cpd-list .modal-dialog {
    width: auto;
  }

  .img-small {
    display: none;
  }

  .img-large {
    display: block;
  }

  .app-private-dashboard .row {
    margin-bottom: 0px;
    padding-bottom: 0px;
  }

  .navbar .nav .img-circle {
    box-shadow: none !important;
  }

  .navbar-header {
    margin-bottom: -1px;
  }

  .navbar-collapse {
    margin-top: -1px;
    width: 100%;
  }

  .collapsing {
    border-top: 0px;
  }

  .navbar-collapse.in {
    overflow-y: initial;
  }

  #site-footer .row .col-sm-6 {
    text-align: center !important;
  }

  .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;
    min-width: 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%;
  }

  .navbar .badge {
    top: 0px;
  }

  .dropdown-toggle .img-circle {
    top: 0px;
  }

  #site-footer .copyright:after {
    white-space: pre;
    content: "\a";
  }

  body {
    margin-bottom: 270px !important;
  }

  .app-private-dashboard .banner-container {
    display: none;
  }
  
  .app-private-dashboard .container-widgets .widget {
    grid-column: span 12;
    grid-row: span 1;
  }

  .app-private-dashboard .container-widgets .widget .default-tile {
    height: 250px;
  }
}

@media (max-width: 504px) {
  .app-public-access-signin .copyright::before {
    white-space: pre;
    content: "\a";
  }
}

@media (max-width: 320px) {
  .app-private-cpd-list .modal-dialog .col-xs-12 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .uib-datepicker .btn {
    border-radius: 0;
    font-size: 10px;
  }
}