/*************************** PAGE STYLES ****************************/


/* General Reset */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--site-font-name);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4em;
    color: var(--site-font-colour);
    background-color: var(--site-background-color);
}

body a {
    color: var(--site-link-colour);
    text-decoration: var(--site-link-decoration);
}

body a:hover {
    color: var(--site-link-hover-colour);
    text-decoration: var(--site-link-hover-decoration);
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1em;
}


/* CSS Grid Configuration */

.cssGridContainer {
    display: grid;
    grid-template-columns: auto 740px auto;
    grid-template-rows: auto;
}


/* Tablet and Phone */

@media screen and (max-width: 960px) {
    .cssGridContainer {
        grid-template-columns: auto 640px auto;
    }
}


/* Phone */

@media screen and (max-width: 640px) {
    .cssGridContainer {
        grid-template-columns: auto 340px auto;
    }
}


/* Header */

header.cj-main-menu {
    font-family: var(--header-font-name);
    position: fixed;
    width: 100%;
    background-color: var(--header-background-colour);
    color: var(--header-text-colour);
    z-index: 10;
}

header.cj-main-menu nav.cjun-main-nav .wrap .content {
    text-align: center;
}

header.cj-main-menu nav.cjun-main-nav .wrap .content a.cjun-logo {
    position: relative;
    top: 7px;
}

header.cj-main-menu nav.cjun-main-nav .wrap .content a.cjun-logo img {
    width: 120px;
    height: 60px;
}

header.cj-main-menu nav.cjun-main-nav .wrap .content .items {
    top: 17px;
    right: 5px;
    position: relative;
    float: right;
    display: block;
    color: var(--header-text-colour) !important;
    text-transform: uppercase;
}

header.cj-main-menu nav.cjun-main-nav .wrap .content .items ul {
    list-style: none;
}

header.cj-main-menu nav.cjun-main-nav .wrap .content .items ul a {
    color: var(--header-link-colour);
    text-decoration: none;
}

header.cj-main-menu nav.cjun-main-nav .wrap .content .items ul a:hover {
    color: var(--header-link-hover-color);
}


/* Jobs List */

main .cssGridBody {
	padding-top: 75px;
    background-color: var(--list-background-color);
}

main .cssGridBody .SRSJobsContainer {
    margin-left: var(--list-side-gutters);
    margin-right: var(--list-side-gutters);
}


/* Footer */

section.zoneFooterCopy {
    background-color: var(--legal-background-colour);
    border-top: solid 1px #878787;
    padding: 0;
    color: var(--legal-text-colour);
}

section.zoneFooterCopy a {
    text-decoration: none;
    outline: none;
    color: var(--legal-link-colour);
    font-weight: bold;
}

section.zoneFooterCopy a:hover {
    color: var(--legal-link-hover-colour);
}

section.zoneFooterCopy a:focus {
    text-decoration: underline;
}


/***************************** JOB CARDS *****************************/

.SRSJobCardWrapper {
    background-color: var(--card-background-colour);
    border: var(--card-border);
    border-radius: var(--card-border-radius);
    margin-bottom: 34px;
    margin-top: 20px;
    max-width: 740px;
}

.SRSJobCardWrapper .SRSCardContent {
    padding: 19px 14px 30px 14px;
    word-break: break-word;
}

.SRSJobCardWrapper .SRSCardContent:before {
    content: "";
    display: table;
}


/* CARD TITLE ROW */

.SRSJobCardWrapper .SRSCardContent .SRSCardTitleRow {
    clear: none;
    float: left;
}

.SRSJobCardWrapper .SRSCardContent .SRSCardTitleRow .SRSCardLogo {
    display: none;
    float: left;
    margin: 0 0 0 -120px;
    width: 100px;
}

.SRSJobCardWrapper .SRSCardContent .SRSCardTitleRow.hasLogo {
    padding-left: 120px;
}

.SRSJobCardWrapper .SRSCardContent .SRSCardTitleRow.hasLogo .SRSCardLogo {
    display: block;
}

