@charset "utf-8";

@font-face {
    font-family: 'Poppins';
    src: url('/lib/Fonts/Poppins/Poppins-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/lib/Fonts/Poppins/Poppins-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/lib/Fonts/Poppins/Poppins-Medium.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

body, html {
    background: #fff;
    height: 100%;
    width: 100%;
}

select {
    all: unset; /* Remove all default styles */
    background: white;
    color: black;
    border: 1px solid #ccc;
    padding: 8px;
    font-size: 1rem;
    appearance: none; /* For modern browsers */
    -webkit-appearance: none; /* For Safari/Chrome */
    -moz-appearance: none; /* For Firefox */
}

    select[multiple] {
        height: auto;
        overflow-y: auto;
    }

option {
    background-color: white;
    color: black;
}

    /* For selected options */
    option:checked {
        background-color: #007BFF;
        color: white;
    }

blockquote:after, blockquote:before, q:after, q:before {
    content: '';
    content: none
}

a, a:active, a:link, a:visited {
    text-decoration: none;
    color: #205992;
}

.AboveHeader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: #afafb6;
    height: 25px;
    z-index: 79;
    margin: 0;
    padding: 1px 0;
    overflow: hidden
}

.courseCost, .courseDurationID {
    line-height: 40px
}

.btnSearch, .removeSearch {
    text-transform: uppercase;
    cursor: pointer
}

.tblCourseDatesRow {
    width: 100%
}

@media all and (max-width: 800px) {
    .individualDate {
        width: 97%;
        min-width: 100px !important
    }
}

.whereDidYouHearAboutUs {
    padding: 10px;
    color: #4d4d4d;
    font-size: 1em;
    width: 100%;
    margin: 5px 0 0
}

#sitecontainer, .sitecontainer {
    position: relative;
    padding: 0;
    margin: 0 auto;
    max-width: 1450px;
    width: 100%;
    clear: both;
    height: auto;
    visibility: visible;
    top: 0
}

.theheader #bbar {
    position: absolute;
    width: 100%;
    z-index: 80
}

.theheader {
    position: absolute;
    padding: 0;
    top: 20px;
    left: 0;
    z-index: 80;
    padding: 15px 0 0 0;
    height: 60px !important;
    background-color: rgba(255,255,255,0.9);
    transition: height .2s linear;
    width: 100%;
    border-bottom: solid 0.5px #e2e2ec;
}

.BelowHeaderToolBar {
    width: 400px;
    float: left;
    padding-top: 0 !important;
    margin-top: -3px !important
}

.HeaderToolBarOnScroll {
    width: 931px !important;
    margin-top: -4px
}

@media all and (max-width: 1000px) {
    .HeaderToolBarOnScroll {
        display: none
    }
}

@keyframes showMiniLogo {
    0% {
        opacity: 0;
        height: 0
    }

    100% {
        height: 38px;
        opacity: .4
    }
}

.theheader #bbar {
    top: 0;
    right: 0;
    height: 26px;
    padding: 3px 0 0;
    box-sizing: border-box;
    z-index: 2
}

#theheaderrestraint {
    width: 100%;
    padding: 0 15px;
    min-height: 70px;
    top: -10px;
    z-index: 80;
    position: relative;
    margin: 0 auto;
    max-width: 1050px;
    height: 70px !important;
}

.ui-menu {
    -moz-box-shadow: 2px 3px 5px rgba(50,38,50,.18);
    -webkit-box-shadow: 2px 3px 5px rgba(50,38,50,.18);
    box-shadow: 2px 3px 5px rgba(50,38,50,.18)
}

    .ui-menu li {
        padding: 5px;
        color: #005580;
        border: 1px solid #fff
    }

        .ui-menu li:hover {
            border: 1px solid #ccc;
            cursor: pointer
        }

.ui-menu {
    background-color: #fff;
    width: 40%;
    padding: 5px;
    position: relative;
    z-index: 100;
    border: 1px solid #0394e2;
    border-top: solid 1px #9acae4;
    min-width: 300px;
    max-width: 600px
}

@media all and (min-width: 800px) {
    .itts_search_input, .theheadernew {
        transition: height .5s linear,width .5s linear;
        transition: all linear .2s
    }
}

.themaincontent {
    display: block;
    width: 100%;
    min-height: 500px;
    height: auto;
    float: left;
    margin: 0;
    padding: 0
}

.topSearchAllCoursesBtn {
    display: none;
    visibility: hidden
}

#pnlCookieStageOne {
    display: block;
    width: 90%
}

#cookieConsent {
    bottom: 0;
    left: 0;
    min-height: 56px;
    width: 100%;
    box-sizing: border-box;
    background-color: rgba(2,35,49,.75);
    font-size: 1em;
    line-height: 1.5em;
    color: #ddd;
    text-align: left;
    z-index: 100;
    margin: 0 auto;
    padding: 19px 10px 4px;
    position: fixed;
    border: solid 1px #000;
    float: left;
    margin-right: 30px
}

    #cookieConsent .pripolicy {
        color: #fff !important;
        font-size: .8em;
        border: solid 1px #fff;
        float: left;
        display: block;
        line-height: 30px;
        background-color: rgba(0,0,0,.2);
        padding: 0 5px;
        width: auto;
        margin: 10px
    }

        #cookieConsent .pripolicy:hover {
            background-color: rgba(0,0,0,.4);
            border: solid 1px #666
        }

@media all and (max-width: 300px) {
    #cookieConsent {
        line-height: 1.2em;
        box-sizing: border-box;
        width: 90%
    }
}

.cookieMI {
    border: none;
    display: inline-block !important;
    white-space: normal;
    background-color: transparent;
    color: #ccc !important;
    font-size: 1em;
    clear: none
}

.itts_search_input {
    border: 1px solid #cdedfe;
    height: 19px;
    margin-top: 0;
    color: #595959;
    padding-left: 2px;
    display: inherit;
    float: left
}

.vAlign {
    display: inline-block !important;
    line-height: 20px !important;
    vertical-align: middle !important
}

.courseCost, .courseDurationID {
    line-height: 40px
}

#divCourseDates {
    display: block;
    width: 100%;
    clear: both;
    padding: 10px
}

.headerRow {
    border-bottom: none;
    border-top: none;
    text-transform: uppercase;
    font-size: .8em
}

    .headerRow div {
        border-right: solid 1px #e5ebf2
    }

.removeSearch {
    text-transform: uppercase;
    cursor: pointer
}

.tblCourseDatesRow {
    width: 100%
}

@media all and (max-width: 800px) {
    .individualDate {
        width: 97%;
        min-width: 100px !important
    }
}

.removeSearch {
    display: block;
    float: left;
    height: 29px;
    font-size: .7em !important;
    background: #fff2e5;
    color: #c60;
    margin-left: 5px;
    border: 1px solid #ffb366
}

.itts_search_input placeholder, placeholder {
    color: #ccc
}

::-webkit-input-placeholder {
    color: #ccc
}

:-moz-placeholder {
    color: #ccc
}

::-moz-placeholder {
    color: #444
}

:-ms-input-placeholder {
    color: #444
}

.itts_search_input::-webkit-input-placeholder {
    color: #444
}

.itts_search_input:-moz-placeholder {
    color: #444
}

.itts_search_input::-moz-placeholder {
    color: #444
}

.itts_search_input:-ms-input-placeholder {
    color: #444
}

.contactFormFullWidthOnPage {
    background-color: transparent;
    display: block;
    width: 100%;
    padding: 20px;
    box-sizing: border-box !important;
}

#DivFooterContact {
    margin-top: 100px;
    max-width: 1450px;
    display: block;
    margin: 0 auto;
}

.contactFormFullWidthOnPage-Restraint {
    background: #fff;
    display: block;
    clear: both;
    width: 50%;
    min-width: 500px;
    padding: 20px;
    margin: 2%;
    box-shadow: 0 4px 11px -5px rgb(0 0 0/60%);
    box-sizing: border-box;
    float: right;
    border-radius: 5px;
    border: solid 1px #efefef;
}

@media all and (max-width: 590px) {
    .contactFormFullWidthOnPage li {
        width: 97% !important
    }
}

.contactFormFullWidthOnPage textarea {
    width: 99% !important
}

.contactFormFullWidthOnPage .innerbox {
    max-width: 900px;
    margin: 0 auto;
    width: 90%
}

.contactFormFullWidthOnPage h2 {
    font-size: 2.2em;
    line-height: 1.4em;
    display: block;
    margin: 100px auto 20px !important;
    text-align: left;
    max-width: 950px;
    border-bottom: dotted 1px #ccc
}

@media all and (max-width: 400px) {
    .contactFormFullWidthOnPage h2 {
        font-size: 1.5em
    }
}



.contactFormFullWidthOnPage .MonFriText {
    font-size: .4em
}

.contactFormFullWidthOnPage .smallContactTitle {
    color: #595959;
    height: auto;
    width: 100%;
    display: block;
    font-size: 1.1em;
    margin-bottom: 6px
}



.contactFormFullWidthOnPage .HearAboutUsMoreDetails {
    font-size: .8em
}

.contactFormFullWidthOnPage input[type=checkbox] {
    min-width: 10px
}

.contactFormFullWidthOnPage input, .contactFormFullWidthOnPage textarea, .whereDidYouHearAboutUs {
    padding: 8px !important
}

.whereDidYouHearAboutUs {
    padding: 10px;
    color: #4d4d4d;
    font-size: 1em;
    width: 100%;
    margin: 5px 0 0
}

.contactFormFullWidthOnPage .btnSendQuestion {
    width: auto;
    min-width: 250px;
    max-width: 900px
}

.contactRequiredFields {
    font-size: .7em;
    color: #999;
    clear: both;
    margin-top: -10px;
    display: block
}

.contactFormFullWidthOnPage .outlinesToolboxTitle {
    padding: 50px;
    display: block;
    border-bottom: none !important;
    color: #fff !important;
    width: 100%;
    text-align: center;
    font-size: 1.5em !important;
    margin-bottom: 50px
}

.contactFormFullWidthOnPage input {
    margin-bottom: 1px
}

#idcloseContactPopout {
    top: -3px;
    right: 1px
}

#contactTopBar, .visible {
    display: block
}

.hidden {
    display: none !important;
    visibility: hidden !important
}

a, a:active, a:link, a:visited {
    text-decoration: none;
}

.centeredtitle, .centeredtitlenoline {
    width: 80%;
    margin: 10px auto;
    text-align: center;
    padding-bottom: 7px;
    clear: both
}

    .centeredtitle h1 {
        margin-bottom: 4px
    }

.didyouknow {
    display: block;
    font-size: 1em;
    -webkit-box-shadow: 0 1px 4px rgba(50,38,50,.45);
    -moz-box-shadow: 0 1px 4px rgba(50,38,50,.45);
    box-shadow: 0 1px 4px rgba(50,38,50,.45);
    border: 1px solid #ccc;
    padding: 10px 10px 10px 60px;
    background: url(/lib/aesthetics-graphics/icons/information.png) 10px center no-repeat;
    margin: 20px 0
}

.linebreak, .linebreaklarger {
    display: inline-block;
    height: 2px;
    width: 100%;
    clear: both
}

.linebreak {
    border-bottom: 1px dotted #68c9fd;
    margin: 30px 0
}

.linebreaklarger {
    border-bottom: 1px dotted #9cc6dc;
    margin: 70px 0
}

.footer .linebreak {
    margin: 10px 0;
    border-color: #496483 !important;
    border-style: solid
}

#leftpic, #rightrightpic {
    display: none
}

.footer {
    background-color: #046;
    width: 100%;
    overflow: hidden;
    color: #fff;
    font-size: .875em;
    margin-left: 0;
    margin-bottom: 0;
    padding-left: 0;
    display: block;
    clear: both;
    min-height: 280px;
    z-index: 4;
    padding-top: 30px
}

    .footer .gridconstraint {
        position: relative;
        width: 94%;
        max-width: 1450px;
        height: auto;
        margin: 0 auto
    }

ul.sitemap li {
    width: 263px;
    display: block;
    float: left;
    font-size: 1.1em;
    margin: 20px 12px 0 0;
    color: #b9d0df;
    line-height: 1.6em;
    padding: 2px 0;
    font-family: Poppins,sans-serif;
    min-height: 430px
}

    ul.sitemap li ul {
        width: 100%;
        margin: 8px 0;
        padding-left: 0
    }

        ul.sitemap li ul li {
            width: 96%;
            display: block;
            font-weight: 400;
            margin: 1px 0 0;
            padding: 2px 0;
            line-height: 1.3em;
            font-size: 1em;
            color: #fff;
            text-transform: none;
            min-height: 5px
        }

    ul.sitemap li.lastli {
        width: 97%;
        min-height: 150px;
        margin-bottom: 10px;
        margin-right: 0;
        padding: 0;
        color: #fff;
        font-size: .8em
    }

        ul.sitemap li.lastli a {
            color: #fff
        }

.footerbtm {
    width: auto;
    max-width: 550px;
    margin: 0 auto;
    padding: 0 0 5px;
    font-size: .8em;
    text-align: center;
    color: #fff
}

    .footerbtm .whitetextnohover {
        color: inherit !important
    }

.grey, .grey:hover, .grey:link, .grey:visited, ul.sitemap li ul li a, ul.sitemap li ul li a:active, ul.sitemap li ul li a:hover, ul.sitemap li ul li a:link, ul.sitemap li ul li a:visited {
    color: #b9d0df;
    font-size: .8em
}

.right {
    float: right
}

.left {
    float: left
}

#wrap > header {
    background-color: transparent;
    padding-top: 20px
}

#navigation {
    position: absolute;
    right: 4px;
    top: 25px
}

.ulmEmail {
    font-size: 1.4em !important
}

.eo:hover {
    background-color: #1c6a8c
}

.spinner {
    margin: 5px 10px;
    width: 15px;
    height: 15px;
    -webkit-animation: sweep 1s infinite linear;
    -moz-animation: sweep 1s infinite linear;
    border-radius: 75px;
    border-bottom: 2px solid #00f
}

#divTheLogo {
    width: 130px;
    float: left;
    margin-top: 0
}

#thelogo {
    background: url(/lib/aesthetics-graphics/logos/Logo.svg) 2px 1px no-repeat #fff;
    position: relative;
    height: 58px;
    top: -5px;
    width: 108px;
    z-index: 99;
    text-decoration: none;
    display: block;
    transition: .1s all linear
}

.RootMenuLink, .withArrow {
    border: solid 1px #ddd !important
}

    .withArrow:hover:after {
        content: " ";
        width: 0;
        height: 0;
        display: block;
        margin: 15px auto -5px !important;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        border-bottom: 5px solid #f1f1f4;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        transition: all .5s ease
    }

.loader, .loaderText {
    position: fixed;
    width: 80px
}

.withArrow:nth-of-type(3) {
    margin-right: 5px
}

.withArrow:nth-of-type(4) {
    margin-right: 5px
}

.withArrow:nth-of-type(5) {
    margin-right: -9px
}

.search:hover:after {
    display: none !important
}

.loader {
    z-index: 99;
    top: calc(50% - 80px);
    left: calc(50% - 80px);
    border: 16px solid #c3dfef;
    border-top: 16px solid #37607b;
    background-color: #fff;
    border-radius: 50%;
    height: 80px;
    animation: spin 1s linear infinite
}

.loaderText {
    z-index: 100;
    font-weight: 700;
    text-transform: uppercase;
    color: #2b78a1;
    font-size: 13px;
    top: calc(50% - 58px);
    left: calc(50% - 74px);
    margin: 0 0 0 16px;
    padding-top: 20px;
    border-radius: 50%;
    height: 20px
}

.search {
    margin-top: -1px
}

    .search:hover {
        background-color: transparent;
        color: #125978;
        border-bottom: none !important
    }

#mobileMenuToggleBtn {
    display: none;
    visibility: hidden;
    font-size: .9em;
    float: right;
    margin-top: 20px;
    opacity: 0;
    transition: opacity .3s linear
}

.mobileMenuHidden {
    display: none;
    visibility: hidden !important;
    opacity: 0;
    transition: opacity .3s linear
}

.mobileMenuVisible {
    display: block !important;
    z-index: 99;
    visibility: visible !important;
    opacity: 1 !important
}

#closeMenu {
    display: none
}

#navmnu {
    visibility: visible;
    opacity: 1
}

.outlinesLeftMain, .CourseListsLeftMain {
    display: block;
    width: 100%;
    margin-right: 0%;
    float: left;
    z-index: 0;
    padding-right: 10px;
    box-sizing: border-box;
    min-height: 600px;
    max-width: 1010px;
}

.CoursesNon {
    margin-top: 130px;
}

.CourseListsLeftMain {
    padding-left: 15px;
}

@media all and (max-width: 1600px) {
    .outlinesLeftMain, .CourseListsLeftMain {
        width: 100%;
    }
}

.outlinesToolbox, .CourseListsToolbox {
    display: block;
    width: 14%;
    font-size: .85em;
    float: left;
    margin-top: 215px
}

    .outlinesToolbox .innerbox, .CourseListsToolbox .innerbox {
        display: block;
        margin: 0 3% 3%;
        width: 93%;
        height: auto;
        border-radius: 2px;
        padding: 0 2% 15px 0;
        background-color: #fefcfe;
        border: 1px solid #ccd8e5
    }

    .outlinesToolbox .item, .CourseListsToolbox .item {
        display: block;
        padding: 10px 0 10px 5px;
        width: 100%;
        clear: both;
        border: 1px solid #fcfeff;
        margin-left: 1%;
        line-height: 1.2em;
        box-sizing: border-box
    }

.contactFormOnPage .innerbox {
    background-color: #fefcfe !important;
    border: 1px solid #efdcee
}

.contactFormOnPage .item {
    color: #9e4799 !important
}

.contactFormOnPage .innerbox .smallContactTitle {
    color: #595959 !important
}

.smallContactForm input, .smallContactForm textarea {
    color: #005580;
    border: 1px solid #a8c3d7 !important;
    font-size: 1em;
    font-family: Poppins,sans serif;
    padding: 3px;
    margin-top: 5px;
    box-sizing: border-box
}

.smallContactForm textarea {
    min-width: 98%;
    width: 98%
}

.outlinesToolbox .smallContactForm, .smallContactForm, .CourseListsToolbox .smallContactForm {
    margin: 0 3px 0 8px !important;
    display: block
}

.smallContactForm {
    color: #595959 !important;
    line-height: 1.2em;
    max-width: 900px;
    margin: 0 auto !important
}

.liHoldingChkOnlyinContactForm {
    width: 100% !important;
    min-height: 0 !important;
    padding-right: 10px !important;
    margin: 5px 0 20px !important;
    box-sizing: border-box
}

.smallContactForm input[type=checkbox] {
    width: 10px;
    height: 20px;
    float: left;
    margin-top: -2px
}

.smallContactForm .btnSendQuestion {
    cursor: pointer;
    color: #fff;
    text-align: center;
    background-color: #209736;
    border: 1px solid #1f9335 !important;
    display: block;
    padding: 8px;
    clear: both !important;
    width: 100%;
    min-width: 70px;
    margin: 40px auto 0;
    text-transform: uppercase
}

    .smallContactForm .btnSendQuestion:hover {
        background: #166926
    }

.smallFormContactInput {
    padding: 5px;
    font-family: Poppins,sans-serif;
    font-size: .9em;
    border: none;
    border-bottom: #dfb9dd dotted 1px;
    max-width: 220px;
    width: 90%
}

.smallContactFormResult {
    padding: 15px;
    display: block
}

@supports(position: sticky) {
    .smallContactFormResult {
        position: -webkit-sticky;
        position: sticky;
        top: -50px;
        height: 0
    }
}

.smallContactFormResult h1 {
    font-size: 1.4em;
    font-weight: 700
}

.morepdg .item {
    padding: 20px 0 !important
}

.outlinesToolbox .youarehere:hover, .CourseListsToolbox .youarehere:hover {
    background-color: #fcfeff !important;
    border: 1px solid #fcfeff !important
}

.outlinesToolbox:last-child, .CourseListsToolbox:last-child {
    padding: 0 !important
}

    .outlinesToolbox:last-child .innerbox, .CourseListsToolbox:last-child .innerbox {
        border: none !important;
        background-color: #fff !important
    }

    .outlinesToolbox:last-child .outlinesToolboxTitle, .CourseListsToolbox:last-child .outlinesToolboxTitle {
        color: #8d3f88 !important;
        border-bottom: solid 1px #8d3f88 !important
    }

.reviewsBoxRestraint {
    max-height: 800px;
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
    width: 100%;
    height: 100%
}

    .reviewsBoxRestraint span {
        padding-right: 10px !important;
        font-size: .7em
    }

    .reviewsBoxRestraint .item {
        font-size: 1em;
        line-height: 1.5em;
        letter-spacing: .04em;
        color: #8d3f88;
        font-family: Poppins,cursive
    }

.outlinesToolbox a.item:hover, .CourseListsToolbox a.item:hover {
    background-color: rgba(204,239,255,.8);
    border: 1px solid #80d7ff
}

.outlinesToolbox .nohover:hover, .CourseListsToolbox .nohover:hover {
    background-color: transparent !important
}

.outlinesToolbox .item .tbTitle, .CourseListsToolbox .item .tbTitle {
    font-size: 1em;
    color: #005580;
    line-height: 1.4em
}

.outlinesToolbox .item .tbSmaller, .CourseListsToolbox .item .tbSmaller {
    font-size: .8em;
    clear: both;
    display: block
}

.outlinesToolboxTitle {
    text-align: center;
    box-sizing: border-box;
    height: 50px;
    width: 100%;
    border-bottom: solid 1px #efdcee !important;
    color: #0083be !important;
    padding: 15px 0 0 !important;
    margin-left: 0 !important;
    margin-bottom: 10px;
    font-weight: 500;
    font-family: Poppins,sans-serif
}

    .outlinesToolboxTitle:hover {
        cursor: default
    }

@media all and (max-width: 1000px) {
    .contactFromHeader {
        width: 200% !important
    }

    #navmnu {
        visibility: hidden;
        opacity: 0;
        transition: opacity .2s ease-in-out 0s;
        top: 65px;
        height: auto !important;
        padding-bottom: 30px
    }

    #mobileMenuHolder {
        position: relative;
        top: 70px;
        width: 90%;
        margin: 0 auto
    }

    #closeMenu {
        position: absolute;
        height: 27px;
        width: 27px;
        line-height: 27px;
        padding: 0 5px;
        top: 0;
        right: 0;
        z-index: 100;
        font-size: 1.1em;
        cursor: pointer;
        color: #fff;
        background: #c33c3c;
        text-align: center !important;
        display: inherit;
        text-indent: 0
    }

    .subMmenuInnerList a {
        min-height: 30px !important;
        display: block;
        font-size: 1.5em !important;
        margin: 10px 0;
        border: dotted 1px #ccc;
        padding: 8px
    }

    .footerbtm {
        font-size: 1.2em
    }

        .footerbtm * {
            padding: 25px;
            display: inline-block;
            margin-top: 30px;
            border: solid 1px #999
        }

    ul.sub-menu {
        display: block;
        visibility: visible;
        opacity: 1;
        margin-top: -1px;
        margin-left: 2px;
        position: static;
        padding: 0 0 0 11px;
        width: inherit
    }

        .mobhide, ul.sub-menu > li > a > div {
            display: none
        }

        ul.sub-menu > li > a {
            padding-left: 14px;
            border-left: solid 1px #fff;
            border-top: none;
            border-bottom: none;
            border-right: none;
            color: #0083be !important;
            background-color: #fff
        }

        ul.sub-menu > li:first-child {
            border-top: 1px solid #d1e4ef !important
        }

        ul.sub-menu > li > a.parent {
            background: #333 !important
        }

    .menuheader {
        color: #fff;
        text-indent: 13px;
        background-color: #1a88b2;
        font-size: 13px;
        text-transform: uppercase;
        visibility: visible
    }

    .cbtimelimit {
        margin-top: 12px !important;
        font-size: 1em !important
    }

    .itts_search_input {
        padding: 0;
        margin-top: 2px !important
    }

    .outlinesBox {
        display: block;
        float: left;
        height: auto;
        width: 99%;
        margin: 10px 0;
        min-width: 250px;
        padding: 10px 0
    }

    .outlinesLeftMain, .CourseListsLeftMain {
        display: block;
        width: 78%;
        float: left;
        z-index: 0;
        padding-right: 10px;
        box-sizing: border-box
    }

    .outlinesToolbox, .CourseListsToolbox {
        display: block;
        width: 20%;
        float: left;
        margin-top: 15px;
        margin-right: 1%;
        margin-left: 1%
    }

        .outlinesToolbox .item, .CourseListsToolbox .item {
            display: block;
            padding: 5px 5px 10px 20px;
            width: 100%;
            color: #017b90;
            font-size: .9em;
            clear: both;
            margin-left: 1%;
            line-height: 1.1em;
            box-sizing: border-box
        }

        .outlinesToolbox .youarehere, .CourseListsToolbox .youarehere {
            font-weight: 700
        }

            .outlinesToolbox .youarehere:hover, .CourseListsToolbox .youarehere:hover {
                background-color: #fff !important
            }

        .outlinesToolbox .nohover:hover, .outlinesToolbox a.item:hover, .CourseListsToolbox .nohover:hover, .CourseListsToolbox a.item:hover {
            background-color: #e2f4f8
        }

        .outlinesToolbox .item .tbTitle, .CourseListsToolbox .item .tbTitle {
            font-size: 1em;
            color: #0083be;
            line-height: 1.7em
        }

        .outlinesToolbox .item .tbSmaller, .CourseListsToolbox .item .tbSmaller {
            font-size: .8em;
            clear: both;
            display: block
        }

    #menusearch, .topbluebardesign, .topgreylinedesign {
        display: none
    }

    #theheaderrestraint {
        min-height: 50px;
        height: 50px;
        max-width: 1050px;
    }

    .hpblueht {
        padding: 25px 0 10px !important
    }



    .resourcehmiddlebox {
        width: 100%
    }

    .themaincontent {
        padding-left: 0;
        width: 100%
    }

    #sitecontainer, .sitecontainer {
        margin-top: 0
    }

    #navigation {
        position: absolute;
        width: 90%;
        top: 80px;
        left: 0
    }
}

