/**************************************************************************************************
*	INDEX
**************************************************************************************************/
/*
    1. BROWSER RESET
        1.1 NO-JAVASCIPT MESSAGE
    2. STYLE GUIDE
        2.1 GLOBAL
        2.2 BUTTONS
        2.3 FORMS
        2.4 BREADCRUMBS
        2.5 CUSTOMISED ICONS
        2.6 TABLES
        2.7 MESSAGES
        2.8 QUICKBOXES / LIGHTBOXES
        2.9 ACCORDIONS
        2.10 TABS
        2.11 FILTER BUTTONS
        2.12 ANGULAR
        2.13 MODAL POPUPS
        2.14 DOB DROP DOWNS
    3. MAIN SITE STRUCTURE
        3.1 HEADER
        3.2 MAIN NAV
        3.3 SPOTLIGHTS
        3.4 FOOTER
    4. LOGIN
        4.1 LOGIN HEADER
        4.2 LOGIN FORM
        4.3 LOGIN PROBLEMS
    5. HOME PAGE
        5.1 HOME PAGE SHARED
        5.2 HERO CAROUSEL
        5.3 FOCUS ALERTS
        5.4 SERVICE NEWS
        5.5 STYLES FOR WIDGET ORDERING PERMUTATIONS
    6. NEWS
        6.1 NEWS ARCHIVE
        6.2 NEWS ARTICLE PAGE
    7. CATALOGUE LISTING
        7.1 CATALOGUE SEARCH
        7.2 CATALOGUE LISTING
        7.3 BROWSE MARKETS
    8. PRODUCT PAGE
        8.1 PRODUCT INFO
        8.2 RULES OF COMBINATION
    9. ORDER PAGE
        9.1 SEARCH FORM
        9.2 CREATE CANDIDATE
        9.3 UNNAMED REGISTRATION
        9.4 MINI BASKET
        9.5 VIEW / EDIT CANDIDATE LIGHTBOX
        9.6 CREATE COHORT
        9.7 EXISTING CANDIDATE ADD ERROR LIGHTBOX
        9.8 ELIGIBILITY BOOKING
    10. BASKET
        10.1 PRODUCT LIST
        10.2 BASKET FINANCIALS
        10.3 BASKET OPTIONS
        10.4 BASKET DELIVERY
        10.5 BASKET PAYMENT
        10.6 CONFIRMATION PAGE
        10.7 CONFIGURE CERTIFICATES
    11. FINANCIAL
        11.1 INVOICES
        11.2 FINANCIAL SEARCH RESULTS
        11.3 INVOICE & CREDIT NOTE PAGES
        11.4 STATEMENTS
        11.5 FINANCIAL HELP
    12. ACCOUNT PROFILE SETTINGS
        12.1 ACCOUNT PROFILE LIGHTBOX TABS
        12.2 ACCOUNT PROFILE - PROFILE SETTINGS
        12.3 ACCOUNT PROFILE - SECURITY SETTINGS
        12.4 ACCOUNT PROFILE - HELP DETAILS
    13. CENTRE SETTINGS
        13.1 CENTRE DETAILS
        13.2 EDIT ADDRESS LIGHTBOX
        13.3 CENTRE PREFERENCES
        13.4 MANAGE USERS
    14. MAINTENANCE REPORTS
    15. ELIGIBILITY SEARCH
    16. EVIDENCE MANAGEMENT SEARCH
    17. EVIDENCE MANAGEMENT DETAILS
    18. ALTERNATIVE RESULTS SEARCH
    19. WEB IC PAGE
*/


/**************************************************************************************************
*	1. BROWSER RESET
**************************************************************************************************/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strong, sub, sup, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
b,
strong {
    font-weight: bold;
    font-weight: 700;
}
i,
em {
    font-style: italic;
}


/* 1.1 NO-JAVASCIPT MESSAGE
------------------------------------------*/
.noScript {
    overflow: hidden;
    padding-top: 32px;
    background: #2e94b6;
    color: #fff;
}
.noScript a {
    color: #000;
}


/**************************************************************************************************
* 	2. STYLE GUIDE - Contains frequent and re-usable styles found throughout the project
**************************************************************************************************/
*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html {
    font-weight: normal;
    font: normal 62.5%/1.857em "Avenir Light", Verdana, sans-serif;
}
body {
    font-size: 1.3em; /* 14px */
    color: #363636;
}

.wrapper {
	max-width: 950px;
    overflow: hidden;
	margin: 0 auto;
}
.wrapper_oldNew {
    max-width: 1300px;
    overflow: initial;
    margin: 0 auto;
}
.wrapper.centred {
    text-align: center;
}
article, aside, main, nav, section, ul {
    margin-bottom: 32px;
}
ul,ol,p {
    margin-bottom: 20px;
}
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}
#skipToContent {
    display: none;
}
.left {
	float: left;
}
.right {
	float: right;
}
.breakword {
    word-wrap:break-word;
}

/* 2.1 GLOBAL
------------------------------------------*/
/*  FONTS
------------------------------------------*/
@font-face {
  font-family: "Avenir Light";
  src: url("/Styles/fonts/Avenir/AvenirLTW01_35Light1475496.eot?#iefix");
  src: url("/Styles/fonts/Avenir/AvenirLTW01_35Light1475496.eot?#iefix") format("eot"), url("/Styles/fonts/Avenir/AvenirLTW01_35Light1475496.woff2") format("woff2"), url("/Styles/fonts/Avenir/AvenirLTW01_35Light1475496.woff") format("woff"), url("/Styles/fonts/Avenir/AvenirLTW01_35Light1475496.ttf") format("truetype"), url("/Styles/fonts/Avenir/AvenirLTW01_35Light1475496.svg#AvenirLTW01_35Light1475496") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: "Avenir Medium";
  src: url("/Styles/fonts/Avenir/AvenirLTW01_65Medium1475532.eot?#iefix");
  src: url("/Styles/fonts/Avenir/AvenirLTW01_65Medium1475532.eot?#iefix") format("eot"), url("/Styles/fonts/Avenir/AvenirLTW01_65Medium1475532.woff2") format("woff2"), url("/Styles/fonts/Avenir/AvenirLTW01_65Medium1475532.woff") format("woff"), url("/Styles/fonts/Avenir/AvenirLTW01_65Medium1475532.ttf") format("truetype"), url("/Styles/fonts/Avenir/AvenirLTW01_65Medium1475532.svg#AvenirLTW01_65Medium1475532") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: "Avenir Heavy";
  src: url("/Styles/fonts/Avenir/AvenirLTW01_85Heavy1475544.eot?#iefix");
  src: url("/Styles/fonts/Avenir/AvenirLTW01_85Heavy1475544.eot?#iefix") format("eot"), url("/Styles/fonts/Avenir/AvenirLTW01_85Heavy1475544.woff2") format("woff2"), url("/Styles/fonts/Avenir/AvenirLTW01_85Heavy1475544.woff") format("woff"), url("/Styles/fonts/Avenir/AvenirLTW01_85Heavy1475544.ttf") format("truetype"), url("/Styles/fonts/Avenir/AvenirLTW01_85Heavy1475544.svg#AvenirLTW01_85Heavy1475544") format("svg");
  font-weight: normal;
  font-style: normal; }


a {
    color: #2e94b6;
    text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
img {
	max-width: 100%;
    height: auto;
    vertical-align: bottom;
}
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 20px;
    line-height: 1.3;
    font-family: "Avenir Heavy", sans-serif;
    color: #000;
}
h1 {
    font-size: 2.143em; /* 30px */
    font-weight: bold;
    font-weight: 700;
}
h2 {
    font-size: 1.57em; /* 22px */
    font-weight: bold;
    font-weight: 600;
    line-height: 1.2;
}
h3 {
    font-size: 1.429em; /* 20px */
}
h3.sectionTitle {
    position: relative;
    clear: both;
    padding: 0 0 12px 30px;
    font-size: 1em; /* 14px */
    border-bottom: 1px solid #e6e6e6;
}
h3.sectionTitle:before {
    content: "";
    position: absolute;
    top: 1px;
    left: 10px;
    width: 6px;
    height: 11px;
    background: url("/Styles/img/wg-sprite.png") no-repeat -63px 0;
}
h3.sectionTitle.open:before {
    top: 4px;
    width: 11px;
    height: 6px;
    background-position: 0 0;
}
h4 {
    font-size: 1.143em;/* 16px */
    font-weight: bold;
    font-weight: 700;
}
h4.light {
    padding-bottom: 12px;
    font-weight: normal;
    font-weight: 600;
    border-bottom: 1px solid #e6e6e6;
}
ul,
ol {
    margin-left: 2em;
}
ul {
    list-style: disc outside;
}
ol {
    list-style:decimal;
}
ul ul {
    list-style-type: circle;
}
ol ol {
    list-style: lower-roman;
}
ul ol,
ul ul,
ol ol,
ol ul {
    margin-bottom: 0;
}
li {
    margin-top: .5em;
}
strong {
    font-weight: bold;
}
em {
    font-style: italic;
}
.gradient-bg {
    background: #e0e0e0; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #e0e0e0 94%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(94%,#e0e0e0)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%,#e0e0e0 94%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%,#e0e0e0 94%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%,#e0e0e0 94%); /* IE10+ */
    background: linear-gradient(to bottom, #ffffff 0%,#e0e0e0 94%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
}
.grey-bg {
    padding: 1em;
    overflow: hidden;
    background: #f0f0f0;
}
.grey-bg p {
    margin: 0 0 1em;
}
.red-text {
    color: #e30613;
}

/* 2.2 BUTTONS
------------------------------------------*/
.btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1.143em; /* 16px */
    font-weight: bold;
    font-weight: 700;
    background: #2e94b6;
    color: #fff;
    border: 0;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.btn-large {
    padding: 24px 58px;
}
.btn-small {
    padding: 6px 7px;
    font-size: 0.857em; /* 12px */
    line-height: 1.285; /* 18px */
}
.btn:hover {
    text-decoration: underline;
}
.btn:active {
    background: #2a637c;
}
.btn-red {
    background: #e30613;
    color: #fff;
}
.btn-red:active {
    background: #9d272a;
}
.btn-grey {
    background: #d0d0d0;
}
.btn-grey:active {
    background: #828283;
    color: #fff;
}
.btn-green {
    background: #009640;
}
.btn-green:active {
    background: #207243;
    color: #fff;
}
.btn-orange {
    background: #ffa500;
}
.btn-orange:active {
    background: #E59400;
    color: #fff;
}
.btn-white {
    padding: 5px 7px;
    background: #fff;
    border: 2px solid #e6e6e6;
}
.btn-white:active {
    background: #d0d0ce;
}
.btn-grey,
.btn-white {
    color: #363636;
}
.btn:disabled,
.btn:disabled:hover {
    background: #CCC;
    color: #666;
    cursor: auto;
    text-decoration: none;
}

@media all and (-ms-high-contrast:none) {
    input:disabled {
        opacity: 0.4;
    }
}

/* Inline Button with Text Input */
.field input.btn-inline,
.field button.btn-inline {
    float: left;
    margin: 0;
}
.field input.btn-inline {
    width: 182px;
}
.field .btn.btn-inline {
    width: 60px;
    height: 32px;
    padding: 0;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
}

/* 2.3 FORMS
------------------------------------------*/
input,
select,
textarea {
    margin: 0;
    padding: 2px 5px;
    border: 1px solid #D0D0D0;
}
input,
select,
textarea,
button {
    font-weight: normal;
    font: normal 600 1em "Avenir Medium", sans-serif;
    color: #363636;
}
.field,
.field-large {
    float: left;
    margin-bottom: 30px;
    position: relative;
}
.field {
    width: 50%;
}
.field.focus {
    z-index: 2;
}
.field-large,
.field-inlineBtn {
    width: 100%;
}
.field:nth-of-type(2n+1) {
    clear: left;
}

.field.field-disabled {
    opacity: 0.5;
}
.field label {
    width: 130px;
    float: left;
    margin-top: 5px;
    padding-right: 10px;
    text-align: right;
    word-wrap: break-word;
}
.field .mandatory,
.mandatory {
    margin-left: 3px;
    color: #e30613;
}
.field input[type=text],
.field input[type=email],
.field input[type=password],
.field input[type=tel],
.field input[type=search],
.field input[type=file],
.field select {
    width: 242px;
    height: 32px;
}
.field-large input[type=text],
.field-large input[type=email],
.field-large input[type=password],
.field-large input[type=tel],
.field-large input[type=search] {
    width: 610px;
}
.fieldIndex {
    position: relative;
    /*z-index: 100;*/
}
.field input[type=file] {
    height: auto;
    border: 0;
}
.field select option {
    line-height: 32px;
}
.field-check input,
.field-radio input {
    width: auto;
    height: auto;
    float:left;
    margin: 3px 10px 0 0;
    padding: 0;
    border: 0;
}
.field-check label,
.field-radio label {
    width: auto;
    margin: 0;
    padding: 0;
}
.field-check label a,
.field-radio label a {
    margin-left: 20px;
}
textarea {
    width: 722px;
    height: 100px;
    padding: 5px;
}
.evidenceManagement__assessmentCode {
    Width: 52%;
    Height:0%;
    overflow:auto;
}
.evidenceManagement__qualificationNumber {
    Width: 52%;
    Height: 0%;
    overflow: auto;
}
    input[type=text]:focus,
    input[type=email]:focus,
    input[type=password]:focus,
    input[type=tel]:focus,
    input[type=search]:focus,
    textarea:focus,
    .select-wrapper.focus {
        border: 1px solid #2e94b6;
    }
.a11yLabel {
    position: absolute;
    top:0;
    left:-9999px;
}

/* Custom drop down */
.select-wrapper {
    position: relative;
	display: inline-block;
	border: 1px solid #d0d0d0;
	background: #fff url("/Styles/img/wg-sprite.png") no-repeat 210px -40px;
	cursor: pointer;
    vertical-align: middle;
}
.select-wrapper,
.select-wrapper select {
	width: 242px;
    max-width: 100%;
}
.select-wrapper .holder {
	display: block;
	margin: 0 35px 0 5px;
	white-space: nowrap;            
	overflow: hidden;
	cursor: pointer;
	position: relative;
	z-index: 1;
    height: 32px;
    line-height: 32px;
}
.select-wrapper select {
    height: 32px;
	margin: 0;
    padding: 4px 9px;
	position: absolute;
	z-index: 2;            
	cursor: pointer;
	outline: none;
    border: 0;
	opacity: 0;
	/* CSS for older browsers */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
}
.select-wrapper option {
    padding: 0.5em;
    font-size: 1em;
}
select.unstyled {
    font-size: 12px;
}

/* Form error states */
.error input[type=text],
.error input[type=email],
.error input[type=password],
.error input[type=file],
.error input[type=tel],
.error select,
.error .select-wrapper,
.error textarea,
.errorMessage {
    color: #e02d32;
    background-color: #fbdee2;
    border-color: #e68066;    
}
.error .holder,
.error input[type=text],
.error input[type=email],
.error input[type=password],
.error input[type=tel],
span.error {
    color: #e02d32;
}
.error span.error {
    display: block;
    clear: left;
    margin-left: 130px;
    font-size: 0.857em; /* 12px */
    color: #e02d32;
    font-weight: bold;
    font-weight: 700;
}
.field-check.error span.error,
.field-radio.error span.error {
    margin-left: 0;
}
.error input[type=file] {
    border: 1px solid;
}
.errorpage #content {
    padding-bottom: 50px;
}

/* Tooltips */
.tooltip {
    display: none;
    position: absolute;
    top: 0;
    z-index: 10;
    width: 200px;
    margin-left: 10px;
    padding: 6px;
    background: #d9f0fc;
    border: 1px solid #8ab4cd;
    font-size: 0.857em; /* 12px */
    font-weight: bold;
    font-weight: 600;
    text-align: left;
}
.tooltip:before {
    content: "";
    position: absolute;
    left: -7px;
    top: 10px;
    width: 8px;
    height: 9px;
    margin: auto;
    background: url("/Styles/img/wg-sprite.png") no-repeat 0 -213px;
}
.tooltip i {
    display: block;
    width: 10px;
    height: 10px;
    margin-bottom: 3px;
    background: url("/Styles/img/wg-sprite.png") no-repeat 0 -231px;
}

/* Field specific tooltips */
.candidateDetails .tooltip {
    top: 45px;
    left: 130px;
}
.enrNoSearch .tooltip {
    top: 6px;
}
.paymentRefNo .tooltip {
    top: 28px;
}
.accountProfileLightbox .newEmail,
.accountProfileLightbox .confirmEmail {
    height: 40px;
}
.newEmail .tooltip,
.confirmEmail .tooltip,
.centreAddress2 .tooltip,
.centreCountyRegion .tooltip,
.centreCountry .tooltip {
    top: auto;
    bottom: 50px;
    left: 120px;
}
.centreAddress2 .tooltip {
    bottom: 40px;
}
.centreAddress2 .tooltip:before {
    top: auto;
    bottom: -9px;
}
.enrNoSearch .tooltip {
    top: 50px;
    bottom: auto;
    left: 335px;
}
.candidateDetails .tooltip:before,
.newEmail .tooltip:before,
.confirmEmail .tooltip:before,
.centreAddress2 .tooltip:before,
.centreCountyRegion .tooltip:before,
.centreCountry .tooltip:before {
    top: -9px;
    left: 10px;
    bottom: auto;
    background-position: -42px -214px;
}
.candidateDetails .tooltip:before {
    background-position: -15px -213px;
}
.centrePrefs .tooltip {
    top: 33px;
    left: 240px;
}
.certificateDispatchFrequency .tooltip {
    top: 51px;
}
.manageUsersLightbox .select-wrapper .tooltip {
    left: 370px;
}
.refNoInput .tooltip {
    top: auto;
    bottom: 40px;
    left: 140px;
}
.refNoInput .tooltip:before,
.qualNoInput .tooltip:before,
.addressSpecial .tooltip:before {
    top: auto;
    left: 10px;
    bottom: -9px;
    background-position: -42px -214px;
}
.qualNoInput .tooltip {
    top: 40px;
    left: 140px;
}
.qualNoInput .tooltip:before,
.userProfile .tooltip:before,
.eCerts .tooltip:before,
.smartScreen .tooltip:before,
.enrNoSearch .tooltip:before {
    top: -9px;
    left: 10px;
    bottom: auto;
    width: 11px;
    background-position: -14px -213px;
}
.addressSpecial .tooltip {
    top: -65px;
    bottom: auto;
    right: 0;
}
.addressSpecial.specialAttention .tooltip {
    top: -30px;
    bottom: auto;
    right: 0;
}
.addressSpecial .tooltip:before {
    width: 11px;
}
.userProfile .tooltip {
    left: 16px;
    top: 45px;
}
.manageUsersLightbox .eCerts .tooltip,
.manageUsersLightbox .smartScreen .tooltip {
    left: 16px;
    top: 25px;
    width: 200px;
}