.SRSJobCardWrapper .SRSCardContent .SRSCardTitleRow .SRSCardLogo  >  a {
    display: grid;
    text-decoration: none;
}

.SRSJobCardWrapper .SRSCardContent .SRSCardTitleRow .SRSCardLogo > a > img {
    width: auto;
    max-width: 100%;
    min-height: 50px;
    border: 0;
}

.SRSJobCardWrapper .SRSCardContent .SRSCardTitleRow .SRSCardTitle {
    float: left;
    clear: none;
    width: 100%;
}

.SRSJobCardWrapper .SRSCardContent .SRSCardTitleRow .SRSCardTitle > h2 {
    margin: 0 0 10px 0;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 19px;
}

.SRSJobCardWrapper .SRSCardContent .SRSCardTitleRow .SRSCardTitle > h2 > a {
    font-family: var(--job-title-font-name);
    color: var(--job-title-text-colour);
    text-decoration: none;
}

.SRSJobCardWrapper .SRSCardContent .SRSCardTitleRow .SRSCardTitle > h2 > a:hover {
    color: var(--job-title-text-hover-colour);
}

.SRSJobCardWrapper .SRSCardContent .SRSCardTitleRow .SRSCardTitle > h3 {
    margin: 0 0 4px 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 14px;
}

.SRSJobCardWrapper .SRSCardContent .SRSCardTitleRow .SRSCardTitle > h3 > a {
    font-weight: normal;
    color: var(--company-name-link-colour);
    text-decoration: var(--company-name-link-decoration);
}

.SRSJobCardWrapper .SRSCardContent .SRSCardTitleRow .SRSCardTitle > h3 > a:hover {
    color: var(--company-name-link-hover-colour);
    text-decoration: var(--company-name-link-hover-decoration);
}

.SRSJobCardWrapper .SRSCardContent .SRSCardTitleRow .SRSCardTitle > h3.companyName {
    display: none;
}

.SRSJobCardWrapper .SRSCardContent .SRSCardTitleRow .SRSCardTitle > h3.companyName.hasName {
    display: block;
}


/* CARD DETAILS ROW */

.SRSJobCardWrapper .SRSCardContent .SRSCardDetailsRow {
    overflow: auto;
    clear: both;
}

.SRSJobCardWrapper .SRSCardContent .SRSCardDetailsRow > ul {
    margin: 10px 0 0 0;
    width: 100%;
    font-size: 12px;
    padding: 0;
    list-style: none;
}

.SRSJobCardWrapper .SRSCardContent .SRSCardDetailsRow > ul > li {
    max-width: calc(33.33% - 20px);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-right: 20px;
    float: left;
    margin-bottom: 8px;
    color: var(--info-text-colour);
}

.SRSJobCardWrapper .SRSCardContent .SRSCardDetailsRow > ul > li.itemPosted {
    clear: left;
}

@media (max-width: 960px) {
    .SRSJobCardWrapper .SRSCardContent .SRSCardDetailsRow > ul > li {
        max-width: calc(50% - 20px);
        width: 100%;
    }
    .SRSJobCardWrapper .SRSCardContent .SRSCardDetailsRow > ul > li.itemPosted {
        clear: none;
    }
}

@media (max-width: 640px) {
    .SRSJobCardWrapper .SRSCardContent .SRSCardDetailsRow > ul > li {
        max-width: 100%;
    }
}

.SRSJobCardWrapper .SRSCardContent .SRSCardDetailsRow > ul > li > i {
    color: var(--info-text-icon-colour);
    width: 15px;
}

.SRSJobCardWrapper .SRSCardContent .SRSCardDetailsRow > ul > li.itemLocation,
.SRSJobCardWrapper .SRSCardContent .SRSCardDetailsRow > ul > li.locationSpacer,
.SRSJobCardWrapper .SRSCardContent .SRSCardDetailsRow > ul > li.itemJobId {
    display: inline-block;
    min-width: calc(280px - var(--list-side-gutters));
}

