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

.btn {
    border-radius: 0px;
    font-weight: bold;
    transition: background-color 0.25s ease-out;
    -webkit-transition: background-color 0.25s ease-out;
    -moz-transition: background-color 0.25s ease-out;
    -o-transition: background-color 0.25s ease-out;
}

.btn-primary {
    position: relative;
    color: #fff !important;
    background-color: #115e67;
    border-color: #115e67;
}

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

.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: #115e67;
    border-color: #115e67;
}

.bg-primary {
    background-color: #b6d8a3;
    color: #004455;
}
.bg-primary .text-white,
.bg-primary .starratings-stars,
.bg-primary .starratings-info {
    color: #004455 !important;
}
.bg-primary a {
    color: #004455;
}
.bg-primary a:hover {
    color: #fff;
}

.bg-white a {
    color: #115e67;
}
.bg-white a:hover {
    color: #157984;
}

.bg-dark {
    background-color: #115e67;
}

a.bg-light:hover {
    color: #115e67;
}
a.bg-primary:hover {
    background-color: #157984;
}
a.text-primary:hover {
    color: #157984;
}
.text-primary {
    color: #115e67;
}

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

.bg-primary.lter,
.bg-primary .lter {
    background-color: #d5e8c9; /* minus 10% */
}

.stroke-primary {
    stroke: #b6d8a3;
}

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

.stroke-primary.lter,
.stroke-primary .lter {
    stroke: #d5e8c9; /* minus 10% */
}

.fill-primary {
    fill: #b6d8a3;
}

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

.fill-primary.lter,
.fill-primary .lter {
    fill: #d5e8c9; /* minus 10% */
}

.rounded {
    border-radius: 500px;
}

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

.dropdown-menu {
    background-color: #ffffff;
}

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

.dropdown-menu > li > a {
    color: #115e67 !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: #157984 !important;
}

@media (max-width: 767px) {
    .dropdown-toggle .img-circle {
        margin-top: 5px;
    }

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

    .panel-text {
        margin-bottom: 0px !important;
    }

    .panel-img,
    .catalogue .panel-img {
        border-width: 0px 20px 20px 20px !important;
    }

    .img-container-top.panel-embedding {
        background-position: 50% 60%;
    }

    .img-container-top.panel-staff {
        background-position: 50% 40%;
    }
}

/**************** end legacy app.css *****************************************/
/*****************************************************************************/
/*****************************************************************************/
/* Custom fonts */

@font-face {
    font-family: "Varah";
    src: url(/content/assets/varah-regular-webfont.woff);
    font-weight: normal;
}

@font-face {
    font-family: "Varah";
    src: url(/content/assets/varah-italic-webfont.woff);
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "Varah";
    src: url(/content/assets/varah-bold-webfont.woff);
    font-weight: bold;
}

@font-face {
    font-family: "Varah";
    src: url(/content/assets/varah-bolditalic-webfont.woff);
    font-weight: bold;
    font-style: italic;
}

/* Page overrides */

html {
    background-color: #ffffff;
}

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

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4 {
    font-weight: bold;
}

.bg-dark {
    color: #004455;
}

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

#avitar-header-nav > a > span.thumb-xxs,
#avitar-header-subnav,
#profile-header-subnav {
    display: none;
}

#avitar-header-nav #navigationMenu {
    padding-top: 10px !important;
}

#site-footer a {
    color: #ffffff !important;
}

#site-footer a:hover {
    color: #ffffff !important;
}

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

/* Page specific overides */

/* -- public -- */

.app-public-access-forgot .brand img,
.app-public-access-recover .brand img,
.app-public-access-scope .brand img,
.app-public-access-signin .brand img,
.app-public-access-signup .brand img,
.app-public-access-thanks .brand img,
.app-public-access-verify .brand img {
    margin-bottom: 15px;
}

.section-header {
    text-align: center;
    color: #009bc8;
    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;
}

.app-private-dashboard .row {
    overflow: hidden;
}

.app-private-dashboard .widget-row {
    background-repeat: no-repeat;
}

.app-private-dashboard .col-sm-8,
.app-private-dashboard .col-sm-4 {
    padding: 0px !important;
}

#gamification .panel-heading,
#gamification .panel-footer {
    background-color: #115e67;
    color: #ffffff;
}

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

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

.app-private-instructors-dashboard h1,
.app-private-instructors-dashboard .h1,
.app-private-catalogue-task h1,
.app-private-catalogue-task .h1,
.app-private-team-member .small-box,
.app-private-team-member .big-box {
    color: #004455 !important;
}

.app-private-team-member .text-lg.grey {
    font-weight: bold;
    font-family: "Varah", sans-serif;
}

/* -- footer -- */

footer#site-footer {
    height: auto !important;
    padding-bottom: 15px;
    background-color: #115e67;
    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;
}

#site-footer .footer-copyright::after,
#site-footer .footer-privacy::after {
    white-space: pre;
    content: " | ";
}

.carousel-control {
    display: none !important;
}