/* 2.4 BREADCRUMBS
------------------------------------------*/
.breadcrumbs {
    position: relative;
    float: left;
    list-style: none;
    margin: 0 0 32px;
    border: 1px solid #e6e6e6;
}
.breadcrumbs li {
    position: relative;
    float: left;
    margin: 0;
    padding: 0 24px 0 12px;
}
.breadcrumbs li:last-child {
    padding-right: 12px;
}
.breadcrumbs:after,
.breadcrumbs li + li:after {
    content: url("/Styles/img/breadcrumb-arrow.png");
    display: block;
    position: absolute;
    right: -15px;
    top: 0;
    width: 15px;
    height: 30px;
}
.breadcrumbs li + li:after {
    right: auto;
    left: -15px;
}
.breadcrumbs a {
    display: block;
    color: #000;
    line-height: 30px;
    font-weight: normal;
    font-weight: 400;
}
.breadcrumbs .active {
    font-weight: bold;
    font-weight: 700;
}

/* 2.5 CUSTOMISED ICONS (FontAwesome)
------------------------------------------*/
.fa-star {
    color: #ffcc00;
}
.fa-check {
    color: #646363;
}

/* 2.6 TABLES
------------------------------------------*/
table {
    width: 100%;
}
table thead {
    font-weight: bold;
    font-weight: 700;
    color: #fff;
}
table td {
    padding: 1em;
}
table tr td {
    background: #fff;
}

table tr th,
table thead tr td {
    background: #646363;
    text-align: left;
}
table tr th {
    font-weight: bold;
    font-weight: 700;
    color: #fff;
    padding: 1em;
}
table tr:nth-of-type(2n) td {
    background: #e9e9e9;
}

/* 2.7 MESSAGES
------------------------------------------*/
.messages {
    margin-bottom: 18px;
    background: #000;
    color: #fff;
}
.messages > .wrapper {
    min-height: 75px;
    padding: 16px 0 16px 108px;
    background: url("/Styles/img/wg-sprite.png") no-repeat -179px -127px;
}
.messages ul,
.messages li {
    list-style: none;
    margin: 0;
}
.messages li {
    position: relative;
    padding-left: 20px;
}
.messages li:before {
    content: "";
    background: url("/Styles/img/wg-sprite.png") no-repeat 0 -17px;
    position: absolute;
    top: 4px;
    left: 0;
    width: 7px;
    height: 10px;
}
.messages li + li {
    margin-top: 10px;
}
.messages li > * {
    margin: 0;
}
.loading {
    color: #363636;
}
h1.loading {
    width: 200px;
}
.loading span {
  float: left;
}
.one {
    -webkit-animation: dotOne 2s infinite;
    -moz-animation: dotOne 2s infinite;
    animation: dotOne 2s infinite;
}
.two {
    -webkit-animation: dotTwo 2s infinite;
    -moz-animation: dotTwo 2s infinite;
    animation: dotTwo 2s infinite;
}
.three {
    -webkit-animation: dotThree 2s infinite;
    -moz-animation: dotThree 2s infinite;
    animation: dotThree 2s infinite;
}
@-webkit-keyframes dotOne {
    0%, 24% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes dotTwo {
    0%, 49% {
        opacity: 0;
    }    
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes dotThree {
    0%, 74% {
        opacity: 0;
    }    
    75% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes dotOne {
    0%, 24% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes dotTwo {
    0%, 49% {
        opacity: 0;
    }    
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes dotThree {
    0%, 74% {
        opacity: 0;
    }    
    75% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
@keyframes dotOne {
    0%, 24% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
@keyframes dotTwo {
    0%, 49% {
        opacity: 0;
    }    
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
@keyframes dotThree {
    0%, 74% {
        opacity: 0;
    }    
    75% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

/* 2.8 QUICKBOXES / LIGHTBOXES
------------------------------------------*/
a.lightbox {
    padding: 8px 20px;
    border-radius: 4px;
    margin: 10px 10px 0 0;
    background-color: #D1D1D1;
    color: #231f20;
    font-size: 1.4em;
    display: inline-block;
}
.lightboxWrap {
    position: absolute;
	top: 40px;
	left: 0;
    width: 100%;
    z-index: 40;
    pointer-events: none;
}
.background {
    background: #231f20;
    position: fixed;
    top: 0;
	left: 0;
	height: 100%;
    width: 100%;
	opacity: 0.75;
 	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75); /* Required for IE8 and below only */
    z-index: 10;
}
.lightboxContent {
	background: #fff;
	padding: 40px;
	margin: 0 auto;
    width: 65%;
    position: relative;
    pointer-events: all;
}
.lightboxContent fieldset {
    width: 100%;
    float: left;
    overflow: visible;
}
.lightboxCentred {
    text-align: center;
}
.lightboxCentred h4 {
    width: 100% !important;
    float: none !important;
}
.lightboxContent h2 {
    margin-bottom: 1em;
}
a.closeLightbox span {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #000;
    font-size: 2em;
    font-weight: bold;
}
.lightboxContent {
    display: none;
}
.lightboxWrap .lightboxContent {
    display: block;
}
.lightboxContent .close-cross {
    color: #999;
    font-size: 2em;
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 10;
}
.lightboxContent .close-cross:hover {
    color: #000;
    text-decoration: none;
}

/* 2.9 ACCORDIONS
------------------------------------------*/
.accordion-wrapper {
    border: 1px solid #e0e0e0;
}
h3.accordion {
    position: relative;
    margin: 0;
    padding-left: 46px;
    font-size: 1em; /* 14px */
    line-height: 2.857em; /* 40px */
    background: #e0e0e0; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #e0e0e0 94%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(94%,#e0e0e0)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#e0e0e0 94%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#e0e0e0 94%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#e0e0e0 94%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffffff 0%,#e0e0e0 94%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
    cursor: pointer;
}
h3.accordion i {
    display: block;
    position: absolute;
    top: 15px;
    left: 20px;
    width: 6px;
    height: 11px;
    background: url("/Styles/img/wg-sprite.png") no-repeat -63px 0;
}
h3.accordion.open i {
    top: 18px;
    left: 17px;
    width: 11px;
    height: 6px;
    background-position: 0 0;
}
.accordion-content {
    padding: 12px 8px;
    border-bottom: 1px solid #e0e0e0;
}
.accordion-content .closeOverlay {
    position: absolute;
    top: 30px;
    right: 30px;
}

/* 2.10 TABS
------------------------------------------*/
ul.tabs,
.catalogueTabs,
.financialTabs {
    list-style: none;
    float: left;
    margin: 0;
    padding: 0;
}
ul.tabs li,
.catalogueTabs li,
.financialTabs li {
    display: inline-block;
    float: left;
    margin: 0 6px 0 0;
}
ul.tabs li > span,
ul.catalogueTabs li > span,
.financialTabs li > span {
    float: left;
}
ul.tabs a,
.catalogueTabs a,
.financialTabs a {
    display: block;
    padding: 0 15px;
    color: #000;
    border: 1px solid #e0e0e0;
    border-bottom: 0;
    font-size: 1.143em; /* 16px */
    line-height: 2.75em; /* 44px */
    text-transform: uppercase;
}
ul.tabs .selectedTab a,
.catalogueTabs .selectedTab a,
.financialTabs .selectedTab a {
    background: #e9e9e9;
}
.tabContent,
.catalogueTabContent,
.financialTabContent,
.frequentlyOrderedProducts {
    clear: both;
    margin-bottom: 0;
    padding: 12px 8px;
    border: 1px solid #e0e0e0;
    border-top: 6px solid #e9e9e9;
}

/* 2.11 FILTER BUTTONS
------------------------------------------*/
.filterButtons {
    overflow: hidden;
    margin-bottom: 20px;
}
.filterButtons .btn,
.filterButtons a {
    height: 34px;
    float: left;
    margin: 0 7px 10px 0;
    padding: 0 11px;
    font-size: 0.88em; /* 13px */
    font-weight: normal;
    font-weight: 600;
    line-height: 2.6em; /* 32px */
    cursor: pointer;
}
.filterButtons .btn-white {
    line-height: 2.3em; /* 29px */
}


/* 2.12 ANGULAR
------------------------------------------*/
.ng-cloak,
.x-ng-cloak,
.ng-hide {
    display: none !important;
}
.ng-animate-block-transitions {
    transition: 0s all!important;
    -webkit-transition: 0s all!important;
}


/* 2.13 MODAL POPUPS
------------------------------------------*/
.modalBackground {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000;
    opacity: .4;
	/* CSS for older browsers */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
	filter: alpha(opacity=40);
}
.modalPopup {
    position: fixed;
    top: 30%;
    left: 0;
    right: 0;
    width: 40%;
    max-width: 500px;
    margin: auto;
    background: #fff;
    padding: 20px;
    z-index: 99999;
}
.modalButtons {
    text-align: right;
}
.modalPopup .btn {
    margin-left: 1em;
}


/* 2.14 DOB DROP DOWNS
------------------------------------------*/
.dobDrops {
    width: 242px;
    float: left;
}
.dobDrops > div {
    float: left;
}
.dobDrops .holder {
    font-size: 0.928em; /* 13px */
}
.dobDrops > div + div {
    margin-left: 4px;
}
.dobDrops .select-wrapper,
.dobDrops select {
    width: 73px;
}
.startDateMonth .select-wrapper,
.startDateMonth select,
.endDateMonth .select-wrapper,
.endDateMonth select,
.dobMonth .select-wrapper,
.dobMonth select {
    width: 87px;
}
.dobDrops .select-wrapper {
    background-position: 41px -40px;
}
.startDateMonth .select-wrapper,
.endDateMonth .select-wrapper,
.dobMonth .select-wrapper {
    background-position: 53px -40px;
}



/**************************************************************************************************
* 	3. MAIN SITE STRUCTURE
**************************************************************************************************/

/* 3.1 HEADER
------------------------------------------*/
#siteHeader {
    margin: 20px 0 14px;
}
.logos {
    float: left;
    margin-top: 20px;
}
.logos a:hover {
    text-decoration: none;
}
.logos img {
    float: left;
    margin-right: 20px;
}
.walledGardenLogo {
    padding-top: 19px;
    padding-left: 20px;
    border-left: 1px solid #e6e6e6;
}
.profileCard {
    float: right;
    width: 270px;
    float: right;
}
.profileCardInner {
    font-size: 0.857em; /* 12px */
}
.accountSettings {
    float: right;
    color: #646363;
    font-size: 2.143em; /* 30px */
}
.accountSettings span {
    position: absolute;
    left: 0;
    text-indent: -9999px;
}
.accountSettings:hover {
    color: #333;
}
.profileCard h3 {
    margin-bottom: 0;
    font-size: 1.416em; /* 17px */
    font-weight: normal;
    font-weight: 400;
    line-height: 1.2;
}
.profileCard dl {
    overflow: hidden;
}
.profileCard dt,
.profileCard dd {
    float: left;
    font-weight: 300;
}
.profileCard dt {
    clear: left;
    margin-right: 5px;
}
.profileCard dt.centre {
    width: 40px;
}
.profileCard dd.centre {
    width: 195px;
}
dt.profileCustNo {

}
dd.profileCustNo {
    width: 170px;
}
.profileCard dt,
.profileCard dt.centre,
.profileCard dd {
    color: #000;
}

/* 3.2 MAIN NAV
------------------------------------------*/
#mainNav {
    padding-bottom: 54px;
    background: #e9e9e9;
}
.home #mainNav,
.contentpage #mainNav {
    margin: 0 0 18px;
    padding: 0;
    border-bottom: 1px solid #e6e6e6;
}
.primaryNav {
    background: #fff;
    border-top: 1px solid #e6e6e6;
    font-size: 1.071em; /* 15px */
    font-weight: bold;
    font-weight: 700;
}
.primaryNav > .wrapper {
    overflow: visible;
    position: relative;
    border-left: 1px solid #e6e6e6;
}
.primaryNav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.primaryNav li {
    max-width: 112px;
    display:inline-table;
    float: left;
    margin: 0;
    border-right: 1px solid #e6e6e6;
}
.primaryNav a {
    height: 66px;
    display:table-cell;
    position: relative;
    vertical-align:middle;
    padding: 0 24px;
    color: #000;
    text-align: center;
    text-decoration: none;
}
.primaryNav a:hover {
    text-decoration: underline;
}
.primaryNav .basketLink {
    max-width: none;
    float: right;
    padding: 8px 10px;
}
.primaryNav .basketLink a {
    max-width: 180px;
    min-width: 50px;
    height: 50px;
    padding: 0 12px;
    color: #fff;
}
.primaryNav .basketLink a:hover {
    text-decoration: none;
}
.basketLink .basketTotal {
    margin-left: 5px;
    font-size: 0.941em; /* 16px */
}
.primaryNav li .tooltip-holder {
    position: absolute;
    left: 0;
    top: 70px;
    color: #333;
    text-align: left;
    text-transform: none;
    z-index: 100;
}
.primaryNav li .tooltip {
    margin-left: 0;
    font-size: 12px;
}
.primaryNav li .tooltip:before {
    left: 20px;
    top: -10px;
    bottom: auto;
    width: 11px;
    height: 10px;
    margin: auto;
    background-position: -14px -212px;
}
.primaryNav li:hover .tooltip {
    display: block;
}
.secondaryNav li .tooltip-holder {
    top: 50px;
}
.primaryNav .basketLink .tooltip-holder {
    left: auto;
    right: 0;
    top: 70px;
    width: 200px;
    font-size: 0.705em; /* 12px */
    color: #333;
    text-align: left;
    text-transform: none;
}
.primaryNav .basketLink .tooltip {
    left: 0;
}
.primaryNav .basketLink .tooltip:before {
    left: auto;
    right: 26px;
    top: -10px;
    bottom: auto;
    width: 11px;
    height: 10px;
    background-position: -14px -212px;
}
.primaryNav .active {
    background: #e9e9e9;
    border-right: 0;
}
.primaryNav .active > a {
    position: relative;
    top: -1px;
    border-top: 5px solid #a71177;
}
.primaryNav .secondaryNav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 950px;
    margin: auto;
    padding: 0 0 0 20px;
    font-size: 0.8em; /* 12px */
}
.primaryNav .secondaryNav li {
    max-width: none;
    border: 0;
}
.primaryNav .secondaryNav li + li {
    margin-left: 14px;
}
.primaryNav .secondaryNav a {
    height: 55px;
    max-width: none;
    padding: 0;
    font-weight: normal;
    font-weight: 400;
}
.primaryNav .secondaryNav a:hover {
    text-decoration: underline;
}
.primaryNav .secondaryNav .active {
    background: none;
}
.primaryNav .secondaryNav .active a {
    border: 0;
    top: 0;
    font-weight: bold;
    font-weight: 700;
}
.primaryNav .secondaryNav .active a:after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    width: 18px;
    height: 9px;
    margin: auto;
    background: url("/Styles/img/nav-notch.png") no-repeat 50% 100%;
}


/* 3.3 SPOTLIGHTS
------------------------------------------*/
.spotlight {
    width: 305px;
    float: left;
    margin-bottom: 45px;
    padding: 20px 0;
    border: 1px solid #e0e0e0;
}
.spotlight + .spotlight {
    margin-left: 16px;
}
.spotlight h3 {
    float: left;
    clear: both;
    margin: 0 0 20px;
    background: #2e94b6;
    color: #fff;
    font-size: 1.428em; /* 20px */
    font-weight: bold;
    font-weight: 700;
}
.spotlight h3 a {
    display: block;
    padding: 10px 12px;
    color: #fff;
    text-decoration: none;
}
.spotlight h3 a:hover {
    text-decoration: underline;
}
.spotlight p {
    display: block;
    clear: both;
    margin-bottom: 1em;
    padding: 0 20px;
    line-height: 1.857; /* 26px */
}
.spotlight :last-child {
    margin: 0;
}
.spotlight table,
.spotlight table:last-child {
    max-width: 273px;
    table-layout:fixed;
    margin: 0 15px;
}
.spotlight table tr td {
    padding: 10px 5px;
    background: #fff;
    font-size: 0.928em; /* 13px */
}
.spotlight table tr + tr td {
    border-top: 1px solid #e0e0e0;
}
.spotlight table tr td.firstCol {
    width:67px;
}
.spotlightLoading {
    margin-top: 20px;
    font-size: 1.428em; /* 20px */
    text-align: center;
}
.salesTeamSpotlight {
    list-style: none;
    margin: 0;
}
.salesTeamSpotlight li {
    margin: 0 20px 10px;
}
.salesTeamSpotlight li:last-child {
    margin: 0 20px;
}
.salesTeamSpotlight span {
    display: block;
}
.salesTeamSpotlight strong {
    color: #000;
}


/*  3.4 FOOTER
------------------------------------------*/
#siteFooter {
    padding: 38px 0 80px;
    background: #646363;
}
.footerNav {
    margin-bottom: 40px;
}
.footerNav ul {
    list-style: none;
    width: 20%;
    float: left;
    margin: 0;
}
.footerNav li {
    margin: 0 0 10px;
}
.footerNav a {
    color: #fff;
    text-decoration: underline;
}
.footerNav a:hover {
    text-decoration: none;
}
.footerLogo {
    float: right;
}


/*  3.5 ERROR PAGE
------------------------------------------*/
.errorPage {
    margin-bottom: 46px;
    text-align: center;
}



/**************************************************************************************************
* 	4. LOGIN
**************************************************************************************************/


/* 4.1 LOGIN HEADER
------------------------------------------*/
#loginHeader {
    margin: 20px auto 62px;
}
#loginHeader .logos {
    float: none;
    margin: 20px auto 0;
    text-align: center;
}
#loginHeader .logos img {
    float: none;
}



/* 4.2 LOGIN FORM
------------------------------------------*/
#login,
#login .intro {
    margin-bottom: 46px;
}
#login .intro {
    text-align: center;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}