@media all and (max-width:370px) {
    #theheaderrestraint {
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media all and (max-width: 1250px) {
    .menubutton, .menubuttonlk {
        display: none
    }
}

@media all and (max-width: 1024px) {
    #feedbackblock {
        width: 100%;
        display: block
    }

    #sitecontainer, .sitecontainer {
        width: 99%;
        margin-left: 1%
    }
}

@media all and (max-width: 1100px) {
    .themaincontent {
        padding-left: 0
    }

    .resourcehmiddlebox {
        width: 80%
    }
}

@media all and (max-width: 1075px) {
    .topboxthetextallcourses {
        font-size: 15px;
        margin-top: 5px
    }
}

@media all and (max-width: 900px) {
    .footer .linebreak:first-child, .sitemap {
        display: none !important
    }

    .footer {
        min-height: 65px
    }

    .outlinesLeftMain, .CourseListsLeftMain {
        width: 65%
    }

    .outlinesToolbox, .CourseListsToolbox {
        width: 33% !important
    }
}

@media all and (max-width: 800px) {
    #allcoursespicturebox, #allcoursestopofpage, #tools {
        display: none
    }

    #courseoptions {
        background: 0 0;
        margin-top: 20px
    }

    .aboutus, .alt, .az, .bespoke, .consult, .contact, .courseop, .faqs, .histvault, .navbarli .adobe, .navbarli .microsoft, .schedule, .sysdata, .titutall, .trainingven, .trainrev, .webdesign {
        background-image: none;
        padding-left: 0;
        width: 0;
        border-right: none;
        border-bottom: none
    }

    .footer ul {
        width: 100%
    }

    #sitecontainer {
        margin-left: 1%;
        width: 97%
    }

    .coursecontent {
        -moz-column-count: 1;
        -moz-column-gap: 0;
        -webkit-column-count: 1;
        -webkit-column-gap: 0
    }
}

.contactFromHeader {
    width: 200% !important
}

.firstToolboxOnCoursePages {
    margin-top: 58px
}

@media all and (max-width: 520px) {
    ul.sub-menu > li > a > p {
        display: none
    }
}

@media all and (max-width: 600px) {


    .outlinesToolbox .item, .CourseListsToolbox .item {
        padding: 4px
    }

    .morepdg .item {
        padding: 4px !important
    }

    .outlinesToolboxTitle {
        padding: 20px 20px 15px
    }
}

@media all and (max-width: 460px) {
    #contactustoday, #search, #structurerp, .sidebar {
        display: none
    }

    .menubar {
        background-color: transparent
    }
}

@media all and (max-width: 400px) {
    .theheader {
        padding: 10p 5px 0 0
    }

    #divTheLogo {
        width: 105px !important
    }

    .outlinesLeftMain, .CourseListsLeftMain {
        width: 99.5%;
        padding-right: 0;
        border-right: none
    }

    .outlinesToolbox, .CourseListsToolbox {
        width: 99.5% !important;
        clear: both;
        margin: 10px 0 40px
    }

        .outlinesToolbox a.item:hover, .CourseListsToolbox a.item:hover {
            border-right: solid 1px #009fbf
        }
}



.pnlPrintHeader {
    display: none;
    visibility: hidden
}

.bubble {
    position: relative;
    color: #16439c;
    margin: 15px 15px 15px 0;
    max-height: 270px;
    overflow: hidden;
    text-align: left;
    width: 100%;
    min-width: 250px;
    box-sizing: border-box;
    -webkit-box-shadow: 0 1px 6px 1px rgba(0,0,0,.1);
    -moz-box-shadow: 0 1px 6px 1px rgba(0,0,0,.1);
    box-shadow: 0 1px 10px 1px rgba(0,0,0,.1);
    font-size: 1em;
    line-height: 1.6em;
    background-color: #fff;
    border: solid 1px #efefef;
    box-shadow: 0 4px 10px 0 rgba(0,0,0,.1)
}

    .bubble:after {
        position: absolute;
        display: block;
        content: "";
        border-color: #fff transparent transparent transparent;
        border-style: solid;
        border-width: 10px;
        height: 0;
        width: 0;
        position: absolute;
        bottom: -19px
    }

    .bubble:after {
        left: 1em
    }

.bAnswerText {
    padding: 15px
}

.bubble:after {
    right: 1em
}

.bubble:after {
    right: 1em
}

.ReviewsOverviewHeader {
    text-transform: uppercase;
    font-size: .75em;
    display: block;
    content: "Course Reviews";
    background-color: #fff;
    width: 100%;
    height: 25px;
    display: block;
    margin-left: -7px;
    margin-top: -15px;
    padding: 10px 10px 30px
}

.NumberOfReviews {
    display: inline-block;
    margin-left: 5px;
    background-color: red;
    color: #fff;
    width: 21px;
    height: 21px;
    text-align: center;
    border-radius: 15px;
    line-height: 22px
}

.ReviewsOverview {
    margin-top: 50px;
    margin-left: -5px;
    width: 95%;
    display: block;
    height: auto;
    padding: 5px;
    box-sizing: border-box;
    overflow: hidden;
    border: dotted 1px #ccc
}

    .ReviewsOverview .ReviewsOverviewHolder {
        width: 95%;
        padding: 10px 10px 10px 0;
        margin-bottom: 15px
    }

        .ReviewsOverview .ReviewsOverviewHolder:last-of-type {
            border-bottom: none
        }

    .ReviewsOverview .reviewText {
        display: block;
        color: #069;
        line-height: 1.5em;
        font-family: Poppins,Helvetica,Arial,sans-serif
    }

    .ReviewsOverview .who {
        font-size: .75em;
        color: #999;
        line-height: 1.4em;
        padding-top: 10px
    }

.ReviewsOverview {
    position: relative;
    max-height: 800px;
    overflow-x: hidden;
    overflow-y: auto
}

    .ReviewsOverview .btnSeeAllReviews {
        display: none
    }

.lblQText {
    display: block;
    clear: both;
    line-height: 1.3em;
    font-size: .8em !important;
    margin-bottom: 10px;
    color: #000 !important;
    word-wrap: break-word
}

    .lblQText:after {
        content: "?"
    }

.ReviewsOverview .lblQText {
    padding-bottom: 10px
}

.holder {
    display: block;
    margin-bottom: 20px;
    width: 45%;
    margin-right: 5%;
    float: left;
    min-height: 150px
}

p {
    font-size: .75em;
    margin-top: 0;
    text-align: left;
    line-height: 1.4em;
    padding: 0 10px 4px
}

.holder p, .holder p a {
    color: #999
}

@media all and (max-width: 650px) {
    .holder {
        width: 78%
    }
}

.HearAboutUsMoreDetails, .cblTimeLimitDiv {
    border: dotted 1px #95bed0;
    color: #017098;
    position: relative;
    padding: 5px;
    font-size: 1em !important
}

    .HearAboutUsMoreDetails:before, .cblTimeLimitDiv:before {
        position: absolute;
        top: -20px;
        content: " ";
        width: 0;
        height: 0;
        display: block;
        margin: 15px auto -5px !important;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        border-bottom: 5px solid #95bed0
    }

.h2s, h1, h2, h3 {
    color: #000;
    font-family: Poppins,sans-serif;
    font-weight: lighter;
}

@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
    .h2s, h1, h2, h3 {
        color: #43718a !important;
        background: 0 0 !important;
        -webkit-background-clip: inherit !important;
        -moz-background-clip: inherit !important;
        background-clip: inherit !important;
        text-shadow: none !important
    }
}

.h2s, .h3s, .h6s, body, h4, h5, h6 {
    color: #374048
}

body {
    font-family: Poppins,sans-serif;
    left: 0;
    z-index: 4;
    line-height: 1.8em;
    font-size: 16px;
    letter-spacing: 0
}

h1 {
    font-size: 1.6em;
    margin-bottom: 10px !important;
    line-height: 1.4em
}

.dbErrorText {
    display: none;
    font-size: .4em
}

.h2s, .h3s, .h6s, h2, h3, h4, h5, h6 {
    border: none;
    margin: 0;
    padding: 0;
    font-variant: normal;
    text-decoration: none;
    width: auto;
    font-family: Poppins,sans-serif !important;
    font-weight: 400
}

.h2s, h2 {
    font-size: 1.1em
}

.h3s, h3, h4 {
    font-size: 1em;
    line-height: 1.6em;
    margin-bottom: 10px
}

.h6s, h6 {
    font-style: normal;
    line-height: normal;
    font-size: 15px;
    font-variant: small-caps;
    font-weight: 700
}

hr.general {
    width: 100%;
    margin: 30px auto;
    border: 0;
    height: 1px;
    background-image: -o-linear-gradient(left,rgba(0,0,0,0),#35668e,rgba(0,0,0,0))
}

p {
    padding: .4em 0
}

.didyouknow {
    display: block;
    font-size: 1em;
    -webkit-box-shadow: 0 1px 4px rgba(50,38,50,.45);
    -moz-box-shadow: 0 1px 4px rgba(50,38,50,.45);
    box-shadow: 0 1px 4px rgba(50,38,50,.45);
    border: 1px solid #ccc;
    padding: 10px 10px 10px 60px;
    background: url(/lib/aesthetics-graphics/icons/information.png) 10px center no-repeat;
    margin: 20px 0
}

/* @supports(position: sticky) {
    .topStick {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        height: 0;
        z-index: 30
    }

    .topStickWithHeight {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 90
    }
} */

.themaincontent {
    background: 0 0 !important
}

.lblError {
    color: red;
    line-height: 1.3em
}

#OTagCloud {
    color: #595959;
    font-size: .84em;
    margin: 30px 0;
    border: 4px dotted #fff;
    padding: 5px;
    line-height: 1.5em;
    background-color: #f3f3f3
}

.generalButton, .pnlCourseRightMenu a, .pnlCourseRightMenu input[type=submit] {
    width: 100%;
    display: block;
    margin-bottom: 16px;
    margin-top: 5px;
    text-align: center;
    cursor: pointer;
    color: #017098;
    font-size: .95em;
    font-family: Poppins,Helvetica,Arial,sans-serif;
    transition: .2s all ease-in-out;
    background-color: #fff;
    z-index: 2;
    font-size: .9em;
    border: solid 1px #efefef;
    box-shadow: 0 8px 2px -5px rgba(0,0,0,.1)
}

@media all and (max-width: 550px) {
    .tbContactForm {
        margin: 0 0 0 5px
    }
}

.btnleft, a.btnleft, a.btnrgt, btnrgt {
    display: block;
    font-size: 14px;
    height: 45px;
    line-height: 35px;
    padding: 5px 20px;
    color: #005580;
    max-width: 400px !important;
    box-sizing: border-box;
    overflow: hidden;
    text-transform: uppercase;
    text-decoration: none;
    transition: all .8s;
    float: left;
    background-color: #fff;
    border: 1px solid #dde5ee;
    background-color: #fff
}

    .btnleft:hover, a.btnleft:hover, a.btnrgt:hover, btnrgt:hover {
        background-position: left bottom
    }

.oulinestelno:hover {
    background-position: right bottom;
    cursor: auto
}

a.btnleft:hover, a.btnrgt:hover {
    background-color: #5c92b5;
    border: 1px solid #5c92b5
}

.btnleft h2, .btnleft h3, .btnrgt h2, .btnrgt h3 {
    color: #005580;
    font-size: 14px !important
}

.btnleft:hover h2, .btnleft:hover h3, .btnrgt:hover h2, .btnrgt:hover h3 {
    transition: all linear .8s
}

a.nohover:hover {
    text-decoration: none
}

.indent {
    display: block;
    padding-left: 25px;
    line-height: 1.2em
}

.floatleft {
    float: left
}

.floatright {
    float: right
}

.na {
    font-size: 8px
}

.whitetextnohover, .whitetextnohover:active, .whitetextnohover:link, .whitetextnohover:visited {
    color: #fff;
    text-decoration: none
}

    .whitetextnohover:hover {
        color: #fff;
        text-decoration: underline
    }

.listSpacing {
    line-height: 34px
}

a.obvious:active, a.obvious:link, a.obvious:visited, a.standoutlink:link, a.standoutlink:visited {
    text-decoration: underline
}

.smallergrey, a.smallergrey, a.smallergrey:active, a.smallergrey:link, a.smallergrey:visited, smallergrey a:link {
    font-size: .9em;
    color: #595959;
    text-decoration: none;
    margin-bottom: 5px;
    line-height: 1em
}

@media screen and (max-width: 800px) {
    .btnleft, a.btnleft, a.btnrgt {
        width: 100%
    }

    .btnleft, a.btnleft {
        margin-right: 2%;
        margin-left: 0;
        margin-bottom: 25px
    }

    .btnrgt, a.btnrgt {
        margin-right: 0;
        margin-left: 0
    }
}

.btnbookCourse {
    float: right;
    width: auto;
    text-align: center;
    text-indent: 0;
    margin: 0 !important;
    background-color: #08c;
    border-color: #005e8c !important;
    color: #fff !important;
    min-height: 33px
}

.individualDate:hover .btnbookCourse {
    background-color: #00334d !important;
    cursor: pointer;
    transition: all linear .2s
}

@media all and (max-width: 450px) {
    .btnbookCourse {
        float: none
    }
}

.PnlBook_ScheduledCourse, .PnlContactToRequestPrivateQuote, .chooseADate, .OnlineEnquiryPopup, .AskQuestionAboutACoursePanel, #VenueDetailPopup, #VirtualCourseExplanationPopup {
    border: 1px solid #ccc;
    -webkit-box-shadow: 0 2px 4px 0 rgba(133,133,133,.8);
    -moz-box-shadow: 0 2px 4px 0 rgba(133,133,133,.8);
    box-shadow: 0 2px 4px 0 rgba(133,133,133,.8);
    background-color: #fff;
    position: fixed;
    box-sizing: border-box;
    top: 2%;
    left: 10%;
    width: 80%;
    overflow-y: scroll;
    height: 90%;
    max-height: 650px;
    box-sizing: border-box;
    z-index: 100 !important;
    padding: 20px 20px 150px 20px;
}

@media all and (max-width:840px) {
    .PnlBook_ScheduledCourse, .PnlContactToRequestPrivateQuote, .chooseADate, .OnlineEnquiryPopup, .AskQuestionAboutACoursePanel, #VenueDetailPopup, #VirtualCourseExplanationPopup {
        width: 99%;
        left: 0.5%;
        padding-top: 40px;
    }
}



.AskQuestionAboutACoursePanel {
    padding: 25px 40px;
    background-color: #fcfcfc;
    margin-top: 20px;
    padding-bottom: 250px;
}

    .AskQuestionAboutACoursePanel:before {
        content: "Send us your question";
        font-size: 1.2em;
        display: block;
        margin-bottom: 10px;
    }

#BookingPlaceholder {
    position: absolute;
    width: 95%;
    box-sizing: border-box;
}

.chooseADate:before {
    content: "Choose a date";
    padding-left: 30px
}

@media all and (min-width: 1500px) {
    .PnlBook_ScheduledCourse, .PnlContactToRequestPrivateQuote, .chooseADate, .OnlineEnquiryPopup {
        left: 18%;
        width: 60%
    }
}

.PnlBook_ScheduledCourse .lblError, .PnlContactToRequestPrivateQuote .lblError, .OnlineEnquiryPopup .lblError {
    clear: both;
    display: block;
    margin-bottom: 8px
}







.ContactConsent li {
    position: relative;
}

.ContactConsent label {
    top: -2px;
    position: relative;
}



.sendCopyToEmail {
    margin: 0;
    display: block;
    border: none;
    padding: 5px 5px 0px 0;
    font-size: .85em
}

.ulContact li {
    margin: 5px 3% 10px 0;
    min-width: 150px;
    width: 30%;
}

@media all and (max-width:650px) {
    .ulContact li {
        width: 90%;
    }
}

.ulContact li.fullWidth {
    width: 100% !important;
    margin: 0;
}

.MiscStuff {
    display: block
}

.ddlWhereHearAbout {
    font-size: .85em;
    width: 100%;
    margin: 0;
    border: 1px solid #e8e8e8;
    background-color: #f9f9f9;
}

.ulContact .requiredFields {
    font-size: .7em;
    color: #666
}





#pnlBookCourse .leftDivOnSuccessfulSend {
    margin-top: 10px !important
}

.ContactSendResult {
    color: #069;
    max-width: 290px;
    margin: 70px auto 0;
    text-align: center
}

    .ContactSendResult:before {
        content: "";
        display: block;
        height: 46px;
        width: 46px;
        background-color: #efefef;
        border-radius: 40px;
        margin: 0 auto 10px;
        background-color: #07a86f;
        content: "✓";
        font-size: 20px;
        color: #fff;
        line-height: 46px;
        text-align: center;
        font-weight: 700
    }

.btnSendAnotherRequest {
    margin: 0 auto !important;
    float: none !important
}





#pnlRequestQuote .CourseListsDDL {
    font-size: 1em
}


.CoursesAndDatesPlaceholder {
    font-size: 1.2em;
    line-height: 1.5em;
    padding: 0px 20px 0 0;
    box-sizing: border-box;
    background-color: #fff;
    z-index: 12;
    right: 0 !important;
    left: 35% !important
}

    .CoursesAndDatesPlaceholder .chosen-single, .CoursesAndDatesPlaceholder .chosen-container .chosen-drop {
        width: 60% !important;
        max-width: 60% !important
    }

.divBtnSubmit {
    width: 100%;
    margin: 5px 0 0
}

@media all and (max-width: 950px) {
    .CoursesAndDatesPlaceholder {
        width: 100% !important;
        left: 0 !important;
        margin-top: 40px
    }

    .PnlBook_ScheduledCourse .closeTheNote, .PnlContactToRequestPrivateQuote .closeTheNote, .chooseADate .closeTheNote, .OnlineEnquiryPopup .closeTheNote {
        top: 0 !important
    }




    .btnWithTextSmall {
        margin-top: 5px;
        float: right
    }

    .MainTitle {
        display: none !important;
        visibility: hidden
    }

    #BookDiv:before {
        content: "Book A Course";
        display: inline-block;
        color: #888;
        padding-top: 5px;
        position: absolute;
        top: -2px;
        left: 13px;
        font-size: .8em !important;
        text-transform: uppercase
    }

    #QuoteDiv, #BookDiv {
        padding-top: 20px
    }

        #QuoteDiv:before {
            content: "Get a Quote";
            display: inline-block;
            color: #069;
            padding-top: 10px;
            position: absolute;
            top: 0;
            left: 15px
        }

    .divBtnSubmit {
        width: 100%;
        float: none
    }
}

@media all and (max-width: 590px) {
    #QuoteDiv, #BookDiv {
        padding-top: 0
    }
}

.bookCourseOrPrvateQuotepnl .chosen-single {
    width: 100% !important;
    max-width: 100% !important
}

.bookCourseOrPrvateQuotepnl .chosen-single, .bookCourseOrPrvateQuotepnl .chosen-container .chosen-drop {
    width: 100% !important;
    max-width: 100% !important
}



.modifiedContact .MsgBdy {
    background-color: transparent !important;
    border: none !important;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none
}

.MainTitle {
    font-size: 1.2em !important;
    line-height: 1.3em;
    color: #000 !important;
    margin-bottom: 5px !important;
}





.modifiedContact .lblForTxtWithAnim {
    background-color: rgba(255,255,255,.5);
    line-height: 10px;
    top: -1px
}

.modifiedContact .MsgBdyInner {
    padding: 0 !important
}



#BookingSendResult, #pQuoteSendResult {
    padding: 20px
}

.btnSendContact {
    width: 97% !important;
    display: block;
    margin: 0px auto 0 auto !important;
    text-align: center;
}


.bookCourseOrPrvateQuotepnl .btnSendContact {
    margin: 0 auto
}

@media all and (max-width: 950px) {
    .bookCourseOrPrvateQuotepnl .btnSendContact {
        width: 100%;
        float: none
    }
}


.AskQuestionForm .btnSendContact {
    margin: 15px auto !important;
    padding: 3px 15px !important;
}



@media all and (max-width: 1000px) {
    .btnSendContact {
        font-size: 1.1em !important
    }
}

@media all and (max-width: 1000px) {
    .MsgBdy {
        border: none !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important
    }

    .MsgBdyInner {
        padding-top: 0 !important
    }


    .GDPRConsent {
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        padding: 10px 0 !important
    }
}






.ExtraInformation .txtWithAnim-group .txtWithAnim {
    padding: 5px
}

.BookRequestedDate {
    display: inline !important;
    clear: none !important
}

.contactFromHeader .txtWithAnim-group {
    width: 100% !important
}



@media all and (max-width: 800px) {


    #pnlRequestQuote .MainMessage {
        padding-top: 30px
    }

    .MsgBdyInner {
        padding-bottom: 0 !important
    }


    .CoursesAndDatesPlaceholder {
        width: 100% !important
    }
}

@media all and (max-width: 500px) {
    .MsgBdyInner {
        padding: 0 5px !important
    }

    .CoursesAndDatesPlaceholder {
        padding: 0 10px 10px 0
    }
}





.subscriptionInfo {
    display: block;
    margin-top: 10px;
    line-height: 1.2em;
    font-style: italic
}

.BookingSelectCourseName {
    color: #069 !important;
    border: none;
    border-bottom: 1px solid #d6e4f5;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    padding: 0 !important
}

.PnlBook_ScheduledCourse .DateForQuote {
    max-width: 200px
}

@media all and (min-width: 880px) {
    .PnlBook_ScheduledCourse .DateForQuote {
        max-width: 300px
    }
}

.ExtraInformation {
    margin: 0 !important;
    display: block
}



.PnlBook_ScheduledCourse h2, .PnlContactToRequestPrivateQuote h2, .OnlineEnquiryPopup h2 {
    font-size: .9em;
    padding: 2px 20px;
    background-color: #017098;
    color: #fff
}

@media all and (max-width: 900px) {
    .DateForQuote {
        min-width: 130px !important
    }
}

.numberOfDelegatesforQuote {
    width: 48px
}

.txtCourseTitleLong {
    min-width: 100%
}

.closeBtn, .closePanel, a.closeBtn {
    position: absolute;
    top: -20px;
    right: -20px;
    height: 20px;
    width: 20px;
    color: #fff !important;
    border: 1px solid #edc4ce !important;
    cursor: pointer;
    background: url(/lib/aesthetics-graphics/icons/x.gif) 8px 8px no-repeat #f3d8df;
    transition: none;
    padding: 5px
}

.closeBtn {
    height: 14px;
    width: 14px
}

.closePanel:hover {
    background: url(/lib/aesthetics-graphics/icons/x.gif) 8px -9px no-repeat #db8aa0;
    border: 1px solid #cf6380 !important;
    transition: none
}

.closeBtn:hover {
    background: url(/lib/aesthetics-graphics/icons/x.gif) 4px 5px no-repeat #db8aa0;
    border: 1px solid #cf6380 !important;
    transition: none
}

.closePanel {
    top: 0;
    right: 0;
    height: 25px;
    width: 25px
}

.tdPublicCourseCost {
    border: none !important
}

.ulCourses {
    color: #005580;
    padding-top: 30px;
    margin-top: 30px
}

.greyScreen {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(255,255,255,.7);
    z-index: 97;
    backdrop-filter: blur(5px);
    box-sizing: border-box
}

.noCoursesFound {
    padding: 80px 10px
}

.requiredFields {
    font-size: .7em;
    color: #005580
}

.searchBoxHolder {
    position: relative;
    max-width: 500px;
    top: 0px
}


    .searchBoxHolder:before {
        position: absolute;
        display: none;
        top: 0;
        left: 0;
        height: 30px;
        width: 20px;
        opacity: .5;
        background-image: url(/lib/aesthetics-graphics/icons/topBarSearchIcon.png);
        content: "";
        z-index: 100;
        border-right: solid 1px #ccc
    }

.txtFilterCourses {
    width: 98%;
    border: 1px solid #dadaf1;
    display: block;
    margin-bottom: 10px;
    max-width: 300px;
    color: gray !important
}



#chkHolderFavsFilter {
    position: relative;
    margin-top: 1px
}

#chkOnlyShowFavs {
    position: absolute;
    top: 10px;
    left: 10px
}




.txtSiteSearch {
    position: relative;
    left: 0;
    border: solid 1px #ccc;
    line-height: 15px;
    padding: 5px 5px 5px 10px;
    display: block;
    transition: all .2s linear;
    height: 30px;
    width: 100%;
    height: 40px;
    background-color: transparent
}

.CoursesAndDatesPlaceholder .chosen-container-single .chosen-single {
    color: #374048;
    border: none;
    border: 1px solid #069;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    padding: 1px 5px !important;
    line-height: 30px;
    height: 30px
}

.FilterCourseList {
    display: block;
    position: relative;
    padding-left: 35px;
    box-shadow: 0px 3px 5px 0px rgb(224 224 235);
}

    .FilterCourseList:before {
        content: "";
        height: 37px;
        position: absolute;
        left: 0;
        width: 35px;
        display: inline-block;
        float: left;
        background: url(/lib/aesthetics-graphics/icons/SiteIcons.svg) no-repeat #fff;
        background-position: -20px -584.5px;
    }

    .FilterCourseList .txtSiteSearch {
        background-color: #fdfdfd;
        color: #000 !important
    }

.xEmptyFilter {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 5px;
    z-index: 100;
    font-size: 12px;
    font-weight: 700
}

.FilterCourseList .txtSiteSearch:focus {
    font-style: normal
}

.FilterCourseList {
    float: left
}