.text-academy::before {
    content: "\a";
    white-space: pre;
}

.app-private-dashboard .col-sm-12 .dashpan .h3 {
    padding-top: 30px !important;
    padding-bottom: 30px !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) {
    .banner .slide-1 {
        background-size: 1280px auto !important;
        background-position: 0% 50% !important;
    }

    .banner .container-fluid {
        height: 220px;
        padding: 0px 5px;
    }

    .banner .row {
        padding: 0px;
        margin: 0px;
    }

    .banner .col-xs-push-1 .banner-overlay {
        padding: 20px 30px !important;
        margin: 0px !important;
    }

    .banner .col-xs-push-1 .banner-overlay,
    .dashpan.panel-text {
        background-size: 55px 55px !important;
    }

    .banner .col-xs-push-1,
    .widget-row {
        background-size: 120px;
        padding: 6px !important;
    }
    .banner-title {
        font-size: 22px !important;
    }
    .banner-text {
        font-size: 14px !important;
    }

    .dashpan .h2 {
        font-size: 20px !important;
    }

    .panel-shape .row {
        padding: 40px;
        margin: 0px;
        top: 0px;
        transform: none;
        -ms-transform: none; /*IE*/
        -moz-transform: none; /*Firefox*/
        -webkit-transform: none; /*Chrome, Safari, Opera*/
    }

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

    .panel-text .btn-primary {
        display: none;
    }

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

    .app-private-dashboard .row {
        margin-bottom: 5px;
        padding-bottom: 0px;
    }

    .app-private-dashboard .row:last-child {
        margin-bottom: 0px;
    }

    .app-private-dashboard .container {
        padding: 0px 5px;
    }

    .app-private-dashboard .col-xs-12 {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .dashpan .img-container-top {
        height: 230px !important;
        max-height: 230px !important;
    }
}

@media (max-width: 570px) {
    .dashpan .img-container-top {
        height: 205px !important;
        max-height: 205px !important;
    }
}

@media (max-width: 450px) {
    .dashpan .img-container-top {
        height: 180px !important;
        max-height: 180px !important;
    }
}

@media (max-width: 420px) {
    .banner .col-xs-push-1 .banner-overlay {
        padding: 20px !important;
    }

    #site-footer .footer-copyright::after,
    #site-footer .footer-privacy::after {
        content: "\a";
    }

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

@media (max-width: 408px) {
    .app-private-dashboard .col-sm-12 .dashpan .h3 {
        padding-top: 7.35vw !important;
        padding-bottom: 7.35vw !important;
    }
}

.text-danger {
    color: #dc3545;
}

.btn-danger {
    color: #fff !important;
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger {
    color: #fff !important;
    background-color: #bb2d3b;
    border-color: #b02a37;
}

/* dashboard migration */

.app-private-dashboard .banner-item {
    height: 350px;
    background-position: 50% 23%;
}

.app-private-dashboard .banner-text h2,
.app-private-dashboard .banner-text p {
    background-color: #fff;
    padding: 0px 70px;
    width: 100%;
    max-width: 540px !important;
    margin-bottom: 0px;
}

.app-private-dashboard .banner-text {
    background-image: url(/content/assets/widgets_square-green.svg);
    background-size: 160px 160px;
    background-position: -10px -10px;
    background-repeat: no-repeat;
    margin-left: 60px;
    padding: 10px;
    width: 100%;
}

.app-private-dashboard .banner-text::before {
    content: "";
    background-color: transparent;
    padding: 40px 20px 30px 50px;
    background-image: url(/content/assets/widgets_notches-green.svg);
    background-size: 70px 70px !important;
    background-position: 0% 0%;
    background-repeat: no-repeat !important;
    float: left;
}

.app-private-dashboard .banner-text h2 {
    padding-top: 50px;
    padding-bottom: 10px;
}

.app-private-dashboard .banner-text p {
    padding-bottom: 50px;
}

.app-private-dashboard .dash-padder a > div {
    background-image: url(/content/assets/widgets_square-green.svg);
    background-size: 160px 160px;
    background-position: -10px -10px;
    background-repeat: no-repeat;
    padding: 10px 2px;
    width: 100%;
}

.app-private-dashboard .default-tile.panel {
    border-radius: 0px !important;
    border: 0px none transparent !important;
    padding: 0px;
    box-shadow: none !important;
    background-color: #115e67;
    height: 320px !important;
}

.app-private-dashboard .default-tile .panel-img-top::before {
    content: url(/content/assets/widgets_notches-green.svg);
    width: 70px;
    float: left;
}

.app-private-dashboard .default-tile h2 {
    font-size: 16px !important;
    padding-bottom: 5px;
    font-weight: bold;
    color: #ffffff !important;
}

.app-private-dashboard .default-tile p {
    color: #ffffff !important;
}

@media (min-width: 1500px) {
    .app-private-dashboard .container {
        width: 1200px !important;
    }
}
@media (max-width: 414px) {
    .app-private-dashboard .banner-text {
        max-width: 100%;
        margin-left: 0px;
    }
}