#login fieldset {
    width: 780px;
    margin: auto;
    padding: 32px; 
    background: #f6f6f6;
}
#login .field {
    width: 100%;
    max-width: 500px;
    float: none;
    margin: 0 auto 20px;
}
#login .field label,
#login .field input[type=text],
#login .field input[type=email],
#login .field input[type=password] {
    font-size: 1.428em; /* 20px */
    font-weight: 400;
}
#login .field label {
    display: block;
    margin-bottom: 10px;
    text-align: left;
}
#login .field input[type=text],
#login .field input[type=email],
#login .field input[type=password] {
    width: 100%;
    height: 50px;
    padding: 2px 14px;
}
#login .loginProblemsLink {
    margin-top: 10px;
}
#login .field .btn {
    width: 170px;
    float: right;
}
#login .resetPassword {
    overflow: hidden;
}

/* Terms and conditions checkbox */
#login .termsAndConditionsField {
  width: 100%;
  max-width: 500px;
  float: none;
  margin: -20px auto 20px;
}

#login .termsAndConditionsField .error[style*="inline"]{
    display:block !Important;
    margin-top: 30px;
    margin-bottom: 3px;
}

.resetPasswordForm h2,
.resetPasswordForm .resetMessages,
.securitypage h2,
.securitypage .changePasswordText {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}
.resetMessages {
    color: #e02d32;
}
.resetMessages .resetText {
    color: #363636;
}
#login .field .backToLogin {
    float: left;
}
#login .tooltip {
    top: 35px;
}
#login .errorMessage {
    width: 780px;
    margin: auto;
    padding: 20px;
    border: 1px solid #e68066;
    overflow: hidden;
}
#login .errorMessage p {
    margin: 0;
}
#login .field.error span.error {
    display: block;
    width: 100%;
    margin-top: 5px;
    margin-left: 0;
    font-size: 1em;
    font-weight: normal;
}
#login .resetPassword span.error {
    display: block;
}
.resetPassword label {
    width: 100%;
}
#login .wideLabel {
    width: 400px;
}
#login .field .btn-changePwd {
    width: auto;
}



/* 4.3 LOGIN PROBLEMS
------------------------------------------*/
.loginContact {
    padding: 20px;
    background: #e6e6e6;
}
.loginContactTop {
    margin-bottom: 20px;
    overflow: hidden;
}
.loginContact h3 {
    float: left;
}
.loginContact .select-wrapper {
    float: right;
}
.loginContactDetails {
    display: none;
    overflow: hidden;
}
.loginContactDetails.show {
    display: block;
}
.loginContact .organisation {
    width: 50%;
    float: left;
}
.loginContact .select-wrapper + .organisation {
    clear: left;
}
.loginContact .organisation ul {
    margin-bottom: 0;
}
.resetPassword label {
    width: 100%;
}
.placeholder {
    color: #aaa;
}

.loginContact .phoneChargesApply {
    margin: 0;
    padding-top: 20px;
}



/**************************************************************************************************
* 	5. HOME PAGE
**************************************************************************************************/


/* 5.1 HOME PAGE SHARED
------------------------------------------*/
.alertDetails time,
.newsDetails time {
    display: block;
    margin-bottom: 20px;
    font-size: 0.857em; /* 12px */
    line-height: 1;
}
.alertDetails p,
.newsDetails p {
    margin-bottom: 22px;
}



/* 5.2 HERO CAROUSEL
------------------------------------------*/
#hero {
    width: 1030px;
    position: relative;
    margin: 0 auto;
}
#hero.narrow {
    width: 950px;
}
#hero .carousel {
	position: relative;
}
#hero .carouselWrap {
	width: 100%;
	height: 280px;
	overflow: hidden;
	position: relative;
	margin: 0 auto;
}
#hero .carouselWrap ul {
	position: absolute;
    margin: 0;
}
#hero .carouselWrap ul li {
    position: relative;
	width: 1030px;
	height: 280px;
	display: block;
	float: left;
    margin-top: 0;
    padding-top:30px;
}
#hero.narrow .carouselWrap ul li {
    width: 950px;
}
#hero .carouselWrap img.banner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: auto;
    z-index: -1;
}
#hero .carouselWrap .wrapper {
    position: relative;
    z-index: 1;
    max-width: 860px;
}
#hero .carouselWrap .wrapper > * {
    float: left;
    clear: left;
}
#hero .carouselWrap h2,
#hero .carouselWrap .caption {
    margin-bottom: 5px;
    background: #fff;
    background: rgba(255,255,255,.8);
    line-height: 1;
}
#hero .carouselWrap h2 {
    padding: 18px 16px;
    font-size: 2.285em; /* 32px */
    font-weight: bold;
    font-weight: 800;
    line-height: 1.2em;
    text-transform: uppercase;
}
#hero .carouselWrap .caption {
    max-width: 500px;
    padding: 20px;
    color: #000;
    font-size: 1.428em; /* 20px */
}
#hero .carouselWrap .caption p {
    margin: 0;
}
#hero .carouselWrap .btn {
    padding: 16px 20px;
}

/* Controls */
#hero nav.controls {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
#hero .next,
#hero .prev {
	display: block;
    position: absolute;
    top: 40%;
    z-index: 3;
    width: 57px;
	height: 85px;
	background: url("/Styles/img/wg-sprite.png") no-repeat;
    text-indent: -9999px;
}
#hero .prev {
    background-position: 0 -263px;
}
#hero .next {
    right: 0;
    background-position: -57px -263px;
}
#hero nav.controls ul,
#hero nav.controls .pause {
    display: none;
}


/* 5.3 FOCUS ALERTS
------------------------------------------*/
#focusAlerts {
    margin-bottom: 0;
    padding: 35px 0;
    background: #f0f0f0;
}
#focusAlerts .carouselWrap {
    position: relative;
    overflow: visible;
}
#focusAlerts .carousel-container {
    width: 950px;
    height: 220px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
#focusAlerts.narrow .carousel-container {
    width: 870px;
}
#focusAlerts .carousel-container > ul {
    position: absolute;
    list-style: none;
    margin: 0;
}
#focusAlerts .carousel-container > ul > li {
    position: relative;
    width: 225px;
    height: 220px;
    float: left;
    margin: 0 14px 0 0;
    background: #fff;
    border: 1px solid #e5e5e5;
}
#focusAlerts.narrow .carousel-container > ul > li {
    width: 207px;
}
#focusAlerts .alertDetails {
    position: relative;
    padding: 14px 18px 38px;
}
#focusAlerts .alertDetails span {
    display: block;
    position: absolute;
    top: 14px;
    bottom: 38px;
    left: 0;
    right: 18px;
    height: 169px;
    width: 223px;
    background: url("/Styles/img/focus-alerts-ie-cover.png");
    background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 1) 88%);
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 70%, rgba(255,255,255,1) 88%);
    background: -o-linear-gradient(top, rgba(255,255,255,0) 70%, rgba(255,255,255,1) 88%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 70%, rgba(255,255,255,1) 88%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 70%,rgba(255,255,255,1) 88%);
}
#focusAlerts.narrow .alertDetails span {
    width: 204px;
}
#focusAlerts h3 {
    height: 116px;
    overflow: hidden;
    font-size: 1.285em; /* 18px */
    line-height: 1.2;
}
#focusAlerts .focusReadMore {
    position: absolute;
    bottom: 0;
    width: 100%;
    font-size: 1em; /* 14px */
    font-weight: normal;
    font-weight: 400;
    text-align: left;
}
#focusAlerts .focusReadMore:before {
    content: "";
    background: url("/Styles/img/wg-sprite.png") no-repeat 0 -17px;
    position: absolute;
    top: 14px;
    right: 20px;
    width: 7px;
    height: 10px;
}
#focusAlerts .controls {
    position: absolute;
    z-index: 2;
    width: 100%;
    top: 0;
    left: 0;
}
#focusAlerts .controls ul {
    display: none;
}
#focusAlerts .controls .next,
#focusAlerts .controls .prev {
    display: block;
    position: absolute;
    top: 0;
    width: 30px;
    height: 220px;
    background: url("/Styles/img/wg-sprite.png") no-repeat;
    text-indent: -9999px;
}
#focusAlerts .controls .disabled {
    display:none;
}
#focusAlerts .controls .prev {
    left: -41px;
    background-position: 0 -405px;
}
#focusAlerts .controls .next {
    right: -41px;
    background-position: -30px -405px;
}
#focusAlerts.narrow .prev {
    left: -34px;
}
#focusAlerts.narrow .next {
    right: -34px;
}


/* 5.4 SERVICE NEWS
------------------------------------------*/
#serviceNews {
    margin-bottom: 30px;
    border-bottom: 1px solid #e6e6e6;
}
.serviceNewsInner {
    width: 1030px;
    margin: 0 auto;
    padding: 20px 0 10px;
    background: #fff;
    overflow: hidden;
}
#serviceNews.narrow .serviceNewsInner {
    width: 950px;
}
#serviceNews h2 {
    padding-bottom: 14px;
    margin-bottom: 15px;
    border-bottom: 1px solid #e6e6e6;
}
#serviceNews .viewAll {
    position: relative;
    float: right;
    font-size: 14px;
    margin-top: 10px;
    margin-right: 18px;
    color: #000
}
#serviceNews .newsItem {
    width: 232px;
    float: left;
    margin-bottom: 20px;
    background: #f0f0f0;
    border: 1px solid #e6e6e6;
    border-bottom: 3px solid #d0d0d0;
}
#serviceNews .newsItem + .newsItem {
    margin-left: 7px;
}
#serviceNews .newsItem figure {
    display: none;
}
#serviceNews .newsDetails {
    padding: 16px 18px;
}
.newsDetails time {
    margin-bottom: 16px;
}
.newsDetails h4 {
    display: block;
    position: relative;
    max-width: 180px;
    margin-bottom: 16px;
    font-size: 1.143em; /* 16px */
    font-weight: bold;
    font-weight: 600;
    line-height: 1.2;
}
#serviceNews .viewAll:after {
    content: "";
    position: absolute;
    top: 3px;
    right: -16px;
    width: 6px;
    height: 11px;
    background: url("/Styles/img/wg-sprite.png") no-repeat -63px 0;
}
#serviceNews .viewAll:after {
    top: 1px;
}
.newsDetails h4 a {
    color: #000;
}
#serviceNews .highlighted.newsItem {
    width: 471px;
}
#serviceNews .highlighted.newsItem + .newsItem {
    margin-left: 0;
}
#serviceNews .highlighted.newsItem + .highlighted.newsItem {
    margin-left: 7px;
}
#serviceNews .highlighted.newsItem figure {
    display: block;
    float: left;
    padding: 24px 0;
}
.highlighted.newsItem figure img {
    width: 136px;
    margin: 0 0 0 24px;
}
.highlighted .newsDetails {
    float: left;
    margin-left: 24px;
    padding: 26px 18px 16px 0;
}
.highlighted figure + .newsDetails {
    width: 280px;
}
.highlighted .newsDetails h4 {
    display: block;
    max-width: 410px;
}
.highlighted figure + .newsDetails h4 {
    max-width: 250px;
}


/* 5.5 STYLES FOR WIDGET ORDERING PERMUTATIONS
------------------------------------------*/
.messages + #hero,
.messages + #focusAlerts,
.messages + #serviceNews {
    margin-top: -14px;
}
#hero + #spotlights,
#focusAlerts + #spotlights {
    padding-top: 42px;
}
#focusAlerts + #serviceNews .serviceNewsInner {
    margin: -62px auto 0;
}
#serviceNews + #focusAlerts,
#serviceNews + #hero {
    margin-top: -42px;
}
#focusAlerts.padMore {
    padding-bottom: 120px;
}



/**************************************************************************************************
* 	6. NEWS
**************************************************************************************************/
.newslistingpage h1,
.newslistingpage .newsItem,
.newspage .newsStory {
    max-width: 700px;
}
.newslistingpage h1,
.newspage .newsStory {
    margin: 0 auto 42px;
}


/* 6.1 NEWS ARCHIVE
------------------------------------------*/
.newslistingpage .newsItem {
    overflow: hidden;
    margin: 0 auto 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #e6e6e6;
}
.newslistingpage h2 {
    display: block;
    position: relative;
}
.newslistingpage h2 a {
    color: #000;
}
.newslistingpage figure,
.newslistingpage .newsDetails {
    float: left;
}
.newslistingpage .newsItem figure {
    width: 140px;
    padding-right: 2em;
}
.newslistingpage .newsDetails {
    max-width: 560px;
}
.newslistingpage .newsSummary :last-child {
    margin-bottom: 0;
}
    



/* 6.2 NEWS ARTICLE PAGE
------------------------------------------*/
.newspage #mainNav {
    padding: 0;
    border-bottom: 1px solid #e6e6e6;
}
.newspage .newsStory {
    max-width: 700px;
    margin-bottom: 42px;
}
.newsStory h1 {
    line-height: 1.3;
}
.newsStory time {
    display: block;
    margin-bottom: 1em;
    color: #999;
}
.newsStory .featured {
    max-width: 100%;
    float: left;
    margin-right: 1em;
}
.newsStory p {
    margin-bottom: 20px;
}



/**************************************************************************************************
* 	7. CATALOGUE LISTING
**************************************************************************************************/


.cataloguepage #content {
    min-height: 400px;
}
.loadingMessage {
    display: none;
}
.showLoading {
    display: block;
    position: relative;
    height: 400px;
}
.showLoading h1 {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    height: 40px;
    margin: auto;
    text-align: center;
}


/* 7.1 CATALOGUE SEARCH
------------------------------------------*/

section#catalogueSearch {
    margin-bottom: 20px;
}
.superCentreSwitcher,
.textualSearch > div {
    margin-bottom: 20px;
    overflow: hidden;
}
.superCentreSwitcher label,
.textualSearch label,
.textualSearch input[type=text],
.textualSearch input[type=search] {
    font-size: 1.143em; /* 16px */
    font-weight: normal;
    font-weight: 300;
}
.resultsShownBelowMessage {
    margin-left: 165px;
    margin-top: -10px;
    color: #2e94b6
    /*padding: 6px;
    background: #d9f0fc;
    border: 1px solid #8ab4cd;
    font-size: 0.857em;
    font-weight: bold;
    font-weight: 600;
    text-align: left;*/
}

/* Super Centre Switcher */
.superCentreSwitcher label {
    width: 160px;
    float: left;
    line-height: 2.125em; /* 34px */
}
.superCentreSwitcher .select-wrapper,
.superCentreSwitcher .select-wrapper select {
    width: 400px;
}
.superCentreSwitcher .holder {
    width: 355px;
}
.superCentreSwitcher .select-wrapper {
    background-position: 367px -40px;
}

/* Clear Filters button */
.filterButtons .clearFilters {
    float: right;
    padding: 0;
}

/* Textual Search */
.textualSearch label,
.textualSearch input[type=text],
.textualSearch input[type=search],
.textualSearch input[type=submit].go {
    height: 40px;
    float: left;
}
.textualSearch label {
    width: 164px;
    background: url("/Styles/img/wg-sprite.png") -170px -675px;
    line-height: 2.5; /* 40px */
}
.textualSearch input[type=text],
.textualSearch input[type=search] {
    width: 786px;
    padding: 8px 16px;
}
.textualSearch input[type=submit].go {
    width: 50px;
    padding: 9px 0;
}

/* Search Tools */
.searchTools .sectionTitle {
    cursor: pointer;
}
.searchDropDowns {
    clear: both;
    height: 34px !important;
}
.searchDropDowns > span {
    float: left;
    margin-right: 10px;
}
.searchTools .select-wrapper,
.searchTools .select-wrapper select {
    width: 225px;
}
.searchTools .select-wrapper {
    background-position: 191px -40px;
}
.searchTools .select-wrapper + .select-wrapper {
    margin-left: 20px;
}
.searchDropDowns .searchToolCheckboxes {
    float: left;
    margin-top: 1em;
}
.searchToolCheckboxes .field {
    width: auto;
    margin: 0;
    clear: left;
}
.searchToolCheckboxes label {
    float: left;
    font-size: 0.785em; /* 11px */
    text-align: left;
}
.favTools,
.freqFilters {
    width: 100%;
    margin: 0;
    padding: 20px 0 0;
}
.freqFilters .btn {
    margin-bottom: 0;
}
.noFops {
    margin: 8px 0 20px;
}


/* 7.2 CATALOGUE LISTING
------------------------------------------*/
#catalogueListing .catalogueTabs + span {
    float: left;
    margin: 15px 0 0 12px;
}

/* Listing Header */
.resultsHeader {
    margin-bottom: 16px;
}
.resultsHeader .summary {
    float: left;
    margin: 0;
    line-height: 2.43em; /* 34px */
}
.resultsHeader .summary .showing {
    margin-left: 20px;
}
.resultsHeader .resultsDisplayed {
    float: right;
}
.resultsHeader .resultsDisplayed .select-wrapper {
    margin-left: 10px;
}

/* Catalogue Listing Table */
.resultsList {
    margin-bottom: 20px;
}
.resultsList thead td,
.basketBlock thead td {
    padding: 0;
}
.resultsList thead a,
.basketBlock thead a {
    display: block;
    padding: 1em;
    color: #fff;
}

.mat-sort-header-arrow {
    display: none !important;
}

.mat-sort-header-arrow, [dir=rtl] .mat-sort-header-position-before .mat-sort-header-arrow {
    margin: 0 0 0 0 !important;
}

.resultsList thead i,
.basketBlock thead i {
    display: none;
}
.resultsList thead td a:hover,
.resultsList thead .selected,
.basketBlock thead td a:hover,
.basketBlock thead .selected,
.manageUsers thead td:hover {
    background: #767676;
    text-decoration: none;
}
.resultsList thead .mat-sort-header-sorted i,
.resultsList thead .selected i,
.basketBlock thead .selected i {
    display: inline;
    position: relative;
    top: -2px;
    left: 3px;
}

.resultsList thead .mat-sort-header-sorted i.fa-sort-up,
.resultsList thead .selected i.fa-sort-up,
.basketBlock thead .selected i.fa-sort-up {
    top: 3px;
}
.resultsList td.approved {
    width: 120px;
}
.resultsList tbody td.approved {
    text-align: center;
}
.resultsList td.code {
    width: 100px;
}
.resultsList td.level,
.resultsList td.route {
    width: 120px;
}
.frequentlyOrderedProducts {
    border-bottom: 1px solid #e0e0e0;
}
.frequentlyOrderedProducts .accordion-wrapper,
.frequentlyOrderedProducts .accordion-content {
    border-bottom: 0;
}
.frequentlyOrderedProducts .accordion-wrapper + .accordion-wrapper {
    border-top: 0;
}
.fopTable thead td {
    padding: 1em;
}
.frequentlyOrderedProducts .resultsList {
    margin-bottom: 0;
}