.vBox, .vTable {
    display: inline-block;
    cursor: pointer;
    height: 40px;
    width: 40px;
    margin: 0 !important;
    float: right
}

.chosenView.vBox:after {
    background-color: #fff !important
}

.vBox2:after {
    content: "2";
    right: 4px
}

.vBox3:after {
    content: "3"
}

#liFilterActivated, #liFavouritesActivated {
    display: block;
    font-size: .8em;
    position: relative;
    clear: both;
    padding-left: 30px
}

    #liFilterActivated div, #liFavouritesActivated div, #liFavouritesActivated a {
        display: inline-block;
        cursor: pointer;
        text-decoration: underline;
        margin: 0 10px
    }

    #liFilterActivated:before, #liFavouritesActivated:before {
        color: #fff;
        text-align: center;
        line-height: 15px;
        content: " ";
        display: inline-block;
        font-size: .8em;
        width: 24px;
        height: 16px;
        margin-right: 7px;
        border-radius: 10px;
        background: url(/lib/aesthetics-graphics/icons/SiteIcons.svg) no-repeat transparent;
        background-position: 1px -604px;
        position: absolute;
        top: 3px;
        left: 0
    }

    #liFavouritesActivated:before {
        width: 27px;
        height: 21px;
        background-position: 0 -586px
    }

.vTable, .vBox {
    margin-left: 0;
    position: relative
}

    .vBox:before, .vTable:before {
        content: "";
        display: block;
        height: 24px;
        width: 23px;
        background: url(/lib/aesthetics-graphics/icons/SiteIcons.svg) no-repeat transparent;
        background-position: -1px -564px;
        margin: 8px 0 0 7.5px;
        transition: all .2s linear;
        background-position: -1px -620px;
        opacity: .6
    }

.vBox2 {
    width: 40px
}

    .vBox2:before {
        width: 17px;
        margin: 7px 0 0 10px
    }

.vBox3 {
    width: 43px
}

    .vBox3:before {
        width: 25px;
        margin: 7px 0 0 8px
    }

.vBox4 {
    width: 50px
}

    .vBox4:before {
        width: 33px;
        margin: 7px 0 0 8px
    }

.vBox5 {
    width: 59px
}

    .vBox5:before {
        width: 41px;
        margin: 7px 0 0 8px
    }

@media all and (max-width: 1500px) {
    #choiceVBox5 {
        display: none !important
    }
}

@media all and (max-width: 1200px) {
    #choiceVBox3 {
        display: none !important
    }
}

.vBox7:before {
    width: 50px;
    margin: 7px 0 0 8px
}

.vBox:after {
    position: absolute;
    top: 19px;
    right: 2px;
    height: 15px;
    font-size: .8em !important;
    width: 15px;
    text-align: center;
    background-color: #f9fafc;
    line-height: 15px
}

.vTable:before {
    background-position: -25.5px -564px
}

.chosenView {
    border: 1px solid #f2f2f2;
    background-color: #fff;
    box-shadow: 0 2px 6px -1px rgb(0 0 0/20%)
}

    .chosenView:before, .chosenView:before {
        opacity: 1
    }

.bookCourseOrPrvateQuotepnl ::-webkit-input-placeholder {
    font-size: .85em;
    color: #737373 !important
}

.bookCourseOrPrvateQuotepnl :-moz-placeholder {
    color: #737373;
    font-size: .85em
}

.scheduleTopSearch {
    position: relative;
    height: 30px;
    width: 250px
}

.btnRemoveSearch {
    font-size: .65em !important;
    margin: 0 30px 0 -7px !important;
    height: 30px;
    text-transform: none;
    padding: 0 5px
}

.bookCourseOrPrvateQuotepnl ::-moz-placeholder {
    color: #4e5a65;
    font-size: .85em
}

.bookCourseOrPrvateQuotepnl input placeholder {
    color: #666 !important;
    font-size: .85em
}

.bookCourseOrPrvateQuotepnl :-ms-input-placeholder {
    color: #4e5a65;
    font-size: .85em
}

.landingPageLinkAuto {
    font-size: .8em;
    display: inline-block;
    float: left;
    margin: 0 10px;
    line-height: 1.2em;
    color: #999 !important
}

.tblCourses thead td {
    border: 1px solid #ccd8e5;
    font-weight: 500;
    font-size: .9em !important;
    line-height: 1.25em;
    text-align: right;
    vertical-align: middle;
    padding-top: 10px !important;
    color: #737373 !important
}

.tblCourses tr td {
    padding: 5px 5px 5px 10px;
    text-align: left;
    border: none
}

.tblCourses tr.trHoldingCourseDates td {
    padding: 0 !important
}

.courseLink {
    font-size: 1.05em !important
}

.tdPublicCourseDuration .title {
    top: 23px !important
}

.tdPublicCourseCost .title {
    top: 20px !important
}

.tdPublicCourseCost .explanation {
    display: none
}

.tdPublicCourseCost:hover .explanation {
    display: inherit;
    text-align: left;
    position: absolute;
    background-color: #fefeff;
    color: #005580;
    border: 1px solid #dde5ee;
    font-size: 1.2em !important;
    line-height: 1.4em;
    text-transform: none;
    padding: 10px;
    left: 90%;
    top: -35px;
    z-index: 100;
    width: 200px;
    -webkit-box-shadow: 1px 3px 5px 0 #949494;
    -moz-box-shadow: 1px 3px 5px 0 #949494;
    box-shadow: 1px 3px 5px 0 #949494
}

thead .tdPublicCourseCost:hover div {
    font-size: 1em
}

.tblCourses thead tr:hover {
    background-color: #fff !important
}

.priceMoreInfo {
    display: inline-block;
    margin: 2px 0 0 5px;
    padding: 0 2px;
    background-color: #eee;
    border: 1px solid #ccc;
    text-align: center;
    border-radius: 15px;
    height: 15px;
    line-height: 14px;
    font-size: 11px;
    width: 15px;
    box-sizing: border-box
}

.tblCourses tr {
    border-top: dotted 2px #eff2f6;
    border-bottom: solid 1px #dee4ed;
    border-left: solid 2px #dee4ed;
    border-right: solid 1px #dee4ed;
    font-size: .95em
}

    .tblCourses tr:hover {
        background-color: #fff;
        border-left: solid 2px #aab8d4;
        border-right: solid 1px #778ebb
    }

.trVideoOnly, .trVideoOnly:hover {
    padding-left: 0 !important;
    background-color: #f4f6f9 !important
}

    .trVideoOnly td {
        padding-left: 3px !important
    }

    .trVideoOnly video {
        max-width: 400px;
        margin: 0 auto;
        display: block
    }

    .trVideoOnly .hundredWidthVideo {
        margin: 0
    }

.trHoldingCourseDates {
    border-bottom: dotted 1px #ededed
}

.noSchDatesCostAndDurationtdReplacement {
    color: #595959 !important;
    font-size: .85em !important
}

.tblCoursesDatesRow {
    background-color: #eef8fe !important;
    border-top: solid 1px #dde5ee
}

.btnCourseDatesShow, .btnCourseDatesShow:link, a.btnCourseDatesShow, a.btnCourseDatesShow:visited {
    font-size: .9em !important;
    line-height: 1.2em !important;
    position: relative;
    padding-left: 25px;
    text-align: left;
    line-height: 1.2em !important;
    display: block;
    transition: all .2s linear
}

    .btnCourseDatesShow:before {
        content: "+";
        position: absolute;
        top: 11px;
        left: 10px;
        color: #069;
        height: 15px;
        width: 15px;
        text-align: center;
        line-height: 16px
    }

.DatesVisible:before {
    content: "-"
}

.btnCourseDatesShow:hover:before {
    content: "+";
    font-weight: 700;
    color: #4d6699;
    transition: all .2s linear
}

.DatesVisible:before {
    content: "-"
}

.DatesVisible:hover:before {
    content: "-" !important
}

.btntblCoursesRequestQuote, .btntblCoursesViewOutline, a.btntblCoursesRequestQuote, a.btntblCoursesViewOutline {
    font-size: .78em !important;
    line-height: 1.2em !important;
    width: auto;
    background-color: #f1fbff;
    padding: 3px 15px !important;
    color: #0080b3 !important;
    text-align: center;
    border: 1px solid #99e2ff;
    transition: all .2s ease-in-out
}



.afterbook:hover:after {
    background-color: #005580;
    transition: all .2s;
    border: 1px solid #046
}

.btntblCoursesViewOutline, .trtblCoursesRequestQuote {
    width: 80px;
    color: #005580 !important;
    min-width: 90px
}

@media all and (max-width: 1100px) {
    .outlinesLeftMain, .CourseListsLeftMain {
        width: 100%
    }

    .outlinesToolbox, .CourseListsToolbox {
        display: none
    }
}

@media all and (max-width: 750px) {
    .tblCourses tr td, .tblCourses tr td a {
        font-size: .9em
    }

    .tblCourses thead td {
        font-size: .7em
    }

    .btntblCoursesViewOutline, .trtblCoursesRequestQuote {
        width: auto;
        min-width: 20px
    }
}

@media all and (max-width: 720px) {
    .tblCourses {
        margin-top: 100px
    }
}

@media all and (max-width: 600px) {
    .tblCourses thead td {
        font-size: .6em
    }

    .tblCourses tr td.Course a {
        font-size: 1em;
        line-height: 1.5em
    }
}

.otagcloud {
    font-size: .7em;
    color: #888;
    padding: 10px;
    max-width: 1450px;
    margin: 0 auto;
    text-align: center;
}

.priceMoreInfo {
    color: #595959;
    font-weight: 400
}

.relativeHolderForSearches {
    position: relative;
    margin-top: 20px
}

.threelistgroup {
    overflow: hidden;
    display: block;
    background-color: #046;
    width: 100%;
    min-height: 80px;
    padding: 25px 0 20px;
    border-bottom: dotted 2px #00334d
}

    .threelistgroup ~ .footer {
        margin-top: 0
    }

    .threelistgroup ul {
        width: 100%;
        max-width: 1050px;
        display: block;
        margin: 0 auto !important
    }

        .threelistgroup ul li {
            color: #b9d0df;
            display: block;
            width: 12.5%;
            min-width: 120px;
            float: left;
            font-size: .95em;
            padding: 15px 20px 0 15px;
            box-sizing: border-box;
            min-height: 80px;
            text-align: center;
            line-height: 1.4em;
            position: relative;
            font-family: Poppins, sans-serif;
            font-weight: lighter;
        }

            .threelistgroup ul li:before {
                content: "";
                width: 70px;
                position: relative;
                height: 70px;
                margin: 0 auto 5px;
                left: 0;
                top: -5px;
                display: block;
                color: #000;
                background: url(/lib/aesthetics-graphics/icons/InfoIconsBlue.svg) no-repeat -72px 5px transparent;
                background-size: cover
            }

            .threelistgroup ul li:nth-of-type(2):before {
                background-position: -295px 0
            }

            .threelistgroup ul li:nth-of-type(3):before {
                background-position: -212px 0
            }

            .threelistgroup ul li:nth-of-type(4):before {
                background-position: -145px 0
            }

            .threelistgroup ul li:nth-of-type(5):before {
                background-position: -508px 12px
            }

            .threelistgroup ul li:nth-of-type(6):before {
                background-position: -368px 0
            }

            .threelistgroup ul li:nth-of-type(7):before {
                background-position: 0 -5px
            }

            .threelistgroup ul li:nth-of-type(8):before {
                background-position: -440px 0
            }

@media all and (max-width: 940px) {
    .threelistgroup ul li {
        font-size: .9em
    }
}

@media all and (max-width: 855px) {
    .threelistgroup ul li {
        font-size: .8em
    }
}

@media all and (max-width: 650px) {
    .threelistgroup {
        display: none
    }
}

.contactafterResult {
    padding: 0 35px;
    display: block
}

@media all and (max-width: 450px) {
    .contactFromHeader {
        width: 200% !important;
        left: -100% !important
    }
}







.headerContactMainTitle a {
    position: relative;
    padding-left: 0
}

.ulHeaderDoubleContact li .HeaderContactExtraDetails {
    clear: both;
    display: block;
    text-align: left;
    font-size: .8em !important;
    text-transform: none;
    max-width: 150px;
    height: 0;
    overflow: hidden;
    transition: none;
}

.ulHeaderDoubleContact li:hover .HeaderContactExtraDetails {
    height: auto;
    transition: none;
    padding: 10px;
    font-size: 1em;
    box-shadow: 0 5px 6px 1px rgba(0,0,0,.1);
    line-height: 1.4em;
    cursor: pointer;
    margin: 0 0 0 -15px;
    background-color: #438cd6;
    color: #fff !important;
    width: 100px;
    white-space: wrap;
    font-size: 1.1em !important;
    transition: background-color .2s linear;
}

    .ulHeaderDoubleContact li .HeaderContactExtraDetails:hover,
    .ulHeaderDoubleContact li:hover .HeaderContactExtraDetails:hover {
        background-color: #438cd6;
        border-top: 0px;
    }

.ulHeaderDoubleContact li .contactOnline, .ulHeaderDoubleContact li .onScroll {
    display: none;
    visibility: hidden
}

.ulHeaderDoubleContact li a:hover {
    color: #284558
}

.showTheForm {
    visibility: visible
}

.hideTheForm {
    animation-name: fadeoutDiv;
    animation-duration: .6s;
    transition: none;
    opacity: 0;
    pointer-events: none;
    left: -1000px
}

.contactFromHeader {
    position: absolute;
    top: 70px;
    right: 5px;
    overflow-y: visible;
    max-width: 500px;
    width: 100%;
    font-size: .9em
}

@media all and (max-width: 400px) {
    .contactFromHeader .contactScrollControl {
        right: -60px
    }
}

.hideHeaderContactForm {
    height: 0 !important;
    -webkit-transition: linear .5s height;
    -moz-transition: linear .5s height;
    -o-transition: linear .5s height;
    transition: linear .5s height;
    overflow: hidden;
    animation-name: hideHeaderContact;
    animation-duration: 1s;
    animation-iteration-count: 1
}

.contactFromHeader, .contactFromHeader .contactScrollControl {
    height: 400px
}

@media all and (min-height: 800px) {
    .contactFromHeader {
        height: 650px
    }
}

@media all and (min-height: 601px) {
    .contactFromHeader {
        height: 490px
    }
}

@media all and (max-height: 600px) {
    .contactFromHeader {
        height: 390px
    }
}

@media all and (max-height: 480px) {
    .contactFromHeader {
        height: 200px
    }

    .contactFromHeader {
        font-size: .8em
    }
}

@media all and (max-height: 400px) {
    .contactFromHeader {
        height: 210px
    }

    .contactFromHeader {
        font-size: .8em
    }
}

@media all and (max-height: 300px) {
    .contactFromHeader {
        height: 100px
    }

    .contactFromHeader {
        font-size: .7em
    }
}

#divHeaderContact {
    position: absolute;
    left: 142px;
    top: 9px;
    color: #000;
    z-index: 98;
    transition: all .2s linear;
    height: 60px;
    padding: 0 10px 0 0;
}

@media all and (max-width:700px) {
    #divHeaderContact {
        border-radius: 0px;
    }
}

.contactFromHeader .MsgBdy {
    border: none !important;
    border-left: none !important;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none
}

.contactFromHeader .contactScrollControl {
    position: relative;
    padding: 20px;
    width: 100%;
    border-radius: 3px;
    box-sizing: border-box;
    overflow-y: scroll;
    border: solid 1px #f2f2f2;
    -webkit-transition: linear .5s height;
    -moz-transition: linear .5s height;
    -o-transition: linear .5s height;
    transition: linear .5s height;
    background-color: #fff !important;
    -webkit-box-shadow: 0 7px 15px 0 rgba(0,0,0,.25);
    -moz-box-shadow: 0 7px 15px 0 rgba(0,0,0,.25);
    box-shadow: 0 7px 15px 0 rgba(0,0,0,.25);
    font-size: 15px
}

@keyframes hideHeaderContact {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.showHeaderContactForm {
    height: 500px;
    -webkit-transition: linear .5s height;
    -moz-transition: linear .5s height;
    -o-transition: linear .5s height;
    transition: linear .5s height;
    animation-name: showHeaderContact;
    animation-duration: 1s;
    pointer-events: all;
    animation-iteration-count: 1
}

@keyframes showHeaderContact {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.contactfromHeaderTitleBar {
    border-bottom: dotted 1px #efefef;
    display: block;
    width: 100%;
    margin: -20px 0 15px -20px;
    padding: 20px 0 8px 20px !important;
    font-size: 1.35em;
    color: #0373b0;
    min-height: 31.5px;
    line-height: 1.6em;
    box-sizing: border-box
}

@media all and (max-width: 500px) {
    .PnlBook_ScheduledCourse, .PnlContactToRequestPrivateQuote, .OnlineEnquiryPopup {
        width: 95%;
        margin: 0 !important;
        left: 0
    }



    .ulContact {
        width: 100% !important
    }



    .txtCourseTitleLong {
        width: 80%;
        min-width: 50%
    }

    .DateForQuote {
        width: 50%;
        min-width: 50%
    }

    .numberOfDelegatesforQuote {
        min-width: 40px;
        width: 40px
    }

    .ExtraInformation textarea {
        width: 90%;
        min-width: 50%;
        padding: 10px !important
    }

    .btnSendContact {
        margin: 0 !important
    }
}

.contactFromHeader .upnlContact {
    padding-bottom: 100px
}

.contactFromHeader .whereDidYouHearAboutUs {
    color: #0373b0 !important
}

.contactFromHeader:after, .contactFromHeader:before {
    top: -9px;
    left: 90%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.contactFromHeader:after {
    border-color: transparent;
    border-bottom-color: #fff;
    border-width: 5px;
    margin-left: -5px
}

.contactFromHeader:before {
    top: -13px;
    border-color: transparent;
    border-bottom-color: #f2f2f2;
    border-width: 8px;
    margin-left: -8px
}

@media all and (min-width: 501px) {
    .DisplayFoMob {
        display: none
    }
}

.ulContact {
    display: flex;
    flex-wrap: wrap;
    clear: both;
    width: 100%;
    font-size: 0.9em;
}

.chkboxs {
    padding: 15px 0 10px 0
}

.txtWithAnim-group {
    position: relative;
    width: 98%;
    padding-top: 23px;
    margin-top: 5px;
}

.HearAboutMoreDetails .smallContactTitle {
    font-size: 0.8em;
}

.txtWithAnim, .txtNoAnim, .pnlOnlineEnquiry input[type="text"], .pnlOnlineEnquiry select {
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid #e8e8e8;
    background-color: #f9f9f9;
    display: inline;
    font-family: Poppins,sans-serif;
    color: #374048;
    width: 100%;
    font-size: .95em;
    box-sizing: border-box;
    padding: 10px 10px;
    transition: linear all .2s;
}



.txtContactShowIfEmpty {
    background-color: transparent !important;
    font-size: 1em !important;
    padding: 4px !important
}

.numberOfDelegatesforQuote {
    width: 70px !important;
    text-align: center;
    background-color: #f9f9f9 !important;
}

.txtContactShowIfEmpty {
    background-repeat: no-repeat;
    background-position: 3px center;
    min-width: 65px;
    text-indent: 3px
}

.ExtraInformation .txtWithAnim-group {
    width: 100% !important;
    max-width: 100% !important
}

.txtWithAnim:focus {
    outline: 0
}

.lblForTxtWithAnim {
    position: absolute;
    top: 0px;
    height: 8px;
    line-height: 12px;
    left: 0;
    font-size: .9em;
}












.liBlueText {
    margin: 15px 0 0 !important
}

    .liBlueText * {
        color: #67688f !important;
        font-size: .89em
    }

@-webkit-keyframes inputHighlighter {
    from {
        background: #4285f4
    }

    to {
        width: 0;
        background: 0 0
    }
}

@-moz-keyframes inputHighlighter {
    from {
        background: #4285f4
    }

    to {
        width: 0;
        background: 0 0
    }
}

@keyframes inputHighlighter {
    from {
        background: #4285f4
    }

    to {
        width: 0;
        background: 0 0
    }
}

.MsgBdy {
    background-color: transparent !important;
    z-index: 10;
}

.MsgBdyInner {
    padding: 0;
    background-color: transparent !important;
}

.contactDetails {
    display: block;
    padding: 20px 20px 20px !important;
    border-top: dotted 1px #ccc;
    color: #006699;
    font-size: 1.05em
}

    .contactDetails b {
        margin-bottom: 15px;
        font-size: 1.2em;
        display: block
    }

.contactFormFullWidthOnPage-Restraint h2 {
    display: none
}

.EnterDelegateNames {
    display: block;
    margin: 0 0 0 24px
}

    .EnterDelegateNames textarea {
        height: 60px !important;
        border: dotted 1px #ccc !important;
        padding: 5px !important
    }

.TxtTitle {
    font-size: .85em;
    margin-bottom: -5px
}

.EnterDelegateNames .TxtTitle {
    width: 100%;
    clear: both;
    display: block
}

.EnterDelegateNames .txtWithAnim-group {
    width: 100% !important
}

.txtNoOfDelegates .txtWithAnim {
    min-width: 40px;
    margin-left: 0
}

.txtCourseTitleLong {
    width: 100% !important
}

.mltilineAnim .txtAnimBar {
    margin-top: -5px
}




@supports(-ms-ime-align:auto) {
    .mltilineAnim .txtAnimBar {
        margin-top: 0 !important
    }
}

@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none) {


    .mltilineAnim .txtAnimBar {
        margin-top: 0 !important
    }
}

.animLoading {
    line-height: 50px;
    position: relative;
    padding-left: 50px
}

    .animLoading:before {
        content: "";
        left: 5px;
        position: absolute;
        margin-right: 20px;
        top: 9px;
        width: 25px;
        height: 25px;
        border: 3px solid #ccc;
        border-radius: 50%;
        border-top-color: #069;
        animation: spin 1s ease-in-out infinite;
        -webkit-animation: spin 1s ease-in-out infinite
    }

@keyframes spin {
    to {
        -webkit-transform: rotate(360deg)
    }
}

@-webkit-keyframes spin {
    to {
        -webkit-transform: rotate(360deg)
    }
}

#JsRequired {
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 40px;
    padding: 10px;
    box-sizing: border-box;
    opacity: .7;
    background-color: rgba(0,0,0,.8);
    color: #fff;
    z-index: 100;
    animation: 15s fadeIn;
    animation-fill-mode: forwards;
    visibility: hidden;
    text-align: center
}

#Loading {
    position: fixed;
    top: calc(50% - 140px);
    z-index: 100;
    left: calc(50% - 100px);
    height: 135px;
    width: 200px;
    padding-top: 0;
    overflow: hidden;
    -webkit-box-shadow: 0 2px 20px 0 rgba(50,50,50,.34);
    -moz-box-shadow: 0 2px 20px 0 rgba(50,50,50,.34);
    box-shadow: 0 5px 5px 0 rgba(50,50,50,.34);
    background-color: rgba(255,255,255,0.7) !important
}

    #Loading:before {
        display: block;
        height: 40px;
        width: 138px;
        content: "it training solutions";
        color: #fff;
        text-align: center;
        font-size: 13px;
        line-height: 50px;
        background-color: #312783;
        margin: 20px auto 0 auto;
    }

    #Loading:after {
        position: relative;
        content: "Loading...";
        top: 0px;
        width: 100%;
        display: block;
        margin: 0 auto;
        text-align: center;
        font-size: 0.7em;
        color: #666;
        font-style: italic;
    }

    #Loading .animLoading:before {
        left: -25px;
        top: 0;
        width: 45px;
        height: 45px
    }

.lds-itts,
.lds-itts div {
    box-sizing: border-box;
}

.lds-itts {
    display: block;
    position: relative;
    width: 138px;
    height: 45px;
    margin: 0 auto;
}

    .lds-itts div {
        display: block;
        position: absolute;
        left: 8px;
        width: 30px;
        top: -30px;
        animation: lds-itts 1.6s linear infinite;
    }

        .lds-itts div:nth-child(1) {
            left: 0px;
            animation-delay: -0.72s;
            background: red;
        }

        .lds-itts div:nth-child(2) {
            left: 36px;
            animation-delay: -0.48s;
            background: #5ac8f1;
        }

        .lds-itts div:nth-child(3) {
            left: 72px;
            animation-delay: -0.24s;
            background: yellow;
        }

        .lds-itts div:nth-child(4) {
            left: 108px;
            animation-delay: -0.12s;
            background: green;
        }

@keyframes lds-itts {
    0% {
        top: 4px;
        height: 32px;
    }

    20% {
        top: -10px;
        height: 64px;
    }

    40%, 100% {
        top: 4px;
        height: 32px;
    }
}


@keyframes fadeIn {
    99% {
        visibility: hidden;
        top: -20px
    }

    10% {
        visibility: hidden;
        top: -20px
    }

    14% {
        top: 0;
        visibility: visible
    }

    95% {
        top: 0;
        visibility: visible
    }
}


.SiteContainer, header {
    position: relative;
    max-width: 1500px;
    margin: 0 auto
}

.widthRestraintPage {
    position: relative;
    max-width: 1010px;
    margin: 0 auto
}

footer {
    display: none
}

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    font-family: Poppins, sans-serif;
}

    a, a:active, a:link, a:visited {
        text-decoration: none;
    }

input[type=button], input[type=password], input[type=search], input[type=submit], input[type=text] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

* {
    box-sizing: border-box;
    font-family: Poppins,Helvetica,Arial,sans-serif;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block
}

ol, ul {
    list-style: none
}

blockquote, q {
    quotes: none
}

    blockquote:after, blockquote:before, q:after, q:before {
        content: '';
        content: none
    }

table {
    border-collapse: collapse;
    border-spacing: 0
}

@-ms-viewport {
    width: device-width
}

.Hidden, .noFilterTextFound {
    display: none !important;
    visibility: hidden !important
}

