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

.btn {
    border-radius: 3px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
}

.btn-primary {
    color: #fff !important;
    background-color: #374ea2;
    border-color: #374ea2;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
    color: #fff !important;
    background-color: #1b75bc;
    border-color: #1b75bc;
}
.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: #374ea2;
    border-color: #374ea2;
}

.bg-primary {
    background-color: #374ea2;
    color: #f4f3f9;
}
.bg-primary a {
    color: #ffffff;
}
.bg-primary a:hover {
    color: #fff;
}

.bg-white a {
    color: #374ea2;
}
.bg-white a:hover {
    color: #1b75bc;
}

.bg-dark {
    background-color: #374ea2;
}

a.bg-light:hover {
    color: #374ea2;
}
a.bg-primary:hover {
    background-color: #1b75bc;
}
a.text-primary:hover {
    color: #1b75bc;
}
.text-primary {
    color: #374ea2;
}

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

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

.stroke-primary {
    stroke: #374ea2;
}

.stroke-primary.dker,
.stroke-primary .dker {
    stroke: #273772; /* plus 10% */
}

.stroke-primary.lter,
.stroke-primary .lter {
    stroke: #1b75bc;
}

.fill-primary {
    fill: #374ea2;
}

.fill-primary.dker,
.fill-primary .dker {
    fill: #273772; /* plus 10% */
}

.fill-primary.lter,
.fill-primary .lter {
    fill: #1b75bc;
}

.rounded {
    border-radius: 500px;
}

/* -- Header bar colour -- */

.navbar > .nav > li:hover a,
.navbar > .nav > li:focus a,
.navbar > .nav > li.active a {
    color: #1b75bc !important;
}
.navbar .nav li a {
    color: #374ea2;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
}
.navbar .nav li a:hover,
.navbar .nav li a:focus {
    background-color: transparent;
    color: #1b75bc;
}
.navbar .nav .open a {
    background-color: transparent;
    color: #1b75bc;
}

.navbar support-link,
.navbar support-link > a {
    padding: 0px !important;
    margin: 0px !important;
    text-decoration: none !important;
}

.navbar support-link > a > span > div {
    padding: 15px 10px 15px 10px !important;
}

.navbar .badge {
    background-color: #1b75bc;
}

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

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

.dropdown-menu .m-b-sm {
    border: none transparent 0px;
    background-color: #ffffff;
}

.dropdown-menu > li > a {
    color: #374ea2 !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: #1b75bc !important;
}

/* carousel */
.carousel-control {
    width: 10%;
}

.carousel,
.banner {
    background-color: #ffffff !important;
}

.banner .carousel-slide .container-fluid {
    margin-left: auto;
    margin-right: auto;
}