/* Listing Footer */
.resultsFooter .scrollTop {
    float: left;
}
.resultsFooter .moreResults {
    float: right;
}


/* 7.3 BROWSE MARKETS
------------------------------------------*/
.marketDropDowns {
    margin-bottom: 32px;
}
.marketDropDowns .select-wrapper,
.marketDropDowns .select-wrapper select {
    width: 234px;
}
.marketDropDowns .select-wrapper {
    background-position: 201px -40px;
}



/**************************************************************************************************
* 	8. PRODUCT PAGE
**************************************************************************************************/
p.backToSearch {
    margin-bottom:15px;
}
.backToSearch a {
    cursor: pointer;
}
.backToSearch i {
    margin-right: 3px;
    font-size: 14px;
}
.onStopWarnings {
    max-width: 350px;
    margin: 0 auto 20px;
    text-align: left;
}
.onStopWarnings li {
    margin: 0 0 10px;
}
.onStopWarnings p {
    margin: 0;
}


/* 8.1 PRODUCT INFO
------------------------------------------*/
.productDetails {
    margin-bottom: 40px;
}
.productDetails .info {
    width: 670px;
    float: left;
}
.productDetails .info p.new {
    margin-bottom: 16px;
}
.productDetails .info dl {
    margin-top: -7px;
    margin-bottom: 16px;
    overflow: hidden;
}
.productDetails .info dt,
.productDetails .info dd {
    margin-bottom: 6px;
}
.productDetails .info dt {
    float: left;
    clear: left;
    margin-right: 3px;
    color: #000;
    font-weight: bold;
    font-weight: 700;
}
.productDetails .info dd {
    font-weight: 400;
}
.productDetails .info .lastReg,
.productDetails .info .lastCert {
    position: relative;
    float: left;
    margin-right: 20px;
    border: 1px solid #e6e6e6;
}
.productDetails .dates span,
.productDetails .dates time {
    display: block;
    float: left;
    line-height: 40px;
}
.productDetails .dates span {
    padding: 0 34px 0 12px;
    color: #000;
    font-weight: 300;
}
.productDetails .dates time {
    padding: 0 12px;
    background: #009640;
    color: #fff;
    font-weight: bold;
    font-weight: 700;
}
.productDetails .dates .expired time {
    background: #e30613;
}
.productDetails .actions {
    width: 270px;
    float: right;
}
.productDetails .actions .btn {
    display: block;
    margin-bottom: 12px;
    text-align: center;
}
.productDetails .dates .tooltip {
    left: 100%;
    width: 260px;
    padding: 5px 10px;
    line-height: 1.5;
}
.productInformation .select-wrapper {
    margin-bottom: 12px;
}

/* Pricing table adjustments for MAs */
.productInformation td[rowspan="2"] {
    background: #fff;
}
.productInformation td[rowspan],
.productInformation td[rowspan] + td,
.productInformation td[rowspan] + td + td {
    border-top: 2px solid #e9e9e9;
}
.productInformation tr:first-child td[rowspan],
.productInformation tr:first-child td[rowspan] + td,
.productInformation tr:first-child td[rowspan] + td + td {
    border-top: 0;
}

/* Related qualifications */
.productInformation .relatedQualifications h4 {
    background: #2D94B5;
    color: #fff;
    padding: 10px 1em;
    margin-top: 1.5em;
}

.productInformation .relatedQualifications p {
    margin-left: 1em;
}

/* 8.2. RULES OF COMBINATION
------------------------------------------*/
.roc {
    margin: 30px;
    overflow: hidden;
}
.roc .select-wrapper,
.roc select {
    width: 500px;
}
.roc .select-wrapper {
    margin-bottom: 32px;
    background-position: 466px -40px;
}
.roc .pathwayLabel {
    display: block;
    width: 100%;
    margin-bottom: 10px;
}
.roc .pathwaySection {
    width: 100%;
    float: left;
    margin-bottom: 32px;
    border: 4px solid #c0c0c0;
    border-top: 0;
}
.roc .pathwaySection.passed {
    border-color: #009640;
}
.roc h2 {
    margin: 0;
    padding: 16px;
    background: #c0c0c0;
}
.roc .passed h2 {
    background:#009640;
    color: #fff;
}
.roc tbody tr {
    cursor: pointer;
}
.roc tbody tr:hover td {
    background: #ddd;
}
.roc .disabledRow {
    color: #d0d0d0;
}
.roc .achieved {
    width: 100%;
    float: left;
    padding: 18px 0;
    background: #009640;
    color: #fff;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}
.roc .achieved.not {
    background: #646363;
}



/**************************************************************************************************
* 	9. ORDER PAGE
**************************************************************************************************/

/* Hide majority of page elements on page load */
.miniBasket .basketInfo {
    /*display: none;*/
}
.miniBasket .basketInfo.show {
    display: block;
}
section.orderType {
    margin-bottom: 0;
    overflow: hidden;
}


/* 9.1 SEARCH FORM
------------------------------------------*/
.searchCandidate .candidateSearch {
    overflow: hidden;
    margin-bottom: 10px;
    padding: 28px 1em;
    background: #e9e9e9;
}
.searchCandidate .candidateSearch .field {
    margin-bottom: 10px;
}
.searchCandidate .candidateSearch .field label {
    width: 140px;
}
.searchCandidate .candidateSearch .field.error span.error {
    margin-left: 140px;
}
.searchCandidate .candidateSearch .searchBtn {
    width: 150px;
    margin-left: 20px;
}
.candidateSearch .addressLookup {
    margin-left: 150px;
}
.searchCandidate .candidateResults {
    margin-top: 12px;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
}
.searchCandidate .candidateResults table {
    border: 1px solid #c1c1c1;
}
.candidateResults{
    position: relative;
}
.candidateResults tbody tr:hover {
    cursor: pointer;
}
.candidateResults tbody tr:hover td {
    background: #ddd;
}
p.candSearchMessage {
    margin: 16px 0;
}
.searchCandidate .candidateResults .selectCandidate {
    width: 70px;
    padding: 0 10px;
    text-align: center;
}
.searchCandidate .resultsFooter .scrollTop {
    margin: 28px 0 0 12px;
}
.searchCandidate .candidateSearch .actions {
    float: right;
}
.searchCandidate .resultsFooter .moreResults {
    float: none;
}
.searchCandidate .candidateSearch .add {
    margin: 10px 12px 0 0;
}
.searchCandidate .showLoading {
    height: 250px;
}
.searchCandidate .associatedCentreMessage {
    margin-top: 1em;
    text-align: center;
}
.searchCandidate p.error,
.financialTabContent p.error {
    margin: 1em;
    color: #e02d32;
    font-weight: bold;
    font-weight: 700;
}
.searchCandidate .cohortSearch .field-large,
.searchCandidate .enrNoSearch .field-large,
.searchCandidate .uniqueSearch .field-large {
    text-align: center;
}
.searchCandidate .candidateDetails .searchBtn,
.searchCandidate .otherCentreSearch .searchBtn {
    float: right;
    margin: 0 80px 0 0;
}
.searchCandidate .candidateSearch .candDobField label {
    margin-top: 7px;
}
.createNewCandidate p.errorList {
    margin: 5px 1em 1em 300px;
}

/* Cohort search specific */
.searchCandidate .cohortSearch label {
    float: none;
}
.searchCandidate .cohortSearch .holder,
.searchCandidate .cohortSearch .select-wrapper {
    text-align: left;
}
.searchCandidate .cohortSearch .select-wrapper,
.searchCandidate .cohortSearch .select-wrapper select {
    width: 380px;
}
.searchCandidate .cohortSearch .select-wrapper {
    background-position: 346px -40px;
}

/* Enrolment no. and unique learner no. search specific */
.searchCandidate .enrNoSearch label,
.searchCandidate .uniqueSearch label {
    width: 210px;
    float: none;
}
.searchCandidate .enrNoSearch label,
.searchCandidate .enrNoSearch input[type=submit] {
    vertical-align: top;
}
.searchCandidate .enrNoSearch label {
    position: relative;
    top: 10px;
}
.searchCandidate .enrNoSearch input[type=text] {
    margin-top: 5px;
}
.searchCandidate .enrNoSearch input[type=text],
.searchCandidate .uniqueSearch input[type=text] {
    width: 242px;
}
.searchCandidate .enrNoSearch .field.error span.error,
.searchCandidate .uniqueSearch .field.error span.error {
    float: left;
}
.searchCandidate .enrNoSearch .field.error span.error {
    margin-left: 345px;
}
.searchCandidate .uniqueSearch .field.error span.error {
    margin-left: 180px;
}
.singleEnr,
.multiEnrs {
    display: inline-block;
    width: 242px;
    overflow: hidden;
}
.multiEnrs input {
    float: left;
    clear: both;
}
.multiEnrs textarea {
    width: 242px;
    height: 32px;
    overflow: hidden;
}
.singleEnr a,
.multiEnrs a {
    float: left;
    clear: left;
    margin-top: 5px;
}

/* Other centre search specific */
.otherCentreSearch .field.enrNo label,
.otherCentreSearch .field.dob label {
    width: 210px;
}
.searchCandidate .otherCentreSearch .field.enrNo span.error,
.searchCandidate .otherCentreSearch .field.dob span.error {
    margin-left: 230px;
}
.otherCentreSearch .field.enrNo input[type=text],
.otherCentreSearch .field.dob input[type=text] {
    width: 150px;
}

/* ULN search specific */
.searchCandidate .uniqueSearch .field-large {
    width: 600px;
    margin-left: 140px;
}
.searchCandidate .uniqueSearch .field-large input[type=submit] {
    position: relative;
    top: -5px;
    float: right;
}


/* 9.2 CREATE CANDIDATE
------------------------------------------*/
.createNewCandidate h6 {
    width: 150px;
    float: left;
    margin-top: 7px;
    padding-left: 10px;
}
.createNewCandidate .personalDetails,
.createNewCandidate .otherDetails,
.createNewCandidate .apprenticeshipDetails {
    width: 765px;
    float: left;
    margin-bottom: 20px;
}
.createNewCandidate .field-large input[type=text] {
    width: 625px;
}
.field.newCandGender {
    clear: none;
}

.mini-search {
    float: right;
    margin-right: 1px;
}

.lightboxContent .mini-search {
    float: none;
}

.lightboxContent .mini-add {
    float: right;
    margin-right: 102px;
}

input[type="text"] + .mini-search {
    margin-top: 5px;
}

.mini-search-error {
    text-align:center;
    clear:both;
    display:block;
}

.c-pointer {
    cursor: pointer;
}

.formHelperText {
    width: 100%;
    float: left;
    margin: 0 0 20px 140px;
    max-width: 634px;
    font-size: 0.928em; /* 13px */
}
.lightboxContent .formHelperText {
    margin-bottom: 0;
}
.certificateName {
    font-size: 1em; /* 13px */
}
.createNewCandidate .newCandGender label,
.createNewCandidate .otherDetails .field:nth-child(2n) label {
    width: 140px;
}
.apprenticeshipDetails hr,
.createNewCandidate hr {
    clear: both;
    width: 930px;
    margin: 0 auto 30px;
    border: 0;
    border-top: 1px dashed #d0d0d0;
}
.createNewCandidate .btnCreateNew {
    float: right;
    margin-right: 15px;
}
.createNewCandidate .otherDetails .field:nth-child(2n+1) {
    clear: none;
}
.createNewCandidate .otherDetails .field:nth-child(2n+2) {
    clear: left;
}
.createNewCandidate .otherDetails .addressLookup {
    position: relative;
    margin-left: 140px;
}
.createNewCandidate .otherDetails .addressLookup label {
    width: 0;
    margin: 0;
    padding: 0;
}
.createNewCandidate .otherDetails .addressLookup input[type=text] {
    width: 620px;
    font-weight: normal;
    font-weight: 400
}
.createNewCandidate .otherDetails .addressLookup .formHelperText {
    margin-left: 0;
}
.lightboxContent #lightboxAddressLookup {
    width: 560px;
}
.createNewCandidate ul.locations {
    position: absolute;
    z-index: 2;
    top: 32px;
    left: 141px;
    width: 628px;
    margin: 0;
    background: #fff;
    font-size: .857em;
    box-shadow: 0 0 5px #999;
}
.createNewCandidate ul.locations li {
    cursor: pointer;
    display: block;
    margin: 0;
    padding: .5em .6em;
    border-bottom: solid 1px #ccc;
}
.createNewCandidate ul.locations li:hover {
    background:#eee;
}
.dobDrops + p.error {
    margin-left: 140px;
}

.lightboxContent .dobDrops + p.error {
    margin-left: 130px;
    clear: both;
    color: #e02d32;
}

/* Optional candidate fields */
.otherOptionalDetails {
    width: 100%;
    overflow: hidden;
}
.otherOptionalDetails > div {
    width: 780px;
    float: right;
}
h3.otherOptionalDetailsTitle {
    border-bottom: 1px dashed #d0d0d0;
    cursor: pointer;
}


/* 9.3 UNNAMED REGISTRATION
------------------------------------------*/
.unnamedRegistrations {
    overflow: hidden;
}
.unnamedRegistrations .field label {
    width: 480px;
    text-align: left;
}
.unnamedRegistrations .field input[type=text] {
    width: 50px;
}
.unnamedRegistrations .btn.btn-inline {
    width: 140px;
}
.unnamedRegistrations span.error {
    margin-left: 480px;
}



/* 9.4 MINI BASKET
------------------------------------------*/
.miniBasket {
    overflow: hidden;
}
.miniBasket .basketCandidates {
    width: 720px;
    float: left;
    position: relative;
}
.miniBasket .basketCandidates-eligibilityBooking, .miniBasket .basketCandidates-altResults {
    width: 100%;
}
.miniBasket .basketCandidates,
.miniBasket .basketInfo {
    border: 2px solid #e6e6e6;
}
.miniBasket .basketProduct {
    padding: 18px 14px;
    overflow: hidden;
}
.basketProduct .basketProductInfo {
    width: 370px;
    float: left;
}
.miniBasket .basketProduct span,
.miniBasket .basketAmounts .basketQuals {
    display: block;
}
.miniBasket .basketAmounts .basketQuals {
    margin-bottom: 10px;
}
.miniBasket .basketCandidates .basketCandidateActions {
    text-align: right;
    padding-top: 9px;
}
.miniBasket .basketCandidates .basketCandidateActions a,
.miniBasket .basketCandidates .basketCandidateActions button {
    height: 28px;
    margin-top: 5px;
}
.miniBasket .basketCandidates .basketCandidateActions a {
    vertical-align: bottom;
}

.miniBasket .basketCandidates .basketCandidateActions a {
    margin-left: 5px;
}

.miniBasket .basketCandidates .basketCandidateActions button {
    margin-left: 5px;
}