.OverTitleUl li {
    padding: 2px 15px 0 0;
    font-size: 1em;
    margin: 0px;
}

.UnderTitleUl li {
    padding: 0;
}

.cDuration {
    border: solid 1px transparent;
    padding: 0 7px 0 0 !important;
    border-radius: 15px;
    margin: 0 5px 0 0 !important;
}

.OverTitleUl, .UnderTitleUl {
    font-size: 0.8em;
    margin: 0px 0;
    padding: 0;
}

.UnderTitleUl {
    margin: 10px 0 20px 0;
}

    .UnderTitleUl li {
        position: relative;
        margin: 0 0 3px 0px;
        padding-left: 0px !important;
        line-height: 1.4em;
        max-width: 300px;
    }

        .UnderTitleUl li:before {
            position: relative;
            top: 0px;
            left: -25px;
        }

.NoBorderButton {
    font-size: 0.9em;
}

    .NoBorderButton:hover {
        text-decoration: underline
    }

.OverTitleUl li.FavStatus {
    max-height: 33px;
    background-color: #fffbfb;
    padding-right: 10px !important;
    border: solid 1px #ffe6e6 !important;
    border-radius: 15px;
}

li.cDuration:before, li.nextScheduledDate:before, li.PrivateCoursesAvailable:before {
    content: "";
    display: none;
    top: 6px;
    height: 25px;
    width: 22px;
    margin-top: -11px;
    background: url(/lib/SVGs/IconsSVG.svg) no-repeat;
    background-size: 340px;
    position: absolute;
    opacity: 0.3;
}

li.cDuration:before {
    position: relative;
    display: inline-block;
    margin-top: -6px;
    opacity: 1;
}


li.nextScheduledDate:before {
    background-position: -150px 5px;
}

li.cDuration:before {
    margin-right: 2px;
    background-position: -19px 6px;
}

li.PrivateCoursesAvailable:before {
    background-position: -170px 5px;
}

.tblCourses {
    width: 100%;
    border-radius: 6px;
    margin: 0
}

    .tblCourses td:first-child, .tblCourses thead td:first-child {
        text-align: left;
        line-height: 1.5em
    }

    .tblCourses tr td {
        padding: 10px 5px 10px 10px;
        text-align: left;
        color: #637381 !important
    }

.tdPublicCourseDuration {
    border-left: solid 1px #eff2f6 !important;
    border-right: solid 1px #eff2f6 !important;
    height: 100%;
    min-width: 80px;
    line-height: 1.1em
}

.tblCourses td:nth-of-type(2), .tblCourses td:nth-of-type(3), .tblCourses td:nth-of-type(4), .tblCourses td:nth-of-type(5), .tblCourses td:nth-of-type(6) {
    width: 100px;
    text-align: center
}

.tblCourses td.tdNoDates {
    font-size: .8em;
    width: 20px !important;
    color: #666 !important;
    min-width: 80px !important;
    text-align: left !important;
    max-width: 20px;
    line-height: 15px
}

.tblCourses tr.trHoldingCourseDates {
    padding: 0 !important;
    background-color: #fff !important;
    border-bottom: solid 1px #ccc !important;
    border-left: solid 1px transparent !important;
    border-right: solid 1px transparent !important;
    border-top: solid 5px transparent !important
}

.tblCourses tr td, .tblCourses tr td a, .tblCourses tr td a:visited {
    color: #069;
    vertical-align: middle
}

.tblCourses tr:hover .btnCourseDatesShow:before {
    color: #000
}

.courseLink {
    font-size: 1.05em !important
}

.btntblCoursesRequestQuote, .btntblCoursesViewOutline, a.btntblCoursesRequestQuote, a.btntblCoursesViewOutline, .btnCourseDatesShow {
    font-size: .85em !important;
    line-height: 1.2em !important;
    text-align: center;
    transition: all .2s ease-in-out;
    background-color: #fff !important;
    color: #069 !important;
    border: solid 1px #dee5ed !important;
    padding: 5px 20px 5px 25px !important
}

.btnCourseDatesShow {
    padding-left: 30px !important
}

.btnCourseDatesVisible:hover, .btntblCoursesRequestQuote:hover, .btntblCoursesViewOutline:hover, a.btntblCoursesRequestQuote:hover, a.btntblCoursesViewOutline:hover {
    background: #00b383 !important;
    border: solid 1px #009970 !important;
    border-bottom: solid 1px #00805e !important;
    color: #fff !important
}

.btntblCoursesViewOutline, .trCourseDatesShow, .trtblCoursesRequestQuote {
    width: 80px;
    color: #005580 !important;
    min-width: 90px
}

.btntblCoursesRequestQuote {
    color: #005580 !important
}

.btntblCoursesRequestQuote, .btntblCoursesViewOutline {
    padding-left: 0;
    width: 100%
}

.btntblCoursesRequestQuote, .btntblCoursesViewOutline {
    display: block;
    height: 100%;
    box-sizing: border-box;
    font-size: .94em;
    line-height: 1.4em !important
}

.btntblCoursesRequestQuote {
    padding-left: 0;
    width: 100%
}

.btntblCoursesViewOutline:hover, a.btntblCoursesViewOutline:hover {
    background-color: #ff751a;
    border: 1px solid #f60;
    color: #fff !important;
    transition: all .2s ease-in-out
}

.tblCourseDatesRow tr {
    border-color: #fff
}

.tblCourseDatesRow {
    border: solid 1px #fff;
    width: 90%;
    box-sizing: border-box;
    margin-left: 10%;
    position: relative;
    margin: 0 auto 10px
}

    .tblCourseDatesRow .SingleDate {
        margin-bottom: 40px
    }

@media all and (max-width: 500px) {
    .tblCourseDatesRow {
        margin-left: -11px;
        margin-right: 0;
        width: 100%
    }

    .lookForIcon {
        margin-left: -8px !important
    }

    .individualDate {
        padding-right: 9px !important
    }
}

.trHoldingCourseDates table {
    width: 100%
}

.individualDate:hover {
    background-color: transparent !important;
    border-top: dotted 1px #ccc !important;
    border-bottom: dotted 1px #ccc !important
}

.individualDate {
    padding: 8px 170px 8px 10px !important
}

.btnInlineBook {
    content: "Book";
    height: auto;
    font-size: .9em;
    line-height: 1.7em;
    width: 60px;
    padding: 6px 3px 5px;
    text-align: center;
    transition: all linear .2s;
    position: absolute;
    right: 5px;
    top: 3px;
    background-color: #0077b3 !important;
    color: #fff !important;
    border: solid 1px #bbc4dd !important;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
    -moz-box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.1) !important;
    border-bottom: #bbc4dd solid 2px !important;
    border-radius: 5px
}

    .btnInlineBook:hover {
        background-color: #00334d !important;
        border: solid 1px #009970 !important;
        border-bottom: solid 1px #00805e !important;
        color: #fff !important
    }

.individualDate {
    margin: 0;
    background-color: transparent;
    width: 100% !important;
    min-height: 42px;
    padding: 10px 80px 5px 8px !important;
    position: relative;
    display: block;
    border: solid 1px #fff;
    border: solid 1px #dde1ee
}

.tblCourses .individualDate {
    min-width: 250px
}

.individualDate:first-of-type {
    margin-top: 0
}

.individualDate:last-of-type {
    margin-bottom: 0
}

@media all and (max-width: 1060px) {
    .individualDate {
        width: 100% !important;
        min-width: 100px !important
    }

    .tblCourseDates table {
        width: 100%
    }

    .individualDate:after {
        right: 2px !important
    }
}

.noSchDatesCostAndDurationtdReplacement {
    color: #43718a !important;
    font-size: .85em !important
}

.trHoldingCourseDates:hover {
    background-color: #fff !important
}



.divErrorSummaries .title {
    color: red
}

#divNocoursesFound {
    margin: 0px 0 20px;
    color: #43718a;
    max-width: 750px
}

.LPCommandLine {
    height: 40px;
    width: 100%;
    position: absolute;
    top: 250px;
    background-color: #fff;
    border-top: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
    z-index: 40;
    display: none
}

@media all and (max-width: 600px) {
    .LPCommandLine {
        top: 320px
    }
}

@media all and (max-width: 280px) {
    .LPCommandLine {
        display: none !important
    }
}

@media all and (max-width: 700px) {
    .LPCommandLine {
        height: 80px
    }
}

.LPCommandLine * {
    line-height: 40px;
    margin: 0 10px;
    font-size: .95em;
    color: #999 !important
}

.LPCommandLine a:hover {
    text-decoration: underline;
    color: #666 !important
}

.LPWidthRestraint {
    display: block;
    width: 94%;
    max-width: 1100px;
    margin: 0 auto
}

.RootPageTitle {
    margin-top: 40px;
    margin-bottom: 0;
    font-size: 1em !important
}

@media all and (max-width: 1150px) {
    .RootPageContent, .widthRestraintPage {
        margin-left: 8px
    }
}

.divStartOfCourseListContent {
    margin-top: 75px !important
}

.RootPageContent, .SiteContainer, .widthRestraintPage {
    z-index: 5 !important;
    position: relative !important;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 15px;
}

.errorMsg, .resultMsg {
    color: #000;
    background-color: #ffe8ea;
    border: solid 1px #cc6466;
    display: block;
    margin: 0 !important;
    width: 100%;
    text-align: left;
    font-size: 0.9em;
    padding: 10px;
    line-height: 1.4em;
}


    .resultMsg:before {
        content: "✓";
        font-size: 25px;
        line-height: 40px;
        display: block;
        margin: 0 auto 10px auto;
        height: 40px;
        width: 40px;
        border-radius: 40px;
        background-color: #fff;
        border: solid 1px #00cc00;
        color: #00cc00;
        animation-name: Jump;
        display: block;
        animation-duration: .5s;
        animation-iteration-count: 1;
    }

@keyframes Jump {
    40% {
        transform: scale(0.7)
    }

    60% {
        transform: scale(1.5)
    }

    100% {
        transform: scale(1)
    }
}

.resultMsg {
    color: #188136;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 10px 20px 10px;
    background-color: transparent;
    border: none;
    text-align: center;
}

.nonJavaScriptFooterLink, a.nonJavaScriptFooterLink {
    cursor: pointer;
    line-height: 50px !important;
    font-size: 1em;
    margin-bottom: 3px;
    height: 50px;
    background-color: #21b24b;
    color: #fff !important;
    border: 1px solid #188136
}

@media all and (max-width: 740px) {
    .DisplayFoMob {
        display: inherit
    }
}

@media all and (max-width: 740px) {
    .tdPublicCourseDuration, .trtblCoursesRequestQuote {
        display: none
    }

    .noSchDatesCostAndDurationtdReplacement {
        padding-left: 55px !important
    }
}

.pnlScheduleMessage, .pnlSiteWideMessage {
    background-color: rgba(255,228,179,.95);
    border: solid 1px #ff8c00;
    color: #43718a;
    position: relative;
    z-index: 80;
    display: block;
    padding: 5px
}

.lblSiteWideMessage {
    display: block;
    max-width: 1050px;
    margin: 0 auto
}

.closeTheNote {
    top: 0;
    position: absolute;
    right: 0;
    height: 30px;
    width: 30px;
    line-height: 30px;
    border: solid 1px #fff;
    text-align: center;
    background-color: #ff0038;
    border: solid 1px #fff;
    transition: .2s linear all;
    color: #fff !important
}

    .closeTheNote:hover {
        background-color: #e60032 !important;
        border: solid 1px #e60032 !important;
        transition: .2s linear all;
        border: solid 1px #ffe6e6;
        cursor: pointer
    }

.PnlBook_ScheduledCourse .closeTheNote, .PnlContactToRequestPrivateQuote .closeTheNote, .chooseADate .closeTheNote, .OnlineEnquiryPopup .closeTheNote, #VenueDetailPopup .closeTheNote, #VirtualCourseExplanationPopup .closeTheNote {
    top: 0;
    position: absolute;
    right: 0;
    height: 27px;
    border: none;
    line-height: 28px;
    z-index: 70;
}

.contactFromHeader .closeTheNote {
    right: -20px;
    top: -20px
}

.NewAttendFromHome {
    position: relative;
    display: block;
    background-color: #fff;
    background-size: cover !important;
    top: -120px;
    left: 0;
    width: 100%;
    height: 700px;
    visibility: visible;
    display: block;
    z-index: 50 !important;
    padding-top: 200px;
    text-align: center;
    margin-bottom: -120px
}

.threelistgroup ~ .NewAttendFromHome {
    margin-top: -20px
}

.NewAttendFromHome.AFALayout {
    top: -8px;
    margin-bottom: -8px
}

.NewAttendFromHome .searchBoxHolder {
    margin: 0 auto;
    max-width: 1050px
}

.NewAttendFromHome .txtSiteSearch {
    border: solid 1px #dadaf1;
    margin-top: 15px;
    padding-left: 30px
}

.NewAttendFromHome .btnActivateSearch {
    background-position: -10px -58px
}

.NewAttendFromHome .LiveSearchResults {
    width: 100% !important;
    text-align: left !important
}

@media all and (max-width: 500px) {
    .NewAttendFromHome.AFALayout {
        top: 35px
    }
}

@media all and (min-width: 2300px) {
    .NewAttendFromHome {
        background-position: top left !important;
        background-size: initial !important
    }
}

@media all and (min-width: 1600px) {
    .NewAttendFromHome {
        background: url(/lib/aesthetics-pics/backgrounds/home/3000.png) no-repeat;
        background-position: top left
    }
}

@media all and (max-width: 1599px) {
    .NewAttendFromHome {
        background: url(/lib/aesthetics-pics/backgrounds/home/1500.png) no-repeat;
        background-position: top left
    }
}

@media all and (max-width: 1100px) {
    .NewAttendFromHome {
        background: url(/lib/aesthetics-pics/backgrounds/home/800.png) no-repeat
    }
}

@media all and (max-width: 600px) {
    .NewAttendFromHome {
        background: url(/lib/aesthetics-pics/backgrounds/home/500.png) no-repeat
    }
}

.NewAttendFromHome .maxwidthAFA {
    background: rgba(255,255,255,.5);
    padding: 80px 0 60px;
    border: solid 1px #fcfcfc;
    max-width: 1450px;
    -webkit-box-shadow: 0 1px 5px 2px rgba(0,0,0,.1);
    -moz-box-shadow: 0 1px 5px 2px rgba(0,0,0,.1);
    box-shadow: 0 1px 8px 2px rgba(0,0,0,.2);
    backdrop-filter: blur(5px);
    margin: 0 auto
}

.NewAttendFromHome .newTitleAFA {
    font-size: 1.1em;
    color: red !important;
    text-transform: uppercase;
    font-family: Poppins,Helvetica,Arial,sans-serif;
    font-weight: 700;
    font-style: italic;
    text-align: left;
    max-width: 1050px;
    margin: 0 auto !important
}

    .NewAttendFromHome .newTitleAFA:before {
        content: "Online and Classroom Courses"
    }

.NewAttendFromHome .attendFromHome {
    font-size: 2.5em;
    display: block;
    padding: 10px 0 5px;
    color: #43718a;
    text-align: left;
    max-width: 1050px;
    margin: 0 auto;
    text-shadow: 0 1px 1px #3bf;
    line-height: 1.2em
}

.NewAttendFromHome .orAnywhere {
    font-size: 1em;
    line-height: 1.6em;
    color: #069;
    text-align: left;
    max-width: 1050px;
    margin: 25px auto 0
}

    .NewAttendFromHome .orAnywhere:before {
        content: "Expert trainers, courses delivered online or in person, small class sizes, flexible content, course materials included and available via your personal training account."
    }

.NewAttendFromHome .seeAllOptions {
    max-width: 400px;
    display: block;
    margin: 0 auto;
    padding-top: 40px
}

    .NewAttendFromHome .seeAllOptions .heroBtn {
        border-radius: 2px;
        background: 0 0;
        color: #188136;
        font-size: 1.2em;
        padding: 10px 20px;
        height: auto !important;
        line-height: 30px;
        text-align: center;
        position: relative;
        text-transform: uppercase;
        overflow: hidden;
        backdrop-filter: blur(5px);
        border: solid 1px #188136;
        text-align: left;
        background-color: #1c973f;
        color: #fff
    }

        .NewAttendFromHome .seeAllOptions .heroBtn:after {
            content: ">>";
            position: absolute;
            font-size: 8em;
            opacity: .9;
            right: 0;
            top: 13px;
            letter-spacing: -30px !important;
            color: #146c2d
        }

        .NewAttendFromHome .seeAllOptions .heroBtn:hover {
            border: solid 1px #105624;
            background-color: #188136
        }

            .NewAttendFromHome .seeAllOptions .heroBtn:hover:after {
                color: #105624
            }

table td.afAnywhere {
    color: #196619 !important;
    position: relative;
    padding-right: 70px;
    position: relative
}

li a.afAnywhere {
    position: relative;
    padding-left: 0
}

li .afAnywhereInside, table td .afAnywhereInside {
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    right: 0;
    top: 0;
    background: url(/lib/aesthetics-graphics/icons/homeMSmallest.png) center 16px no-repeat !important;
    overflow: visible
}

li .afAnywhereInside {
    border: solid 1px red;
    display: none;
    background: url(/lib/aesthetics-graphics/icons/homeMSmallest.png) left 5px no-repeat !important
}

.scheduleTbl td.afAnywhere {
    color: #196619 !important;
    padding-right: 0;
    padding-left: 50px;
    min-width: 350px !important
}

.scheduleTbl .FilterItem a {
    padding: 0 10px 15px 10px;
}

.scheduleTbl td .afAnywhereInside {
    display: block;
    width: 50px;
    height: 40px;
    position: absolute;
    left: -46px;
    top: -4px;
    background: url(/lib/aesthetics-graphics/icons/homeMSmallest.png) left 2px no-repeat !important;
    overflow: visible
}

.afAnywhereInside span {
    display: none
}

.afAnywhereInside:hover span {
    position: absolute;
    display: block;
    top: 41px;
    left: 30px;
    z-index: 90;
    background-color: rgba(255,255,255,.8);
    border: double 3px #bbcbdd;
    padding: 10px;
    line-height: 1.2em;
    font-size: .9em;
    width: 120px;
    backdrop-filter: blur(5px);
    -webkit-box-shadow: 0 1px 5px 2px rgba(0,0,0,.1);
    -moz-box-shadow: 0 1px 5px 2px rgba(0,0,0,.1);
    box-shadow: 0 1px 5px 2px rgba(0,0,0,.1)
}

li .afAnywhereInside:hover span {
    font-size: .7em;
    top: 60px
}

.lookForIcon {
    position: relative;
    display: inline-block;
    width: auto;
    min-height: 55px;
    clear: both;
    padding: 20px 10px 20px 20px;
    margin-top: 20px;
    line-height: 20px;
    color: #595959;
    border: dotted 2px #d8d8d8;
    margin-bottom: 10px
}

    .lookForIcon strong {
        clear: both;
        display: block;
        color: #43718a !important;
        font-size: 1.1em;
        margin-bottom: 15px
    }

.breakBetweenCourseLists {
    height: 200px;
    display: block;
    color: #069;
    position: relative;
    border-left: solid 1px #fff;
    margin-left: -1px
}

    .breakBetweenCourseLists:before {
        content: "More courses:";
        position: absolute;
        bottom: 0;
        left: 8px
    }

    .breakBetweenCourseLists + tr {
        border-top: solid 1px #efefef
    }

@media all and (max-width: 420px) {
    .NewAttendFromHome .maxwidthAFA {
        padding-left: 20px;
        padding-right: 20px
    }

    .homepagebanner {
        height: 260px !important
    }

    .hpboxmid {
        width: 90% !important;
        margin: 20px 5% !important;
        margin-left: 5% !important
    }
}

@media all and (max-width: 800px) {
    .hpBoxText {
        background: rgba(255,255,255,.7) !important;
        color: #069 !important;
        display: block;
        margin: 10px !important;
        padding: 10px;
        backdrop-filter: blur(5px);
        padding-right: 10px !important
    }

    .contactFormFullWidthOnPage-Restraint {
        padding: 20px
    }
}

@media all and (max-width: 770px) {
    .tblCourses tr td:first-of-type {
        background: 0 0 !important
    }

    table td.afAnywhere {
        line-height: 1.6em !important
    }

    .tblCourses td.afAnywhere {
        background: url(/lib/aesthetics-graphics/icons/homeMSmallest.png) left 3px no-repeat !important;
        line-height: 2em !important
    }

    .tblCourses td .afAnywhereInside {
        display: none
    }

    .tdNoDates, .tdPublicCourseCost {
        display: none
    }
}

@media all and (max-width: 600px) {
    .tblCourses tr td {
        line-height: 20px
    }

        .tblCourses tr td a {
            font-size: 1.1em
        }

    a.btnViewCourseOutline {
        margin-left: 4px !important
    }
}

.liAttendOnline {
    position: relative
}

.quoteAttendOnline {
    display: block;
    padding: 10px 10px 5px;
    line-height: 0;
    position: relative
}

#SignInPopup:before {
    position: absolute;
    left: 0;
    width: 100%;
    height: 25px;
    content: "Sign In";
    color: #999;
    top: 0;
    font-size: .8em;
    background-color: #fdfdfd;
    padding: 4px 4px 4px 15px;
    line-height: 1.3em;
    box-sizing: border-box;
    border-bottom: solid 1px #dfdfdf
}

#SignInPopup .closeTheNote {
    height: 24px;
    line-height: 23px;
    color: #43718a
}

#SignInPopup .txtWithAnim {
    background-color: #fff !important
}

#SignInPopup .txtWithAnim-group {
    margin-bottom: 10px
}

#SignInPopup {
    border: 1px solid #ccc;
    -webkit-box-shadow: 0 2px 4px 0 rgba(133,133,133,.8);
    -moz-box-shadow: 0 2px 4px 0 rgba(133,133,133,.8);
    box-shadow: 0 2px 4px 0 rgba(133,133,133,.8);
    background-color: #fff;
    position: fixed;
    top: 7%;
    left: 15%;
    width: 65%;
    overflow-y: scroll;
    height: 90%;
    max-height: 570px;
    box-sizing: border-box;
    z-index: 99 !important;
    font-size: 1em;
    padding: 40px 20px 20px 70px;
    background-image: url(/lib/aesthetics-pics/SignIn/SignInScreen.jpg);
    background-color: #fff;
    background-size: cover
}

.SIFifty {
    width: 50%;
    min-width: 300px;
    float: left
}

#SignInPopup .generalButton, #SignInPopup .txtWithAnim-group {
    max-width: 302px !important
}

#SignInPopup .generalButton {
    border: solid 1px #638fea;
    background-color: #638fea;
    color: #fff;
    padding: 5px 80px !important;
    font-size: .9em;
    box-shadow: 0 3px 8px 0 #b1b1cd;
    border-radius: 0;
    margin-top: 10px
}

#SignInPopup .txtWithAnim-group:first-of-type {
    margin-top: 10px
}

#SignInPopup .txtWithAnim-group:nth-of-type(2) {
    margin-top: -3px
}

.g-recaptcha {
    margin: 7px 0 !important
}

@media all and (max-width: 1000px) {
    #SignInPopup .SIFifty {
        width: 100%
    }
}

@media all and (max-width: 550px) {
    #SignInPopup {
        padding: 30px 10px 10px;
        width: 90%;
        left: 5%;
        background: 0 0;
        background-color: #fefefe
    }
}

@media all and (max-width: 550px) {
    #SignInPopup {
        padding: 30px 10px 10px
    }
}

.btnNoShow {
    border: none;
    background-color: transparent
}

.btnForgottenPassword {
    color: #666;
    font-size: .8em
}

.quoteAttendOnline {
    display: inline-block;
    padding: 0 10px 0 0;
    position: relative;
    line-height: 30px;
    box-sizing: border-box;
    margin: 0;
    color: #67688f;
    overflow: hidden;
    width: 100%
}

#BookingPlaceholder .ExtraInformation {
    margin-bottom: 0 !important
}

#bAttendOnline {
    margin-top: 15px;
    margin-bottom: 0
}

.quoteAttendOnline label {
    margin: 0 15px 0 0;
    cursor: pointer
}

.quoteOrBookAttendClassReq {
    padding: 0 10px;
    border: #ccc dotted 1px;
    margin: 0 0 10px;
    background-color: #f6fdff
}

    .quoteOrBookAttendClassReq:before {
        content: "This is a classroom based course.";
        font-size: .8em;
        line-height: 1.3em;
        display: block;
        padding: 5px 2px
    }

.maxwidth {
    display: block;
    width: 100%;
    max-width: 1050px;
    margin: 0 auto
}

.fiftyFloatLeft, .fiftyFloatRight {
    display: block;
    width: 49%;
    float: left
}

.fiftyFloatRight {
    float: right
}

.fiftySmallVideo, .hundredWidthVideo {
    display: block;
    width: 50%;
    margin: 30px 0 10px;
    border: solid 1px #ccc;
    -webkit-box-shadow: 0 1px 5px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 5px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 5px 2px rgba(0,0,0,.2)
}

.hundredWidthVideo {
    width: 100% !important
}

#liVideoHolder {
    width: 100%
}

    #liVideoHolder .hundredWidthVideo {
        max-width: 700px;
        margin: 0 auto
    }

.trSmallBanner {
    border: solid 1px #dadaf1
}

.trVideoOnly li {
    width: 100%
}

.ulCourseListBanner > li {
    float: left;
    box-sizing: border-box;
    min-width: 200px
}

    .ulCourseListBanner > li:first-of-type {
        padding: 100px 70px 0 20px;
        color: #43718a;
        width: 30%
    }

    .ulCourseListBanner > li .cpbTitle {
        font-size: 2em;
        line-height: 1.3em
    }

.ListOfInfo {
    margin-bottom: 20px;
    list-style-type: circle;
    margin: 10px 0 0 20px
}