.SRSJobCardWrapper .SRSCardContent .SRSCardDetailsRow > ul > li.itemJobId .itemJobReference {
    display: none;
}

.SRSJobCardWrapper .SRSCardContent .SRSCardDetailsRow > ul > li.itemJobId.hasJobReference .itemJobReference {
    display: inline-block;
}

.SRSJobCardWrapper .SRSCardContent .SRSCardDetailsRow > ul > li.itemLocation a {
    display: inline-block;
    color: var(--info-text-location-link-colour);
    text-decoration: var(--info-text-location-link-decoration);
}

.SRSJobCardWrapper .SRSCardContent .SRSCardDetailsRow > ul > li.itemLocation a:hover {
    color: var(--info-text-location-link-hover-colour);
    text-decoration: var(--info-text-location-link-hover-decoration);
}

.SRSJobCardWrapper .SRSCardContent .SRSCardDetailsRow > ul li.isEmpty {
    display: none;
}


/* CARD BUTTONS ROW */

.SRSJobCardWrapper .SRSCardContent .SRSCardButtonsRow {
    float: right;
    margin-bottom: -20px;
    clear: both;
}

.SRSJobCardWrapper .SRSCardContent .SRSCardButtonsRow .SRSCardButton {
    display: inline-block;
    position: relative;
    height: 41px;
    min-width: 100px;
    font-size: 14px;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    border: var(--button-border);
    border-radius: var(--button-border-radius);
    color: var(--button-primary-text-colour);
    background: var(--button-primary-background-colour);
    margin: 10px 7px 0 0;
    padding: 10px;
    transition: All 100ms ease-in;
    z-index: 1;
}

.SRSJobCardWrapper .SRSCardContent .SRSCardButtonsRow .SRSCardButton:hover,
.SRSJobCardWrapper .SRSCardContent .SRSCardButtonsRow .SRSCardButton:focus {
    background-color: var(--button-primary-hover-background-colour);
    border-color: var(--button-primary-hover-border-color);
}


/* PAGINATION */

#SRSJobsPaginationContainer {
    margin-bottom: 20px;
}

#SRSJobsPaginationContainer .SRSJobButton.SRSMoreLink a {
    background-color: var(--button-secondary-background-colour);
    color: var(--button-secondary-text-colour);
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--button-border-radius);
    border: var(--button-border);
    font-weight: 700;
    margin-bottom: 10px;
    text-decoration: none;
    font-size: 15px;
    text-transform: uppercase;
    padding: 10px;
}

.SRSJobsMoreLoader {
    display: none;
    width: 130px;
    height: 40px;
    position: relative;
    margin: auto;
    margin-bottom: 10px;
}

.SRSJobsMoreLoader .btnText {
    display: table-cell;
    height: 40px;
    vertical-align: middle;
    color: #06c;
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    font-weight: 400;
    text-align: center;
    background: url(data:image/gif;base64,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) no-repeat center center;
    background-size: 20px 20px;
}

#SRSJobsPaginationContainer .SRSJobButton.SRSMoreLink a:hover {
    background-color: var(--button-secondary-hover-background-colour);
    color: var(--button-secondary-hover-text-colour);
}

#SRSJobsPaginationContainer ul#pagination {
    display: block;
    list-style-type: disc;
    padding: 12px 0;
    margin: 20px 0;
    clear: both;
    font-size: 15px;
    text-align: center;
}

#SRSJobsPaginationContainer ul#pagination li {
    display: inline-block;
    margin: 5px 2px;
    line-height: 1.4em;
}

#SRSJobsPaginationContainer ul#pagination li span,
#SRSJobsPaginationContainer ul#pagination li a {
    display: inline-block;
    border-radius: var(--button-border-radius);
    background-color: var(--button-secondary-background-colour);
    color: var(--button-secondary-text-colour);
    border: var(--button-border);
    padding: 5px 10px;
    font-weight: 700;
    text-decoration: none;
}

#SRSJobsPaginationContainer ul#pagination li a:hover {
    background-color: var(--button-secondary-hover-background-colour);
    color: var(--button-secondary-hover-text-colour);
}