.miniBasket .basketInfo {
    width: 210px;
    float: right;
    padding: 10px 6px;
}
.miniBasket .basketAmounts {
    margin-bottom: 20px;
    padding: 0 5px;
}
.miniBasket .basketAmounts ul,
.miniBasket .basketAmounts li {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.miniBasket .basketAmounts h4,
.miniBasket .basketAmounts ul,
.miniBasket .basketAmounts li {
    margin-bottom: 12px;
}
.miniBasket .basketAmounts ul {
    border-bottom: 1px solid #e6e6e6;
}
.miniBasket .basketAmounts .listTitle {
    float: left;
}
.miniBasket .basketAmounts li .listTitle{
    display: block;
    width:100%
}
.miniBasket h4.basketTotal {
    overflow: hidden;
    text-transform: uppercase;
}
.miniBasket h4.basketTotal span {
    float: right;
}
.miniBasket .processBasket {
    width: 100%;
}
.eligBookBasketActions {
    float: left;
    width: 100%;
    display: flex;
    align-content: space-between;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
}
.eligBookBasketActions .deleteEligBook {
    margin-bottom: 20px;
}
.eligBookBasketActions .moreResults {
    margin-bottom: 20px;
}
.eligBookBasketActions .saveEligBook {
    margin-bottom: 20px;
}
.eligBookBasketActions .submitEligBook {
    margin-bottom: 20px;
}

.basketCandidateList input.error, .basketCandidateList textarea.error, .basketCandidateList__alt input.error {
    color: #e02d32;
    background-color: #fbdee2;
    border-color: #e68066;
}
.basketCandidateList select.error {
    color: #e02d32;
    background-color: #fbdee2;
    border-color: #e68066;
}
.basketCandidateList__elig tbody td, .basketCandidateList__alt .candidate-row td {
    padding: 5px;
}
.miniBasket .basketCandidateList__elig tbody td.basketCandidateActions{
    padding-top: 5px;
}
.miniBasket .basketCandidateList__elig tbody td.basketCandidateActions button{
    margin-top: 0;
}
.basketCandidateList__alt .candidate-row td.input {
    padding: 2px 1em;
}
.basketCandidateList__elig td.input {
    padding: 2px 7px;
}
.basketCandidateList__alt .candidate-row td.input input {
    border-color: #363636;
    max-width: 50px;
}
.basketCandidateList__elig td.input input {
    max-width: 120px;
}
.basketCandidateList__elig td.input textarea {
    min-width: 120px;
    min-height: 21px;
    width: 120px;
    height: 21px;
    position: relative;
    top: 6px;
    overflow: hidden;
    font-weight: normal;
}
.reasonsPopup {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(255,255,255,0.7);
}
.reasonsPopupInner {
    background: white;
    width: 50%;
    top: 30px;
    left: 25%;
    position: absolute;
    padding: 15px 15px 10px;
    box-shadow: 0 0 5px #999;
}
.reasonsPopup p {
    margin-bottom: 5px;
}
.reasonsPopup textarea{
    max-width: 100%;
    font-weight: normal;
}


.reasonsPopup button{
    float: right;
    margin-top: 5px;
}
/*.reasonsPopupCloseOuter{
    position: relative;
}*/
.reasonsPopupClose {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 30px;
    height: 30px;
    font-size: 12px;
}
.reasonsPopupClose:before, .reasonsPopupClose:after {
    position: absolute;
    left: 15px;
    top: 5px;
    content: ' ';
    height: 20px;
    width: 2px;
    background-color: #333;
    cursor: pointer;
}

.reasonsPopupClose:before {
    transform: rotate(45deg);
}

.reasonsPopupClose:after {
    transform: rotate(-45deg);
}

.basketCandidateList__alt .candidate-row td.input select {
    border-color: #363636;
    min-width: 100%;
}
.basketCandidateList__alt .candidate-row td.input select:disabled {
    opacity: 0.4;
}
.basketCandidateList__alt .error-row td {
    background: #e9e9e9;
    padding: 7px;
}
/* This would only work on safari for now.
.basketCandidateList__alt tr:nth-child(2 of .candidate-row) td {
    background: #e9e9e9;
} */
/* 9.5 VIEW / EDIT CANDIDATE LIGHTBOX
------------------------------------------*/
.epa-hide-this {
    display: none;
    opacity: 0;
}

.miniBasketLightbox {
    min-width: 950px;
}
.miniBasketLightbox h2 {
    margin-bottom: 30px;
}
.miniBasketLightbox h4 {
    width: 200px;
    float: left;
}
.miniBasketLightbox .eligibilityErrors h4, 
.miniBasketLightbox .altResultsErrors h4,
.miniBasketLightbox .evidenceManagementErrors h4 {
    width: auto;
    float: none;
}
.miniBasketLightbox .personalDetailsFields,
.miniBasketLightbox .lightboxAdditionalFields {
    width: 640px;
    float: left;
    margin-left: 30px;
}
.lightboxExtra,
.lightboxContent .dobDrops {
    visibility: hidden;
}
.lightboxExtra.visible,
.lightboxContent .dobDrops.visible {
    visibility: visible;
}
.miniBasketLightbox .field > label {
    font-weight: bold;
    font-weight: 700;
}
.miniBasketLightbox .personalDetails .field > span,
.miniBasketLightbox .lightboxAdditional .field > span {
    float: left;
    margin-left: 0;
}
.miniBasketLightbox .lightboxAdditional .field > span,
.personalDetailsFields .field > span {
    margin-top: 5px;
}
.miniBasketLightbox .personalDetails .field > .lightboxDropDown {
    margin-top: 0;
}
.miniBasketLightbox .newCandidate label,
.miniBasketLightbox .lightboxAdditional label {
    width: 100%;
    text-align: left;
}
.lightboxAdditional {
    margin: 20px 0 0;
    padding-top: 20px;
    border-top: 1px solid #e6e6e6;
}
.miniBasketLightboxActions {
    margin-top: 20px;
    text-align: right;
}
.miniBasketLightboxActions .btn {
    margin-left: 20px;
}
.miniBasket .showLoading {
    height: 150px;
}
.miniBasket--min-height {
    min-height: 380px;
}
.viewCandidate .field > label {
    width: 130px;
    text-align: right;
}
.lightboxLoading {
    width: 100%;
    margin-top: 20px;
    padding: 60px 0;
    border-top: 1px solid #e6e6e6;
    text-align: center;
}
.editCandLastName {
    width: 100%;
}
.editCandGender:nth-of-type(2n+1) {
    clear: none;
}





/* 9.6 CREATE COHORT
------------------------------------------*/
.miniBasket .basketCohort, .bookingCandidates .basketCohort {
    width: 304px;
    float: right;
    clear: none;
    position: relative;
}
.miniBasket .basketCohort .field {
    margin-bottom: 0;
}
.basketCohort .error span.error {
    margin-left: 0;
}
.miniBasket .basketCohort .cohortHeading,
.miniBasket .basketCohort .cohortName {
    display: inline-block;
}
.basketCohort .clearCohort {
    position: absolute;
    top: 0;
    right: 0;
}


/* 9.7 EXISTING CANDIDATE ADD ERROR LIGHTBOX
-------------------------------------------------*/
ul.existingCandidateErrors{
    margin: 0 0 0 32px;
}
ul.existingCandidateErrors > li {
    list-style: none;
    margin-bottom: 32px;
    overflow: hidden;
}
ul.existingCandidateErrors ul{
    width: 600px;
    float: left;
    margin: 0 0 0 32px;
}
ul.existingCandidateErrors ul li{
    margin: 0 0 10px 0;
}


/* 9.8 Eligibility Booking
-------------------------------------------------*/
.eligibilityBooking .elibigilityBookingDetails {
    overflow: hidden;
    margin-bottom: 10px;
    padding: 28px 1em;
    background: #e9e9e9;
}

.eligibilityBooking .elibigilityBookingDetails .field {
    margin-bottom: 10px;
}

.eligibilityBooking .elibigilityBookingDetails .field .select-wrapper.ng-invalid, .eligibilityBooking .elibigilityBookingDetails .field .ng-invalid {
    color: #e02d32;
    background-color: #fbdee2;
    border-color: #e68066;
}

.altResults .alternativeResultsDetails .field .select-wrapper.ng-invalid, .altResults .alternativeResultsDetails .field .ng-invalid {
    color: #e02d32;
    background-color: #fbdee2;
    border-color: #e68066;
}


.eligibilityBooking .elibigilityBookingDetails .eligibilityBookingAssessmentCode, .altResults .alternativeResultsDetails .alternativeResultsAssessmentCode {
    clear: both;
}

/**************************************************************************************************
* 	10. BASKET
**************************************************************************************************/
        .basketProgress {
    overflow: hidden
}
.basket {
    overflow: hidden;
}
.basketProgress li.disabled a {
    color: #aaa;
}
.basketProgress .mask {
    display: none;
}
.basketProgress li.disabled .mask {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    background: #fff;
    opacity: 0.01;
    filter: alpha(opacity=0.01);
}
.noProducts {
    margin-bottom: 50px;
}
.basketLeft {
    width: 680px;
    float: left;
}
.basketBlock {
    overflow: hidden;
    padding: 16px;
}





/* 10.1 PRODUCT LIST
------------------------------------------*/
.productList {
    list-style: none;
    margin: 0;
}
.productList > li {
    overflow: hidden;
    margin: 0 0 32px;
    border: 1px solid #e0e0e0;
}
.basketSummary .basketBlock {
    padding: 5px;
}

/* Product Header */
.productHeader {
    min-height: 56px;
    overflow: hidden;
}
.productHeader h3 {
    width: 480px;
    float: left;
    margin: 18px 0 18px 18px;
    font-size: 1.143em; /* 16px */
    font-weight: bold;
    line-height: 1.3;
}
.productHeader a {
    width: 140px;
    float: right;
    margin: 9px 12px 0 0;
    padding: 10px;
    font-size: 1em; /* 14px */
}

/* Product Candidates */
.productCandidatesTop h3,
.productCandidatesTop h4 {
    margin-bottom: 5px;
    font-weight: normal;
    font-weight: 400;
}
.productCandidatesCount {
    position: relative;
    width: 510px;
    float: left;
    padding: 20px 0 25px 40px;
    cursor: pointer;
}
.unnamedReg .productCandidatesCount {
    cursor: default;
    padding: 12px 0 0 12px;
}
.editUnnamed {
    clear: both;
    margin: 12px;
}
.productCandidatesTop .editUnnamedBtn {
    margin-bottom: 12px;
}
.unnamedField {
    margin-bottom: 12px;
}
.unnamedField label {
    width: auto;
}
.unnamedField input.unnamedAmount {
    width: 50px;
}
.productCandidatesCount i {
    display: block;
    position: absolute;
    top: 30px;
    left: 16px;
    width: 6px;
    height: 11px;
    background: url("/Styles/img/wg-sprite.png") -63px 0;
}
.productCandidatesCount.open i,
.productOptionsTop.open .optionsHeader i {
    top: 33px;
    left: 13px;
    width: 11px;
    height: 6px;
    background-position: 0 0;
}
.productCandidatesTop button {
    width: 144px;
    float: right;
    margin: 12px 10px 0 0;
}
.productCandidates td {
    padding: 1em 5px;
}
.productCandidates thead a {
    color: #fff;
}
.productCandidates .fa-sort-down {
    position: relative;
    top: -3px;
}
.productCandidates .fa-sort-up {
    position: relative;
    top: 4px;
}
.productCandidates .candidateActions {
    width: 176px;
    padding: 1em 5px;
}

/* Product Footer */
.productFooter {
    width: 100%;
    overflow: hidden;
    padding: 12px 12px 2px;
    background: #d0d0d0;
}
.productFooter > div {
    width: 295px;
    float: right;
    margin-left: 18px;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid #b4b4b4;
}
.productFooterLabel {
    width: 140px;
    float: left;
    padding: 10px;
    background: #f0f0f0;
    border-right: 1px solid #b4b4b4;
    text-align: right;
}
.productFooterDetail {
    width: 145px;
    float: left;
    padding: 10px 16px;
}

/* Candidate Creation Loading Message */
.creatingLearners .lightboxWrap {
    top: 300px;
}

/* Candidates Already Enrolled */
.candidatesEnrolled .btn {
    float: right;
    margin-left: 10px;
}


/* 10.2 BASKET FINANCIALS
------------------------------------------*/
.basketFinancials {
    width: 245px;
    float: right;
}
.basketTotals,
.accountTotals {
    margin-bottom: 32px;
    border: 1px solid #e0e0e0;
}
.totalsHeader {
    overflow: hidden;
    height: 56px;
    padding: 18px 0 18px 18px;
}
.totalsHeader h4 {
    margin: 0;
    font-size: 1.143em; /* 16px */
    font-weight: bold;
}
.basketFinancials ul,
.basketTotals.confirmation ul {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}
.basketFinancials li,
.basketTotals.confirmation li {
    overflow: hidden;
    width: 100%;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}
.basketFinancials li + li,
.basketTotals.confirmation li + li {
    margin-top: 10px;
}
.totalsFigures {
    text-align: center;
}
.totalsLabel,
.totalsDetail {
    padding: 12px 5px;
}
.totalsLabel {
    width: 140px;
    float: left;
    background: #f0f0f0;
    border-right: 1px solid #e0e0e0;
    text-align: right;
}
.totalsDetail {
    width: 100px;
    float: right;
    text-align: left;
}
.totalsFigures button {
    width: 175px;
    margin: 20px auto;
}
.totalsFigures p {
    margin: 16px;
    text-align: left;
}
.totalsFigures .saveBasket,
.totalsFigures .savedMessage {
    margin-bottom: 0;
}
.totalsFigures .savedMessage {
    color: #009640;
    font-size: 0.857em; /* 12px */
    font-weight: bold;
    font-weight: 700;
    text-align: center;
}
.highCredit .totalsLabel {
    width: 115px;
}
.highCredit .totalsDetail {
    width: 125px;
}




/* 10.3 BASKET OPTIONS
------------------------------------------*/
.basketOptions .productHeader h3 {
    margin: 0;
    padding: 18px 0 18px 18px;
}
.basketOptions .productHeader h5 {
    width: 100%;
    float: left;
    margin-left: 18px;
}
.additionalOptions h4 {
    margin: 0;
    padding: 16px;
    background: #eee;
    font-weight: normal;
    font-weight: 400;
}
.additionalOptions ul,
.additionalOptions li {
    list-style: none;
    margin: 0;
}
.additionalOptions li {
    overflow: hidden;
    width: 100%;
}
.additionalOptions li + li {
    border-top: 5px solid #eee;
}
.additionalProductDetail,
.additionalProductAmounts {
    float: left;
}
.additionalProductDetail {
    width: 400px;
    border-right: 2px solid #eee;
}
.additionalProductIcon {
    width: 70px;
    float: left;
    margin-right: 16px;
}
.additionalProductDetail > div {
    width: 250px;
    float: left;
}
.additionalProductDetail h5,
.additionalProductDetail p,
.additionalProductDetail button {
    margin-bottom: 5px;
}
.additionalProductDetail p,
.quantityLabel {
    font-size: 0.857em; /* 12px */
}
.additionalProductAmounts {
    width: 260px;
}
.quantityLabel {
    width: 50px;
}
.additionalProductAmounts .select-wrapper,
.additionalProductAmounts select {
    width: 70px;
    margin-right: 10px;
}
.additionalProductAmounts .select-wrapper {
    background-position: 36px -40px;
}

/* Basket options Lightbox */
.relatedProductImage {
    width: 300px;
    float: left;
    margin-right: 2em;
}
.relatedProductDetails {
    /*width: 700px;
    float: left;*/
}
.relatedProductDetails p {
    margin-bottom: 16px;
}

.relatedQuals {
}

.relatedQuals .sectionTitleBox {
    margin: 0;
    padding: 16px;
    background: #eee;
}

.relatedQuals .sectionTitleBox h4 {
    font-weight: normal;
    font-weight: 400;
    margin-bottom: 0;
}

.relatedQuals .sectionTitleBox p {
    margin-top: 8px;
    font-size: 0.857em;
    margin-bottom:0;
}

.relatedQuals ul {
    margin: 0;
    overflow: hidden;
}

.relatedQuals ul li {
    float:left;
    padding: 16px 16px 8px;
    margin-top: 0;
    list-style: none;
    width: 100%;
    border-bottom: #eee solid 1px;
}

.relatedQuals ul li div {
    width: 500px;
    float: left;
}

.relatedQuals ul li h5 {
    margin-bottom: 8px;
}

.relatedQuals ul li p {
    font-size: 0.857em;
    margin-bottom: 8px;
}

.relatedQuals ul li a {
    float: right;
    margin-top: 20px;
}


/* 10.4 BASKET DELIVERY
------------------------------------------*/
.basketDelivery h3 {
    font-weight: normal;
    font-weight: 400;
}
.addressBlock,
.productAddressList {
    overflow: hidden;
}
.addressPanel,
.addressSupporting {
    padding: 1em;
}
.addressPanel {
    width: 230px;
    float: left;
    border: 2px solid #2e94b6;
}
.addressBlock .addressPanel {
    width: 320px;
}
.addressSupporting {
    width: 360px;
    float: right;
    background: #f0f0f0;
    border: 2px solid #f0f0f0;
}
.productAddressList,
.addressAddRemove p {
    margin-bottom: 0;
}
.productAddressList {
    margin-bottom: 32px;
    border: 1px solid #e0e0e0;
    overflow: hidden;
}
.productAddressList h3 {
    margin-bottom: 10px;
    font-weight: bold;
    font-weight: 700;
}
.basketOptions .productHeader h3,
.productAddressList .productHeader h3 {
    width: 100%;
    float: none;
}
.basketOptions .productHeader p,
.productAddressList .productHeader p {
    margin: 0 16px 16px;
}
.productAddressList .field {
    margin-bottom: 5px;
}
.addressAddRemove {
    margin-bottom: 30px;
}
.addressSpecial label {
    display: block;
    width: 100%;
    text-align: left;
}
.addressSpecial input[type=text],
.addressSpecial textarea {
    width: 100%;
}

/* Delivery address carousels */
.deliveryAddresses {
    position: relative;
    width: 100%;
    height: 180px;
    margin: auto;
}
.deliveryAddresses .carousel-container {
    width: 590px;
    height: 180px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.deliveryAddresses .carousel-container > ul {
    position: absolute;
    list-style: none;
    margin: 0;
}
.deliveryAddresses .carousel-container > ul > li {
    position: relative;
    width: 190px;
    float: left;
    margin: 0 10px 0 0;
    border: 2px solid #ccc;
    cursor: pointer;
}
.deliveryAddresses .carousel-container li.selected {
    border: 2px solid #2e94b6;
}
.deliveryAddresses .controls {
    position: absolute;
    z-index: 2;
    width: 100%;
    top: 0;
    left: 0;
}
.deliveryAddresses .controls ul {
    display: none;
}
.deliveryAddresses .controls .next,
.deliveryAddresses .controls .prev {
    display: block;
    position: absolute;
    top: 0;
    width: 30px;
    height: 140px;
    background: url("/Styles/img/wg-sprite.png") no-repeat;
    text-indent: -9999px;
}
.deliveryAddresses .controls .disabled {
    display:none;
}
.deliveryAddresses .controls .prev {
    left: -32px;
    background-position: 0 -445px;
}
.deliveryAddresses .controls .next {
    right: -32px;
    background-position: -30px -445px;
}




/* 10.5 BASKET PAYMENT
------------------------------------------*/
.discountCharges,
.basketPayment .totalsFigures {
    margin-bottom: 32px;
}
.discountCharges .btn {
    float: right;
}
.basketPayment .totalsFigures {
    width: 290px;
    float: none;
}
.basketPayment .basketFinancials li {
    border: 1px solid #e0e0e0;
}
.basketPayment .totalsFigures .totalsDetail {
    width: 146px;
}
.paymentFinalMsg {
    margin: 20px 0;
}
.paymentFinalMsg p {
    margin: 0;

}
.paymentType select,
.paymentType .select-wrapper {
    width: 290px;
}
.paymentType .select-wrapper {
    background-position: 257px -40px;
}
.paymentType label {
    display: block;
    width: 100%;
    margin-bottom: 5px;
    text-align: left;
}
.paymentType input[type=text] {
    width: 290px;
    float: none;
}
.checkoutButton {
    width: 100%;
    float: left;
    margin: 0 0 32px;
}
.checkoutButton .btn {
    float: right;
}
.discountsSurcharges {
    list-style: none;
    margin: 0;
}
.discountsSurcharges li {
    width: 100%;
    float: left;
    margin: 0;
}
.discountsSurcharges li + li {
    margin-top: 20px;
}
.discountsSurcharges h4 {
    width: 100%;
}
.discountsSurcharges .field {
    clear: none;
}
.discountsSurcharges label {
    width: 190px;
}
.paymentError,
.paymentError h3 {
    color: #e30613;
}




/* 10.6 CONFIRMATION PAGE
------------------------------------------*/
.confirmationSummary,
.basketTotals.confirmation {
    margin-bottom: 32px;
}
.confirmationHeader,
.optionsFooter {
    overflow: hidden;
    margin-bottom: 20px;
}
.confirmationHeader h2 {
    width: 500px;
    float: left;
}
.printPage {
    float: right;
}
.confirmationSummary label {
    width: 240px;
    margin-top: 7px;
    text-align: left;
}
.confirmationSummary .successMessage {
    color: #009640;
}
.confirmationOrderTable tr td,
.confirmationOrderTable tr:nth-of-type(2n) td {
    margin: 0;
    padding: 0 10px 32px 0;
    background: #fff;
}
.confirmationOrderTable h6 {
    margin-bottom: 10px;
}
.confirmationOrderTable p {
    margin: 0;
    padding: 10px;
    background: #e9e9e9;
}
.confirmationOrderTable .pONo {
    max-width: 450px;
    overflow-x: auto;
}
.confirmationpage .productHeader h3 {
    width: 630px;
    margin: 18px;
}
.confirmationCandidatesCount {
    width: 420px;
}
.confirmationCourseDates {
    width: 235px;
    float: right;
    position: relative;
    top: -5px;
    right: -5px;
    margin-bottom: -10px;
    border-left: 1px solid #e6e6e6;
}
.confirmationCourseDates .lastCert {
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
}
.confirmationCourseDates td {
    display: block;
    line-height: 56px;
}
.confirmationCourseDates .dateLabel {
    float: left;
    padding: 0 20px 0 12px;
    color: #000;
    font-weight: 300;
    background: #fff;
}
.confirmationCourseDates .dateInfo {
    width: 95px;
    float: right;
    padding: 0 12px;
    background: #009640;
    color: #fff;
    font-weight: bold;
    font-weight: 700;
}
.confirmationCandidates {
    float: left;
    margin-top: 10px;
    margin-bottom: 0;
}
.confirmationCandidates thead td,
.confirmationCandidates tbody td {
    padding: 1em;
}
.confirmationpage .optionsHeader {
    position: relative;
    width: 510px;
    float: left;
    padding: 20px 0 20px 40px;
    cursor: pointer;
}
.confirmationpage .optionsHeader h3 {
    margin-bottom: 5px;
    font-weight: normal;
    font-weight: 400;
}
.confirmationpage .optionsHeader i {
    display: block;
    position: absolute;
    top: 30px;
    left: 16px;
    width: 6px;
    height: 11px;
    background: url("/Styles/img/wg-sprite.png") -63px 0;
}
.confirmationpage .optionsHeader.open i {
    top: 33px;
    left: 13px;
    width: 11px;
    height: 6px;
    background-position: 0 0;
}
.confirmationpage .optionsList {
    width: 100%;
    float: left;
    padding: 10px;
}
.confirmationpage .optionsList ul {
    list-style: none;
    margin: 0;
}
.confirmationpage .additionalProductDetail {
    width: 360px;
    border-right: 0;
}
.confirmationpage .additionalProductAmounts {
    width: 280px;
    border: 1px solid #ddd;
}

.confirmationpage .productFooter {
    margin: 0;
}
.confirmationpage .productFooterLabel {
    width: 130px;
    border-right: 1px solid #ddd;
}
.confirmationDeliveryLeft {
    width: 260px;
    float: left;
}
.confirmationDeliveryRight {
    width: 406px;
    float: right;
}
.confirmationDeliveryRight p {
    min-height: 200px;
}
.paymentTypeDetails {
    width: 370px;
    float: left;
}
.basketTotals.confirmation {
    width: 100%;
    float: left;
    overflow: hidden;
    border: 0;
}
.basketTotals.confirmation ul {
    margin: 0;
}
.basketTotals.confirmation li {
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
}
.basketTotals.confirmation .totalsFigures {
    width: 290px;
    float: right;
}
.basketTotals.confirmation .totalsDetail {
    width: 120px;
}




/*   10.7 CONFIGURE CERTIFICATES
------------------------------------------*/
.certificateImg {
    width: 70px;
    height: auto;
    float: left;
    margin-right: 16px;
}
.certificateActions {
    width: 500px;
    float: left;
}
.certificateActionButtons {
    position: relative;
}
.certificateActions h4,
.certificateActions p {
    width: 100%;
    margin-bottom: 16px;
}
.dontCustomise {
    margin-left: 20px;
}
.dontCustomise input {
    position: relative;
    top: 2px;
}
.certificateActions .disabledMask {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 250px;
    height: 30px;
    background: #fff;
    opacity: .6;
	/* CSS for older browsers */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	filter: alpha(opacity=60);
}
.certificateActions .noECerts .disabledMask {
    width: 160px;
}
.confCertsWrapper .certSettings {
    float: right;
    width: 400px;
}
.confCertsWrapper .certSettings > div {
    border: solid 1px #e0e0e0;
    border-top: 6px solid #e9e9e9;
    padding: 16px;
    clear: both;
    float: left;
    width: 100%;
}
.confCertsWrapper fieldset {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}
.confCertsWrapper .certSettings .field {
    width: 100%;
    margin-bottom: 0;
}
.confCertsWrapper .select-wrapper,
.confCertsWrapper select {
    width: 230px;
}
.confCertsWrapper label {
    text-align: left;
}
.confCertsWrapper .select-wrapper {
    background-position: 198px -40px;
}
.confCertsWrapper .sample-cert {
    background: url(/Images/WG%20Website/cert-layout.png) no-repeat 0 0;
    width: 450px;
    height: 630px;
    position: relative;
}
.confCertsWrapper .certLogos .field {
    margin-bottom: 16px;
}
.confCertsWrapper .logo-area {
    width: 86px;
    height: 360px;
    position: absolute;
    right: 30px;
    top: 164px;
}
.confCertsWrapper .logo-area .logo-area-inner {
    position: absolute;
    bottom: 0;
    max-width: 100%;
}
.confCertsWrapper .logo-area img {
    margin-bottom: 10px;
}
.confCertsWrapper .text-area {
    width: 250px;
    height: 100px;
    position: absolute;
    left: 70px;
    bottom: 41px;
}
.confCertsWrapper .text-area p {
    font-size: 0.9em;
}
.confCertsWrapper .btn {
    margin: 0 0 20px 0;
    float: left;
}
.confCertsWrapper .btn.add,
.confCertsWrapper .createCertTemplate {
    float: right;
}
.confCertsWrapper .selectTemplate,
.confCertsWrapper .enterTemplateName {
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
}
.confCertsWrapper .certSettings .templateSelector {
    width: auto;
    float: left;
}
.confCertsWrapper .templateDelete {
    float: right;
    margin: 5px 0 0 10px;
}
.confCertsWrapper .error {
    display: block;
}
.confCertsWrapper span.error {
    margin-left: 0;
}
.confCertsWrapper .certAddOrder,
.confCertsWrapper .createCertTemplate {
    margin-top: 16px;
}
.certToggleButtons.filterButtons {
    margin-bottom: 0;
}
.certToggleButtons .btn {
    width: 50%;
    height: 50px;
    margin: 0;
    line-height: 16px;
}
.enterTemplateName label {
    width: 100%;
    margin: 0 0 5px;
}
.enterTemplateName input {
    width: 100%;
}
.createSuccess,
.saveInProgress {
    padding: 0.5em;
}
.createSuccess {
    color: #009640;
    border: 1px solid #009640;
}
.saveInProgress {
    color: #127CA0;
    border: 1px solid #2e94b6;
    text-align: center;
}
.serviceErrorMessage {
    float: left;
    margin: 10px 0 0;
    padding: 10px;
    color: #e02d32;
    background-color: #fbdee2;
    border-color: #e68066;
}
.certficatesErrorMessage,
.globalCertficatesErrorMessage {
    padding: 5px;
}
.certficatesErrorMessage {
    margin: 10px 0 0;
}






/**************************************************************************************************
* 	11. FINANCIAL
**************************************************************************************************/
.financialHelp {
    float: right;
}
.financialSearch fieldset {
    padding: 20px 0;
}
.financialSearch label {
    width: 150px;
}
.financialSearch p.error {
    clear: both;
    margin-left: 150px;
}
.financialSearching {
    height: 200px;
}
.financialHelp {
    float: right;
}
.refNoTimeframe {
    float: none;
}


/* 11.1 INVOICES
------------------------------------------*/
.invoiceSearchFilter,
.statementSearch {
    width: 900px;
    margin: 10px auto;
}
.invoiceSearchFilter span,
.statementSearchFilter span {
    float: left;
    margin-right: 20px;
    line-height:34px;
}
.invoiceSearch {
    position: relative;
    width: 900px;
    min-height: 156px;
    margin: 0 auto 10px;
    background: #f6f6f6;
    border: 1px solid #ddd;
    overflow: hidden;
}
.invoiceSearchType {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 180px;
    background: #ddd;
}
.invoiceSearchType button {
    display: block;
    width: 100%;
    margin: 0;
    padding: 16px 12px;
    background: #ddd;
    border: 0;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #bbb;
    text-align: left;
    cursor: pointer;
}
.invoiceSearchType button.selected {
    position: relative;
    background: #ccc;
}
.invoiceSearchType button.selected:after {
    content: "";
    position: absolute;
    top: -1px;
    right: -25px;
    width: 26px;
    height: 52px;
    background: url("/Styles/img/wg-sprite.png") 0 -761px;
}
.invoiceSearchFields {
    width: 680px;
    float: left;
    margin-left: 200px;
    padding: 20px 0 0 20px;
}
.invoiceSearchFields .field {
    width: 100%;
}
.invoiceSearchFields input[type=text],
.invoiceSearchFields .select-wrapper,
.invoiceSearchFields select {
    width: 400px;
}
.invoiceSearchFields .select-wrapper {
    background-position: 366px -40px;
}
.invoiceSearchFields .disabled .mask {
    position: absolute;
    z-index: 10;
    left: 150px;
    width: 400px;
    height: 34px;
    background: #f6f6f6;
    opacity: .65;
}
.sinceMonth .select-wrapper,
.sinceMonth select,
.sinceYear .select-wrapper,
.sinceYear select {
    width: 119px;
}
.sinceMonth .select-wrapper,
.sinceYear .select-wrapper {
    background-position: 85px -40px;
}
.financialSearch input[name="invoicesFrom"] {
    position: relative;
    top: 2px;
    margin-left: 10px;
}
.financialSearch .checkGroup {
    float: left;
    margin-left: 10px;
}
.financialSearch .checkGroup > div {
    float: left;
    margin-right: 30px;
}
.financialSearch .checkGroup input {
    margin-right: 5px;
}
.financialSearch .checkGroup label {
    width: auto;
    float: left;
    text-align: left;
}
.financialSearch .field-submitButton {
    width: 900px;
    float: none;
    overflow: hidden;
    margin: 20px auto 10px;
    text-align: right;
}

.contactManagement .field-submitButton {
    width: 900px;
    float: none;
    overflow: hidden;
    margin: 20px auto 10px;
    text-align: right;
}

.field-submitButton .loading,
.field-submitButton p,
.field-submitButton .searchBtn {
    float: right;
}
.field-submitButton .loading,
.field-submitButton p {
    margin: 10px 10px 0;
}
.statementSearchFilter .searchBtn {
    margin-left: 100px;
}

.invoiceError {
    margin: 20px 0 40px;
}

/* 11.2 FINANCIAL SEARCH RESULTS
------------------------------------------*/
.financialResults tbody tr:hover {
    cursor: pointer;
}
.financialResults tbody tr:hover td {
    background: #ddd;
}


/* 11.3 INVOICE & CREDIT NOTE PAGES
------------------------------------------*/
.financialinvoicepage #content,
.financialcreditnotepage #content {
    overflow: hidden;
}
.financialinvoicepage .showLoading,
.financialcreditnotepage .showLoading {
    height: 100px;
    margin: 50px auto 100px;
}
.invoiceSummary,
.invoiceFooter {
    overflow: hidden;
    margin-bottom: 32px;
}
.invoiceSummary {
    padding-bottom: 32px;
    border-bottom: 1px solid #e0e0e0;
}
.invoiceInfo {
    width: 600px;
    float: left;
    padding-right: 30px;
    border-right: 1px solid #e0e0e0;
}
.invoiceInfo .info {
    width: 50%;
    float: left;
}
.invoiceInfo .info dl {
    margin-bottom: 26px;
    overflow: hidden;
}
.invoiceInfo .info dt,
.invoiceInfo .info dd {
    margin-bottom: 6px;
}
.invoiceInfo .info dt {
    width: 140px;
    float: left;
    clear: left;
    margin-right: 3px;
    color: #000;
    font-weight: bold;
    font-weight: 700;
}
.invoiceInfo .info dd {
    font-weight: 300;
}
.invoiceActions {
    width: 300px;
    float: right;
    text-align: right;
}
.invoiceActions .btn {
    width: 100px;
    margin-left: 1em;
}

/* Column picker */
.columnPicker {
    float: right;
    position: relative;
}
.columnPicker .select-wrapper .holder {
    margin-right: 0;
}
.columnPicker .checks {
    position: absolute;
    top: 100%;
    width: 241px;
    margin: 0;
    list-style: none;
    background: #fff;
    border: 1px solid #d0d0d0;
}
.columnPicker li {
    margin: 0;
    padding: 5px;
}
.columnPicker li:hover {
    background: #f0f0f0;
}
.columnPicker li input {
    float: right;
    margin-top: 2px;
}

.tableScroller {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
}
.scrollContent {
    width: 1000px;
}
.tableScroller table {
    width: auto;
    float: left;
}
.tableScroller .resultsList {
    display: none;
}
.tableScroller .resultsList.show {
    display: block;
}

/* Invoice itemised */
.invoiceItemised table {
    margin: 0;
    border-bottom: 3px solid #646363;
}
.invoiceItemised .soldTo {
    width: 128px;
}
.invoiceItemised .orderNo {
    width: 108px;
}
.invoiceItemised .lineNo {
    width: 92px;
}
.invoiceItemised .yourRef {
    width: 193px;
}
.invoiceItemised .description {
    width: 194px;
}
.invoiceItemised .itemUsage {
    width: 115px;
}
.invoiceItemised .grossValue {
    width: 120px;
}
.invoiceItemised .orderDate {
    width: 140px;
}
.invoiceItemised .vatRate {
    width: 100px;
}
.invoiceItemised .vatValue {
    width: 105px;
}
.invoiceItemised .currency {
    width: 100px;
}
.invoiceItemised thead a {
    padding: 1em 12px;
}
.invoiceItemised .alignRight {
    text-align: right;
}
.invoiceItemised tbody tr:hover td {
    cursor: pointer;
}

.invoiceFooter {
    width: 250px;
    float: right;
}
.invoiceFooter td {
    padding: 8px 1em;
}

.surchargeViewSpecifics.fa-sort-up {
    display: inline;
    position: relative;
    top: 3px;
    left: 3px;
}

.surchargeViewSpecifics.fa-sort-down {
    display: inline;
    position: relative;
    top: -2px;
    left: 3px;
}

.invoiceFooter td.specificSurchargeName {
    padding-left: 1.5em;
}

/* 11.4 STATEMENTS
------------------------------------------*/
.statementDetails .catalogueTabContent {
    overflow: hidden;
}
.statementSearch {
    overflow: hidden;
}
.statementSearch .searchBtn {
    float: right;
}
.printStatement {
    margin-top: 10px;
}
.statementDetails .resultsList tr.linkable {
    cursor: pointer;
}
.statementDetails tbody tr:hover td {
    background: #ddd;
}
.statementFooter {
    width: 440px;
    float: right;
}
.statementFooter h5 {
    float: left;
    line-height: 40px;
}
.statementTotal {
    width: 225px;
    float: right;
    margin-left: 18px;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid #b4b4b4;
}
.statementFooterLabel {
    width: 150px;
    float:left;
    padding: 10px 12px;
    background: #f0f0f0;
    border-right: 1px solid #b4b4b4;
    text-align: right;
}
.statementFooterDetail {
    width: 70px;
    float: left;
    padding: 10px 16px;
}
.financialTabContent p.statementError {
    margin: -10px 0 1em 0;
}



/* 11.5 FINANCIAL HELP
------------------------------------------*/
.helpSummary,
.waysToPay {
    overflow: hidden;
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid #e0e0e0;
}

/* Help summary */
.financeHelpContacts > div {
    width: 29%;
    float: left;
    margin: 0 2% 32px;
}
.helpSummaryLabel,
.helpSummaryAddress {
    float: left;
}
.helpSummaryLabel {
    margin-bottom: 10px;
}
.helpAddressLabel {
    display: block;
    margin-bottom: 10px;
}
.helpSummary dt,
.helpSummary dd {
    float: left;
}
.helpSummary dt {
    width: 80px;
    clear: left;
}

/* Help - Ways to pay */
.waysToPay > div {
    width: 44%;
    float: left;
    margin: 0 3% 32px;;
}
.waysToPay ul {
    list-style: none;
    margin: 0;
}
.waysToPay li {
    overflow: hidden;
}
.waysToPayLabel,
.waysToPayDetail {
    float: left;
}
.waysToPayLabel {
    width: 150px;
}
.waysToPay .bankDetails {
    margin-bottom: 20px;
}
.waysToPay .iban {
    margin-top: 20px;
}

/* Help additional */
.helpAdditional {
    overflow: hidden;
    margin-bottom: 32px;
}








/**************************************************************************************************
* 	12. ACCOUNT PROFILE SETTINGS
**************************************************************************************************/
.accountProfileLightbox {
    width: 950px;
    padding: 0;
    background: #e9e9e9;
}
.accountProfileWrapper {
    position: relative;
}
.accountProfileContent {
    display: block;
    min-height: 200px;
    margin-left: 150px;
    padding: 30px;
    background: #fff;
    border-left: 1px solid #ccc;
}
.profileSummary,
.accountProfileContent .editYourDetails,
.accountProfileSection,
.accountProfileContent .superCentreSwitcher,
.accountProfileContent .adminList,
.accountProfileContent .customerService {
    margin-bottom: 32px;
}
.accountProfileContent .adminList,
.accountProfileContent .customerService {
    border-bottom: 1px solid #d0d0d0;
}
.accountProfileContent .localSalesTeam {
    padding-top: 20px;
    border-top: 1px solid #d0d0d0;
}
.accountProfileContent h2,
.profileSummary {
    margin-bottom: 2em;
}
.accountProfileContent .field input[type=text],
.accountProfileContent .field input[type=email],
.accountProfileContent .field input[type=password],
.accountProfileContent .field input[type=tel],
.accountProfileContent .field input[type=search],
.accountProfileContent .field input[type=file],
.accountProfileContent .field select,
.accountProfileContent .field .select-wrapper {
    width: 220px;
}
.accountProfileContent .field .select-wrapper {
    background-position: 187px -40px;
}
.accountProfileContent .field label {
    position: relative;
    padding-right: 15px;
}
.accountProfileContent .field .mandatory {
    position: absolute;
    top: 0;
    right: 5px;
}
.accountProfileActions {
    text-align: right;
}
.accountProfileActions .btn {
    margin-left: 10px;
}
.field .longLabel {
    margin-top: 0;
    line-height: 20px;
}
.field .wideLabel {
    width: 160px;
}
.accountProfileContent p.error,
.accountProfileContent ul.error,
.manageUsersLightbox p.error,
.miniBasketLightbox p.errorList {
    clear: left;
    margin: 0 0 1em 130px;
    color: #e02d32;
    font-weight: bold;
    font-weight: 700;
}
.miniBasketLightbox p.errorList {
    margin-left: 230px;
}
.miniBasketLightbox p.errorManageUsers {
    width: 242px;
    margin-left: 130px;
}
.accountProfileContent p.wideError,
.accountProfileContent ul.error {
    margin-left: 160px
}
.pendingChanges {
    color: red;
    text-align: center;
    border: 1px red solid;
    padding: 10px;
    margin: 10px 0 20px;
}
.addressContainer {
    position: relative;
    float: left;
}
.hasPendingChanges address, 
.hasPendingDeletion address {
    min-height: 60px;
}
.hasPendingChanges address {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}
.hasPendingDeletion address {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebcccc;
}
.statusBox {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 15px;
    margin: 10px;
    font-size: 11px;
    color: white;
}
.statusBox.pendingChangesStatus {
    background: #DDAD30;
}
.statusBox.pendingDeletionStatus {
    background: #a94442;
}

.noChangesMade {
    color: #127CA0;
    border: 1px solid #2e94b6;
    text-align: center;
    padding: 10px;
    margin: 10px 0 20px;
}

/* 12.1 ACCOUNT PROFILE LIGHTBOX TABS
------------------------------------------*/
.accountProfileTabs {
    position: absolute;
    top: 20px;
    left: 21px;
    width: 130px;
    margin: 0;
    list-style: none;
}
.accountProfileTabs li,
.accountProfileTabs a {
    display: block;
    margin-bottom: 10px;
}
.accountProfileTabs a {
    padding: 10px;
    background: #dedede;
    border: 1px solid #ccc;
    font-size: 1.143em; /* 16px */
    color: #000;
}
.accountProfileTabs a.selected {
    background: #fff;
    border-right: 0;
}



/* 12.2 ACCOUNT PROFILE - PROFILE SETTINGS
------------------------------------------*/
.accountProfileContent .editYourDetails {
    overflow: hidden;
    padding: 1em;
    background: #e9e9e9;
}
.denotesMandatory {
    margin-bottom: 2em;
}
.currentEmail {
    width: 570px;
    float: left;
}
.currentEmail span {
    position: relative;
    top: 1px;
}
.currentEmail .btn {
    margin-left: 20px
}
.updateEmail {
    width: 100%;
    clear: both;
    padding-top: 20px;
    border-top: 1px dashed #d0d0d0;
}
.emailNotifications .btn,
.lockedUser .btn {
    margin-left: 10px;
}
.updateEmail .field {
    margin-bottom: 10px;
}
.updateEmail p.error {
    margin-left: 130px;
}
.profileTelephone .formHelperText {
    margin-left: 130px;
    margin-bottom: 0;
}



/* 12.3 ACCOUNT PROFILE - SECURITY SETTINGS
------------------------------------------*/
.accountProfileContent .field input.passwordUnmask {
    position: absolute;
    left: 161px;
    top: 1px;
    width: 218px;
    height: 30px;
    padding: 5px;
    background: #fff;
    border: 0;
}
.accountProfileContent .error input.passwordUnmask {
    background: #fbdee2;
}
.accountProfileContent .field .maskTrigger {
    position: absolute;
    top: 2px;
    left: 385px;
}
.profileSecuritySection .editYourDetails {
    overflow: visible;
}



/* 12.4 ACCOUNT PROFILE - HELP DETAILS
------------------------------------------*/
.accountProfileContent .superCentreSwitcher label {
    width: 70px;
}
.helpTable > tbody > tr {
    border-top: 1px dashed #d0d0d0;
}
.helpTable > tbody > tr.hide {
    display: none;
}
.helpTable > tbody > tr td {
    padding: 0;
    background: #fff;
}
.helpTable > tbody > tr > td {
    padding: 20px 10px 20px 0;
    font-size: 0.928em; /* 13px */
}
.helpTable > tr td td {
    margin: 0;
}
.helpTable > tr + tr td {
    padding-top: 10px;
}
.viewMoreAdmins {
    margin: 0 0 20px 0;
}
.customerService .filterButtons {
    margin: 0 0 20px;
}
.custServicePanel {
    display: table-row;
}
.custServicePanel.show {
    display: table-row;
}
.helpTable .helpTableAddressLabel, 
.helpTable .helpTableWideLabel {
    padding-right: 10px;
}
.helpTable .helpTableAddressLabel {
    width: 70px;
}
.helpTable .helpTableWideLabel {
    width: 190px;
    padding-right: 10px;
    text-align: right;
}








/**************************************************************************************************
* 	13. CENTRE SETTINGS
**************************************************************************************************/
.centreSettings .superCentreSwitcher,
.centreSettings .yourAccount {
    margin-bottom: 32px;
}
.centreSettingsHelp {
    float: right;
}
.yourAccount {
    overflow: hidden;
}
.yourAccountBlock {
    padding: 20px;
    background: #f6f6f6;
    border: 1px solid #ddd;
}
.tabContent .yourAccountBlock {
    padding: 10px;
}
.yourAccount h3,
.yourAccount > div {
    margin-right: 50px;
}
.yourAccount h3 {
    float: left;
    margin-bottom: 0;
    line-height: 40px;
}
.yourAccount > div {
    width: 295px;
    float: left;
    background: #fff;
    border: 1px solid #b4b4b4;
}
.yourAccountLabel {
    width: 130px;
    float:left;
    padding: 10px;
    background: #f0f0f0;
    border-right: 1px solid #b4b4b4;
    text-align: right;
}
.yourAccountDetail {
    width: 160px;
    float: left;
    padding: 10px;
}
.disabledForUser {
    opacity: 0.5;
    overflow: hidden;
}


/* 13.1 CENTRE DETAILS
------------------------------------------*/
.centre .tabContent {
    padding: 20px;
}
.centreSettingsBlock {
    overflow: hidden;
    margin-bottom: 0;
}
.centreSettingsBlock + .centreSettingsBlock {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e6e6e6;
}
.centreSettingsBlock fieldset {
    clear: both;
}
.centreSettingsBlock h4 {
    width: 150px;
    float: left;
    font-weight: normal;
    font-weight: 400;
}
.centreAddressCurrent {
    position: relative;
    width: 750px;
    float: left;
}
.centreAddressCurrent address,
.centreAddressCurrent .btn {
    float: left;
}
.centreAddressCurrent address,
.billingAddressEmail {
    width: 500px;
}
.centreAddressCurrent .btn,
.centreAddressCurrent .btn-group {
    position: absolute;
    bottom: 0;
    left: 510px;
}
    .centreAddressCurrent .btn-group .btn {
        position: relative;
        left: 0;
        bottom: 0;
    }
        .centreAddressCurrent .btn-group .btn + .btn {
            margin-left: 5px;
        } 
.billingAddressEmail {
    display: block;
    margin-bottom: 10px;
}
.billingAddressEmail.pendingAddressEmail {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;    
}

/* DELIVERY ADDRESSES */
.deliveryAddressSettings.centreAddress {
    margin-top: 50px;
    padding-top: 50px;
}
.deliveryAddressSettings h4 {
    float: none;
}
.deliveryAddressSettings .userKey {
    float: right;
    margin-bottom: 10px;
}
.deliveryAddressActions {
    width: 170px;
    text-align: right;
}
.newDeliveryAddress {
    float: right;
    clear: both;
}
.deliveryAddressSettings tr.pending td,
.deliveryAddressSettings .userKey .pending {
    background: #fcf8e3 !important;
    color: #8a6d3b;
}
.deliveryAddressSettings tr.pendingDeletion td,
.deliveryAddressSettings .userKey .pendingDelete {
    background-color: #f2dede !important;
    color: #a94442;
    text-decoration: none;
}

/* 13.2 EDIT ADDRESS LIGHTBOX
------------------------------------------*/
.addressAddressee,
.addressLookup {
    width: 100%;
}
.addressAddressee {
    padding-bottom: 30px;
    border-bottom: 1px solid #e6e6e6;
}
.centreAddressActions {
    clear: both;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #e6e6e6;
    text-align: right;
}

.defaultDelivery input[type=checkbox] {
    position: relative;
    top: 2px;
}


/* 13.3 CENTRE PREFERENCES
------------------------------------------*/
.centrePrefs h4 {
    width: 100%;
}

.editAddressLightbox .lightboxContent .wrapper {
    overflow: visible;
}
.editAddressLightbox .showLoading,
.centrePrefs .showLoading,
.manageUsersLightbox.showLoading {
    height: 280px;
}
.editAddressLightbox h1.loading,
.centrePrefs h1.loading,
.manageUsersLightbox h1.loading {
    width: 270px;
}
.centrePrefs .wideLabel {
    width: 250px;
    margin-bottom: 10px;
    text-align: left;
}
.centrePrefs .radioSet {
    width: 650px;
    float: left;
    position: relative;
    top: 5px;
}
.centrePrefs .radioSet input {
    margin-right: 6px;
}
.centrePrefs .radioSet label {
    position: relative;
    top: -1px;
    width: 150px;
    float: none;
    margin-right: 20px;
    cursor: pointer;
}
.ecertButton {
    float: left;
    clear: left;
}
.lightboxBillingEmail p.error,
.centrePrefs p.error {
    clear: left;
    margin: 10px 0 0;
    color: #e02d32;
    font-weight: bold;
    font-weight: 700;
}
.lightboxBillingEmail p.error {
    margin: 10px 0 20px 130px;
}
.centrePrefs p.prefRadioError {
    margin-left: 250px;
}
.field.billingEmail {
    margin: 0;
}


/* 13.4 MANAGE USERS
------------------------------------------*/
.manageUsers .usersHeader {
    width: 500px;
}
.manageUsers .usersHeader span {
    display: block;
    font-size: 0.875em; /* 14px */
}
.manageUsers .resultsList {
    font-size: 0.928em; /* 13px */
}
.manageUsers .lastLogin {
    width: 80px;
}
.manageUsers .userActions {
    width: 142px;
    padding-left: 1em;
}
.manageUsers .editReinstate {
    width: 85px;
}
.manageUsers .userLocked {
    width: 60px;
    text-align: center;
}
.manageUsers thead .userLocked i.fa-lock {
    position: relative;
    top: 3px;
    display: inline;
    margin-right: 5px;
    font-size: 1.143em; /* 16px */
}
.manageUsers td.lastLogin {
    width: 100px;
}
.manageUsers thead td.userActions:hover {
    background: #646363;
}
.manageUsers tbody .userLocked a {
    position: relative;
    top: 5px;
    color: #999;
    font-size: 1.857em; /* 26px */
}
.manageUsers tbody .userLocked a:hover {
    color: #000;
}
.centreSectionActions {
    text-align: right;
}
.manageUsers .centreSectionActions {
    width: 380px;
    float: right;
}
.contactOnly {
    display: block;
    color: #999;
    font-size: 10px;
}
.userKey {
    display: block;
    margin-top: 10px;
}
.userKey span {
    display: inline-block;
    margin-left: 5px;
    padding: 5px;
    font-size: 0.857em; /* 12px */
}
.userKey .pending,
tr.pending td {
    background: #FFe9e9 !important;
}
.pendingDelete {
    text-decoration: line-through;
    color: #D00;
}

/* Users lightbox */
.manageUsersLightbox span.select-wrapper {
    margin-top: 0;
}
.manageUsersLightbox .radioSet,
.manageUsersLightbox .checkSet {
    position: relative;
    top: 5px;
    width: 650px;
    float: left;
}
.manageUsersLightbox .checkSet {
    width: 300px;
}
.manageUsersLightbox .radioSet input,
.manageUsersLightbox .radioSet label,
.manageUsersLightbox .checkSet input,
.manageUsersLightbox .checkSet > label {
    float: left;
}
.manageUsersLightbox .radioSet input,
.manageUsersLightbox .checkSet input {
    margin: 2px 6px 0;
}
.manageUsersLightbox .radioSet label,
.manageUsersLightbox .checkSet > label {
    width: 270px;
    margin: 0 0 20px;
    text-align: left;
    cursor: pointer;
}
.manageUsersLightbox .qualityAdmin {
    margin-top: 20px;
}
.manageUsersLightbox .qualityAdmin label {
    width: 115px;
    margin-top: 5px;
}
.manageUsersLightbox .centreSettingsBlock + .centreSettingsBlock,
.manageUsersLightbox .centreAddressActions {
    margin-top: 0;
}
.manageUsersLightbox .centreSettingsBlock {
    overflow: initial;
}
.manageUsersLightbox .checkSet span,
.manageUsersLightbox .radioSet > span {
    width: 325px;
    float: left;
}
.manageUsersLightbox .radioSet > span {
    position: relative;
    margin-bottom: 20px;
}
.manageUsersLightbox .radioSet > span label {
    margin-bottom: 0;
}
.manageUsersLightbox .radioSet > span a,
.manageUsersLightbox .checkSet a {
    margin-left: 26px;
    font-size: 0.857em; /* 12px */
}
.manageUsersLightbox .radioSet > span a {
    float: left;
    clear: left;
}
.manageUsersLightbox .checkSet a {
    display: block;
}
.manageUsersLightbox .updateEmail {
    padding-top: 0;
    border: 0;
}
.lockedUser {
    margin-left: 130px;
}
.manageUserSuccessMessage h4 {
    width: 100%;
}



/**************************************************************************************************
* 	14. MAINTENANCE REPORTS
**************************************************************************************************/

.maintenanceReports {
    margin-bottom: 32px;
}

.newOldSwitcher {
    padding-bottom: 10px;
}

/**************************************************************************************************
* 	15. ELIGIBILITY SEARCH
**************************************************************************************************/
section.searchType{
    margin-bottom: 10px;
}
section.searchType .filterButtons {
    margin-bottom: 10px;
}
.eligibilitySearch__details .eligibilitySearch__detailsFieldset {
    border: 2px solid #e6e6e6;
    padding: 28px 1em 1em;
}
.eligibilitySearch__details .eligibilitySearch__detailsFieldset .field {
    margin-bottom: 10px;
}
.eligibilitySearch__details .eligibilitySearch__detailsFieldset .field--right {
    text-align: right;
}
.eligibilitySearch__details .eligibilitySearch__detailsFieldset .field--right label {
    float: none;
}
.eligibilitySearch__details .eligibilitySearch__detailsFieldset .field--right .holder {
    text-align: left;
}
.eligibilitySearch__details .eligibilitySearch__detailsFieldset .field--right .select-wrapper select{
    right: 0;
}
.eligibilitySearch__details .eligibilitySearch__detailsFieldset .field label {
    width: 140px;
}
.eligibilitySearch__details .eligibilitySearch__detailsFieldset .error-message {
    margin-left: 140px;
    margin-bottom: 0;
    margin-top: 5px;
    color: #e02d32;
}

.eligibilitySearch__resultsTable thead td {
    vertical-align: middle;
    padding: 1em;
}
.eligibilitySearch__resultsTable thead td:hover {
    background: #767676;
}
.eligibilitySearch__resultsTable thead a{
    padding: 0.1em 0.5em;
    position: relative;
}
.eligibilitySearch__resultsTable tbody tr {
    cursor: pointer;
}
.eligibilitySearch__resultsTable tbody td {
    vertical-align: middle;
    padding: 1em;
    padding: 1em;
}
.eligibilitySearch__resultsTable tbody td.centreNumber {
    min-width: 67px;
}
.eligibilitySearch__resultsTable tbody td.asessmentCode {
    min-width: 70px;
}
.eligibilitySearch__resultsTable tbody td.yourReference {
    min-width: 135px;
}
.eligibilitySearch__resultsTable tbody td.window {
    min-width: 77px;
}
.eligibilitySearch__details .field .select-wrapper.ng-invalid, .eligibilitySearch__details .field input.ng-invalid {
    color: #e02d32;
    background-color: #fbdee2;
    border-color: #e68066;
}
.fieldset-bg {
    overflow: hidden;
    margin-bottom: 10px;
    padding: 28px 1em;
    background: #e9e9e9;
}
.fieldset-bg .field{
    margin-bottom: 10px;
}
.fieldset-bg .field--right {
    clear: none;
}
.field.field--disabled-true .select-wrapper {
    background: transparent url("/Styles/img/wg-sprite.png") no-repeat 210px -40px;
}
.table-outer {
    border: 2px solid #e6e6e6;
    margin-bottom: 20px;
}
.table-outer .candidatesLoadingMessage{
    padding: 20px;
}
.table-outer .candidatesLoadingMessage h1{
    margin-bottom: 0;
}
.table-outer .resultsLoadingMessage {
    padding: 20px;
}
.table-outer .resultsLoadingMessage h1{
    margin-bottom: 0;
}
.table-outer .resultsList{
    margin-bottom: 0;
}
.eligibilityBookingDetailFeedback textarea {
    width: 704px;
    max-width: calc(100% - 130px);
}
.noResults{
    margin: 10px;
}
.noResults h4{
    margin-bottom: 0px;
}

.feedbackActions {
    text-align: right;
    max-width: 834px;
}
.feedbackActions {
    text-align: right;
    max-width: 834px;
}
.feedbackActions .feedbackAction{
    margin-left: 10px;
    width: 165px;
}
.feedbackActions .feedbackAction--action-required {
    
}
.feedbackActions .feedbackAction--approve {
    
}

.eligibilityDeleteConfirmationHolder {
    padding-top: 50px;
    min-height: 250px;
}

.error-hover {
    position: relative;
    display: inline-block;
    color: #e02d32;
    border: 1px solid #e02d32;
    border-radius: 10px;
    background-color: #fbdee2;
    width: 20px;
    margin-left: 5px;
    padding-left: 6px;
    font-weight: bold;
    cursor: default;
}
.error-hover span {
    display: none;
    position: absolute;
    right: 85px;
    box-shadow: #666 0px 0px 4px;
    padding: 5px;
    top: -5px;
    width: auto;
    z-index: 100;
    background: white;
    border-radius: 3px;
    width: 280px;
    color: #e02d32;
    background-color: #fbdee2;
    border-color: #e68066;
}
.error-hover:hover span{
    display: block;
}

.gradeDeclarationConfirmation{
    margin-bottom: 5px;
}
.gradeDeclarationConfirmation input {
    top: 2px;
    position: relative;
    margin-right: 5px;
}
.altResultsBasketActions ul {
    margin-left: 19px;
}
.altResultsBasketActions ul li{
    margin-top: 5px;
}


/**************************************************************************************************
* 	16. EVIDENCE MANAGEMENT SEARCH
**************************************************************************************************/

.evidenceManagementSearch__details .evidenceManagementSearch__detailsFieldset {
    border: 2px solid #e6e6e6;
    padding: 28px 1em 1em;
}

    .evidenceManagementSearch__details .evidenceManagementSearch__detailsFieldset .field {
        margin-bottom: 10px;
    }

    .evidenceManagementSearch__details .evidenceManagementSearch__detailsFieldset .field--right {
        text-align: right;
    }

        .evidenceManagementSearch__details .evidenceManagementSearch__detailsFieldset .field--right label {
            margin-left: 78px;
        }

        .evidenceManagementSearch__details .evidenceManagementSearch__detailsFieldset .field--right .holder {
            text-align: left;
        }

        .evidenceManagementSearch__details .evidenceManagementSearch__detailsFieldset .field--right .select-wrapper select {
            right: 0;
        }

    .evidenceManagementSearch__details .evidenceManagementSearch__detailsFieldset .field label {
        width: 140px;
    }

    .evidenceManagementSearch__details .evidenceManagementSearch__detailsFieldset .error-message {
        display: inline-block;
        margin-left: 140px;
        margin-bottom: 0;
        margin-top: 5px;
        color: #e02d32;
    }

.evidenceManagementSearch__resultsTable thead td {
    vertical-align: middle;
    padding: 1em;
}

    .evidenceManagementSearch__resultsTable thead td:hover {
        background: #767676;
    }

.evidenceManagementSearch__resultsTable thead a {
    padding: 0.1em 0.5em;
    position: relative;
}

.evidenceManagementSearch__resultsTable tbody tr {
    cursor: pointer;
}

.evidenceManagementSearch__resultsTable tbody td {
    vertical-align: middle;
    padding: 1em;
    padding: 1em;
}

    .evidenceManagementSearch__resultsTable tbody td.centreNumber {
        min-width: 67px;
    }

    .evidenceManagementSearch__resultsTable tbody td.asessmentCode {
        min-width: 70px;
    }

    .evidenceManagementSearch__resultsTable tbody td.yourReference {
        min-width: 135px;
    }

    .evidenceManagementSearch__resultsTable tbody td.window {
        min-width: 77px;
    }

.evidenceManagementSearch__details .field .select-wrapper.ng-invalid, .evidenceManagementSearch__details .field input.ng-invalid {
    color: #e02d32;
    background-color: #fbdee2;
    border-color: #e68066;
}

.evidenceManagementSearch__details .submissionDateDrops {
    width: 242px;
    float: left;
}

.evidenceManagementSearch__details .field--right .submissionDateDrops {
    float: right;
}

.evidenceManagementSearch__details .submissionDateDrops > div {
    float: left;
}

.evidenceManagementSearch__details .submissionDateDrops .holder {
    font-size: 0.928em; /* 13px */
}

.evidenceManagementSearch__details .submissionDateDrops > div + div {
    margin-left: 4px;
}

.evidenceManagementSearch__details .submissionDateDrops .select-wrapper,
.evidenceManagementSearch__details .submissionDateDrops select {
    width: 73px;
}

.evidenceManagementSearch__details .startDateMonth .select-wrapper,
.evidenceManagementSearch__details .startDateMonth select,
.evidenceManagementSearch__details .endDateMonth .select-wrapper,
.evidenceManagementSearch__details .endDateMonth select,
.evidenceManagementSearch__details .dobMonth .select-wrapper,
.evidenceManagementSearch__details .dobMonth select {
    width: 87px;
}

.evidenceManagementSearch__details .submissionDateDrops .select-wrapper {
    background-position: 41px -40px;
}

    background-position: 53px -40px;
}