.banner .slide-1 {
    background-image: url(/content/assets/banner_BG-1.jpg);
    background-position: 50% 30%;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

.banner .col-xs-push-1 {
    width: 100%;
    max-width: 50.06vw !important;
    margin-left: 0px;
    margin-right: 0px;
    left: 0px;
    right: 0px;
    padding: 0px 20px;
    float: right;
}

.banner .container-fluid {
    height: 240px;
}

.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 .brand {
    width: 100%;
    height: 96px;
    background-image: url(/content/assets/banner_banner-logo.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
}

.carousel-inner .item {
    transition-property: opacity !important;
}

.carousel-inner .item,
.carousel-inner .active.left,
.carousel-inner .active.right {
    opacity: 0;
}

.carousel-inner .active,
.carousel-inner .next.left,
.carousel-inner .prev.right {
    opacity: 1;
}

.carousel-inner .next,
.carousel-inner .prev,
.carousel-inner .active.left,
.carousel-inner .active.right {
    left: 0 !important;
    transform: translate3d(0, 0, 0) !important;
}

.carousel,
.carousel-inner,
.carousel-inner .item {
    height: 100%;
}

.app-private-dashboard .row .col-sm-1,
.app-private-dashboard .row .col-sm-2 {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

@media (min-width: 1366px) {
    .banner .col-xs-push-1 {
        width: 1094px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .dashpan .h3 {
        font-size: 14px !important;
        font-weight: bold !important;
    }

    .dashpan .dashtxt {
        font-size: 12px !important;
    }
}
/* dashboard */

.dashpan {
    border-radius: 0px !important;
    border: 0px none transparent !important;
    padding: 0px;
    box-shadow: none !important;
    cursor: pointer;
    background-color: #ffffff;
    text-align: center;
}

.dashpan:hover .h3 {
    border-color: #1b75bc;
}

.dashpan .h3 {
    font-size: 23px;
    padding-bottom: 5px;
}

.dashtxt {
    font-size: 13.25px;
    margin-bottom: 0px !important;
}

.panel-img {
    background-size: cover;
}

.panel-text {
    position: relative;
    text-align: center;
}

.panel-text .h2 {
    font-weight: 300;
    color: #ffffff !important;
    font-size: 33px !important;
    padding-top: 10px;
}

.panel-text .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*/
    margin-left: 15px;
    margin-right: 15px;
    text-align: center;
}

.separator {
    width: 200px;
    height: 1px;
    background-color: white;
    display: inline-block;
}

.panel-teal {
    background-color: #2fb4c4;
    color: #ffffff;
}

.panel-cyan {
    background-color: #1b75bc;
    color: #ffffff;
}

.panel-blue {
    background-color: #374ea2;
    color: #ffffff;
}

.panel-shape {
    height: 300px;
}

.catalogue .col-sm-5 {
    float: right;
}

@media (max-width: 973px) {
    .banner .col-xs-push-1 {
        max-width: 39.06vw;
    }
}

@media (max-width: 880px) {
    .banner .col-xs-push-1 {
        max-width: 320px;
        margin-left: 0px;
    }
}

@media (max-width: 767px) {
    .navbar-right {
        height: auto !important;
    }
    .navbar-right li .navbar-link {
        height: 50px !important;
        padding: 15px 15px !important;
    }
    .dropdown-toggle .img-circle {
        margin-top: 5px;
    }

    .banner .carousel-slide .container-fluid {
        background-image: url(/content/assets/login-bg.jpg);
        background-repeat: no-repeat;
        background-position: 50% 50%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    .banner .col-xs-push-1 {
        max-width: none !important;
        margin-left: 0px;
        text-align: center;
    }

    .catalogue .col-sm-5 {
        float: none !important;
    }
}

.navbar-brand img {
    width: 120px !important;
    height: 140px;
    float: none;
}

.form-validation .form-control.ng-dirty.ng-valid,
.form-validation .form-control.ng-dirty.ng-valid:focus {
    border-color: #264477;
}

.postlogin {
    width: 100%;
    height: 35px;
    color: #ffffff;
    float: left;
    margin-top: 20px;
}

.postloginleft {
    width: 70%;
    float: left;
}

.postloginright {
    width: 30%;
    float: right;
}

.postloginsocial {
    width: 15px;
    height: 15px;
    margin-left: 10px;
    float: right;
}

.logindecal {
    width: 15px;
    height: 15px;
    float: left;
    margin-right: 5px;
}

.loginicon {
    margin-bottom: 3px;
}

.bdchover:hover {
    opacity: 0.8;
}
/**************** end legacy app.css *****************************************/
/*****************************************************************************/
/*****************************************************************************/
/* Custom fonts */

@font-face {
    font-family: "Avenir";
    src:
        url(/content/assets/Avenir-Roman.eot),
        url(/content/assets/Avenir-Roman.woff2),
        url(/content/assets/Avenir-Roman.woff);
    font-weight: normal;
}

@font-face {
    font-family: "Avenir";
    src:
        url(/content/assets/Avenir-Oblique.eot),
        url(/content/assets/Avenir-Oblique.woff2),
        url(/content/assets/Avenir-Oblique.woff);
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "Avenir";
    src:
        url(/content/assets/Avenir-Heavy.eot),
        url(/content/assets/Avenir-Heavy.woff2),
        url(/content/assets/Avenir-Heavy.woff);
    font-weight: bold;
}

@font-face {
    font-family: "Avenir";
    src:
        url(/content/assets/Avenir-HeavyOblique.eot),
        url(/content/assets/Avenir-HeavyOblique.woff2),
        url(/content/assets/Avenir-HeavyOblique.woff);
    font-weight: bold;
    font-style: italic;
}

/* Page overrides */

html {
    background-color: #ffffff;
}

body {
    color: #000000;
    font-family: "Avenir", sans-serif;
    font-size: 14px;
}

h1,
.h1,
h2,
.h2 {
    color: #374ea2;
    font-weight: bold;
}

#landing-page #title,
.app-private-instructors-session .bg-primary h2 {
    color: #ffffff !important;
}

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

h3,
.h3 {
    font-weight: bold !important;
    color: #374ea2 !important;
}

h4 {
    font-size: 16px;
}

.navbar {
    padding-bottom: 0px;
}

.panelcolour,
.navbar:after,
#footertop {
    background: #264477; /* Old browsers */
    background: -moz-linear-gradient(
        top,
        #264477 0%,
        #283a69 99%
    ); /* FF3.6-15 */
    background: -webkit-linear-gradient(
        top,
        #264477 0%,
        #283a69 99%
    ); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(
        to bottom,
        #264477 0%,
        #283a69 99%
    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#264477', endColorstr='#283a69',GradientType=0 ); /* IE6-9 */
}

.navbar-brand img {
    max-height: 50px;
}

.navbar:after,
#footertop {
    width: 100%;
    height: 6px;
}

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

.navbar-nav {
    display: none;
}

.navbar-nav a,
.navbar-right a,
#site-footer a {
    font-weight: bold;
    background-color: transparent !important;
}

.dropdown-menu a {
    font-weight: normal !important;
}

.navbar-header {
    width: inherit;
}

/* Page specific overides */

/* dashboard */

.section-header {
    text-align: center;
    color: #374ea2;
    width: 800px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
    cursor: pointer;
}

.section-header:hover {
    color: #10467d;
}

.section-header h1 {
    display: inline;
    vertical-align: middle;
    font-size: 56px;
    font-weight: bold;
}

.section-header p {
    font-size: 24px;
}

.header-img {
    display: inline-block;
    width: 350px;
    height: auto;
    margin-right: 20px;
}

#gamification .panel-heading,
#gamification .panel-footer {
    background-color: #374ea2;
    color: #ffffff;
}

#gamification .col-xs-4 .h3,
#gamification .col-xs-4 .text-muted {
    color: #ffffff !important;
}