#SRSJobsPaginationContainer ul#pagination li span {
    border-color: var(--button-secondary-background-colour);
}

#SRSJobsPaginationContainer ul#pagination li span.active {
    background-color: var(--button-secondary-hover-background-colour);
    color: var(--button-secondary-hover-text-colour);
    border-color: var(--button-secondary-text-colour);
}

#SRSJobsPaginationContainer ul#pagination li.ellipsis span {
    background-color: transparent;
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
}

#SRSJobsPaginationContainer ul#pagination li.ellipsis.xsShow {
    display: none;
}


/* Loader */

.loader-overall {
    display: none;
    width: 100%;
    height: 100vh;
    position: fixed;
    background-color: rgba(1, 42, 61, 0.65);
    top: 0;
    z-index: 2000000;
    padding: 3%;
    box-sizing: border-box;
}

.loader-overall img.loader-img {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -30px;
    margin-left: -30px;
    width: 60px;
    height: 60px;
}


/* Alerts */

.module-content {
    padding: 16px;
}

.alert {
    padding: .7143rem 1.071rem;
    margin: .5rem 0;
    border-radius: 2px;
    border: 1px solid transparent;
    color: #fff;
    display: block;
    font-size: 12px;
}

.alert.alert-warning {
    background-color: #fff3cd;
    border-color: #ffeeba;
    color: #856404;
}

.alert.alert-info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

@media (max-width: 960px) {
    .SRSJobCardWrapper {
        margin-bottom: 34px;
    }
    .SRSJobCardWrapper .SRSCardContent .SRSCardDetailsRow > ul > li {
        width: calc(50% - 30px);
        min-width: fit-content !important;
    }
    .SRSJobCardWrapper .SRSCardContent .SRSCardButtonsRow {
        float: none;
    }
    .SRSJobCardWrapper .SRSCardContent .SRSCardButtonsRow > a.SRSCardButton+a.SRSCardButton {
        margin-top: 10px;
    }
    .SRSJobCardWrapper .SRSCardContent .SRSCardButtonsRow .SRSCardButton {
        width: 100%;
        margin: 5px 0 0 0;
    }
    .SRSJobCardWrapper .SRSCardContent .SRSCardButtonsRow .SRSCardPrimaryButton {
        margin-bottom: 5px;
    }
}

@media (max-width: 640px) {
    .SRSJobCardWrapper .SRSCardContent .SRSCardTitleRow {
        padding-left: 0 !important;
    }
    .SRSJobCardWrapper .SRSCardContent .SRSCardTitleRow .SRSCardLogo {
        float: none;
        margin: initial;
    }
    .SRSJobCardWrapper .SRSCardContent .SRSCardTitleRow .SRSCardTitle {
        float: none;
    }
    .SRSJobCardWrapper .SRSCardContent .SRSCardDetailsRow > ul > li {
        width: calc(100% - 30px);
    }
    .SRSJobCardWrapper .SRSCardContent .SRSCardDetailsRow > ul li.locationSpacer {
        display: none;
    }
    #SRSJobsPaginationContainer ul#pagination li.xsHide {
        display: none;
    }
    #SRSJobsPaginationContainer ul#pagination li.ellipsis.xsShow {
        display: inline-block;
    }
}


/* SEARCH BAR */

.zoneSearchbar {
    padding: 75px 0 6px 0;
    background-color: dimgrey;
}

.zoneSearchbar.hidden {
    display: none;
}

.zoneSearchbar .search-global-container {
    width: 100%;
    margin: 0 auto;
    display: block;
    color: #fff;
}

.zoneSearchbar .search-global-container form {
    margin: 0 auto;
    padding: 15px 15px;
}

.zoneSearchbar .search-global-container form ::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: white;
    opacity: 1;
}

.zoneSearchbar .search-global-container form :-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: white;
}

.zoneSearchbar .search-global-container form ::-ms-input-placeholder {
    /* Microsoft Edge */
    color: white;
}