.evidenceManagement__assessmentCode, .evidenceManagement__qualificationNumber {
    width: 242px;
    height: 45px;
}

.evidenceUploadProgress {
    padding: 10px;
}

/**************************************************************************************************
* 	17. EVIDENCE MANAGEMENT DETAILS
**************************************************************************************************/

.evidenceManagementDetailsCtrl.wrapper {
    overflow: unset;
}

.evidenceManagementDetailsCtrl .tagEditorWrapper {
    width: 200px;
    padding-top: 4px;    
}

.evidenceManagementDetailsCtrl .tagEditorWrapper.editing {
    width: 300px;
    background-color: #fff;
    border: 1px solid;
    border-color: #767676;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 2px;
    margin-left: 0;
    z-index: 10;
    resize: both;
}

.evidenceManagementDetailsCtrl .tagEditButtonsWrapper {
    display: inline-block;
    position: absolute;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 5px;
    line-height: 26px;    
}

.evidenceManagementDetailsCtrl .selectedTagsWrapper {
    display: inline-block;
    max-width: 170px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #fff;
    padding-left: 6px;
    min-height: 26px;
}

.evidenceManagementDetailsCtrl .tagEditorWrapper.editing .selectedTagsWrapper {
    white-space: normal;
    margin-right: 12px;
    max-width: none;
    word-break: break-word;
}