#gamification .dk {
    background-color: #006b32;
}

/* catalogue */

.form-control {
    font-size: 12px;
    height: 34px;
}

/* sign-in */

.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: 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.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,
.app-public-access-verify .verify-panel {
    border-top: 3px solid #ea2d30;
    border-bottom: 3px solid #ea2d30;
}

.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,
.app-public-access-verify #app {
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.brand img {
    height: 140px;
}

.app-public-access-signin #username-label:before,
.app-public-access-signin #password-label:before {
    width: 15px;
    height: 15px;
    float: left;
    margin-right: 5px;
}

.app-public-access-signin #username-label:before {
    content: url("/content/assets/login-user.svg");
}

.app-public-access-signin #password-label:before {
    content: url("/content/assets/login-password.svg");
}

footer#site-footer {
    height: auto !important;
    padding-bottom: 15px;
    background-color: #ffffff;
    border: 0px none transparent;
}

#site-footer .container {
    width: 100%;
}

#site-footer .row {
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

#site-footer .copyright {
    text-align: left;
}

#site-footer .powered-by {
    text-align: center;
}

#site-footer .terms {
    text-align: right;
}

body {
    margin-bottom: 110px !important;
}

@media (max-width: 991px) {
    .section-header {
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
    }

    .section-header h1 {
        font-size: 48px;
        font-weight: bold;
    }

    .section-header p {
        font-size: 20px;
    }

    .header-img {
        width: 255px;
    }
}

@media (max-width: 767px) {
    .navbar-brand img {
        top: 24px;
    }

    .panel-text .panel-shape {
        height: 60px;
    }

    .panel-text .h2 {
        padding-top: 5px;
    }

    .panel-shape .row {
        height: 33px;
    }

    .panel-text .separator,
    .panel-text .dashtxt {
        display: none;
    }

    .panel-icon {
        float: left;
        height: 32px !important;
        width: 32px !important;
        margin: 1px 0 0 20px;
        overflow: visible;
        padding-left: 20px;
        margin-left: 20px !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: calc(100% - 40px);
        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;
    }

    .navbar {
        background-size: auto 56px;
    }

    .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;
    }

    #site-footer .copyright,
    #site-footer .terms {
        text-align: center !important;
    }

    body {
        margin-bottom: 80px !important;
    }
}

@media (max-width: 422px) {
    .section-header h1 {
        font-size: 32px;
    }

    .section-header p {
        font-size: 14px;
    }
}

@media (max-width: 325px) {
    .section-header h1::before {
        white-space: normal;
    }
}

.footersocial {
    width: 63px;
    margin: 10px auto;
    float: none;
}

.footersocialicon {
    width: 15px;
    height: 15px;
    float: right;
    margin: 0 3px 0 3px;
}

/* dashboard migration */

.app-private-dashboard .banner-container {
    margin-top: 0px;
}

.app-private-dashboard .banner-item {
    justify-content: right !important;
    height: 330px;
}

.app-private-dashboard .banner-text {
    width: 50%;
}

.app-private-dashboard #banner-item-1 {
    background-position: 50% 30%;
}

.app-private-dashboard .banner-item h2 {
    line-height: 1em !important;
    text-shadow: none !important;
    margin-bottom: 0px !important;
    font-style: italic;
    font-weight: 400;
}

.app-private-dashboard .banner-item p {
    margin-bottom: 20px;
    color: #ffffff;
    margin-top: 10px;
    font-weight: 700;
}

.app-private-dashboard .container-widgets {
    max-width: 100% !important;
    width: 100% !important;
    padding-right: 0px;
    padding-left: 0px;
    margin-right: 0px;
    margin-left: 0px;
}