.trSmallBanner .ulCourseListBanner > li {
    padding: 10px 0;
    width: 50%
}

.trSmallBanner .ulCourseListBanner .generalButton {
    width: 100%;
    margin-top: 50px;
    background-color: #43718a;
    color: #fff
}

.ulCourseListBanner .fiftySmallVideo {
    max-width: 600px;
    margin: 0 auto;
    float: right !important;
    display: block
}

#aToTopCourseLists {
    bottom: 50px;
    right: 10px;
    width: 30px;
    height: 35px;
    border: solid 1px #dadaf1;
    text-transform: uppercase;
    background-color: #ededf8;
    box-sizing: border-box;
    position: fixed;
    transition: linear .2s all;
    padding: 3px;
    z-index: 15;
    text-align: center;
    display: none
}

.showToTop {
    display: block !important;
    visibility: visible
}

#aToTopCourseLists:before {
    content: "»";
    transform: rotate(270deg);
    color: #43718a;
    font-size: 1.7em;
    display: block;
    text-align: center
}

@media all and (min-width: 700px) {
    #aToTopCourseLists:hover {
        width: 140px
    }

        #aToTopCourseLists:hover:before {
            content: "Back to top ";
            transform: rotate(0);
            color: #43718a;
            font-size: .9em;
            display: block;
            text-align: center;
            width: 140px
        }
}

#aToTopCourseLists:hover {
    background-color: #e6e6e6
}

@media all and (max-width: 1342px) {
    #aToTopCourseLists {
        width: 30px;
        top: 470px;
        border: solid 1px #ccc;
        padding-left: 0
    }

        #aToTopCourseLists:before {
            text-align: center
        }
}

.courseLink:visited {
    color: #069;
    text-decoration: underline !important
}

.SignInTitle {
    color: #16439c;
    font-size: 2em;
    text-align: left !important;
    float: left;
    width: 200px;
    line-height: 1.5em
}

.SignInPara {
    display: block;
    clear: both;
    text-align: left;
    padding-top: 15px
}

#SignInPopup .SIFifty:first-of-type {
    min-width: 200px !important;
    max-width: 370px !important;
    width: 50%
}

.PageBlurb {
    clear: both;
    display: block;
    margin: 50px 0
}

strong {
    font-weight: 500
}

.BottomPageBlurb ul li {
    list-style: circle !important
}

    .BottomPageBlurb h3, .BottomPageBlurb ul li b {
        display: block;
        font-size: 1.4em;
        margin: 20px 0 5px;
        line-height: 1.5em;
        color: #43718a
    }

.BottomPageBlurb > h3 {
    margin: 30px 0 0;
    padding: 0 0 10px;
    border-bottom: 1px solid #43718a;
    font-weight: 700
}

.BottomPageBlurb ul li {
    margin-left: 50px !important
}

.SpotlightFeedback {
    position: relative;
    padding: 20px 20px 20px 35px;
    color: #ccc;
    background: #fff;
    box-shadow: 0 15px 15px -8px rgb(224 224 235);
    border-radius: 5px;
    font-size: 1em;
    font-family: patrick hand,cursive;
    margin: 0px auto 0;
    max-width: 410px;
    border: solid 1px #efefef;
    background: linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 40%,rgba(255,255,255,1) 100%)
}

    .SpotlightFeedback + .fInfo {
        max-width: 410px;
        margin: 0 auto 0;
        padding: 5px 5px 5px 20px;
        text-align: left;
        line-height: 1.2em;
    }

    .SpotlightFeedback .fInfo * {
        margin: 0px 0 0 0 !important;
    }

    .SpotlightFeedback .FText {
        color: #384456;
        display: block;
        font-size: 1.1em;
        line-height: 1.4em;
        font-style: normal;
        font-weight: 700
    }

.FText span::first-letter {
    font-size: 1.7em !important;
    font-style: italic;
    color: #43718a
}

.SpotlightFeedback .FText:first-letter {
    font-size: 1.2em;
    text-transform: uppercase
}

.fInfo * {
    display: inline-block;
    margin: 0 10px 5px 0;
    color: #8da4bf
}

.fInfo .FOrg {
    font-weight: 700;
    font-size: .9em;
    clear: both;
    margin-left: 0;
    color: #8da4bf
}

.IIHome a {
    margin: 10px 5px;
    padding: 10px 5px;
    clear: none;
    float: left;
    display: block;
    transition: all .2s linear;
    max-width: 500px
}

    .IIHome a:hover {
        background-color: #d6e3f5;
        border: solid 1px #c1d6f0;
        transition: all .2s linear
    }

.IIHome button {
    float: left;
    height: 52px;
    margin-top: 10px
}

.SideMenuOnScroll .ShowMenuButton {
    top: 0
}

@media all and (max-width: 340px) {
    .ShowMenuButton {
        border: none !important
    }

    .theheader {
        padding-left: 0 !important
    }
}

.SearchInMenu {
    display: block !important
}

.txtSiteSearch:hover {
    height: 40px !important
}

.generalBox {
    background-color: #fff;
    border: solid 1px #d3dce6;
    padding: 10px 10px 50px 30px;
    margin-top: 20px !important;
    margin-bottom: 30px !important;
    display: block;
    clear: both
}

.HeaderMar {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    max-width: 1450px;
    padding-right: 10px;
    box-sizing: border-box;
    font-size: .9em;
    line-height: 23px
}

    .HeaderMar li {
        position: relative;
        padding-left: 18px;
        float: right;
        margin-left: 25px;
        color: #fff !important
    }

        .HeaderMar li span {
            display: block;
            font-size: .9em
        }

        .HeaderMar li:nth-of-type(1) span:before {
            content: "Expert Trainers"
        }

        .HeaderMar li:nth-of-type(2) span:before {
            content: "Virtual & Classroom"
        }

        .HeaderMar li:nth-of-type(3) span:before {
            content: "Small Class Sizes"
        }

        .HeaderMar li:before {
            content: "✓";
            width: 20px;
            height: 10px;
            line-height: 8px;
            position: absolute;
            top: 8px;
            left: 0;
            display: inline-block;
            background-position: -238px -6px;
            font-size: 2em;
            font-size: 12px;
            color: #fff !important
        }

@media all and (max-width: 550px) {
    .HeaderMar {
        display: none
    }

        .HeaderMar li {
            float: none
        }
}

.LiveSubmit {
    display: none;
    visibility: hidden
}

.LiveSearchResults {
    position: absolute;
    z-index: 90;
    padding: 10px 20px 100px;
    background-color: #fff;
    border: solid 1px #dadaf1;
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-box-shadow: 0 2px 2px 1px rgb(0 0 0/30%);
    box-shadow: 0 2px 12px 0 rgb(0 0 0/30%);
    line-height: 1.6em;
    width: 200%;
    margin-top: 4px;
    border-radius: 4px;
    left: 10px;
    top: 50px
}

.liAboveCourseSearch .LiveSearchResults {
    width: 98% !important
}

@media all and (min-height: 400px) {
    .LiveSearchResults {
        max-height: 300px
    }
}

@media all and (min-height: 500px) {
    .LiveSearchResults {
        max-height: 350px
    }
}

@media all and (min-height: 600px) {
    .LiveSearchResults {
        max-height: 500px
    }
}

@media all and (max-width: 900px) {
    .LiveSearchResults {
        width: 170%
    }
}

@media all and (max-width: 850px) {
    .LiveSearchResults {
        width: 140%
    }
}

@media all and (max-width: 650px) {
    .LiveSearchResults {
        width: 120%
    }
}

@media all and (max-width: 350px) {
    .LiveSearchResults {
        width: 105%
    }
}

.LiveSearchResults:before {
    content: "Courses:";
    font-size: .8em;
    text-transform: uppercase
}

.LsResult {
    display: block;
    background-color: #fff;
    padding: 2px 0;
    border-bottom: solid 1px #dadaf1;
    font-size: 1.3em;
    padding: 5px 0 !important;
    margin-top: 0px !important;
}

    .LsResult:hover {
        text-decoration: underline
    }

@media all and (max-width: 600px) {
    .LiveSearchResults {
        padding: 10px
    }

    .LsResult {
        line-height: 1.4em;
        padding: 5px 0
    }
}

.clearSearch {
    position: absolute;
    top: 6px;
    right: 10px;
    transform: scaleY(.7);
    font-size: .9em;
    color: #555;
    cursor: pointer
}

.theheader .clearSearch {
    top: 3px;
    right: 45px;
}

#BodyHolder {
    width: 100%;
    margin: 80px auto 0;
    display: block;
    box-sizing: border-box;
}

.SiteContainer {
    padding: 0 10px;
}

@media all and (min-width:1000px) {
    .SiteContainer {
        padding: 0 20px;
    }
}

.LPBottomPageText {
    margin-top: 20px;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 50px;
}

@media all and (max-width:1200px) {
    .LPBottomPageText {
        padding: 0 30px;
    }
}

#GoToPoppinsn {
    display: block;
    padding: 10px 10px 100px;
    width: 200px
}

.tblCourses thead, .tblCourses thead tr, .tblCourses thead tr td, .tblCourses thead tr:hover {
    background-color: #fff !important;
    border: solid 1px #fff !important;
    padding: 10px 0 10px 4px !important;
    height: 100% !important;
    width: 100%;
    text-align: left !important;
    font-size: .9em !important;
    text-transform: uppercase;
    position: relative
}

.CourseFilterOrSearch {
    width: 100% !important;
    max-width: unset
}

    .CourseFilterOrSearch li {
        width: 100%;
        float: left;
        margin-right: 20px
    }

        .CourseFilterOrSearch li .searchBoxHolder, .CourseFilterOrSearch li .txtSiteSearch {
            width: 100%;
            top: 0;
            border-radius: 2px
        }

        .CourseFilterOrSearch li .txtSiteSearch {
            border: solid 1px #dadaf1;
            padding-left: 45px !important
        }

        .CourseFilterOrSearch li .btnActivateSearch {
            border-radius: 0 2px 2px 0;
            background-position: -2px -57px !important
        }

.FilterItemHidden {
    display: none !important
}

    .FilterItemHidden + .trHoldingCourseDates {
        display: none !important
    }

.coursePageToolBar {
    display: block;
    width: 100%;
    padding: 0;
    float: left;
    margin-bottom: 5px
}

@media all and (max-width: 550px) {
    .coursePageToolBar {
        min-width: 300px
    }
}

.coursePageToolBar:before {
    display: block;
    font-size: .8em;
    line-height: 1.4em;
    padding-bottom: 2px;
    text-transform: uppercase;
    color: gray
}

.divHoldingCourseLists {
    -webkit-box-shadow: 0 5px 10px 0 #f0f0f5;
    box-shadow: 0 5px 13px 0 #e0e0eb;
    background-color: #fff;
    border: solid 1px #ededf8;
    padding: 0 0 10px;
    clear: both;
    width: 100%
}

.divBeforeCourseLists {
    display: none
}

    .divBeforeCourseLists:after {
        content: "";
        clear: both;
        display: block
    }

    .divBeforeCourseLists .btnActivateSearch {
        opacity: .5
    }

.divBelowCourseLists {
    margin-top: 40px;
    max-width: 400px
}

@media all and (max-width: 980px) {
    .BodyHolder {
        padding: 0 !important;
        margin: 0 !important
    }

    .divHoldingCourseLists, .RootPageContent, .SiteContainer {
        width: 100% !important;
        margin: 0 !important
    }

    .divHoldingCourseLists {
        padding: 10px 3px
    }

    .CourseListsLeftMain, #sitecontainer, .sitecontainer {
        padding: 0 0 0 5px !important
    }

    .RootPageContent, .widthRestraintPage {
        margin-left: 0 !important
    }

    .CourseListsLeftMain {
        margin-left: -5px !important
    }
}

.tblCourses tr td:first-of-type .afAnywhere {
    width: 80px !important
}

.btnCourseDatesVisible, .btntblCoursesRequestQuote, .btntblCoursesViewOutline, a.btntblCoursesRequestQuote, a.btntblCoursesViewOutline {
    min-width: 50px !important;
    min-height: 40px
}

.divHoldingCourseLists {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #fff;
    border: solid 1px #fff
}

@media all and (max-width: 310px) {
    .CourseListsLeftMain, #sitecontainer, .sitecontainer {
        padding: 0 !important
    }

    .individualDate {
        width: 200px !important
    }

    .btnCourseDatesVisible, .btntblCoursesRequestQuote, .btntblCoursesViewOutline, a.btntblCoursesRequestQuote, a.btntblCoursesViewOutline {
        display: none !important
    }

    .CourseFilterOrSearch li .searchBoxHolder, .CourseFilterOrSearch li .txtSiteSearch {
        margin-left: 1px
    }
}

.ManualsOnline {
    background-color: #fff;
    display: block;
    padding: 10px;
    width: 300px;
    line-height: 1.6em;
    margin-bottom: 30px;
    margin-top: 15px;
    -webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,.4);
    box-shadow: 0 5px 5px rgba(0,0,0,.3)
}

    .ManualsOnline span {
        font-size: 1.5em;
        display: block;
        width: 100%;
        margin-bottom: 10px;
        line-height: 1.6em;
        color: #555 !important
    }

.TrainingAccountHeroBox {
    display: block;
    width: 100%;
    background-color: #fff;
    padding: 80px 0 360px;
    border: solid 1px #dadaf1;
    margin: 30px 0;
    background: url(/lib/aesthetics-graphics/backgrounds/HeroBoxes/FullWidthScratchings.png) no-repeat;
    background-position: bottom right;
    background-color: #fff;
    -webkit-box-shadow: 0 1px 5px 2px rgb(0 0 0/10%);
    -moz-box-shadow: 0 1px 5px 2px rgba(0,0,0,.1);
    box-shadow: 0 1px 5px 2px rgb(0 0 0/10%);
    position: relative;
    max-width: 1320px
}

    .TrainingAccountHeroBox:after {
        content: "";
        display: block;
        height: 80px;
        width: 100%;
        position: absolute;
        top: 0;
        margin: 0;
        background: #fff;
        background: linear-gradient(0deg,rgba(255,255,255,0) 16%,rgba(211,229,237,1) 100%);
        z-index: 0
    }

.pnlVirtualVideo {
    display: block;
    width: 300px;
    background-color: #fff;
    padding: 10px;
    border: solid 1px #dadaf1;
    margin-top: 30px;
    clear: both;
    background-color: #fff;
    -webkit-box-shadow: 0 1px 5px 2px rgb(0 0 0/10%);
    -moz-box-shadow: 0 1px 5px 2px rgba(0,0,0,.1);
    box-shadow: 0 1px 5px 2px rgb(0 0 0/10%)
}

    .pnlVirtualVideo span {
        line-height: 1em !important;
        font-weight: 700;
        font-size: 1.2em
    }

.TrainingAccountHeroBox .matitle {
    text-align: left;
    font-weight: 700;
    font-size: 2.5em;
    margin-bottom: 20px;
    padding-bottom: 20px;
    margin-left: 65px;
    line-height: 1.4em
}

.TrainingAccountHeroBox .mapara {
    color: #666;
    width: 80%;
    display: block;
    padding: 20px 0 30px 65px;
    font-size: 1.1em;
    line-height: 1.4em;
    text-align: justify;
    box-sizing: border-box
}

.TrainingAccountHeroBox a {
    border: solid 2px #dadaf1;
    background-color: #069;
    color: #fff;
    padding: 10px;
    display: block;
    margin: 0 0 0 65px;
    text-align: center;
    width: 80%
}

    .TrainingAccountHeroBox a:hover {
        border: solid 2px #000
    }

.star {
    font-size: .7em;
    color: #999;
    margin-top: 20px;
    display: block
}

.TrainingAccountHeroBox .star {
    text-align: left;
    margin-left: 65px
}

.PageNotFound {
    padding: 20px;
    border: solid 1px #dadaf1;
    margin-top: 30px;
    background-color: #fff
}

    .PageNotFound .searchBoxHolder {
        margin-top: 20px
    }

    .PageNotFound .txtSiteSearch {
        border: solid 1px #ccc;
        padding: 20px 20px 20px 50px
    }

    .PageNotFound .btnActivateSearch {
        height: 40px;
        background-color: #fefefe;
        border: solid 1px #efefef;
        background-position: -6px -55px;
        width: 40px
    }

.ToolBarWidthRestraint {
    width: 400px
}

.chooseADate:before {
    width: calc(100% - 25px) !important
}

.chooseADate .closePanel {
    height: 27px;
    background-position-y: 9px
}

    .chooseADate .closePanel:hover {
        background-position-y: -9px
    }

.CourseListsLeftMain .TelNoCenter {
    text-align: left;
}

.TelNoCenter a {
    color: #006699 !important;
    border: none;
    display: block;
    box-shadow: none;
    margin: 10px 0 !important;
    background-color: transparent
}

.TelNoCenter div {
    font-size: .5em;
    color: #666;
    line-height: 1.3em;
    margin: 5px 0
}

.AskAQuestion .AskQuestionForm:before, .TelNoCenter {
    width: 100% !important;
    content: "Ask a question";
    text-align: center
}



.TelNoCenter {
    padding: 30px 20px !important;
    font-size: 2em !important;
    box-shadow: 0 4px 11px -5px rgb(0 0 0/30%);
}





.ulAskAQuestion label {
    margin-top: 15px
}

.ulAskAQuestion .txtWithAnim-group {
    padding-top: 40px;
}

.GDPRConsent {
    padding: 5px 10px 0 10px;
    background-color: #f9f9f9;
    width: 97%;
    display: block;
    text-align: left;
    border: dotted 1px #dadaf1
}

.AskQuestionForm .GDPRConsent {
    border: none !important
}

    .AskQuestionForm .GDPRConsent .ContactConsent {
        padding: 10px;
        background-color: #fff;
        border-bottom: solid 1px #dadaf1;
        text-align: left
    }

    .AskQuestionForm .GDPRConsent .UseConsent {
        padding: 0 10px;
        line-height: 1.3em;
        text-align: left;
        font-size: .8em;
        margin-top: 15px;
        color: #888
    }

.AskAQuestion .txtWithAnim-group {
    margin-top: 20px
}

.UseConsent, .ContactConsent {
    line-height: 1.4em;
    color: #67688f
}

#btnRightSideAskAQuestion {
    display: none !important
}

.ContactConsent {
    font-size: 0.9em
}

.AskAQuestion .UseConsent {
    padding-top: 0 !important;
    margin-top: 0
}

.HighlightConsent {
    border: solid 1px red !important;
    padding: 5px !important;
    background-color: #ffe6e6
}



.ContactConsent li {
    border: none;
    padding: 0px;
    margin: 0px 0 5px 0;
    line-height: 10px;
}





.UseConsent {
    display: block;
    clear: both;
    line-height: 1.5em;
    font-size: .7em;
    box-sizing: border-box;
    width: 100%;
    margin: 15px 0 5px 0;
}

.AskAQuestion .ContactConsent {
    font-size: .85em;
    line-height: 1.5em;
    width: 100%;
    padding: 15px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none
}

.AskAQuestion .UseConsent {
    font-size: .9em;
    line-height: 1.5em
}

#txtBookCourseLocation {
    min-width: 270px;
    clear: none !important;
    display: inline;
    width: auto !important
}

.divCourseLocation {
    display: inline-block;
    clear: none !important;
    max-width: 300px;
    overflow: hidden
}



.CourseListsAskQuestionForm {
    display: block;
    background-color: #fff;
    padding: 40px;
    border: solid 1px #dadaf1;
    margin-top: 20px;
    box-shadow: 0 5px 30px 0 #c1c1d7;
    clear: both;
    margin-bottom: 50px
}

    .CourseListsAskQuestionForm:before {
        content: "Ask a question... ";
        display: block;
        width: 50%;
        float: left;
        font-size: 1.5em;
        margin-bottom: 20px
    }

.generalBox .CourseListsAskQuestionForm {
    box-shadow: none !important;
    border: none;
    background-color: #fff !important;
    padding: 5px !important
}

.CoursePageQuestion {
    margin: 0 auto;
    background-color: #e3f0ff;
    padding-bottom: 10px
}

    .CoursePageQuestion .CourseListsAskQuestionForm {
        background: #e3f0ff !important;
        background-color: #e3f0ff !important
    }

.generalBox .CourseListsAskQuestionForm ul li {
    width: 100%;
    max-width: 400px;
    float: left;
    padding: 10px
}

.generalBox .CourseListsAskQuestionForm .GDPRConsent ul li {
    width: 150px !important
}

.generalBox .CourseListsAskQuestionForm .UseConsent {
    padding: 0;
    margin: 0 !important
}

.generalBox .CourseListsAskQuestionForm ul li:nth-of-type(3) {
    max-width: 800px;
    width: 100%
}

.generalBox .CourseListsAskQuestionForm .GDPRConsent {
    display: block;
    float: none;
    clear: both;
    margin-left: 10px !important;
    max-width: 780px;
    width: 100%
}

.generalBox .CourseListsAskQuestionForm ul li textarea {
    margin-top: 0
}

.generalBox .CourseListsAskQuestionForm:before {
    display: none
}

.CoursePageQuestion .btnSendContact {
    max-width: 800px
}

.CourseListsAskQuestionForm .UseConsent {
    margin: 20px 0 !important
}

.CourseListsAskQuestionForm input[type=text], .CourseListsAskQuestionForm input[type=email], .CourseListsAskQuestionForm textarea {
    background-color: #fff !important;
    border-radius: 2px
}

.CourseListsAskQuestionForm .ulAskAQuestion {
    padding: 0
}

.bigQuestion {
    color: #069;
    font-size: 2em;
    display: block;
    border-bottom: solid 1px #ccc;
    padding-bottom: 20px;
    margin: 40px 0 20px;
    line-height: 1.5em
}

.LftMnuJoinUs {
    display: block;
    background-color: transparent;
    color: #51813a !important;
    height: 140px;
    margin-bottom: 20px;
    font-size: 1.4em;
    overflow: hidden
}

.aLftMnuJoinUs {
    line-height: 22px;
    padding: 0 10px;
    transition: all .3s linear;
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    text-align: center;
    height: 100%;
    color: #51813a !important;
    font-weight: 700;
    text-transform: none;
    font-size: 17px;
    background-color: #fff;
    padding-top: 50px;
    margin: 0 auto
}

    .aLftMnuJoinUs:after {
        content: "";
        display: block;
        border-bottom: solid 1px #51813a;
        width: 100px;
        height: 100px;
        border: solid 5px #51813a;
        border-color: transparent transparent #51813a transparent;
        border-radius: 0 0 500px 500px;
        top: 15px;
        position: absolute;
        left: -40px;
        transform: rotate(338deg) skew(54deg);
        -webkit-transform: rotate(-20deg) skew(54deg);
        transition: all .2s linear;
        -moz-transform: rotate(-20deg) skew(54deg)
    }

    .aLftMnuJoinUs:hover:before {
        content: ". .";
        position: absolute;
        top: -5px;
        font-size: 80px;
        left: 41px;
        color: #ccc;
        transition: all .3s linear
    }

    .aLftMnuJoinUs:hover:after {
        border-color: transparent transparent #ccc transparent;
        transform: none;
        top: 10px;
        -webkit-transform: none;
        -moz-transform: none;
        transition: all .3s linear;
        left: 15px
    }

    .aLftMnuJoinUs:before {
        font-size: 0;
        transition: all .3s linear
    }

    .aLftMnuJoinUs:hover {
        color: #069;
        border: solid 1px #ccc;
        border-radius: 100px;
        transition: all .3s linear
    }

.CatPagesJoinTeam {
    max-width: 145px
}

.successMsg {
    color: #060;
    border: solid 1px #00e600;
    padding: 5px;
    background-color: #e6ffe6
}







.liSDIH a:hover, .liSIH a:hover, .liSIH button:hover {
    height: 100%;
    background-color: #fff;
    transition: all .2s ease-in-out;
}





@media all and (max-width:350px) {
    #liContactHeader {
        display: none;
    }
}


.contactFromHeader .MsgBdyInner {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border-left: none;
    background-color: #fff
}

.contactFromHeader .MsgBdy {
    border: none !important;
    border-left: none !important;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none
}

.ToolBarWidthRestraint {
    width: 400px
}

.SiteMenu li {
    float: left;
    display: block;
    height: 70px;
    line-height: 60px;
    width: auto
}

    .SiteMenu li > a {
        display: block;
        height: 100%;
        width: 100%;
        padding: 0 20px 0 0
    }

.btnActivateSearch {
    position: absolute;
    right: 0;
    cursor: pointer
}

.ShowMenuButton .MIcon {
    position: absolute;
    top: 22px;
    left: 15px;
    height: 15px;
    transition: all .2s linear;
    width: 10px
}

.ShowMenuButton .MIcon {
    position: absolute;
    top: 22px;
    left: 15px;
    height: 15px;
    transition: all .2s linear;
    width: 10px
}


.AskQuestionAboutACourse {
    font-size: 0.85em !important;
    margin: 15px 10px 0 10px;
    display: block !important;
    line-height: 25px;
}











.btnActivateSearch {
    top: 10px !important
}

.searchBoxHolder {
    position: relative
}

.btnActivateSearch {
    right: 0;
    left: auto;
    height: 30px;
    width: 25px;
    background-color: transparent;
    top: 0 !important;
    border: none;
    background: url(/lib/SVGs/IconsSVG.svg) no-repeat;
    background-size: 600px;
    background-position: -320px 5px;
}

#HeaderToolBar .btnActivateSearch {
    height: 30px;
    position: absolute;
    left: 14px !important;
    top: 9px !important;
    background-color: transparent;
    background-position: -317px -0.5px;
    background-size: 600px;
    width: 30px;
    opacity: .5
}




.FavStatus {
    display: inline-block;
}

    .FavStatus .bxFav {
        position: relative;
        top: 0px;
        left: 5px;
        margin: 0 3px 0 2px;
        height: 24px;
        width: 16px;
    }