.evidenceManagementDetailsCtrl .fileTag {
    background-color: #a19d9d;
    color: #fff;
    margin-right: 2px;
    padding: 4px;
    line-height: 30px;
    white-space: nowrap;
}

.evidenceManagementDetailsCtrl .tagCell {
    padding: 0;
    width: 200px;
    vertical-align: middle;
}

.evidenceManagementDetailsCtrl .tagCellInnerWrapper {
    position: relative;
}

.evidenceManagementDetailsCtrl .tagCell.editing {
    vertical-align: top;
}

.evidenceManagementDetailsCtrl .tagSelect {
    width: 100%;
    border-right: 0;
    border-left: 0;
    border-bottom: 0;
    border-color: #767676;
}

.evidenceManagementDetailsCtrl .tagEditorCloseButton {
    position: absolute;
    top: 0;
    right: 2px;
    color: #000;
}

.evidenceManagementDetailsCtrl .fullScreenOverlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9;
}

.evidenceManagementDetailsBasketActions {
    
    width: 100%;
    display: flex;
    align-content: space-between;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 20px;
}
    
.evidenceManagementDetailsBasketActions .saveEvidence {
    margin-bottom: 20px;
}

.evidenceManagementDetailsBasketActions .submitEvidence {
    margin-bottom: 20px;
}