.app-private-dashboard .dash-padder {
    padding: 0px 0px 0px 0px;
}

.app-private-dashboard .default-tile.panel {
    border: 0px !important;
    height: 300px !important;
}

.app-private-dashboard .component-tile-0 .panel-img-top {
    display: none;
}

.app-private-dashboard .component-tile-0 .tile-text {
    width: 100% !important;
    padding-top: 40px;
    padding-bottom: 45px;
}

.app-private-dashboard .component-tile-0 .tile-text::before {
    height: 0px !important;
    display: block !important;
}

.app-private-dashboard .component-tile-0 .default-tile.panel {
    height: auto !important;
    background: #fff !important;
    color: #374ea2 !important;
}

.app-private-dashboard .component-tile-0 .tile-text h2 {
    text-decoration: underline;
    text-underline-offset: 20px;
    text-transform: uppercase;
    text-decoration-color: #ea2d30;
    color: #374ea2 !important;
    font-size: 24px;
}

.app-private-dashboard .component-tile-1 .img-container-top > div,
.app-private-dashboard .component-tile-3 .img-container-top > div {
    background-position: 0% 30%;
}

.app-private-dashboard .component-tile-1 .default-tile.panel,
.app-private-dashboard .component-tile-3 .default-tile.panel {
    flex-direction: row-reverse;
}

.app-private-dashboard .component-tile-2 .default-tile.panel {
    flex-direction: row;
}

.app-private-dashboard .container-widgets .default-tile .tile-text::before {
    display: inline-block;
    width: 70px;
    height: 70px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5px;
    background-position: 50%, 50%;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    content: " ";
}

.app-private-dashboard .component-tile-1 .tile-text::before {
    background-image: url(/content/assets/widget_1.svg);
}

.app-private-dashboard .default-tile.panel {
    background: #264477;
    background: -moz-linear-gradient(top, #264477 0%, #283a69 99%);
    background: -webkit-linear-gradient(top, #264477 0%, #283a69 99%);
    background: linear-gradient(to bottom, #264477 0%, #283a69 99%);
}

.app-private-dashboard .tile-text,
.app-private-dashboard .tile-text h2 {
    color: #ffffff !important;
}

.app-private-dashboard .component-tile-1 .tile-text p,
.app-private-dashboard .component-tile-2 .tile-text p,
.app-private-dashboard .component-tile-3 .tile-text p {
    border: 2px solid #ffffff !important;
    background-color: #ea2d30;
    padding-top: 12px;
    padding-bottom: 0px;
    width: 200px;
    height: 50px;
}

.app-private-dashboard .component-tile-1:hover .tile-text p,
.app-private-dashboard .component-tile-2:hover .tile-text p,
.app-private-dashboard .component-tile-3:hover .tile-text p {
    background-color: transparent;
}

.app-private-dashboard .component-tile-2 .tile-text::before {
    background-image: url(/content/assets/widget_2.svg);
}

.app-private-dashboard .component-tile-3 .tile-text::before {
    background-image: url(/content/assets/widget_3.svg);
}

.app-private-dashboard .tile-text {
    width: 42%;
    text-align: center;
    padding-top: 45px;
    justify-content: center;
    display: grid;
}

.app-private-dashboard .component-tile-1 h2,
.app-private-dashboard .component-tile-2 h2,
.app-private-dashboard .component-tile-3 h2 {
    margin-bottom: 20px !important;
    font-weight: 300 !important;
    color: #ffffff !important;
    font-size: 33px !important;
    padding-top: 10px;
}

@media (max-width: 991px) {
    .app-private-dashboard #banner-item-1 {
        display: none;
    }

    .app-private-dashboard .component-tile-2 .dash-padder,
    .app-private-dashboard .component-tile-3 .dash-padder {
        padding: 15px 0px 0px 0px;
    }

    .app-private-dashboard .component-tile-1 .default-tile.panel,
    .app-private-dashboard .component-tile-3 .default-tile.panel,
    .app-private-dashboard .component-tile-2 .default-tile.panel {
        flex-direction: column-reverse;
        height: 480px;
        margin: 0px;
    }

    .app-private-dashboard .tile-text {
        width: 100%;
        padding-top: 15px;
        display: block;
    }

    .app-private-dashboard .container-widgets .default-tile .tile-text::before {
        width: 60px;
        height: 40px;
        margin-bottom: -8px;
    }

    .app-private-dashboard .component-tile-1 h2,
    .app-private-dashboard .component-tile-2 h2,
    .app-private-dashboard .component-tile-3 h2 {
        text-decoration: none;
        margin-bottom: 0px !important;
        display: inline-block;
    }

    .app-private-dashboard .container-widgets .default-tile .tile-text p {
        display: none;
    }
}