.zoneSearchbar .search-global-container form .button-container {
    width: 20%;
    padding-left: 15px;
    display: inline-block;
    line-height: normal;
}

.zoneSearchbar .search-global-container form .btnLoaderTrigger {
    position: relative;
    z-index: 1;
    display: inline-block;
}

.zoneSearchbar .search-global-container form .button-container button {
    background-color: var(--button-primary-background-colour);
    border: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 10px 0px;
    width: 100%;
    font-size: 14px;
    color: var(--button-primary-text-colour);
    top: 2px;
    right: 0;
    text-transform: uppercase;
    font-weight: 900;
}

.zoneSearchbar .search-global-container form .button-container button:hover,
.zoneSearchbar .search-global-container form .button-container button:focus {
    background-color: var(--button-primary-hover-background-colour);
    border-color: var(--button-primary-hover-border-color);
}

.zoneSearchbar .search-global-container form .button-container button i {
    font-size: 14px;
    padding: 0 10px 0 0;
}

.zoneSearchbar .search-global-container .title-container h2 {
    display: none;
}

.zoneSearchbar .search-global-container form .options {
    width: 80%;
    float: left;
    font-size: 0;
    line-height: normal;
}

.zoneSearchbar .search-global-container form .options .keyword {
    margin-right: 2%;
    width: 48%;
    display: inline-block;
    border-bottom: solid 1px #fff;
}

.search-global-container form .options .keyword input:focus {
    outline: none;
}

.zoneSearchbar .search-global-container form .options .keyword input[type=text] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    font-size: 14px;
    padding: 11px 0;
    width: 100%;
    border: 0;
    background-color: transparent;
    color: #fff !important;
}

.zoneSearchbar .search-global-container form .options .dropdown span.drpMask {
    display: block;
    position: absolute;
    z-index: 0;
    width: 94%;
    color: white;
    font-size: 14px;
    top: 10px;
    left: 1px;
}

.zoneSearchbar .search-global-container form .options .dropdown {
    position: relative;
    display: inline-block;
    width: 48%;
    margin-right: 2%;
    border-bottom: solid 1px #fff;
}

.zoneSearchbar .search-global-container form .options .dropdown select {
    position: relative;
    z-index: 1;
    border: 0;
    padding: 10px 0;
    padding-right: 8%;
    padding-left: 6px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    text-indent: 1px;
    cursor: pointer;
    color: transparent;
    background-color: transparent;
    z-index: 1;
    user-select: none;
}

.zoneSearchbar .search-global-container form .options .dropdown select#location .parent-location {
    color: #585858;
    font-weight: bold;
}

.zoneSearchbar .search-global-container form .options .dropdown select option {
    color: #585858;
}

.zoneSearchbar .search-global-container form .options .dropdown i {
    position: absolute;
    top: 50%;
    margin-top: -6px;
    right: 0px;
    font-size: 12px;
    color: #fff;
    z-index: 0;
}


/* remove the top-padding from the Results list id the searchbar is on the page */

.zoneSearchbar + main[role="main"] .cssGridBody {
    padding-top: 0;
}

.zoneSearchbar.hidden + main[role="main"] .cssGridBody {
    padding-top: 75px;
}


/* Tablet and Phone */

@media screen and (max-width: 960px) {
    .zoneSearchbar .search-global-container form .options {
        width: 100%;
        float: none;
    }
    .zoneSearchbar .search-global-container form .options .keyword,
    .zoneSearchbar .search-global-container form .options .dropdown {
        margin-right: 0;
        width: 49%;
        margin-bottom: 10px;
    }
    .zoneSearchbar .search-global-container form .options .keyword {
        margin-right: 2%;
    }
    .zoneSearchbar .search-global-container form .button-container {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-top: 10px;
    }
}


/* Phone */

@media screen and (max-width: 640px) {
    .zoneSearchbar .search-global-container form .options .keyword,
    .zoneSearchbar .search-global-container form .options .dropdown {
        width: 100%;
    }
    .zoneSearchbar .search-global-container form .options .keyword {
        margin-right: 0;
    }
}