.evidenceManagementDetailsBasketActions .workNotSubmitted {
    margin-bottom: 20px;
}

.evidenceManagementDetailsBasketActions .unlock {
    margin-bottom: 20px;
    margin-left: auto
}


/**************************************************************************************************
* 	18. ALTERNATIVE RESULTS SEARCH
**************************************************************************************************/

.alternativeResultsSearch__details .alternativeResultsSearch__detailsFieldset {
    border: 2px solid #e6e6e6;
    padding: 28px 1em 1em;
}

.alternativeResultsSearch__details .alternativeResultsSearch__detailsFieldset .field {
    margin-bottom: 10px;
}

.alternativeResultsSearch__details .alternativeResultsSearch__detailsFieldset .field--right {
    text-align: right;
}

.alternativeResultsSearch__details .alternativeResultsSearch__detailsFieldset .field--right label {
    margin-left: 78px;
}

.alternativeResultsSearch__details .alternativeResultsSearch__detailsFieldset .field--right .holder {
    text-align: left;
}

.alternativeResultsSearch__details .alternativeResultsSearch__detailsFieldset .field--right .select-wrapper select {
    right: 0;
}

.alternativeResultsSearch__details .alternativeResultsSearch__detailsFieldset .field label {
    width: 140px;
}

.alternativeResultsSearch__details .alternativeResultsSearch__detailsFieldset .error-message {
    margin-left: 140px;
    margin-bottom: 0;
    margin-top: 5px;
    color: #e02d32;
}

.alternativeResultsSearch__resultsTable thead td {
    vertical-align: middle;
    padding: 1em;
    padding-left: 0.5em;
}

.alternativeResultsSearch__resultsTable thead td:hover {
    background: #767676;
}

.alternativeResultsSearch__resultsTable thead a {
    padding: 0.1em 0.5em;
    position: relative;
}

.alternativeResultsSearch__resultsTable tbody tr {
    cursor: pointer;
}

.alternativeResultsSearch__resultsTable tbody td {
    vertical-align: middle;
    padding: 1em;
    padding: 1em;
}

.alternativeResultsSearch__resultsTable tbody td.centreNumber {
    min-width: 67px;
}

.alternativeResultsSearch__resultsTable tbody td.asessmentCode {
    min-width: 70px;
}

.alternativeResultsSearch__resultsTable tbody td.yourReference {
    min-width: 135px;
}

.alternativeResultsSearch__resultsTable tbody td.window {
    min-width: 77px;
}

.alternativeResultsSearch__details .field .select-wrapper.ng-invalid, .alternativeResultsSearch__details .field input.ng-invalid {
    color: #e02d32;
    background-color: #fbdee2;
    border-color: #e68066;
}

.alternativeResultsSearch__details .submissionDateDrops {
    width: 242px;
    float: left;
}

.alternativeResultsSearch__details .field--right .submissionDateDrops {
    float: right;
}

.alternativeResultsSearch__details .submissionDateDrops > div {
    float: left;
}

.alternativeResultsSearch__details .submissionDateDrops .holder {
    font-size: 0.928em; /* 13px */
}

.alternativeResultsSearch__details .submissionDateDrops > div + div {
    margin-left: 4px;
}

.alternativeResultsSearch__details .submissionDateDrops .select-wrapper,
.alternativeResultsSearch__details .submissionDateDrops select {
    width: 73px;
}

.alternativeResultsSearch__details .startDateMonth .select-wrapper,
.alternativeResultsSearch__details .startDateMonth select,
.alternativeResultsSearch__details .endDateMonth .select-wrapper,
.alternativeResultsSearch__details .endDateMonth select,
.alternativeResultsSearch__details .dobMonth .select-wrapper,
.alternativeResultsSearch__details .dobMonth select {
    width: 87px;
}

.alternativeResultsSearch__details .submissionDateDrops .select-wrapper {
    background-position: 41px -40px;
}

.alternativeResultsSearch__details .startDateMonth .select-wrapper,
.alternativeResultsSearch__details .endDateMonth .select-wrapper,
.alternativeResultsSearch__details .dobMonth .select-wrapper {
    background-position: 53px -40px;
}

.swal2-popup {
    font-size: 13px !important;
}

.swalmodalPopup > .swal2-html-container > h3 {
    text-align: left !important;
    margin-left: 40px !important;
}
.swalmodalPopup > .swal2-html-container > ul {
    text-align: left !important;
    margin-left: 70px !important;
}
.Hidecontent {
    display: none !important;
}

.padding-bottom{
    padding-bottom: 15px !important;
}

/* Custom class for the SweetAlert actions container */
.swal-actions-custom {
    justify-content: flex-end !important; /* Align buttons to the right */
    margin-right: 1rem; /* Optional: Add space to the right edge */
}

/* Optional: Specific style for confirm button */
.swal-confirm-right {
    margin-left: auto; /* Pushes the button to the right */
}

.swal-close-left {
    margin-right: auto; /* Pushes the button to the right */
}

.swal-title-left {
    text-align: left !important; /* Align title text to the left */
    font-size: 13px !important; /* Set the font size to 13px */
    margin-left: 1rem; /* Add optional left margin for spacing */
}

/**************************************************************************************************
* 	19. WEB IC PAGE
**************************************************************************************************/
.webICcentred {
    position: fixed;
    top: 30%;
    left: 0;
    right: 0;
    width: 80%;
    margin: auto;
    text-align: center;
}
html.webICPage {
    height: 100%;
}
.webICPage body {
    height: 100%;
    overflow: hidden;
    min-width: 445px;
}
.webICPage form {
    height: 100%;
}
.webICPage #webIcSessionDiv {
    height: 100%;
}
.webICPage #webIcIframeWrapperDiv {
    height: 100%;
    padding-top: 15px;
    padding-bottom: 107px;
    border-top: 4px solid #add8e6;
    background-color: #e7f4ff;
}
.webICPage #webIcIframe {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-top: 1px solid #b0c4de
}
.webICPage #siteHeader {
    margin: 0;
    border-bottom: 1px solid #7EB3FC;
    height: 64px;
}
.webICPage #siteHeader .logos {
    float: none;
    margin: 0;
}
.webICPage .webICcentred .walledGardenLogo {
    border: 0;
    padding: 0;
    margin-bottom: 40px;
}
.webICPage #siteHeader .logos .walledGardenLogo {
    border: 0;
    padding: 0;
    margin-top: -10px;
}
.webICPage #siteHeader .profileCard {
    padding-top: 5px;
    padding-bottom: 3px;
    width: auto;
}
.webICPage #siteHeader .profileCard .centre {
    width: auto;
}
.webICBanner {
    height: 43px;
}
.webICBanner .fixed-banner {
    color: #215a9a;
    border-bottom: 1px solid #7EB3FC;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 1.9em;
    font-weight: bold;
    background-image: url("/Styles/img/webic-banner-bg.gif");
    height: 43px;
    vertical-align: middle;
    width: 100%;
}
.webICBanner .logo-area {
    background-image: url("/Styles/img/webic-banner-logo.png");
    height: 100%;
    width: 410px;
    display: inline-block;
}
.webICBanner .title-area {
    display: inline;
    position: absolute;
    padding-top: 12px;
    left: 0;
    width: 100%;
    text-align: center;
}
body.webIcView {
    padding-top: 10px;
}
/**************************************************************************************************
* 	20. Learner Script Page
**************************************************************************************************/

.learnerScriptsSearch__details .learnerScriptsSearch__detailsFieldset {
    border: 2px solid #e6e6e6;
    padding: 28px 1em 1em;
}

    .learnerScriptsSearch__details .learnerScriptsSearch__detailsFieldset .field {
        margin-bottom: 10px;
    }

    .learnerScriptsSearch__details .learnerScriptsSearch__detailsFieldset .field--right {
        text-align: right;
    }

        .learnerScriptsSearch__details .learnerScriptsSearch__detailsFieldset .field--right label {
            margin-left: 78px;
        }

        .learnerScriptsSearch__details .learnerScriptsSearch__detailsFieldset .field--right .holder {
            text-align: left;
        }

        .learnerScriptsSearch__details .learnerScriptsSearch__detailsFieldset .field--right .select-wrapper select {
            right: 0;
        }

    .learnerScriptsSearch__details .learnerScriptsSearch__detailsFieldset .field label {
        width: 140px;
    }

    .learnerScriptsSearch__details .learnerScriptsSearch__detailsFieldset .error-message {
        display: inline-block;
        margin-left: 140px;
        margin-bottom: 0;
        margin-top: 5px;
        color: #e02d32;
    }

.learnerScriptsSearch__details .field .select-wrapper.ng-invalid, .learnerScriptsSearch__details .field input.ng-invalid {
    color: #e02d32;
    background-color: #fbdee2;
    border-color: #e68066;
}

.learnerScriptsSearch__details .submissionDateDrops {
    width: 242px;
    float: left;
}

.learnerScriptsSearch__details .field--right .submissionDateDrops {
    float: right;
}

.learnerScriptsSearch__details .submissionDateDrops > div {
    float: left;
}

.learnerScriptsSearch__details .submissionDateDrops .holder {
    font-size: 0.928em; /* 13px */
}

.learnerScriptsSearch__details .submissionDateDrops > div + div {
    margin-left: 4px;
}

.learnerScriptsSearch__details .submissionDateDrops .select-wrapper,
.learnerScriptsSearch__details .submissionDateDrops select {
    width: 73px;
}

.learnerScriptsSearch__details .startDateMonth .select-wrapper,
.learnerScriptsSearch__details .startDateMonth select,
.learnerScriptsSearch__details .endDateMonth .select-wrapper,
.learnerScriptsSearch__details .endDateMonth select,
.learnerScriptsSearch__details .dobMonth .select-wrapper,
.learnerScriptsSearch__details .dobMonth select {
    width: 87px;
}

.learnerScriptsSearch__details .submissionDateDrops .select-wrapper {
    background-position: 41px -40px;
}

background-position: 53px -40px;
}

.evidenceManagement__assessmentCode, .evidenceManagement__qualificationNumber {
    width: 242px;
    height: 45px;
}

.evidenceUploadProgress {
    padding: 10px;
}



.error select {
    color: #e02d32;
    background-color: #fbdee2;
    border-color: #e68066;
}
.Learnercontainer {
    display: flex;
    justify-content: space-between;
}


.conatctmanagementBox .error-message {
    display: inline-block;
    margin-left: 36%;
    margin-bottom: 0;
    margin-top: 5px;
    color: #e02d32;
}

.designatedConatctmanagementBox .error-message {
    display: inline-block;
    margin-left: 2%;
    margin-bottom: 0;
    margin-top: 5px;
    color: #e02d32;
}

.userActions {
    white-space: nowrap;
}

.email-error-message {
    display: inline-block;
    margin-left: 140px;
    margin-bottom: 0;
    margin-top: 5px;
    color: #e02d32;
}

.generic-email {
    font-size: 1.143em;
    font-weight: bold;
    color: #000;
}

.errorEdit {
    color: #e02d32;
   }

.qualificationLead > table,
.centreStaff > table {
    width: 100%;
    table-layout: fixed;
}
.qualificationLead > table td,
.centreStaff > table td {
     word-wrap: break-word;
     overflow: hidden;
     text-overflow: ellipsis;
}


.Qualcol-width-25 {
    width: 25%;
}

.Qualcol-width-15 {
    width: 15%;
}

.Qualcol-width-12 {
    width: 12%;
}

.Qualcol-width-30 {
    width: 30%;
}
.Qualcol-width-23 {
    width: 23%;
}
.Qualcol-width-20 {
    width: 20%;
}


.Centrecol-width-12 {
    width: 12%;
}

.Centrecol-width-19 {
    width: 19%;
}
.Centrecol-width-38 {
    width: 38%;
}

.Centrecol-width-20 {
    width: 20%;
}
.Centrecol-width-30 {
    width: 30%;
}

.me-4{
    margin-right:4px;
}

.centreQualificationBlock {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e6e6e6;
    margin-left: 4%;
}
.centreQualificationBlock textarea {
    margin-left: 14%;
    width: 625px;
}

.selectedStaffDetails {
    margin-left: 19%;
}