.Fav {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 25px;
    z-index: 50;
    background: url(/lib/SVGs/IconsSVG.svg) no-repeat;
    background-position: -221px 4px;
    background-size: 350px;
    opacity: 0.5;
    cursor: pointer;
}

@media all and (max-width: 850px) {
    .Fav {
        left: -22px !important;
        top: 16px !important;
        position: absolute;
    }
}

.Fav:hover, li.favs:hover:before {
    background-position: -238.5px 4px !important
}





.isFav, .isFav:hover {
    opacity: 1;
    background-position: -203px 4px !important;
}

.Course {
    padding-left: 45px !important;
    position: relative
}

#pnlTitle {
    position: relative;
    margin: 15px 0 20px 0
}

@media all and (max-width: 450px) {
    .liFav {
        display: none
    }
}






.COverview {
    color: #069;
    margin: 15px 0 20px;
    padding-top: 15px;
    font-size: 1em;
    line-height: 1.6em !important;
    border-top: dotted 2px #dadaf1
}

.noFavourites {
    max-width: 700px;
    line-height: 1.4em;
    color: #4e5a65 !important;
    padding: 20px
}

.ContactBlurbRight {
    display: block;
    width: 45%;
    float: left;
    box-shadow: 0 4px 11px -5px rgb(0 0 0/30%);
    margin-top: 35px;
    border: solid 1px #bbb;
    padding: 30px;
    border-radius: 5px;
    background-color: #fff;
}

    .ContactBlurbRight .fctitle {
        font-size: 2em;
        color: #006699 !important;
        line-height: 1.6em;
        font-family: Poppins, sans-serif;
        font-weight: lighter;
    }

    .ContactBlurbRight a {
        color: #006699 !important
    }

.contactDetails ul li {
    display: block;
    width: 100%;
    position: relative;
    padding: 10px 0 10px 0px;
    font-size: 1.2em;
}

    .contactDetails ul li:before {
        /* background: url(/lib/aesthetics-graphics/icons/SiteIcons.svg) no-repeat; */
        background-position: 0 -255px;
        display: inline-block;
        height: 50px;
        width: 40px;
        content: " ";
        position: absolute;
        top: 0;
        left: 0
    }

    .contactDetails ul li:first-of-type:before {
        background-position: 0 -198px
    }

@media all and (max-width: 1200px) {
    .ContactBlurbRight {
        display: none !important
    }

    .contactFormFullWidthOnPage-Restraint {
        margin: 0px auto !important;
        float: none;
        min-width: 90%;
    }

        .contactFormFullWidthOnPage-Restraint h2 {
            display: block;
            margin: 20px 10px !important;
            font-size: 1.5em
        }
}

@media all and (max-width: 600px) {
    .Course {
        max-width: 80px !important;
        padding: 25px 0 0 5px !important;
        line-height: 1em !important
    }

    #BodyHolder {
        padding: 0 2px
    }

    .tblCourses tr {
        border: solid 1px #fff !important;
        border-top: solid 1px #ccc
    }
}

.ulHeaderDoubleContact li {
    float: right
}

.TopMenuBtn:hover {
    -webkit-box-shadow: 0 2px 10px 0 rgb(0 0 0 / 20%);
    box-shadow: 0 2px 8px -2px rgb(0 0 0 / 20%);
    transition: all linear .2s;
}

.ulHeaderDoubleContact li.Search {
    width: 220px;
    max-width: 220px;
    margin-right: 2px !important
}





@media all and (max-width: 900px) {
    #contactHolder > div {
        max-width: 60px !important;
        left: unset !important
    }

    #divTheLogo {
        width: 120px
    }

    #contactFromHeader {
        width: 300px !important;
        min-width: 300px !important;
        max-width: 300px !important;
        right: -90px;
        top: 76px
    }
}

@media all and (max-width: 700px) {


    #contactFromHeader, .contactFromHeader {
        right: 0 !important
    }
}

@media all and (max-width: 630px) {
    .contactFormFullWidthOnPage-Restraint {
        width: 100%;
        min-width: 100%;
        max-width: 100%
    }
}

@media all and (max-width: 900px) {
    .ulHeaderDoubleContact li:hover .HeaderContactExtraDetails, .HeaderContactExtraDetails {
        display: none !important;
        visibility: hidden !important
    }
}

.FavJustAdded .HeartLeft, .FavJustAdded .HeartRight, .FavJustAdded .HeartCenter {
    background-position: -13px -162px;
    height: 0;
    width: 0
}

.FavJustAdded .HeartRight {
    animation-name: TwistRight;
    animation-duration: .5s;
    animation-iteration-count: 1
}

.FavJustAdded .HeartLeft {
    animation-name: TwistLeft;
    animation-duration: .5s;
    animation-iteration-count: 1
}

.FavJustAdded .HeartCenter {
    animation-name: NoTwist;
    animation-duration: .5s;
    animation-iteration-count: 1
}

@keyframes TwistRight {
    0% {
        background: url(/lib/aesthetics-graphics/icons/SiteIcons.svg) no-repeat;
        background-position: -13px -162px;
        background-color: transparent;
        cursor: pointer;
        position: absolute;
        left: 3px;
        top: 0;
        height: 20px;
        width: 30px
    }

    99% {
        background: url(/lib/aesthetics-graphics/icons/SiteIcons.svg) no-repeat;
        background-position: -13px -162px;
        background-color: transparent;
        cursor: pointer;
        position: absolute;
        top: -40px;
        left: 20px;
        transform: rotate(20deg);
        opacity: 0;
        height: 20px;
        width: 20px
    }

    100% {
        display: none
    }
}

@keyframes NoTwist {
    0% {
        background: url(/lib/aesthetics-graphics/icons/SiteIcons.svg) no-repeat;
        background-position: -13px -162px;
        background-color: transparent;
        cursor: pointer;
        position: absolute;
        left: 3px;
        top: 0;
        height: 20px;
        width: 30px
    }

    99% {
        background: url(/lib/aesthetics-graphics/icons/SiteIcons.svg) no-repeat;
        background-position: -13px -162px;
        background-color: transparent;
        cursor: pointer;
        position: absolute;
        top: -40px;
        left: 3px;
        opacity: 0;
        height: 20px;
        width: 20px
    }

    100% {
        display: none
    }
}

@keyframes TwistLeft {
    0% {
        background: url(/lib/aesthetics-graphics/icons/SiteIcons.svg) no-repeat;
        background-position: -13px -162px;
        background-color: transparent;
        cursor: pointer;
        position: absolute;
        top: 1px;
        left: 3px;
        top: 0;
        height: 20px;
        width: 20px;
        opacity: 6
    }

    99% {
        background: url(/lib/aesthetics-graphics/icons/SiteIcons.svg) no-repeat;
        background-position: -13px -162px;
        background-color: transparent;
        cursor: pointer;
        position: absolute;
        top: -30px;
        transform: rotate(-20deg);
        opacity: 0;
        left: -20px;
        height: 20px;
        width: 30px
    }

    100% {
        display: none
    }
}

.FavJustAdded:before {
    content: "";
    position: absolute;
    animation-name: ShowNotif;
    animation-duration: 3s;
    animation-iteration-count: 1;
    z-index: 70;
    pointer-events: none
}

@keyframes ShowNotif {
    0% {
        position: absolute;
        height: auto;
        content: "Favourite Added";
        width: auto;
        min-width: 120px;
        top: 110%;
        color: #069;
        background-color: #fff;
        border: solid 1px #dadaf1;
        padding: 5px 10px;
        line-height: 20px;
        font-size: .8em;
        box-shadow: 0 0 15px -5px rgb(0 0 0/40%);
        left: 0;
        animation-name: ShowNotif;
        animation-duration: .5s;
        animation-iteration-count: 1;
        opacity: 0
    }

    30% {
        position: absolute;
        height: auto;
        content: "Favourite Added";
        width: auto;
        color: #069;
        min-width: 120px;
        top: 110%;
        background-color: #fff;
        border: solid 1px #dadaf1;
        padding: 5px 10px;
        line-height: 20px;
        font-size: .8em;
        box-shadow: 0 0 15px -5px rgb(0 0 0/40%);
        left: 0;
        animation-name: ShowNotif;
        animation-duration: .5s;
        animation-iteration-count: 1;
        opacity: 1
    }

    50% {
        position: absolute;
        height: auto;
        content: "Favourite Added";
        width: auto;
        top: 110%;
        background-color: #fff;
        border: solid 1px #dadaf1;
        padding: 5px 10px;
        color: #069;
        line-height: 20px;
        font-size: .8em;
        box-shadow: 0 0 15px -5px rgb(0 0 0/40%);
        min-width: 120px;
        animation-name: ShowNotif;
        animation-duration: .5s;
        animation-iteration-count: 1;
        top: 110%;
        opacity: 1;
        left: 0
    }

    100% {
        position: absolute;
        height: auto;
        content: "Favourite Added";
        width: auto;
        top: 110%;
        background-color: #fff;
        color: #069;
        border: solid 1px #dadaf1;
        padding: 5px 10px;
        line-height: 20px;
        font-size: .8em;
        box-shadow: 0 0 15px -5px rgb(0 0 0/40%);
        min-width: 120px;
        animation-name: ShowNotif;
        animation-duration: .5s;
        animation-iteration-count: 1;
        top: 110%;
        left: 0;
        opacity: 0
    }
}



@media all and (max-width: 280px) {
    .liFav {
        display: none !important
    }
}

.ulInlineScheduleDates {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 25px
}

.inlineScheduleTitle {
    border: solid 1px #dadaf1;
    border-top: none;
    border-left: none
}

.NoInlineSchedule {
    padding: 5px;
    cursor: pointer
}

.ulInlineScheduleDates li {
    display: block;
    width: 8.3333333333333333333333333333333%;
    text-align: center
}

.singleInlineDate {
    border: solid 1px #009dd2;
    margin: 3px;
    padding: 3px;
    font-size: .8em;
    background-color: #e6f9ff;
    color: #069;
    line-height: 1.4em;
    cursor: pointer
}

.NoInlineSchedule {
    width: 100% !important
}

.InlineScheduleTitle {
    margin: 0 10px 10px 35px
}

.ulInlineScheduleDates {
    margin-left: 35px
}

.ScheduleNotDates {
    border-top: dotted 2px #fff !important
}

    .ScheduleNotDates td {
        padding-top: 0 !important;
        margin-top: 0 !important
    }

@media all and (max-width: 1100px) {
    .inlineScheduleTitle {
        border: solid 1px #dadaf1
    }

    .ulInlineScheduleDates li {
        width: 33.3%;
        margin-bottom: 30px
    }
}

@media all and (max-width: 400px) {
    .ulInlineScheduleDates li {
        width: 50%;
        margin-bottom: 30px
    }
}

.ResetPass, .ResetSetUp {
    display: none;
    visibility: hidden
}

.ResetSetUpPara {
    border: solid 1px orange;
    color: #069;
    padding: 15px;
    margin: 15px 10px 10px 0 !important;
    background-color: rgba(255,255,255,.8)
}

.ResetPass .SignInTitle {
    padding-bottom: 10px
}

#ResetPassword {
    padding-top: 10px
}

#ErrorMsgs123 {
    background-color: rgba(255,255,255,.8)
}

#defaultMsgBox {
    border: 1px solid #ccc;
    -webkit-box-shadow: 0 2px 4px 0 rgb(133 133 133/80%);
    -moz-box-shadow: 0 2px 4px 0 rgba(133,133,133,.8);
    box-shadow: 0 2px 4px 0 rgb(133 133 133/80%);
    background-color: #fff;
    position: fixed;
    box-sizing: border-box;
    top: 10%;
    left: 25%;
    width: 45%;
    overflow-y: scroll;
    height: 250px;
    max-height: 580px;
    box-sizing: border-box;
    font-size: 1.1em;
    z-index: 100 !important;
    padding: 40px;
    color: #069;
    font-family: Poppins,Helvetica,Arial,sans-serif !important
}

    #defaultMsgBox #MsgBoxLink {
        border: solid 1px #ccc;
        clear: both !important;
        max-width: 340px;
        display: block;
        margin: 10px 0 0;
        padding: 10px 0 !important;
        font-size: .95em;
        background-color: #069;
        color: #fff;
        cursor: pointer
    }

        #defaultMsgBox #MsgBoxLink:hover {
            background-color: #005580;
            cursor: pointer
        }

        #defaultMsgBox #MsgBoxLink:before {
            margin-left: 10px
        }

a.lightBlueButton, .lightBlueButton {
    width: 100%;
    min-width: 140px;
    margin: 0 auto;
    min-height: 30px;
    line-height: 25px !important;
    display: block;
    font-size: .9em !important;
    background-color: #f1fbff;
    padding: 3px 15px !important;
    color: #0080b3 !important;
    text-align: center;
    border: 1px solid #99e2ff;
    transition: all .2s ease-in-out;
    cursor: pointer
}

    a.lightBlueButton:hover, .lightBlueButton:hover {
        background-color: #ccf1ff;
        border: 1px solid #4dccff;
        transition: all .2s ease-in-out
    }

.chkContainer {
    display: block;
    position: relative;
    padding: 6px 8px 5px 40px;
    margin: 1px 0;
    text-align: left;
    cursor: pointer;
    font-size: .94em;
    width: auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #000 !important
}

    .chkContainer input {
        position: absolute;
        opacity: 0;
        z-index: 69;
        cursor: pointer;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
        border-radius: 3px
    }

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 50;
    background: 0 0;
    transition: all linear .1s;
    border: solid 1px #fff
}

.DatesAndLocationsChoice .ShowMore {
    font-size: .9em;
    text-decoration: underline;
    font-style: italic;
    margin: 2px 0 0 15px;
    color: #666
}

    .DatesAndLocationsChoice .ShowMore:before {
        content: "+ "
    }

.BookingDates {
    clear: both
}

    .BookingDates:after {
        content: " ";
        display: block;
        clear: both
    }

.chkContainer:hover input ~ .checkmark {
    -webkit-box-shadow: 0 1px 5px 2px rgb(0 0 0/10%);
    -moz-box-shadow: 0 1px 5px 2px rgba(0,0,0,.1);
    box-shadow: 0 1px 5px 2px rgb(0 0 0/10%)
}

.chkContainer input ~ .checkmark:before {
    position: absolute;
    height: 16px;
    width: 16px;
    background-color: #efefef;
    border-radius: 10px;
    top: 8.5px;
    left: 10px;
    content: "✓";
    font-size: 9px;
    color: #efefef;
    line-height: 16px;
    text-align: center;
    font-weight: 700
}

.chkContainer input:checked ~ .checkmark:before {
    background-color: #00ace6;
    color: #fff
}

.chkContainer input:checked ~ .checkmark {
    background-color: rgba(217,228,242,.03);
    border: solid 1px #4dd2ff;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 3px 0 rgb(0 0 0/10%);
    -moz-box-shadow: 0 1px 3px 0 rgb(0 0 0/10%);
    box-shadow: 0 1px 3px 0 rgb(0 0 0/10%)
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none
}

.chkContainer input:checked ~ .checkmark:after {
    display: block
}

.chkContainer .checkmark:after {
}

.MiniTitle, .MiniTitleLowerCase {
    display: block;
    clear: both;
    font-size: .9em;
    margin: 15px 0 0;
    font-style: normal;
    color: #000
}

.sltNumberOfDelegates {
    border: solid 1px #d6e4f5;
    padding: 2px 5px
}

.bookCourseOrPrvateQuotepnl .MiniTitle {
    font-size: .78em
}

.MiniTitleLowerCase {
    font-size: .9em
}

.MiniTitleLessMargin {
    margin-top: 12px !important
}

.NoMarginTop {
    margin-top: 0 !important
}

.chosen-single:after {
    content: "v";
    font-weight: 700;
    position: absolute;
    top: -5px;
    right: -1px;
    text-align: center;
    transform: scale(1,.8);
    width: 30px;
    height: 41px;
    line-height: 45px;
    background-color: #fff;
    color: #333;
    border: none;
    transform: scale(1.1,.5)
}

.chosen-with-drop .chosen-single:after {
    content: "▲"
}

.NoDates {
    padding: 10px 0;
    margin: 0;
    display: block
}

    .NoDates.HighlightSection input {
        border: solid 1px red !important;
        background-color: #fff1f1
    }

.CarouselHolder {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 75px;
    border: solid 1px #dadaf1;
    clear: both;
    display: inline-block
}

.CarouselHolderNoBorder {
    border: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important
}

#CarouselInner {
    position: absolute;
    left: 0;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 5px;
    transition: all linear .1s;
    z-index: 1;
    height: 73px;
    box-sizing: border-box
}

.CarouselInnerNoPadding {
    padding: 5px 5px 0 0 !important;
    transition: none !important
}

.CarouselLeft, .CarouselRight {
    position: absolute;
    height: 75px;
    font-size: 1.3em;
    background-color: #e6f1fe;
    color: #000;
    line-height: 75px;
    z-index: 60;
    width: 20px;
    cursor: pointer;
    text-align: center;
    font-weight: 700
}

.CarouselLeft {
    left: 0;
    transition: all linear .2s;
    border-right: solid 1px #dadaf1
}

.CarouselRight {
    right: 0;
    border-left: solid 1px #dadaf1
}

.CarouselGreyedOutArrow {
    pointer-events: none;
    background-color: #fdfdfd;
    color: #eee;
    border-left: solid 1px #fff;
    border-right: solid 1px #fff
}

#CarouselEndMarker {
    position: absolute;
    height: 10px;
    width: 10px;
    right: 10px;
    top: 10px;
    z-index: 100
}

.NoDatesMessage {
    display: block;
    border: solid 2px #ebfaeb;
    padding: 5px;
    font-size: .9em
}

.lightErrorMsg {
    background-color: #fff;
    border: none
}

.textCloseErrorMessage {
    color: #069;
    display: block;
    font-size: .95em;
    border: solid 1px #ccc;
    width: 200px;
    margin: 20px auto 0;
    padding: 5px
}

#BookDiv, #QuoteDiv {
    margin-bottom: 200px;
    margin-top: 0 !important;
    display: block
}

.hiddenLocationOption {
    opacity: .3;
    pointer-events: none
}

.hideErrorMessage {
    position: absolute;
    top: 2px;
    right: 0;
    width: 30px;
    height: 40px;
    border: solid 1px #fff;
    background-color: rgba(255,255,255,.5);
    line-height: 35px;
    text-align: center;
    color: darkred;
    font-weight: 700;
    cursor: pointer
}

.OnlineEnquiryTitle {
    padding: 0 10px 5px 0;
    font-size: 1.2em !important;
    color: #069 !important
}

.btnEndContactProcess, .btnEndContactProcess:hover {
    margin-top: 10px !important;
    background-color: #fdfdfd;
    color: #069 !important
}

    .btnEndContactProcess:hover {
        background-color: #ededed
    }

@media all and (min-width: 850px) {
    .ResultMsgBottomOfForm {
        display: none !important;
        visibility: hidden !important
    }
}



privatecourseinfo {
    text-align: center
}

.bxCourseDates privatecourseinfo {
    display: block;
    position: relative;
    background-color: #fff;
    padding-left: 20px;
    padding-right: 20px;
    text-align: left;
    border: dotted 1px #ccc;
    margin: 10px 20px;
    padding: 10px
}

.PubSchedStart {
    border-top: dotted 1px #ccc
}

privatecourseinfo minititle {
    display: inline;
    clear: none;
    margin: 7px 5px 0 0;
}

privatecourseinfo .inner {
    padding: 0;
    margin: 0;
    display: inline;
    color: #000;
    cursor: pointer;
    transition: all .2s linear
}

privatecourseheight {
    width: 100%;
    float: left;
    display: block;
    line-height: 1.4em;
}

privatecourseinfo .QuoteButton {
    display: block;
    width: 100%;
    float: right
}

.PriceNoticePar {
    line-height: 1.2em;
    text-align: left;
    margin: 0px 5px 0px 0px;
    font-size: .8em;
    color: #666;
    display: block;
}

.bxCourseDatesWithTitle privatecourseinfo .inner {
    font-size: .9em
}

privatecourseinfo .RequestDifferentDate {
    width: 100%
}

.SingleDate .DateBottom {
    display: inline-block;
    float: left
}

.SingleDate.Virtual .Place {
    color: #207957
}

.SingleDate.Newcastle .Place {
    color: #005266
}

.SingleDate.Durham .Place {
    color: #d27314
}

.SingleDate.Leeds .Place {
    color: #544884
}

.SingleDate .Place {
    display: inline-block;
    padding: 0 10px 0 15px;
    text-align: left;
    float: left;
    min-width: 110px
}

.Price {
    cursor: pointer;
    display: block;
    text-align: left;
    font-size: 1.1em !important;
    float: left;
    padding: 0 0 0 10px;
    color: #000 !important;
}

@media all and (max-width: 900px) {
    .SingleDate .Place, .Price {
        min-width: 0 !important;
        padding-left: 0 !important
    }
}

.ScheduledData, privatecourseinfo {
    display: block;
    text-align: left;
    height: auto;
    padding: 10px 10px 10px 0 !important;
    position: relative;
    width: 100% !important;
}

    .ScheduledData minititle, privatecourseinfo minititle {
        font-size: 0.95em;
    }


.DateInstance {
    position: relative;
    margin: 10px 20px 10px 0;
    border-radius: 5px;
    max-width: 140px;
    display: flex;
    flex-wrap: wrap;
    min-width: 110px;
    border: solid 0.5px #c0e3f1;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

    .DateInstance .BookBtn {
        display: inline;
        position: unset !important;
        height: 40px;
    }

.pnlCourseRightMenu .DateInstance {
    max-width: 212px;
}

.DateInstance .QuoteLocation {
    color: #5c5cd6;
    border-color: #ebebfa;
    line-height: 1.2em;
    background-color: #ebebfa;
    font-size: 0.9em;
    text-align: center;
    padding: 10px 5px;
}

.DateInstance .QuotePrice {
    display: block;
    text-align: center;
    line-height: 1.2em;
    font-size: 0.9em;
    padding: 10px 5px;
}


privatecourseinfo:after {
    content: " ";
    clear: both;
    display: block;
}


privatecourseinfo {
    height: auto;
    padding: 10px;
}



.PrivateEventOnly privatecourseinfo {
    margin: 0 20px 0 0
}

.Price .PriceInfo, .InfoPopup {
    color: #666;
    display: inline;
    position: relative;
    font-size: .7em;
    background-color: transparent;
    cursor: pointer
}

.Price .PriceMoreInfo, .InfoPopup {
    display: inline-block;
    position: relative;
    height: 12px;
    width: 12px;
    border: solid 1px #ccc;
    border-radius: 15px;
    font-size: 8px;
    font-weight: 700;
    color: #333;
    text-align: center;
    line-height: 11px;
    margin: 0 0 0 5px;
    top: -2px
}

    .Price .PriceMoreInfo div, .InfoPopup div {
        display: none
    }

    .Price .PriceMoreInfo:hover div, .InfoPopup:hover div {
        color: #666;
        position: absolute;
        top: 10px;
        left: 10px;
        display: inline;
        min-width: 150px;
        font-size: 1.7em;
        line-height: 1.5em;
        background-color: #fff;
        padding: 10px;
        border: solid 1px #ccc;
        z-index: 50;
        font-weight: 400;
        color: #005580
    }

.InfoPopupWide:hover div {
    min-width: 300px
}

.SingleDate {
    background-color: transparent;
    border: solid 1px transparent;
    width: 100% !important;
    margin: 0 10px 0 0;
    display: block;
    font-size: 1em;
    padding: 5px 0 0px !important;
    cursor: pointer;
    position: relative;
    color: #000 !important;
}

    .SingleDate:hover {
        padding-left: 5px !important;
        margin-left: -5px;
        border: solid 1px #80d4ff;
        background-color: #fff
    }

    .SingleDate:nth-of-type(even) {
        color: red
    }

    .SingleDate:hover {
        box-shadow: 0 2px 2px 0 rgb(224 224 235);
        transition: all linear .2s
    }

    .SingleDate .DateTop .Day {
        display: block;
        text-align: left !important;
        float: left;
        color: #000 !important;
        min-width: 145px
    }

    .SingleDate .DateTop .Year {
        display: inline-block;
        color: #333;
        font-size: .8em
    }

    .SingleDate .DateTop .Month {
        color: #005580;
        width: 23px;
        overflow: hidden;
        margin-left: 5px
    }

    .SingleDate .BookBtn {
        padding: 3px 25px 0 15px !important;
        text-align: right;
        height: 30px;
        font-size: .9em;
        line-height: 24px;
        float: right;
        margin-top: -4px;
        margin-bototm: -1px;
        color: #16439c !important;
        border: solid 1px #ccc;
    }

        .SingleDate .BookBtn:after, .PrivateEventOnly .button:after {
            content: "";
            width: 5px;
            margin-left: 10px;
            height: 5px;
            border: 0 solid transparent;
            border-top: 3px solid;
            position: absolute;
            border-right: 3px solid;
            top: 14px;
            right: 15px;
            transform: rotate(45deg)
        }

    .SingleDate:hover .defaultButton:before {
        width: 100%
    }

.DatesHolder {
    display: flex;
    flex-wrap: wrap
}

@media all and (max-width: 600px) {
    .DatesHolder {
        padding: 0 50px
    }
}

.MoreDates {
    clear: both;
    padding-top: 10px
}

.DatessSection {
    box-shadow: inset 0 0 5px 0 #bbb;
    display: block;
    padding: 10px;
    background-color: #fcfcfc
}

.DatesSection:after {
    content: " ";
    display: block;
    clear: both
}

.PriceNotice {
    color: #555;
    font-size: .8em;
    display: block;
    clear: both;
    line-height: 1.5em;
    width: auto;
    margin-bottom: 5px;
}

.FewDatesHolder + privatecourseinfo {
    width: 100% !important;
    margin: 0;
    padding: 0 20px 0
}

.ScrollHolder, .FewDatesHolder {
    position: relative;
    height: auto;
    left: 0;
    display: block;
    margin-top: 0;
    padding: 5px 0 0
}

.ScrollBodyHolder {
    position: relative;
    overflow: hidden;
    min-height: 125px
}

.columnsTwo .ScrollBodyHolder {
    width: 300px;
    width: calc(100% - 100px);
    margin: 0 auto
}

.ScrollBody {
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transition: linear all .2s;
    adisplay: flex
}

.ScrollLeft, .ScrollReset, .ScrollRight, .ScrollFullRight {
    position: absolute;
    top: 4px;
    border-radius: 2px;
    height: 128px;
    width: 24px;
    transition: linear all .2s;
    line-height: 123px;
    cursor: pointer;
    padding-right: 3px;
    border: solid .5px #9bacca;
    background-color: #069;
    color: #fff;
    border-left: solid 5px #fff;
    text-align: center;
    font-size: 15px;
    letter-spacing: -3px;
    z-index: 80
}

    .ScrollLeft:hover, .ScrollReset:hover, .ScrollRight:hover, .ScrollFullRight:hover {
        background-color: #046;
        color: #fff;
        cursor: pointer
    }

.bxCourse .ScrollReset {
    left: 2px
}

.bxCourse .ScrollLeft {
    left: -20px
}

.bxCourse .ScrollBodyHolder {
    margin-left: 0;
    width: calc(100% - 20px)
}

.TwoDates, .OneDate, .ThreeDates {
    display: flex;
    margin: 0 0 0 0
}

@media all and (min-width: 900px) {
    .ThreeDates .ScrollRight, .ThreeDates .ScrollLeft {
        display: none !important
    }
}

.TwoDates .ScrollRight, .TwoDates .ScrollLeft, .OneDate .ScrollRight, .OneDate .ScrollLeft {
    display: none !important
}

.TwoDates form:nth-of-type(2) .SingleDate {
    margin-right: 0
}

@media all and (max-width: 700px) {
    .ScrollBodyHolder, .TwoDates, .OneDate, .ThreeDates {
        height: 170px
    }
}

.ScrollLeft {
    left: 45px
}

.ScrollReset {
    left: 20px
}

.ScrollRight {
    right: 0
}

.ScrollFullRight {
    right: 11px
}

.DeactivatedScrollButton {
    display: none
}

.PaddingWrapper {
    padding-left: 10px;
    padding-right: 10px
}

@media all and (min-width:1100px) {
    .PaddingWrapper {
        padding-left: 20px;
        padding-right: 20px
    }
}

@media all and (max-width: 700px) {
    .CourseTitleAndDetails {
        min-height: 0
    }
}

.RequestDifferentDate {
    display: block;
    font-size: .85em !important;
    padding: 6px 15px !important;
    text-align: center;
    cursor: pointer;
    max-width: 320px;
    float: left;
    transition: linear .2s;
    background-color: #eef9ff;
    border: solid 1px #b3e6ff;
    color: #069 !important
}


    .RequestDifferentDate:hover {
        text-decoration: none !important
    }

.BookingPrice {
    color: #666;
    font-size: 0.7em;
    margin-bottom: 8px;
}

.FinalRecap {
    display: block;
    margin-top: 30px;
    background-color: #fff;
    font-size: 0.8em;
    padding-left: 10px;
    width: 97%;
    border: solid 1px #c4d6ed;
    background-color: #f3f7fb;
}

    .FinalRecap costtitle {
        color: #000;
        font-size: 1em;
    }

    .FinalRecap minititle {
        color: #069;
        font-size: 0.9em;
    }

.BookingPrice pv {
    font-size: .7em;
    margin-left: 5px
}

courseday {
    clear: both;
    display: block
}

dnumber {
    color: #000;
    min-width: 45px;
    display: inline-block;
    font-size: 0.8em;
}

dofweek {
    font-size: 0.9em;
}

location {
    font-size: 0.9em;
    margin-right: 4px;
    margin-top: 5px
}

.SingleElement location {
    margin-top: 0 !important
}

costforone {
    display: block;
}

.ChosenDateElement costforone {
    clear: both;
    margin-top: 5px;
    float: right;
}

.AllDates costforone {
    font-size: 1.1em;
    width: 80px;
    text-align: right;
    padding: 10px 10px 10px 0;
    position: absolute;
    top: 0px;
    right: 0px;
    pointer-events:none;
}

costforone pv {
    font-size: .65em;
    margin-left: 1px;
    display: block;
    color: #888;
}

dateinstance div:after {
    content: " ";
    display: block;
    clear: both;
    width: 100%
}

datesselectionchoice div {
    border: solid 1px #d6e4f5;
    display: block;
    cursor: pointer;
    font-size: .85em;
    background-color: #fff;
    min-width: 220px;
    vertical-align: top;
    line-height: 1.4em;
    transition: all .1s linear;
    position: relative;
    top: 0;
    left: 0;
    padding-right: 10px !important
}

    datesselectionchoice div button, numberofdelegates button {
        height: 0;
        width: 0;
        transition: all .2s linear;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: 0 0;
        border: solid 1px transparent;
        cursor: pointer;
    }

        datesselectionchoice div:hover, numberofdelegates button:hover {
            border: solid 1.5px #069
        }

numberinstance {
    width: 50px;
    display: block;
    border: solid 1px #e8eef8;
    height: 30px;
    margin-right: 5px;
    background-color: #f9f9f9;
    margin-bottom: 5px !important
}

datesselectionchoice div {
    cursor: pointer;
    border: solid 1.5px #e8eef8;
    border-radius: 5px;
    width: 240px;
    margin: 0 5px 5px 0 !important;
    background-color: #f9f9f9;
    padding: 8px 10px 8px 30px
}

numberofdelegates {
    position: relative
}

    datesselectionchoice div, numberofdelegates button {
        z-index: 90;
        position: relative;
        top: 0;
        color: #000 !important;
    }

    numberofdelegates button {
        padding-left: 25px;
        color: #000 !important;
    }

    datesselectionchoice div, numberofdelegates div {
        z-index: 20
    }



    datesselectionchoice.AllDates div:before, numberofdelegates button:before {
        height: 10px;
        width: 10px;
        border: solid 1px #ccc;
        content: "";
        border-radius: 10px;
        position: absolute;
        left: 8px;
        top: 15px
    }

    numberofdelegates button:before {
        top: 7px
    }

    datesselectionchoice.AllDates .ChosenDate:before, numberofdelegates .HighlightedDate:before, .ChosenDate:before {
        border: none;
        left: 3px;
        top: 11px;
        background-image: url(/lib/aesthetics-graphics/icons/EditIcons.png);
        background-repeat: no-repeat;
        background-position: -19px 3px;
        height: 20px;
        width: 19px;
        background-color: transparent;
        position: absolute;
        content: ""
    }

    numberofdelegates .HighlightedDate:before {
        top: 3px
    }

datesselectionchoice .ChosenDate {
    border: solid 1px #069 !important;
}

datesselectionchoice input:checked, numberofdelegates input:checked {
    visibility: hidden
}

datesselectionchoice, numberofdelegates {
    display: flex;
    flex-wrap: wrap
}

    datesselectionchoice.AllDates {
        width: 100%;
    }

@media all and (max-height:840px) {
    datesselectionchoice.AllDates {
        max-height: 170px;
        border: solid 1px #ccc;
        width: 540px;
        overflow: auto;
        padding: 10px;
    }
}

.vVirtual location {
    color: #31b482 !important
}

.vNewcastle location {
    color: #008fb3 !important
}

.vDurham location {
    color: #f29340 !important
}

.vLeeds location {
    color: #9b8bc1 !important
}

.btnWithTextSmall {
    background-color: #fff;
    border: solid 1.5px #e8eef8;
    font-size: .6em;
    margin-left: 5px;
    display: inline-block;
    width: auto;
    padding: 2px 8px;
    color: #666;
    cursor: pointer;
    transition: all .2s linear;
}

    .btnWithTextSmall:hover {
        color: #fff !important;
        background-color: #1f79ad;
        border: 1px solid #017098 !important
    }

#CourseAndDatesSelector .btnWithTextSmall {
    font-size: .6em !important
}

.ChosenDateElement .SingleElement {
    float: left
}

.ChosenDateElement .btnWithTextSmall {
    float: left;
    margin: 0 0 0 5px
}

.ChosenDateElement {
    margin: 10px 0;
    font-size: 1.1em
}

    .ChosenDateElement .ChosenDate {
        padding: 8px 5px 5px 27px;
        margin-bottom: 10px !important;
        border: solid 1px #e8eef8 !important;
        background-color: #f9f9f9;
        width: auto;
    }

        .ChosenDateElement .ChosenDate pv {
            display: inline-block;
            margin-left: 5px;
        }

        .ChosenDateElement .ChosenDate button:hover {
            border: solid 1px #fff !important
        }















.likeTickBox option {
    background-color: #fff;
    outline-style: none;
}

.likeTickBox:focus {
    border: transparent;
    outline: none
}

.HighlightAttendanceTypes {
    border: solid 1px red;
    background-color: #fffbfb
}

.HighlightDateSelector {
    border: solid 1px red;
    background-color: #fffbfb;
    padding: 5px
}

#CourseAndDatesSelector {
    margin-top: 5px
}

privatecoursestartingprice, privateuptonodelegates {
    font-size: 1.1em;
    display: inline-block;
    color: #1d56c9;
    font-weight: bold;
    margin-top: 2px
}

.PrivateEventOnly span {
    padding: 0 0 5px !important;
    display: block
}

.CourseTitleAndDetails, .DurationOverviewSection {
    width: 300px;
    float: left;
}

@media all and (min-width:980px) {
    .CourseTitleAndDetails, .DurationOverviewSection {
        width: 400px;
    }
}

.CourseTitleAndDetails {
    padding: 25px 5px 20px 25px;
}

.BelowCourseTitle {
    padding: 0px 10px 0px 0px;
}


.defaultButton {
    padding: 5px 15px !important;
    text-align: center;
    cursor: pointer;
    color: #006699;
    background-color: transparent;
    transition: all 0.5s;
    position: relative;
    width: auto;
    display: inline-block;
    border: solid 1px #0088cc;
    box-shadow: 1px 2px 2px 0px rgb(204, 204, 204);
}

    .defaultButton:hover {
        border: solid 1px #006699;
    }

    .defaultButton::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0%;
        height: 0%;
        z-index: 1;
        background-color: rgba(0, 102, 153, 0.1);
        transition: all 0.3s;
    }

    .defaultButton:hover::before {
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
    }

    .defaultButton::after {
        content: '';
        position: absolute;
        top: 1px;
        left: 1px;
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        z-index: 1;
        opacity: 0;
        transition: all 0.3s;
        border: 1px solid rgba(0, 102, 153,.5);
        background: transparent;
        pointer-events: none;
    }

    .defaultButton:hover::after {
        opacity: 1;
        transform: scale(1,1);
        background: transparent;
    }



.defaultButtonDark {
    display: inline-block;
    color: #fff !important;
    border: solid 1px #438cd6;
    background: #3288b3;
    transition: all 0.3s ease-in-out 0s;
    cursor: pointer;
    position: relative;
    padding: 5px 10px;
    box-shadow: 0px 1px 1px 0px rgba(39, 106, 139, 0.5);
}

    .defaultButtonDark:hover {
        border-color: #fff;
    }

    .defaultButtonDark::before {
        content: '';
        min-width: calc(100% + 4px);
        min-height: calc(100% + 4px);
        border: 1px solid #006699;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: all .3s ease-in-out 0s;
    }


    .defaultButtonDark:hover::before,
    .defaultButtonDark:focus::before {
        opacity: 1;
    }


.HeaderButton {
    border: solid 1px transparent;
    box-shadow: none;
    margin: 6.5px 0 0 0px;
    padding: 5px 15px 5px 15px !important;
}

@media all and (max-width:820px) {
    .HeaderButton {
        font-size: 0.75em;
    }

    headeritems .Phone, iconlist contact button, iconlist signin a {
        font-size: 0.75em !important;
    }
}

.HeaderButton:hover {
    border: solid 1px #cfcfcf;
}




@media all and (min-width:997px) {
    .ScheduledDataPrSection {
        height: 100%;
    }
}

.ScheduledDataPrSection {
    display: none;
}

@media all and (min-width:855px) {
    .ScheduledDataPrSection {
        width: 50%;
        display: block;
        min-width: 200px;
        margin: 0px 0 0 0px;
        position: relative;
        float: right;
        background-color: #fdfdfd;
        padding: 5px 15px 15px 15px;
        border-left: #fcfcfc solid 1px;
        box-shadow: 20px 0 10px -20px rgba(0,0,0,0.15) inset;
    }
}

@media all and (min-width:920px) {
    .ScheduledDataPrSection {
        width: 65%;
    }
}




@media all and (min-width:1015px) {
    .ScheduledDataPrSection {
        width: calc(100% - 410px) !important;
        border-radius: 0 30px 30px 0;
    }
}

.ScheduledDataPrSection:after, .QuoteButton:before, .ScheduledData:before {
    display: block;
    content: "";
    position: absolute;
    left: 0px;
    top: 15px;
    background-color: transparent;
    height: 0;
    width: 0;
}




@media all and (max-width: 780px) {
    .ScheduledDataPrSection {
        width: 36% !important
    }
}

.liveSearchErrorText {
    background-color: #fff;
    padding: 5px 10px;
    position: absolute;
    line-height: 1.4em;
    top: 55px;
    left: 20px;
    height: 0;
    overflow: hidden;
    padding: 0;
    z-index: 100
}

.ShowThenHide {
    -webkit-transition: linear .5s height;
    -moz-transition: linear .5s height;
    -o-transition: linear .5s height;
    transition: linear .5s height;
    animation-name: ShowThenHideAnim;
    animation-duration: 8s;
    animation-iteration-count: 1
}

@keyframes ShowThenHideAnim {
    0% {
        height: 0
    }

    10%,80% {
        border: solid 1px #ccc;
        color: #fff;
        background-color: rgba(153,0,115,.9);
        -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0/20%);
        box-shadow: 0 2px 5px 0 rgb(0 0 0/20%);
        visibility: visible !important;
        border: solid 1px #66004d;
        height: auto;
        padding: 8px 10px
    }

    100% {
        height: 0;
        visibility: hidden !important
    }
}

.NoBorderNoBg {
    background: 0 0;
    border: none;
    margin: 0;
    padding: 0
}

.PrivateEventOnly {
    line-height: 1.5em;
    width: 100% !important;
    cursor: pointer;
    text-align: left;
    max-width: 410px;
}

    .PrivateEventOnly .defaultButton {
        margin-top: 10px;
        width: 100%;
    }

.QuoteButton button {
    width: 100%;
    display: block
}

.PrivateEventOnly .LocCont {
    display: block;
    color: #069;
    margin: 0 0 2px 45px;
    width: auto;
    float: left;
}

.PrivateEventOnly .Description {
    width: 100%;
    color: #333 !important;
    font-size: 1em !important;
    padding: 2px 0;
    border-radius: 5px;
    border: solid 1.5px #e8eef8;
    padding: 8px;
    margin-bottom: 5px;
}

vat {
    font-size: 0.8em;
    margin-left: -1px;
}

.PrivateEventOnly .price {
    width: auto;
    float: left;
    display: inline;
    margin: 5px 0 0;
    color: #000 !important;
}



.PrivateEventOnly .button {
    display: inline-block;
    width: 100%;
    font-size: 0.95em;
    padding: 8px 28px 8px 10px;
    margin: 5px 0 0px 0px;
    color: #fff !important;
    background-color: #438cd6;
    border: solid 1px #438cd6;
    position: relative;
}

    .PrivateEventOnly .button:hover {
        background-color: #2973bc;
    }













.FullWidth {
    margin: 0px;
    position: relative;
    width: 100%;
}



















.CourseDatesHolder {
    width: calc(100% + 20px);
    display: block;
    padding: 0px 0px 2px 10px;
    font-size: 0.95em;
    margin: 10px 0 10px -10px;
}

@media all and (max-width:550px) {
    .allReviewsOverviewHolder {
        width: 90%;
        margin: 10px 5% !important
    }
}

@media all and (max-width:600px) {
    .allReviewsOverviewHolder {
        width: 95% !important;
        margin: 0 2% !important
    }
}



@media all and (min-width:840px) {
    .pnlCourseRightMenu .CourseDatesHolder {
        max-height: 230px;
        overflow: auto;
        width: 340px;
    }
}

.tblCourseDates {
    width: 100%;
}

    .tblCourseDates thead {
        font-size: 0.7em;
    }

    .tblCourseDates td {
        padding: 0 10px 0 0;
        font-size: 0.9em;
    }

    .tblCourseDates tr td:nth-of-type(2) {
        min-width: 100px;
    }

    .tblCourseDates thead tr td:first-of-type {
        border-radius: 10px 0 0 0;
    }

    .tblCourseDates thead tr td:last-of-type {
        border-radius: 0 10px 0 0;
    }

    .tblCourseDates tr {
        border-bottom: solid 1px #fff;
        cursor: pointer;
    }



        .tblCourseDates tr:hover {
            background-color: #fff !important;
        }

    .tblCourseDates thead tr:hover {
        background-color: transparent !important;
        cursor: auto;
    }




    .tblCourseDates tr:hover button {
        background-color: #006bb3;
        color: #fff;
    }

.ScheduledDateVenue {
    padding: 5px;
    display: inline-block;
    font-size: 0.9em;
}

    .ScheduledDateVenue.Virtual {
        color: #1b6548;
        border-color: #ebfaf4;
        background-color: #ebfaf4;
    }

.tblCourseDates tr:hover .ScheduledDateVenue.Virtual {
    background-color: #adebd3;
}

.ScheduledDateVenue.Newcastle {
    color: #005266;
    border-color: #ccf5ff;
    background-color: #ccf5ff;
}

.tblCourseDates tr:hover .ScheduledDateVenue.Newcastle {
    background-color: #99ebff;
}

.ScheduledDateVenue.Durham {
    color: #a3590f;
    border-color: #fdf2e8;
    background-color: #fdf2e8;
}

topdates .ScheduledDateVenue.Durham {
    background-color: #fbe5d0;
}

.tblCourseDates tr:hover .ScheduledDateVenue.Durham {
    background-color: #f9d8b9;
}

.ScheduledDateVenue.Leeds {
    color: #544884;
    border-color: #f0eff6;
    background-color: #f0eff6;
}

.tblCourseDates tr:hover .ScheduledDateVenue.Leeds {
    background-color: #e1deed;
}

.AskAQuestion .AskQuestionForm:before, .TelNoLeft {
    display: block;
    width: 100%;
    height: 45px;
    padding: 20px 10px 10px 0;
    box-sizing: border-box;
    content: "Ask a question";
    color: #000;
    font-size: 1.5em;
    text-align: left;
}

.AskAQuestion .AskQuestionForm, .TelNoLeft {
    display: block;
    box-sizing: border-box;
    height: auto;
    width: 280px;
    z-index: 99 !important;
    margin-bottom: 10px;
    border: dotted 1px #dcccbc;
    background-color: #fff
}

.AskAQuestion .AskQuestionForm {
    padding: 5px 10px;
}

    .AskAQuestion .AskQuestionForm:after {
        content: "";
        display: block;
        clear: both;
    }

@media all and (max-width:1300px) {
    .RootBodyHolder {
        padding: 0 20px;
        box-sizing: border-box;
    }
}

.reviewText {
    padding: 30px 30px 10px 40px;
    line-height: 1.4em !important;
    position: relative;
    text-align: center;
    font-size: 0.85em;
}

@media all and (min-width:1101px) {
    .reviewText:before {
        content: '"';
        font-size: 4em;
        font-family: cursive;
        position: absolute;
        color: #f2f2f2;
        left: 10px;
        top: 40px;
    }
}

.who {
    display: block;
    font-size: 0.7em;
    padding: 0px 25px 20px 25px;
    margin-left: 0px;
    line-height: 1.3em;
    min-height: 40px;
    text-align: center;
    color: #999;
}

coursereviewsheader {
    clear: both;
    display: flex;
    clear: both;
    width: 100%;
}

    coursereviewsheader text {
        display: inline-block;
        width: auto;
        color: #000;
        font-size: 1.3em;
        clear: both;
        text-align: left;
        padding: 15px 20px 20px 20px;
        font-weight: lighter;
    }

@media all and (max-width:700px) {
    coursereviewsheader images #FeedbackIconsList {
        display: none;
    }
}

@media all and (min-width:699px) {
    coursereviewsheader images #FeedbackIconsList {
        height: 54px;
        width: 530px;
        overflow: hidden;
    }

    #FeedbackIconsList .li1, #FeedbackIconsList .li2, #FeedbackIconsList .li3, #FeedbackIconsList .li4, #FeedbackIconsList .li5, #FeedbackIconsList .li6, #FeedbackIconsList .li7, #FeedbackIconsList .li8, #FeedbackIconsList .li9, #FeedbackIconsList .li10, #FeedbackIconsList .li11, #FeedbackIconsList .li12, #FeedbackIconsList .li13, #FeedbackIconsList .li14, #FeedbackIconsList .li15, #FeedbackIconsList .li16, #FeedbackIconsList .li17, #FeedbackIconsList .li18, #FeedbackIconsList .li19, #FeedbackIconsList .li20, #FeedbackIconsList .li21, #FeedbackIconsList .li22, #FeedbackIconsList .li23, #FeedbackIconsList .li24, #FeedbackIconsList .li25, #FeedbackIconsList .li26 {
        background: url(/lib/aesthetics-graphics/backgrounds/PeopleFullSet.png);
        background-repeat: no-repeat;
        background-position: left top;
        background-size: 1150px;
        width: 44px;
        height: 55px;
        float: left;
        margin: 0 5px 0 0;
    }

    coursereviewsheader images #FeedbackIconsList li.li2 {
        background-position: -44px 0px !important;
    }

    coursereviewsheader images #FeedbackIconsList li.li3 {
        background-position: -132.5px 0px !important;
    }

    coursereviewsheader images #FeedbackIconsList li.li4 {
        background-position: -177px 0px !important;
    }

    coursereviewsheader images #FeedbackIconsList li.li5 {
        background-position: -222px 0px !important;
    }

    coursereviewsheader images #FeedbackIconsList li.li6 {
        background-position: -266px 0px !important;
    }

    coursereviewsheader images #FeedbackIconsList li.li7 {
        background-position: -310px 0px !important;
    }

    coursereviewsheader images #FeedbackIconsList li.li8 {
        background-position: -354.5px 0px !important;
    }

    coursereviewsheader images #FeedbackIconsList li.li9 {
        background-position: -399px 0px !important;
    }

    coursereviewsheader images #FeedbackIconsList li.li10 {
        background-position: -443px 0px !important;
    }

    coursereviewsheader images #FeedbackIconsList li.li11 {
        background-position: -487px 0px !important;
    }

    coursereviewsheader images #FeedbackIconsList li.li12 {
        background-position: -531.5px 0px !important;
    }

    coursereviewsheader images #FeedbackIconsList li.li13 {
        background-position: -576px 0px !important;
    }

    coursereviewsheader images #FeedbackIconsList li.li14 {
        background-position: -620px 0px !important;
    }

    coursereviewsheader images #FeedbackIconsList li.li15 {
        background-position: -664px 0px !important;
    }

    coursereviewsheader images #FeedbackIconsList li.li16 {
        background-position: -708px 0px !important;
    }

    coursereviewsheader images #FeedbackIconsList li.li17 {
        background-position: -752px 0px !important;
    }

    coursereviewsheader images #FeedbackIconsList li.li18 {
        background-position: -796px 0px !important;
    }

    coursereviewsheader images #FeedbackIconsList li.li19 {
        background-position: -839.5px 0px !important;
    }

    coursereviewsheader images #FeedbackIconsList li.li20 {
        background-position: -884px 0px !important;
    }

    coursereviewsheader images #FeedbackIconsList li.li21 {
        background-position: -928px 0px !important;
    }

    coursereviewsheader images #FeedbackIconsList li.li22 {
        background-position: -972px 0px !important;
    }

    coursereviewsheader images #FeedbackIconsList li.li23 {
        background-position: -1016.5px 0px !important;
    }

    coursereviewsheader images #FeedbackIconsList li.li24 {
        background-position: -1060.5px 0px !important;
    }

    coursereviewsheader images #FeedbackIconsList li.li25 {
        background-position: -88px 0px !important;
    }
}





.divReviews {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    margin: 0px 0 40px 0;
    max-width: 1050px;
    margin: 0 auto;
}

.ReviewsOverviewHolder {
    width: 22%;
    display: block;
    min-width: 200px;
    margin: 1% 1.5% 2% 1.5%;
    box-sizing: border-box;
    max-width: 300px;
    box-shadow: 0px 5px 8px -1px rgb(221, 231, 238);
    border-left: solid 2px #fff;
    border-radius: 5px;
    background-color: #fff;
}

@media all and (max-width:1100px) {
    .ReviewsOverviewHolder {
        width: 29%;
        margin: 2%;
    }


    .reviewText {
        padding: 20px;
    }
}

@media all and (max-width:550px) {
    .ReviewsOverviewHolder {
        width: 48%;
        min-width: 48%;
    }

    .reviewText {
        padding: 15px;
    }
}

.siteTelNo {
    color: #fff !important;
}

matchedtext {
    font-weight: bolder;
    color: #000;
    filter: drop-shadow(0 0 0 transparent) drop-shadow(0 0 0 #ccc) drop-shadow(0.2px -0.2px 0 #666) drop-shadow(-0.2px 0.2px 0 #666);
}

searchcoursesagain {
    display: block;
    min-width: 200px;
    width: 30%;
    float: left;
}

    searchcoursesagain coursesearchrestarttitle {
        color: #069;
        font-size: 0.8em;
    }

    searchcoursesagain .txtSiteSearch {
        border: solid 1px #efefef !important;
        display: inline-block;
        margin: 0px 5px 5px 0;
        background-color: #fff;
        box-shadow: 0px 1px 1px 0px rgb(224 224 235);
    }

    searchcoursesagain .btnActivateSearch {
        height: 38px;
        left: unset;
        right: 5px;
        top: 1px !important;
        border: none;
        color: #000;
        width: 20px;
        transition: all .2s linear;
        background-position: -245px 8px !important;
        background-size: 460px !important;
        background: url(/lib/SVGs/IconsSVG.svg) no-repeat;
    }

    searchcoursesagain .HomeHeroSearch .btnActivateSearch:hover {
        background-color: #006699;
    }

comparecoursesbysearch {
    font-size: 0.75em;
}

    comparecoursesbysearch .cptCompCourses {
        border: solid 1px #efefef;
        padding: 5px 5px;
        display: inline-block;
        margin-left: 10px;
    }

viewoption {
    font-size: 0.75em;
    float: right;
    margin: 0px !important;
    cursor: pointer;
    padding: 1px 5px;
    display: inline-block;
    margin-left: 10px;
    opacity: 0.6;
    transition: all .2s ease-in-out;
}

    viewoption:hover {
        opacity: 1;
        color: #428BFF
    }

    viewoption:first-of-type {
        margin-left: 8px;
    }

    viewoption.selected {
        opacity: 1;
        border-bottom: solid 3px #428BFF;
    }

    viewoption:before {
        height: 15px;
        margin: 0 3px -4px 0;
        content: "";
        width: 13px;
        display: inline-block;
        background: url(/lib/SVGs/IconsSVG.svg) transparent no-repeat;
        transition: all linear .1s;
        background-position: -478px -7px;
        background-color: transparent !important;
        background-size: 520px;
    }

    viewoption:nth-of-type(2):before {
        background-position: -497px -7px;
    }

.SimpleList {
    min-height: 300px;
    margin-top: 20px;
}

.PaginationRoot .SimpleList {
    min-height: 100px;
    margin-top: 0px;
}

headeritems {
    position: relative;
    display: block;
    top: 0px;
    width: 100% margin: 0 auto;
}

    headeritems mainlist, headeritems rightlist {
        position: relative;
        display: flex;
    }

@media all and (min-width:680px) {
    headeritems mainlist.Mobile {
        display: none;
    }
}

@media all and (max-width:370px) {
    headeritems mainlist.Mobile {
        padding-left: 10px;
    }
}

@media all and (max-width:679px) {
    headeritems mainlist.Screen .NonMobileItem {
        display: none;
    }
}

headeritems rightlist {
    margin: 0;
    position: Absolute;
    right: 0px;
    top: 0px;
    width: auto;
}

@media all and (min-width:1201px) {
    headeritems mainlist {
        justify-content: left;
        padding-left: 120px;
        width: 100%;
        position: absolute;
    }
}

@media all and (min-width:800px) and (max-width:1200px) {
    headeritems mainlist {
        width: calc(100% - 250px);
        justify-content: left;
    }
}

headeritems mainlist item {
    position: relative;
    font-size: 0.9em;
}

    headeritems mainlist item div.MenuToggle:hover {
        cursor: pointer;
    }

    headeritems mainlist item a, headeritems mainlist item div.MenuToggle {
        display: block;
    }



@media all and (max-width:540px) {
    headeritems mainlist.Mobile item.Search {
        display: none;
    }
}

headeritems mainlist item * {
    color: #000 !important;
    font-weight: 500 !important;
    font-size: 0.9em;
}

headeritems mainlist item:last-of-type:after {
    display: none !important;
}



headeritems .txtSiteSearch, headeritems .txtSiteSearch:focus, headeritems .txtSiteSearch:hover {
    margin: 9px 10px 10px 15px;
    padding: 10px 45px 10px 15px !important;
    height: 35px !important;
    width: 170px !important;
    background-color: #fff;
    border-radius: 2px;
    font-family: Poppins, sans-serif;
    border: solid 0.5px #ccc !important;
    background-color: #fff;
    box-shadow: 0px 1px 3px 0px rgb(224 224 235);
}

@media all and (max-width:870px) {
    headeritems .txtSiteSearch, headeritems .txtSiteSearch:focus, headeritems .txtSiteSearch:hover {
        width: 110px !important;
    }
}

headeritems .btnActivateSearch {
    height: 28px;
    position: absolute;
    left: unset !important;
    right: 15px !important;
    top: 5px !important;
    background-position: -245px 0px;
    background-size: 460px;
    width: 20px;
    border-radius: 50%;
}



headeritems .Phone {
    height: auto;
    padding: 3px 0px 0 10px;
    margin-left: 5px;
    text-align: right !important;
}


@media all and (max-width:730px) {
    headeritems .Phone {
        display: none;
    }
}

headeritems .Phone * {
    color: #000;
    font-size: 0.9em;
}

headeritems .Phone span {
    clear: both;
    font-size: 0.7em;
    display: block;
    line-height: 0.6em;
    color: #666;
    text-align: right;
    height: auto;
    padding-top: 7px;
}

    headeritems .Phone span:before {
        content: "";
        width: 11px;
        height: 10px;
        margin-bottom: -2px;
        background-size: 260px;
        background-position: -216px -2px;
        display: inline-block;
    }

headeritems iconlist {
    display: flex;
    height: 40px;
}

    headeritems iconlist icon {
        width: 30px;
        height: 25px;
        display: block;
        border: solid 1px red;
        background: solid 1px blue !important;
    }

.headerContactMainTitle {
    display: block;
    padding: 0 15px;
    font-size: 0.8em;
    letter-spacing: 0.5px;
    font-family: Poppins, sans-serif;
    text-align: center;
    color: #000;
    text-wrap: nowrap;
    height: 60px;
    line-height: 60px;
    width: auto;
    cursor: pointer;
    border: none;
    background-color: rgba(255, 255, 255,.5);
    transition: all .1s linear;
}

    .headerContactMainTitle:hover {
        background-color: #438cd6;
        color: #fff !important;
        ;
    }


iconlist .HeaderIconOnly, iconlist favourites a, iconlist .HeaderIconOnly {
    height: 50px;
    padding: 0px;
    font-size: 0.8em;
    color: #000 !important;
    ;
    display: block;
    border: none;
    margin-right: 5px;
    position: relative;
    background-color: transparent !important;
}



iconlist contact button, iconlist signin a {
    color: #fff;
    padding: 1px 10px !important;
    font-size: 0.75em !important;
    border: solid 1px #438cd6;
    background: #438cd6;
    border-radius: 5px;
    line-height: 30px;
    margin: 9px 0 0 10px !important;
    box-shadow: 1px 2px 2px 0px rgb(204, 204, 204);
    cursor: pointer;
}

    iconlist contact button:hover {
        transform: scale(1.1);
        transition: all linear .1s;
    }

iconlist signin a {
    border: none;
    display: block;
    background-color: #fff;
    color: #000 !important;
    box-shadow: none;
}



iconlist .HeaderIconOnly, iconlist favourites a {
    padding: 0px;
    height: 50px;
    width: 30px !important;
    display: block;
    border: none;
    margin-right: 0px;
    position: relative;
    background-color: transparent !important;
}


    iconlist favourites a:hover, iconlist signin a:hover, iconlist .HeaderIconOnly:hover {
        transform: scale(1.1);
        transition: all linear .1s;
    }

    iconlist favourites a:before, .Phone span:before, iconlist .HeaderIconOnly:before {
        background: url(/lib/SVGs/IconsSVG.svg) transparent no-repeat;
        transition: all linear .1s;
        background-color: transparent !important;
        background-size: 420px;
    }

    iconlist favourites a:before, .HeaderIconOnly:before {
        content: "";
        position: absolute;
        top: 0px;
        left: 2px;
        height: 100%;
        width: 22px;
    }



    iconlist .HeaderIconOnly:before {
        background-position: -312.8px 3px;
        border: solid 0.5px #cccc;
        padding: 0 5px;
        content: "";
        height: 30px;
        margin: 10px 3px 0 0;
        box-shadow: 0px 1px 3px 0px rgb(224 224 235);
    }

    iconlist favourites a:before {
        background-position: -264px 12px;
    }

iconlist signin a:before {
    background-position: -144px 16px;
    background-size: 300px;
    width: 16px;
}

iconlist .HeaderIconOnly:hover {
    cursor: pointer;
}

submenu.SmallerMenu {
    min-width: 200px;
    left: -50px;
    text-align: center;
}

    submenu.SmallerMenu firstoption a {
        width: 100% !important;
        max-width: unset;
        box-shadow: none;
        border-bottom: dotted 0.5px #cfcfcf;
    }

favourites a {
    position: relative;
    padding-right: 20px;
}

favourites .hasFavs {
    display: block !important;
    position: absolute;
    height: 15px;
    width: 15px;
    padding-left: 1px;
    background-color: #999;
    top: 2px;
    right: 1px;
    border-radius: 20px;
    border-radius: 20px;
    color: #fff;
    line-height: 15px;
    font-size: 10px;
    text-align: center;
}








.HeaderContactExtraDetails {
    height: auto;
    transition: none;
    padding: 10px;
    font-size: 1em;
    box-shadow: 0 5px 6px 1px rgba(0,0,0,.1);
    line-height: 1.4em;
    cursor: pointer;
    margin: 0 0 0 -15px;
    background-color: #438cd6;
    color: #fff !important;
    width: 100px;
    white-space: wrap;
    font-size: 1.1em !important;
    transition: background-color .2s linear;
}

    .HeaderContactExtraDetails:hover,
    .HeaderContactExtraDetails:hover {
        background-color: #438cd6;
        border-top: 0px;
    }

.ulHeaderDoubleContact li .HeaderContactExtraDetails {
    clear: both;
    display: block;
    text-align: left;
    font-size: .8em !important;
    text-transform: none;
    max-width: 150px;
    height: 0;
    overflow: hidden;
    transition: none;
}

.chkboxs fieldset {
    width: 100%;
    margin: 0;
    font-size: 1em;
    box-sizing: border-box;
    display: block;
    border: none;
    min-width: 0;
    background-color: #fff;
}

    .chkboxs fieldset legend {
        margin: 0 0 5px;
        padding: 0;
        width: 100%;
        font-size: 0.9em;
        float: left;
        display: table;
        line-height: 140%;
    }

        .chkboxs fieldset legend + * {
            clear: both;
        }

/* TOGGLE STYLING */
.chkboxs .toggle {
    margin: 0;
    box-sizing: border-box;
    font-size: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
}

@media all and (max-width:800px) {
    .chkboxs .toggle {
        flex-flow: row wrap;
    }

        .chkboxs .toggle input + label {
            min-width: 95%;
            text-align: left !important;
        }
}

.chkboxs .toggle input {
    width: 0;
    height: 0;
    position: absolute;
    left: -9999px;
}

    .chkboxs .toggle input + label, .likeTickBox option {
        margin: 5px 5px 0 0;
        padding: 10px;
        box-sizing: border-box;
        position: relative;
        display: inline-block;
        border: solid 1px #ddd;
        background-color: #fff;
        font-size: 13px;
        line-height: 140%;
        font-weight: 600;
        text-align: center;
        box-shadow: 0 0 0 rgba(255, 255, 255, 0);
        box-shadow: 1px 2px 2px 0px rgb(204, 204, 204);
        transition: border-color 0.15s ease-out, color 0.25s ease-out, background-color 0.15s ease-out, box-shadow 0.15s ease-out;
        cursor: pointer;
    }

.AttendenceType .chkboxs .toggle input + label, .likeTickBox option {
    min-height: 80px;
}

    .chkboxs .toggle input + label:hover, .likeTickBox option:hover {
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 20px 0px;
        border: solid 1px #2991fb;
    }

.likeTickBox {
    border: none;
    width: 100%;
    padding-bottom: 0px;
    max-height: 100px;
    margin-bottom: -50px;
    overflow: auto;
    align-items: top;
    vertical-align: top;
}

    .likeTickBox option {
        max-width: 20%;
        text-wrap: wrap;
        min-width: 140px;
        vertical-align: top;
    }

@media all and (max-width:660px) {
    .likeTickBox option {
        width: 95% !important;
        max-width: 100%;
        text-align: left;
    }

    .likeTickBox {
        max-height: unset;
        height: 230px !important;
    }
}

.chkboxs .toggle input + label:first-of-type {
    border-radius: 0;
}

.chkboxs .toggle input + label:last-of-type {
    border-radius: 0;
}

.chkboxs .toggle input:hover + label {
    border-color: #006699;
    cursor: pointer;
}

.chkboxs .toggle input:checked + label, .likeTickBox option:checked {
    background-color: #4b9dea;
    color: #fff;
    box-shadow: 0 0 10px rgba(102, 179, 251, .5);
    border-color: #4b9dea;
    z-index: 1;
}

.chkboxs .toggle input:focus + label {
    outline: dotted 1px #ccc;
    outline-offset: 0.45rem;
}

fieldset.InErrorState label {
    border: solid 1px red !important;
}

.errorMessage {
    color: red;
    font-size: 0.9em;
}

.bigErrorMessage {
    color: red;
    font-size: 0.9em;
    padding: 5px 15px;
    margin-bottom: 10px;
    border-radius: 15px;
    background-color: #fff4f4 !important;
}

textarea + .errorMessage {
    margin-top: -10px;
}

@media (max-width: 800px) {
    .chkboxs .toggle input + label {
        padding: 0.75rem 0.25rem;
        flex: 0 0 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        text-align: left !important;
    }
}
/* STYLING FOR THE STATUS HELPER TEXT FOR THE DEMO */
.chkboxs .status {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
}

    .chkboxs .status span {
        font-weight: 600;
        color: #b6985a;
    }

        .chkboxs .status span:first-of-type {
            display: inline;
        }

        .chkboxs .status span:last-of-type {
            display: none;
        }

@media (max-width: 800px) {
    .chkboxs .status span:first-of-type {
        display: none;
    }

    .chkboxs .status span:last-of-type {
        display: inline;
    }
}

underheader {
    width: 100%;
    height: 30px;
    display: block;
    text-align: right;
    color: #000;
    right: 0px;
    font-size: 0.85em;
    position: absolute;
    bottom: -30px;
    box-sizing: border-box;
}

    underheader contactdetails {
        box-shadow: 0px 1px 15px 0px rgb(224 224 235);
        position: absolute;
        padding: 0 75px 0 10px;
        right: 0px;
        background-color: #fcfcfc;
        border: solid 0.5px #e2e2ec;
        border-top: 0px;
        height: 30px;
    }

    underheader span {
        font-size: 0.7em;
        position: absolute;
        right: 5px;
        text-align: left;
        line-height: 10px;
        width: 65px;
        top: 4px;
    }

.liFullWidth {
    width: 100% !important;
}

.HasError input, .HasError textarea {
    background-color: #fff4f4;
    border: solid 1px #ffcccc;
}

.HasError select {
    border: solid 1px #ffcccc;
}

    .HasError select * {
        background-color: #fff4f4 !important;
    }

.OverTitleUl, .UnderTitleUl {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    color: #000;
    font-family: Poppins,Helvetica,Arial,sans-serif !important
}

.OverTitleUl {
    margin: 10px 0;
}

.detailsmenu {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    border-bottom: solid 1px #cccc;
}

    .detailsmenu li {
        border: solid 1px transparent;
        transition: all .2s ease-in-out;
        cursor: pointer;
        display: block;
        padding: 2px 5px 0 5px;
        color: #006699;
        font-size: 0.7em;
    }

@media all and (min-width:920px) {

    .detailsmenu li {
        font-size: 0.85em;
        padding: 2px 10px 0 10px;
    }
}

.detailsmenu li.highlighted, .detailsmenu li.highlighted:hover {
    border: solid 1px transparent;
    border-bottom: solid 2px #006699;
    color: #000;
    background: transparent;
}

.detailsmenu li:hover {
    border: solid 1px #006699;
    color: #fff;
    background-color: #006699;
}

contentsection {
    padding: 5px;
    display: block;
    font-size: 0.85em;
    line-height: 1.6em;
}

    contentsection.About {
        padding-top: 10px;
    }



    contentsection.AskQuestion .fullWidth {
        width: 100%;
    }

    contentsection.Private {
        padding: 10px 0 0 0;
    }

        contentsection.Private .PrivateCoursesAvailable {
            margin: 0px 10px 10px 0;
        }

        contentsection.Private cost, contentsection.Private numdels {
            font-size: 1.4em;
            color: #006699;
            display: inline-block;
            margin: 3px;
        }

    contentsection.Schedule {
        position: relative;
        min-height: 150px;
    }

        contentsection.Schedule privatecourseoption {
            display: none;
        }


        contentsection.Schedule privatecourseoption {
            position: relative;
            font-size: 0.9em;
            width: 210px;
            text-align: center;
            padding: 10px 10px 15px 10px;
            background-color: #eff4fa;
            border-radius: 5px;
            display: block;
        }


            contentsection.Schedule privatecourseoption button {
                margin-top: 10px;
            }

submenu {
    position: absolute;
    left: -100px;
    top: 49px;
    min-width: 700px;
    background-color: #fff;
    padding: 5px 10px 10px 10px;
    box-shadow: 1px 2px 2px 3px rgb(204, 204, 204);
    pointer-events: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    opacity: 0;
    pointer-events: none;
    border: 1px solid rgba(0, 102, 153,.5);
    transform: translateY(-10px);
    transition: all 0.3s;
}


    submenu firstoption a {
        display: inline-block;
        box-shadow: 1px 2px 2px 0px rgba(204, 204,204, 0.5);
        text-align: center;
        margin: 5px;
        max-width: 100px;
        padding: 0 5px;
        width: auto;
    }

    submenu.SmallerMenu {
        min-width: 200px;
        left: -50px;
        text-align: center;
    }

        submenu.SmallerMenu firstoption a {
            width: 100% !important;
            max-width: unset;
            box-shadow: none;
            border-bottom: dotted 0.5px #cfcfcf;
        }

    submenu firstoption a:hover {
        text-decoration: underline;
    }

.HeaderCourses {
    padding-right: 20px !important;
}

    .HeaderCourses:hover {
        height: 53px;
        border-bottom: none !important;
    }

        .HeaderCourses:hover submenu {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
            pointer-events: all !important;
        }

submenu
headeritems mainlist item:last-of-type:after {
    display: none !important;
}

submenu categoryheading {
    font-size: 1.1em !important;
    display: block;
    text-align: left;
    font-weight: bolder;
    clear: both;
    width: 100% !important;
    max-height: 35px;
    overflow: hidden;
    font-weight: bold;
    margin: 5px 0 2px -5px;
    background-color: #fcfcfc;
    border-color: #cfcfcf;
    border-style: solid;
    border-width: 0.5px 0 0.5px 0;
    padding: 0 0 0 5px;
}

submenu parentcategory {
    width: 49%;
    float: left;
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px 10px 10px;
}

    submenu parentcategory:nth-of-type(1) {
        border-right: solid 1px #ccc;
    }

    submenu parentcategory > a {
        padding: 3px 8px 5px 0px !important;
        margin: 0px !important;
        width: 33% !important;
        min-width: 80px;
        height: auto !important;
        line-height: 1.3em;
        text-align: left;
        font-size: 0.9em;
    }

droparrow {
    border: solid #999;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 2px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    position: absolute;
    top: 16px;
    right: 7px;
}

submenu parentcategory firsttitle {
    font-size: 1.4em !important;
    line-height: 1.3em !important;
    text-align: left !important;
    width: 100%;
    min-width: 200px;
}

topnavbar {
    position: absolute;
    height: 20px;
    width: 100%;
    background-color: #a6a6a6;
    top: 0px;
    left: 0px;
    font-size: 0.7em;
    line-height: 20px;
    z-index: 80;
}

    topnavbar widthrestraint {
        max-width: 1050px;
        display: block;
        margin: 0 auto;
    }

    topnavbar left {
        float: left;
    }

    topnavbar right {
        float: right;
        display: flex;
    }

        topnavbar right a {
            color: white !important;
            width: auto;
            display: block;
            max-height: 20px;
            margin: 0 15px 0 0;
        }

            topnavbar right a:hover {
                text-decoration: underline;
            }

.SimpleList a {
    width: 100%;
    clear: both;
    display: block;
    box-sizing: border-box;
    transition: all .2s linear;
    border: solid 1.5px #e8eef8;
    margin: 5px 0;
    padding: 5px 15px;
    border-radius: 5px;
    box-shadow: 0px 1px 5px -2px rgb(224 224 235);
}

    .SimpleList a:hover {
        background-color: #e8eef8;
    }

.tblCourseDates {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
}



.BookBtn button {
    border: none;
    box-shadow: none;
    margin: 5px 5px 0 5px;
    background-color: #fff;
    color: #006699 !important;
    padding: 4px 10px !important;
    transition: all linear .2s;
    cursor: pointer;
    font-size: 0.85em;
    float: right;
    line-height: 1.2em;
    width: 90%;
}

.CourseInstanceLocation, .VirtualExp {
    background-color: transparent;
    cursor: pointer;
    text-align: left;
    display: block;
    padding: 10px 5px 5px 20px;
    position: relative;
    clear: both;
    font-size: 0.8em;
    color: #5e94ba !important;
    border: none;
    margin: 10px 5px 0 5px;
    line-height: 1.2em;
    min-height: 40px;
}

.PrivateCourse .BookBtn button {
    height: 45px;
    border: solid 1px #c2c2f0 !important;
    color: #5b5bd7 !important;
    width: 80%;
    margin: 10px auto !important;
    float: none;
    display: block;
}

.pnlCourseRightMenu .PrivateCourse .BookBtn button {
    margin: 34px auto 15px auto !important;
}

.PrivateCourse .BookBtn button:hover {
    background-color: #5b5bd7 !important;
    color: #fff !important;
}

.VirtualExp {
    padding-left: 20px !important;
}

    .CourseInstanceLocation:before, .VirtualExp:before {
        content: "";
        position: absolute;
        left: 3px;
        top: 15px;
        float: left;
        width: 13px;
        height: 20px;
        background: url(/lib/SVGs/IconsSVG.svg) transparent no-repeat;
        transition: all linear .1s;
        background-color: transparent !important;
        background-size: 280px;
        background-position: -33px -29px;
        opacity: 0.5;
    }

    .VirtualExp:before {
        background-size: 240px;
        width: 20px;
        left: 3px;
        top: 10px;
        background-position: -46px -22px;
    }

    .CourseInstanceLocation:hover, .VirtualExp:hover {
        text-decoration: underline;
    }

.BookBtn button.btnBook {
    border: solid 1px #3fa9f5;
}

button.btnBook:hover {
    background-color: #0b84da !important;
    border: solid 1px #0b84da;
    color: #fff !important;
}

.DateDescr {
    width: 100%;
    padding: 5px 5px 0 5px !important;
    border-radius: 5px 0 0 5px;
}

.DateInstanceButtons {
    width: 100%;
}



.ScheduledDatePrice {
    position: unset !important;
    font-size: 1em !important;
    height: 25px;
    padding: 0px !important;
    text-align: center !important;
    width: 100%;
    margin: 5px 0 2px 0;
    font-size: 1.2em !important;
    font-weight: lighter;
}

.ScheduledDateVenue, .ScheduledDateDates {
    width: 100%;
    text-align: center;
    padding: 5px;
}


.ScheduledDateDates {
    font-size: 1.2em !important;
    font-weight: lighter;
    line-height: 1.5em;
    padding: 8px 5px 2px 5px;
    margin-bottom: 5px;
}

summary {
    list-style: none; /* Remove default arrow in Firefox */
    cursor: pointer;
}

    /* Remove default marker in Chrome/Safari */
    summary::-webkit-details-marker {
        display: none;
    }

    summary::before {
        content: "+"; /* Right-pointing arrow */
        display: inline-block;
        margin-right: 0.5em;
        transition: transform 0.2s ease;
    }

details[open] summary::before {
    content: "-" !important;
}

.detail p {
    margin: 5px 0px;
    font-size: 1em;
}

#VirtualCourseExplanationPopup {
    max-width: 700px;
    padding: 50px 50px 100% 50px;
    top: 10px;
    margin: 50px auto 0 auto;
    left: calc(50% - 350px);
    font-size: 0.85em;
    line-height: 1.7em;
}

@media all and (max-width:800px) {
    #VirtualCourseExplanationPopup {
        width: 95%;
        left: 2.5% !important;
    }
}

#VirtualCourseExplanationPopup video {
    display: block;
    width: 100% !important;
    max-width: 400px;
    border: solid 1px #ccc;
}

.VTrainingPage h1 {
    width: 100%;
    margin-top: 0px !important;
    padding-top: 0px !important;
}

.Private.ContentSection .DateInstance {
    max-width: 240px;
    min-width: 240px;
}

.AttendenceType {
    min-height: 120px;
}

fullpagecontact {
    display: block;
    max-width: 800px;
    padding: 30px 0 50px 0
}

.BackButton {
    cursor: pointer;
    background-color: transparent;
    border: none;
    position: relative;
    padding-left: 22px;
    color: #666;
    font-size: 0.7em;
    margin-bottom: 10px;
}

    .BackButton.End {
        margin-top: 30px;
        font-size: 0.8em;
    }

    .BackButton:hover {
        text-decoration: underline;
    }

    .BackButton:before {
        opacity: 0.6;
        content: " ";
        display: block;
        height: 10px;
        width: 18px;
        position: absolute;
        left: 0px;
        top: 5px;
        background: url(/lib/SVGs/IconsSVG.svg) transparent no-repeat;
        transition: all linear .1s;
        background-color: transparent !important;
        background-size: 420px;
        background-position: -112px -38px;
    }

successpage {
    padding: 50px 0 0 0;
    min-height: 500px;
    display: block;
}