/*
    Jump to:
    Root
    Misc Styling
    Landing Page Styling
    Work With Us Page Styling
    How We Work Page Styling
    How We Hire Page Styling
    Results Page Styling
    Job Description Styling
    Login/Register Styling
    Profile Styling
    Application/Onboarding Styling
    Responsive Styling
*/

/* Root */
:root {
    --form-field-max-width: 500px;
    --form-field-color: #33475b;
    --primaryColor: #DA251C;
    --secondaryColor: #264BD6;
    --red: #d8232a;
    --dark-red: #9a0811;
    --black: #1A232A;
    --grey: #f4f4f4;
}
/* Root Ends */

/* Misc Styling */
p:last-child {
    margin-bottom: 0;
}

.pageBlockInner_FormBlock.pageBlockInner_FormBlock {
    span.mandatoryContainer {
        color: var(--red);
    }

    .curFocus label.formLabel {
        color: inherit;
    }

    label.formLabel {
        text-align: left;

        a {
            text-decoration: underline;
        }
    }

    .selectmultipleContainer ul.selectmultiplelist li {
        display: flex;
        align-items: center;
    }

    .formRow {
        margin-top: 10px;
        width: 100%;
        overflow: visible;

        &,
        &.formRowTextAreaRow,
        &#alertsemailform_username_formRow,
        &#SectionCompleteBlock_completed_formRow {
            :is(.labelContainer, .controlContainer, .controlError) {
                max-width: var(--form-field-max-width);
                margin: 5px auto;
                display: block;
                float: none;
                text-align: left;
                width: 100%;
                color: var(--form-field-color);
                font-weight: normal;
                height: auto;
                overflow: auto;
            }
        }

        .controlError {
            color: red !important;
            padding-left: 0;
        }

        &.formRowTextLiteralRow,
        &.formRowFileUploadRow .labelContainer {
            text-align: center;

            h2{
                &:after{
                    margin-left:auto;
                    margin-right:auto;
                }
            }
        }

            &.formRowFileUploadRow .labelContainer label.formLabel {
                text-align: inherit;
            }

        &.formRowPhoneInputRow .controlContainer {
            overflow: visible;
        }

        &.formRowRadioInputRow .controlContainer .radioOption {
            input,
            .radioOptionLabel {
                display: inline-block;
                vertical-align: middle;
                float: none;
            }
        }

        &.formRowCheckBoxRow {
            float: none;
            margin: 0 auto;
            max-width: 100%;
            display: block;
            text-align: center;

            .labelContainer,
            .controlContainer {
                float: none;
                display: inline-block;
                width: 100% !important;
                text-align: center;
            }

                .labelContainer label {
                    text-align: inherit;
                }

            .controlContainer {
                margin-right: 0;
                margin-top: 0 !important;

                .checkboxContainer {
                    width: 100%;
                    text-align: center;

                    input {
                        width: auto;
                        overflow: auto;
                    }
                }
            }
        }

        &.formRowSelectAutoCompleteRow .controlContainer {
            :is(.inputContainer, .customButtonContainer) {
                width: 100%;
            }
        }

        .controlContainer .inputContainer {
            display: flex;
            align-items: flex-start;

            .popup {
                margin-top: 5px;

                img {
                    margin-top: 0;
                }
            }
        }
    }
}

:is(.pageBlockInner_FormBlock, .pageBlockInner_TextTagReplacementBlock) :is( .formRowDateInputRow .controlContainer input, .formRowSelectMultiCodelistRow .controlContainer .divajaxcontainter ) {
    width: calc(100% - 26px);
}

:is( .pageBlockInner_FormBlock, .pageBlockInner_TextTagReplacementBlock ) :is( .formRowPhoneInputRow, .formRowTextInputRow ) .controlContainer input.inputText,
:is(.pageBlockInner_FormBlock, .pageBlockInner_TextTagReplacementBlock) :is( .formRowSelectInputRow_Common .controlContainer select, .formRowMoneyInputRow .controlContainer input, .formRowDateInputRow .controlContainer input, .formRowTextAreaRow .controlContainer textarea, .formRowNumericInputRow .controlContainer input, .formRowSelectAutoCompleteRow .controlContainer input ),
:is(#Edit_WORKEXPERIENCE_pageBlock, #Add_WORKEXPERIENCE_pageBlock) .formRowTextAreaRow .controlContainer .inputTextArea,
#MapBlock_pageBlockContainer #MapBlock_pageBlock .addressContainer .addressInput,
.quickSearchContainer .formRowTextInputRow .controlContainer input,
#jobAlerts .formRowTextInputRow .controlContainer input,
.textpage_filters .selectContainer select {
    padding: 12px 15px;
    font-size: 1.125rem;
    border: 2px solid var(--black);
    color: var(--black);
    outline-offset: -2px;
    width: calc(100% - 4px);
    border-radius: 20px;
    max-width: 100%;
    min-width: 1px;
    margin: 2px;
}

    :is( .pageBlockInner_FormBlock, .pageBlockInner_TextTagReplacementBlock ) :is( .formRowPhoneInputRow, .formRowTextInputRow ) .controlContainer input.inputText:focus,
    :is(.pageBlockInner_FormBlock, .pageBlockInner_TextTagReplacementBlock) :is( .formRowSelectInputRow_Common .controlContainer select:focus, .formRowMoneyInputRow .controlContainer input:focus, .formRowDateInputRow .controlContainer input:focus, .formRowTextAreaRow .controlContainer textarea:focus, .formRowSelectAutoCompleteRow .controlContainer input:focus ),
    :is(.pageBlockInner_FormBlock, .pageBlockInner_TextTagReplacementBlock) :is( .formRowPhoneInputRow, .formRowTextInputRow, .formRowSelectInputRow_Common, .formRowMoneyInputRow, .formRowDateInputRow, .formRowTextAreaRow ).curFocus .controlContainer :is(input, select, textarea, .inputText, .inputSelect),
    :is(.pageBlockInner_FormBlock, .pageBlockInner_TextTagReplacementBlock) .curFocus .controlContainer :is(.inputText, .inputSelect),
    .bannerContainer #quickSearch .search-field-container input:focus,
    #MapBlock_pageBlockContainer #MapBlock_pageBlock .addressContainer .addressInput:focus,
    .quickSearchContainer .formRowTextInputRow .controlContainer input:focus {
        border: 2px dotted;
        outline: none;
    }

.highlightError {
    input,
    textarea,
    select {
        border-color: red !important;
    }
}

#QuickApplyForm_pageBlock #QuickApplyForm_submitinstructions_formRow .textLiteralAlignment_Left,
#SectionCompleteBlock_completed_formRow .labelContainer {
    text-align: center;
}

.iti {
    width: 100%;
}

textarea {
    min-height: 100px;
}

.intl-tel-input {
    width: 100%;
}

    .intl-tel-input .country-list .country,
    .intl-tel-input .country-list .divider {
        margin-top: 0;
    }

.controlContainer .passwordStrength {
    width: 100%;
}

.skillcontainer {
    float: none;
    display: inline-block;
}

:is(.buttonsRight, .buttonsLeft),
:is(.buttonsRight, .buttonsLeft) ul li {
    width: 100%;
    text-align: center;
    max-width: 500px;
    margin: 0 auto !important;
    float: none;
    display: block;
    overflow: hidden;
    padding: 0;

    &::before {
        display: none !important;
    }
}

    :is(.buttonsRight, .buttonsLeft) ul li :is(a, input),
    ul.pageBlockHeaderButtons {
        float: none;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100%;
    }

:is(.actionTextButtonContainer, .fileuploadcontainer) :is(.buttonsRight, .buttonsLeft),
:is(.actionTextButtonContainer, .fileuploadcontainer) :is(.buttonsRight, .buttonsLeft) ul li {
    width: 100%;
}

:is( button.buttonAnchor, button.buttonSubmit, input.buttonSubmit, a.buttonAnchor, a.offerAnchor, #posdesc_pageBlockContainer #posdesc_pageBlock a.right, #homepage .googleMapsButton, div.posDescriptionContainer317 .BigVacancyMap .moreJobs a, #Home_pageView #noPositions_pageBlockContainer .bottomContainer .buttonContainer a, #MapBlock_pageBlockContainer .pageBlockContainerMiddle #MapBlock_pageBlock .mapOuterContainer .addressContainer .addressButton, .mydetails #MyDetailsStauts_pageBlockContainer #MyDetailsStauts_pageBlock .eArcuLeft #eArcuLinks ul li a, .backButtonContainer a, #posBrowser_Filter_pageBlock .filtersSummary .alternateViews a, .pos_find_results .pageViewMain #posBrowser_Filter_pageBlockContainer .pageBlockContainerMiddle #posBrowser_Filter_pageBlock .filtersExpander a, mydetails #MyDetails_pageView div.pageBlockContainer div.pageBlockContent .buttonsRight a, .mydetails #MyDetails_pageView div.pageBlockContainer div.pageBlockContent .buttonsRight input.buttonSubmit, .mydetails #MyDetails_pageView div.pageBlockContainer div.pageBlockInner_FormBlock div.formRow.formRowFileUploadRow .controlContainer .buttonsLeft ul li .fileuploadbutton, #MyDetails_ConnectedServices_pageView #ConnectedServicesForm_pageBlock .serviceContainer2 .statusContainer a, .pageView #posdesc_pageBlockContainer #posdesc_pageBlock .posDescriptionContainer .centerJobBox .BigVacancyMap .mapContainer .ButtonHolder .bigMapButton .closeMapButton, .pageView #posdesc_pageBlockContainer #posdesc_pageBlock .posDescriptionContainer .centerJobBox .BigVacancyMap .mapContainer .ButtonHolder .bigMapButton .googleMapsButton, .pageView #posdesc_pageBlockContainer #posdesc_pageBlock .posDescriptionContainer .bottomJobBox .mapContainer .ButtonHolder .miniMapButton, .mapContainer .ButtonHolder .miniMapButton a, .mapContainer .ButtonHolder .bigMapButton .closeMapButton, .mapContainer .ButtonHolder .bigMapButton .googleMapsButton, #Application_Section_Rare_pageView .rare_button, #OfferDetails_pageBlock .file a) {
    position: relative;
    display: inline-block;
    width: auto;
    height: auto;
    min-width: 1px;
    padding: 12px 56px;
    margin: 2.5px 0;
    float: none;
    background: var(--red);
    border: none;
    border-radius: 20px;
    text-align: center;
    color: #fff;
    line-height: 1.5;
    transition: all 0.3s;
    text-decoration: none !important;

    &:hover {
        background: var(--black);
        color: #fff !important;
    }
}

/*
:is(
  button.buttonAnchor,
  button.buttonSubmit,
  input.buttonSubmit,
  a.buttonAnchor,
  a.offerAnchor,
  #posdesc_pageBlockContainer #posdesc_pageBlock a.right,
  #homepage .googleMapsButton,
  #Home_pageView #noPositions_pageBlockContainer .bottomContainer .buttonContainer a,
  .mydetails #MyDetailsStauts_pageBlockContainer #MyDetailsStauts_pageBlock .eArcuLeft #eArcuLinks ul li a,
  .backButtonContainer a,
  #posBrowser_Filter_pageBlock .filtersSummary .alternateViews a,
  .pos_find_results .pageViewMain #posBrowser_Filter_pageBlockContainer .pageBlockContainerMiddle #posBrowser_Filter_pageBlock .filtersExpander a,
  mydetails #MyDetails_pageView div.pageBlockContainer div.pageBlockContent .buttonsRight a,
  .mydetails #MyDetails_pageView div.pageBlockContainer div.pageBlockContent .buttonsRight input.buttonSubmit,
  .mydetails #MyDetails_pageView div.pageBlockContainer div.pageBlockInner_FormBlock div.formRow.formRowFileUploadRow .controlContainer .buttonsLeft ul li .fileuploadbutton,
  #MyDetails_ConnectedServices_pageView #ConnectedServicesForm_pageBlock .serviceContainer2 .statusContainer a,
  .pageView #posdesc_pageBlockContainer #posdesc_pageBlock .posDescriptionContainer .centerJobBox .BigVacancyMap .mapContainer .ButtonHolder .bigMapButton .closeMapButton,
  .pageView #posdesc_pageBlockContainer #posdesc_pageBlock .posDescriptionContainer .centerJobBox .BigVacancyMap .mapContainer .ButtonHolder .bigMapButton .googleMapsButton,
  .pageView #posdesc_pageBlockContainer #posdesc_pageBlock .posDescriptionContainer .bottomJobBox .mapContainer .ButtonHolder .miniMapButton,
  #MapBlock_pageBlockContainer .pageBlockContainerMiddle #MapBlock_pageBlock .mapOuterContainer .addressContainer .addressButton,
  .mapContainer .ButtonHolder .miniMapButton a,
  .mapContainer .ButtonHolder .bigMapButton .closeMapButton,
  .mapContainer .ButtonHolder .bigMapButton .googleMapsButton,
  #Application_Section_Rare_pageView .rare_button
):focus {
  outline: 2px dashed #000;
}
*/

.charCounterValue {
    float: left;
}

video,
img:not(.logo) {
    max-width: 100%;
}

.eArcuInfoHeader,
#EarcuHeadingTextBlockTitle,
.pageBlockTitle {
    display: none;
}

.ui-dialog.ui-widget.ui-widget-content {
    border: none;
    z-index: 1001 !important;
}

    .ui-dialog.ui-widget.ui-widget-content .ui-dialog-titlebar {
        border: .125rem solid #000;
        border-bottom: none;
        background: #efefef;
        color: #000;
    }

    .ui-dialog.ui-widget.ui-widget-content div.ui-dialog-titlebar .ui-dialog-titlebar-close,
    .ui-dialog.ui-widget.ui-widget-content div.ui-dialog-titlebar .ui-dialog-titlebar-close:hover {
        outline: none !important;
    }

    .ui-dialog.ui-widget.ui-widget-content .ui-dialog-content {
        border: .125rem solid #000;
        border-top: none;
        background: #efefef;
        color: #000;
    }

.modalContent {
    min-height: 1px !important;
}

.ui-widget-overlay {
    z-index: 1000 !important;
    opacity: 0.7;
    background: #000;
}

.hidden {
    display: none !important;
}

body:before {
    content: '';
    z-index: -1;
    opacity: 0;
    transition: opacity .4s ease;
    background: #000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

body.cookiesOpen,
body.modalOpen,
body.navOpen {
    overflow: hidden;
    height: 100%;
}

    body.cookiesOpen:before,
    body.modalOpen:before,
    body.navOpen:before {
        z-index: 9991;
        opacity: 0.7;
    }

.cookiesButton {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 80px;
    z-index: 9990;

    a {
        clip-path: polygon(0 0, 0% 100%, 100% 100%);
        background: var(--primaryColor);
        display: block;
        height: 100%;
        position: relative;
        transition: all .2s ease;
        color: #fff;

        &:hover {
            background: #000;
        }

        i {
            position: absolute;
            bottom: 10px;
            left: 10px;
            font-size: 30px;
        }
    }
}

.gdprcookie {
    z-index: 9992;
    background: var(--primaryColor);

    &.too-big {
        position: fixed;
        bottom: 1.5rem;
        top: 1.5rem;
        overflow: auto;
    }

    h1 {
        font-size: 24px;
        line-height: 32px;
    }

    h2 {
        font-size: 20px;
        line-height: 28px;
    }

    ul {
        color: #fff;
    }

    input[type=checkbox] {
        position: relative;
        opacity: 1;
        width: auto;

        & + label {
            color: inherit;
            display: inline-block;
            position: relative;
        }
    }

    .gdprcookie-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        margin-top: 20px;

        button {
            transition: all .2s ease;
            margin: 0;

            &:disabled {
                pointer-events: none;
            }

            &:not(:disabled):hover {
                background: rgba(255, 255, 255, 0.3);
            }
        }
    }
}

.pageBlockInner_GridBlock div.gridContentWithHeader {
    background: none;
}

.pageBlockInner_GridBlock table.gridTable th {
    width: 100% !important;
}

#EarcuIntroTextBlockTitle {
    display: none;
}

.tooltip2_Surround,
.tooltip2_SurroundClosing {
    .tooltip2_Outer {
        display: none;
    }
}

.stickyApplyContainer {
    position: fixed;
    top: 25%;
    transform: translateY(-50%);
    right: 0;
    z-index: 10;

    > a {
        writing-mode: vertical-rl;
        text-orientation: mixed;
        margin-top: 0;
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
        background: var(--secondaryColor);
        padding: 56px 12px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        color: #fff;
        text-decoration: none;
        transition: all .2s ease;
        display: inline-block;

        &:hover {
            background: var(--dark-red);
        }
    }
}

.container {
    padding: 0 60px;
    max-width: 1920px;
    width: 100%;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 9990;

    .headerContainer {
        display: flex;
        justify-content: space-between;

        .navContainer {
            display: flex;

            #js-hamburger {
                order: 2;
                display: none;
                margin: 0;
            }

            nav {
                order: 1;

                > ul {
                    list-style: none;
                    display: flex;
                    align-items: center;
                    gap: 0;

                    > li {
                        position: relative;

                        > a {
                            padding: 20px 27px;
                            display: inline-block;
                            color: var(--black);
                            font-weight: 700;
                            font-size: 18px;
                            text-decoration: none;
                            transition: all .2s ease;
                        }

                        &:hover {
                            > a {
                                background: var(--grey);
                            }
                        }

                        &.hasChildren {
                            > a {
                                display: flex;
                                gap: 5px;
                                align-items: center;

                                &:after {
                                    content: "\f078";
                                    font-family: "Font Awesome 7 Pro";
                                    color: var(--red);
                                    font-size: .7em;
                                    transition: all .2s ease;
                                }
                            }

                            &:hover {
                                > a {
                                    &:after {
                                        transform: rotate(180deg);
                                    }
                                }
                            }

                            > ul {
                                position: absolute;
                                display: flex;
                                flex-direction: column;
                                list-style: none;
                                background: var(--grey);
                                -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
                                box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
                                display: none;
                            }

                            &:hover {
                                > ul {
                                    display: block;
                                }
                            }
                        }

                        &.account{
                            a {
                                background: var(--red);
                                color: #fff;
                                padding: 10px 30px;
                                border-radius: 20px;
                                display: flex;
                                gap: 5px;
                                transition: all .2s ease;

                                &:hover {
                                    background: var(--black);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

body {
    padding-top: 62px;
    position: relative;
}

footer {
    margin-top: 62px;
    position: relative;
    z-index: 11;
    overflow: visible;
    background: var(--grey);

    .topContainer {
        padding: 50px 0;

        .footerContainer {
            display: flex;
            gap: 60px;

            .logoContainer {
                top: -100px;
                position: relative;

                img {
                    max-height: 200px;
                }
            }

            .navContainer {
                nav {
                    ul {
                        list-style: none;
                        display: flex;
                        flex-direction: column;
                        gap: 60px;
                        flex-wrap: wrap;
                        max-height: 150px;

                        li {
                            flex: 25%;

                            a {
                                padding: 0;
                                text-decoration: none;
                                color: #000a12;
                                transition: all .2s ease;

                                &:hover {
                                    text-decoration: underline;
                                    color: var(--dark-red);
                                }
                            }

                            &.hasChildren {
                                flex: 100%;

                                ul {
                                    gap: 20px;
                                    margin-top: 20px;
                                }
                            }
                        }
                    }
                }
            }

            .socialsContainer {
                margin-left: auto;
                display: flex;
                flex-direction: column;
                gap: 20px;

                ul {
                    display: flex;
                    gap: 10px;
                    list-style: none;

                    li {
                        a {
                            color: var(--red);
                            font-size: 24px;
                            transition: all .2s ease;

                            &:hover {
                                color: var(--black);
                                text-decoration: underline;
                            }
                        }
                    }
                }

                .accreditation {
                    display: flex;
                    flex-direction: column;
                    gap: 10px;

                    img {
                        max-width: 188px;
                    }
                }
            }
        }
    }

    .bottomContainer {
        padding: 10px 0 30px;
        border-top: 1px solid var(--primaryColor);
        font-size: 12px;

        .footerContainer {
            display: flex;
            justify-content: space-between;
            gap: 60px;


            .copyrightContainer {
                p {
                    font-size: inherit;
                }
            }

            .linksContainer {
                ul {
                    display: flex;
                    list-style: none;

                    li {
                        &:not(:last-child) {
                            padding-right: 10px;
                            margin-right: 10px;
                            border-right: 1px solid var(--black);
                        }

                        a {
                            color: var(--black);
                            white-space: nowrap;
                            text-decoration: none;

                            &:hover {
                                color: rgb(0,52.5,94.5);
                                text-decoration: underline;
                            }
                        }
                    }
                }
            }
        }
    }
}

.bannerContainer {
    position: relative;
    display: flex;
    overflow: hidden;
    margin-bottom: 30px;

    > img {
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 50%;
    }

    .bannerContent {
        padding: 100px 180px 100px 60px;
        background: var(--red);
        color: #fff;
        width: 50%;
        min-height: 400px;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .titleContainer {
            margin-bottom: 0;

            &:not(:last-child) {
                margin-bottom: 30px;
            }

            h1 {
                display: inline;
                background-color: var(--black);
                -webkit-box-shadow: 10px 0 0 var(--black), -10px 0 0 var(--black);
                box-shadow: 10px 0 0 var(--black), -10px 0 0 var(--black);
                -webkit-box-decoration-break: clone;
                box-decoration-break: clone;
                padding: .25rem 0 .375rem 0;
                line-height: 1.45;
                margin-left: 10px;

                @media (min-width:40.063em) {
                    padding: .25rem 0 .625rem 0;
                    line-height: 1.4;
                }
            }
        }
    }
}

.quickSearchContainer {
    .container {
        #quickSearch {
            padding: 30px 120px;
            border-radius: 20px;

            .formRowTextInputRow {
                flex: 100%;
            }

            .formRowButtonRow {
                button,
                a {
                    white-space: nowrap;
                }
            }
        }
    }
}

.red-text {
    color: var(--red);
}

.text-uppercase {
    text-transform: uppercase;
}

.contentContainer {
    padding-top: 100px;
}

.imageContainer {
    width: 100%;

    > img {
        border-radius: 20px;
        width: 100%;
    }
}

.videoContainer {
    width: 100%;

    video,
    iframe {
        aspect-ratio: 16/9;
        width: 100%;
        border-radius: 20px;
    }
}

h2 {
    &:after {
        content: '';
        width: 80px;
        clear: left;
        height: 4px;
        background: var(--red);
        display: block;
        margin-top: 5px;
    }
}

.titleContainer {
    margin-bottom: 30px;
}

.text-center {
    text-align: center;

    h2 {
        &:after {
            margin: 10px auto;
        }
    }
}

.br-20 {
    border-radius: 20px;
}

.p-20 {
    padding: 20px;
}

.pt-0 {
    padding-top: 0;
}

.pb-50 {
    padding-bottom: 50px;
}

.pb-100 {
    padding-bottom: 100px;
}

.mt-auto {
    margin-top: auto;
}

.mt-20 {
    margin-top: 20px !important;
}

.mb-20 {
    margin-bottom: 20px;
}

.d-flex {
    display: flex;
    gap: var(--gap);
}

.justify-content-center {
    justify-content: center;
}

.align-items-center {
    align-items: center;
}

.align-items-start {
    align-items: flex-start;
}

.row-reverse {
    flex-direction: row-reverse;
}

.flex-column {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.gap-20 {
    --gap: 20px;
}

.gap-30 {
    --gap: 30px;
}

.gap-60 {
    --gap: 60px;
}

.flex-50 {
    flex: calc(50% - var(--gap));
}

.flex-100 {
    flex: 100%;
}

.textContainer {
    ul {
        padding-left: 20px;

        &:not(:last-child) {
            margin-bottom: 20px;
        }
    }
}

.flexslider {
    padding: 0 60px;
    background: none;
    margin: 0;
    border: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;

    .flex-viewport {
        overflow: hidden;
        align-items: stretch;

        ul.slides {
            display: flex;

            li.slide {
                display: flex !important;
                flex-direction: column;
                flex-shrink: 0;

                > a,
                > .slideBlock {
                    display: flex;
                    flex-direction: column;
                    height: 100%;
                    padding: 30px;
                    background: var(--grey);
                    border-radius: 20px;
                    gap: 20px;
                    color: var(--black);
                    text-decoration: none;
                    transition: all .2s ease;
                    overflow: hidden;

                    .iconContainer {
                        i,
                        .number {
                            font-size: 60px;
                            color: var(--red);
                        }

                        .number {
                            font-weight: 100;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 80px;
                            aspect-ratio: 1/1;
                            text-align: center;
                            border-radius: 100%;
                            border: 2px solid var(--red);
                        }
                    }

                    .textContainer {
                        display: flex;
                        flex-direction: column;
                        gap: 20px;

                        h3 {
                            margin-bottom: 0;
                        }

                        .countContainer {
                            color: var(--red);
                        }
                    }

                    .valuesContainer {
                        display: flex;
                        flex-direction: column;
                        gap: 10px;

                        .value {
                            display: flex;
                            gap: 10px;
                            align-items: center;

                            i {
                                color: var(--red);
                            }
                        }
                    }

                    .videoContainer {
                        iframe {
                            width: 100%;
                            aspect-ratio: 16/9;
                        }
                    }

                    &:has(img),
                    &:has(.videoContainer) {
                        padding: 0;

                        .textContainer {
                            padding: 30px;
                        }
                    }

                    &:not(.slideBlock):hover {
                        background: var(--dark-red);
                        color: #fff;

                        .textContainer {
                            .valuesContainer {
                                .value {
                                    i {
                                        color: inherit;
                                    }
                                }
                            }

                            .countContainer {
                                color: inherit;
                            }
                        }
                    }
                }
            }
        }
    }

    ol.flex-control-nav {
        position: relative;
        bottom: initial;
        display: none;
    }

    ul.flex-direction-nav {
        li {
            a {
                margin: 0;
                opacity: 1;

                &:before {
                    font-size: 40px;
                    color: var(--red);
                }

                &.flex-prev {
                    left: 0 !important;
                }

                &.flex-next {
                    right: 0 !important;
                }
            }
        }
    }
}

section:has(+ section.c-resource--grey) {
    margin-bottom: 100px;
}

section.c-resource--grey {
    .flexslider {
        ul.slides {
            li.slide {
                > a,
                > .slideBlock {
                    background: #fff;
                }
            }
        }
    }
}

.curve-divider,
.wave-divider {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    background-color: #ffffff;
    margin-top: -1px;

    svg {
        position: relative;
        display: block;
        width: 100%;
        height: 150px;
    }
}

.wave-divider {
    margin-top: 0;
    margin-bottom: -1px;
}

.accordionsContainer {
    &:not(:last-child) {
        margin-bottom: 20px;
    }

    .accordion {
        border-top: 1px solid darkgrey;

        &:last-child {
            border-bottom: 1px solid darkgrey;
        }

        .accordionHeader {
            position: relative;
            padding: 20px 0;
            display: flex;
            gap: 10px;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;

            h3 {
                margin-bottom: 0;
                display: flex;
                gap: 10px;
            }

            &:after {
                content: '\f078';
                font-family: "Font Awesome 7 Pro";
                transition: all .4s ease;
            }
        }

        .accordionContent {
            display: none;
            padding-bottom: 20px;

            ul,
            ol {
                padding-left: 20px;
                margin-bottom: 20px;
            }

            p:has(+ ul) {
                margin-bottom: 5px;
            }
        }

        &.active {
            .accordionHeader {
                &:after {
                    transform: rotate(180deg);
                }
            }
        }
    }
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

#pojo-a11y-toolbar {
    bottom: 0;

    .pojo-a11y-toolbar-toggle {
        bottom: 0;

        a {
            background: var(--primaryColor);
            color: #fff;
            border: 1px solid var(--primaryColor);
            transition: all .2s ease;

            &:hover {
                background: #fff;
                color: var(--primaryColor);
            }
        }
    }

    .pojo-a11y-toolbar-overlay {
        background: #fff;

        a {
            color: var(--primaryColor);
        }
    }
}

body.pojo-a11y-grayscale {
    filter: none;
    -webkit-filter: none;
    -moz-filter: none;
    -ms-filter: none;
    -o-filter: none;

    header, footer, main, .cookiesButton, .stickyApplyContainer, #pojo-a11y-toolbar, .gdprcookie {
        -webkit-filter: grayscale(100%);
        -webkit-filter: grayscale(1);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
    }
}

.labelContainer.hidden {
    display: block !important;
    height: 0px;
    overflow: hidden;
}
/* Misc Styling Ends */
/* Landing Page Styling */
#intro_pageBlockContainer {
    display: none;
}

.accreditationsContainer {
    margin-top: 20px;

    img {
        max-height: 100px;
        object-fit: contain;
        object-position: left;
    }
}

#benefitsContainer {
    .container {
        position: relative;
        overflow: hidden;

        &:before,
        &:after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100px;
            display: block;
            z-index: 1;
            background: #fff;
            opacity: 0.5;
        }

        &:before {
            left: 0;
        }

        &:after {
            right: 0;
        }

        .sliderContainer {
            .flexslider {
                .flex-viewport {
                    overflow: visible !important;

                    ul.slides {
                        li.slide {
                            > a, > .slideBlock {
                                .iconContainer {
                                    img {
                                        max-width: 60px;
                                        aspect-ratio: 1/1;
                                    }
                                }

                                &:has(img) {
                                    padding: 30px;

                                    .textContainer {
                                        padding: 0;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
/* Landing Page Styling Ends */
/* Work With Us Page Styling */
.servicesContainer {
    .services {
        padding: 30px;
        border-radius: 20px;

        a {
            color: var(--black);
            text-decoration: none;
            text-transform: uppercase;

            &:hover {
                text-decoration: underline;
            }
        }
    }
}
/* Work With Us Page Styling Ends */

/* How We Work Page Styling */
#storiesSlider.flexslider {
    .flex-viewport {
        ul.slides {
            li.slide {
                .slideBlock {
                    &[data-modal-id] {
                        cursor: pointer;

                        .imageContainer {
                            overflow: hidden;

                            img {
                                aspect-ratio: 16/9;
                                object-fit: cover;
                                object-position: 50% 50%;
                                transition: all .4s ease;
                            }
                        }

                        &:hover {
                            .imageContainer {
                                img {
                                    transform: scale(1.2);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.modalsContainer {
    .modal {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 80vw;
        width: 100%;
        max-height: 80vh;
        border-radius: 20px;
        overflow: hidden;
        background: #fff;
        padding: 60px;
        z-index: 9992;
        display: none;

        .close {
            position: absolute;
            top: 0;
            right: 0;
            padding: 10px;
            font-size: 30px;
            line-height: 1;
            cursor: pointer;
            background: var(--grey);
            transition: all .2s ease;

            &:hover {
                background: var(--dark-red);
                color: #fff;
            }
        }

        .modalContent {
            overflow: auto;
            max-height: calc(90vh - 60px);
        }
    }
}
/* How We Work Page Styling Ends */

/* How We Hire Page Styling */
#processSlider {
    ul.slides {
        li.slide {
            .slideBlock {
                cursor: pointer;
                height: auto;

                .textContainer {
                    h3 {
                        display: flex;
                        gap: 20px;
                        justify-content: space-between;

                        &:after {
                            content: '\f078';
                            font-family: "Font Awesome 7 Pro";
                            transition: all .4s ease;
                        }
                    }

                    .details {
                        display: none;
                    }
                }

                &.active {
                    .textContainer {
                        h3 {
                            &:after {
                                transform: rotate(180deg);
                            }
                        }
                    }
                }
            }
        }
    }
}
/* How We Hire Page Styling Ends */
/* Results Page Styling */
:is(.pos_find_results, .pos_find_results_map) .pageViewMain {
    display: flex;
    justify-content: center;
    flex-flow: row wrap;

    #posBrowser_Filter_pageBlockContainer {
        flex: 0 0 91.66667%;
        max-width: 91.66667%;
        float: none;

        @media (min-width: 64em) {
            flex: 0 0 30%;
            max-width: 30%;
        }

        .pageBlockContainerMiddle {
            border: none;
            padding: 0;
            overflow: hidden;

            #posBrowser_Filter_pageBlock {
                overflow: hidden;
                padding: 0;

                .filtersSummary {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 10px;

                    .alternateViews a {
                        &:after {
                            font-family: "Font Awesome 7 Pro";
                            margin-left: 5px;
                            display: inline-block;
                            font-weight: 900;
                        }

                        &.alternateViewsButton_List:after {
                            content: '\f03a';
                        }

                        &.alternateViewsButton_Map:after {
                            content: '\f5a0';
                        }

                        &.alternateViewsButton_Selected {
                            display: none;
                        }
                    }
                }

                .filtersExpander {
                    padding-top: 20px;
                    position: relative;
                    display: none;

                    a {
                        width: auto;
                        padding-right: 35px;
                        position: relative;

                        &:after {
                            content: '\25BC';
                            font-weight: bold;
                            right: 15px;
                            transition: transform 0.4s ease;
                            position: absolute;
                        }

                        &.filtersExpanderButton_Expanded:after {
                            transform: rotate(180deg);
                        }
                    }
                }

                .FiltersContainer {
                    border: none;
                    display: block;
                    transition: all .4s ease;
                    overflow: hidden;

                    .ButtonsRow {
                        display: none;
                    }

                    .FilterRowsContainer {
                        padding: 0;
                        background: none;
                        display: flex;
                        flex-direction: column;
                        gap: 10px;

                        .FilterRow {
                            width: 100%;
                            margin-bottom: 0;
                            text-align: left;
                            border: 2px solid var(--primaryColor);
                            border-radius: 20px;
                            overflow: hidden;

                            .HeaderContainer {
                                background: var(--primaryColor);
                                color: #fff;
                                padding-right: 16px;
                                border: none;
                                overflow: hidden;

                                .HeaderLabel {
                                    padding: 12px 30px 12px 16px;
                                    float: none;
                                    font-size: inherit;
                                    color: inherit;
                                    position: relative;
                                    width: 100%;
                                    cursor: pointer;

                                    &:after {
                                        content: '\f068';
                                        font-family: "Font Awesome 7 Pro";
                                        font-weight: bold;
                                        position: absolute;
                                        top: 50%;
                                        right: 0;
                                        transform: translateY(-50%);
                                    }
                                }
                            }

                            .ValueContainer {
                                margin: 0;
                                padding: 24px;
                                background: transparent;
                                color: inherit;

                                .LocationValue {
                                    padding: 0;

                                    .locationValueLabel:after {
                                        content: ':';
                                    }
                                }

                                ul.ValueList {
                                    padding: 0 0 1px 0;
                                    display: flex;
                                    flex-direction: column;
                                    gap: 10px;
                                    max-height: 320px;
                                    overflow: auto;

                                    li {
                                        padding: 0;
                                        float: none;
                                        background: none;
                                        width: 100%;
                                        margin: 0;
                                        display: flex;
                                        gap: 5px;

                                        &:before {
                                            content: '\f0c8';
                                            font-family: "Font Awesome 7 Pro";
                                            font-weight: 400;
                                        }

                                        a {
                                            font-size: inherit;
                                            color: inherit;
                                            text-decoration: none !important;
                                            font-weight: 400;

                                            .label {
                                                color: inherit;
                                                font-size: inherit;
                                                padding: 0;
                                                border-radius: 0;
                                                display: initial;
                                                background: none;
                                                line-height: inherit;
                                                cursor: inherit;
                                                white-space: initial;
                                            }
                                        }

                                        &.ValueItem_selected {
                                            background: none;

                                            &:before {
                                                content: '\f14a';
                                            }

                                            a {
                                                font-weight: bold;
                                                text-decoration: underline;
                                            }
                                        }

                                        &.ValueItem_empty:not(.ValueItem_selected) {
                                            display: none;
                                        }

                                        &.possibleDistancesLabel {
                                            width: 100%;
                                            background: none;
                                            padding: 0;
                                            border: none;
                                            cursor: initial;
                                            pointer-events: none;

                                            &:before {
                                                display: none;
                                            }

                                            &:after {
                                                content: ':';
                                            }
                                        }
                                    }
                                }
                            }

                            .ButtonsContainer {
                                width: 100%;
                                padding: 0px 30px 12px 16px;

                                a.RemoveLink {
                                    display: block;
                                    color: inherit;
                                    margin: 0;
                                }
                            }

                            .FilterContainer.closed {
                                .HeaderContainer .HeaderLabel:after {
                                    content: "\f067";
                                }

                                .ValueContainer {
                                    display: none;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    #posBrowser_ResultsGrid_pageBlockContainer,
    #MapBlock_pageBlockContainer {
        margin: 0;
        flex: 0 0 91.66667%;
        max-width: 91.66667%;

        @media (min-width: 64em) {
            margin-left: 8.33333%;
            flex: 0 0 60%;
            max-width: 60%;
        }
    }
}

#MapBlock_pageBlockContainer {
    .addressContainer {
        width: 100%;
        position: relative;
        left: initial !important;
        display: none;

        form {
            display: flex;
            flex-direction: column;
            gap: 5px;

            .addressLabel {
                width: 100%;
                margin: 0;
            }
        }
    }
}

.posListHover {
    display: none !important;
}

.pos_find_results .pageViewMain #posBrowser_ResultsGrid_pageBlockContainer .pageBlockContainerMiddle #posBrowser_ResultsGrid_pageBlock,
#MapBlock_pageBlockContainer .pageBlockContainerMiddle #MapBlock_pageBlock {
    padding: 0;

    .gridTop,
    .gridFooter {
        border: none;
        position: relative;
        overflow: visible;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 0;
    }

    .gridFooter {
        margin-top: .7em;

        .gridButtons {
            display: none;
        }
    }

    .gridTop {
        margin-bottom: .7em;

        .TilesGridAlternateViewsContainer {
            margin: 0;
            float: none;

            .TilesGridAlternateViewsInnerContainer {
                padding: 0;
                margin: 0;
                float: none;
                display: flex;
                gap: 5px;

                .alternateViewsText,
                .alternateViewsCurrent {
                    float: none;
                }

                .alternateViewsText {
                    color: inherit;
                    font-weight: bold;
                    margin: 0;

                    &:after {
                        content: ':';
                    }
                }

                .alternateViewsCurrent a {
                    font-size: inherit;
                    color: var(--red);
                    padding: 0;
                }
            }
        }

        .TilesGridSortingContainer {
            float: none;
            display: none;

            .TilesGridSortingInnerContainer {
                float: none;
                display: flex;
                flex-direction: column;
                margin: 0;
                padding: 0;

                .sortingText,
                .sortingCurrent {
                    float: none;
                }

                .sortingText {
                    color: inherit;
                    font-weight: bold;
                    text-transform: uppercase;
                    margin: 0;
                }

                .sortingCurrent a {
                    font-size: inherit;
                    text-transform: uppercase;
                    color: var(--dark-red);
                    padding: 0;
                }
            }
        }

        .TilesGridSortingPopup {
            z-index: 10;
            background: var(--primaryColor);
            border-radius: 0;
            border: 2px solid var(--dark-red);
            margin-top: 0 !important;
            top: 100%;
            color: inherit;
            text-transform: uppercase;

            a {
                font-size: inherit;
                color: inherit;
            }
        }
    }

    .pagingControls_Tiles {
        display: flex;
        align-items: center;
        gap: 5px;
        float: none;

        .pagingText,
        .pagingButtons {
            float: none;
            padding-top: 0;
            white-space: nowrap;
        }

        .pagingButtons {
            display: flex;
            gap: 5px;

            a {
                background: none;
                border: none;
                margin: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                width: auto;
                height: auto;
                line-height: 1;
                font-size: 25px;
                color: var(--red);
                transition: all .2s ease;
                text-decoration: none;

                &:hover {
                    color: var(--dark-red);
                }

                &::before {
                    content: '\f32b';
                    font-family: "Font Awesome 7 Pro";
                    font-weight: 300;
                }

                &.scroller_moveprev::before {
                    content: '\f32a';
                }

                &.buttonDisabled {
                    opacity: 0.3;
                    cursor: initial;
                    pointer-events: none;
                }

                img {
                    display: none;
                }
            }
        }
    }

    .gridContent {
        padding-top: 0;
        margin-bottom: .7em;

        .noResults .createAlertsContainer {
            width: 100%;
            text-align: center;

            .buttonsContainer .buttonsLeft {
                display: inline-block;

                .createAlertsButton {
                    width: auto;
                }
            }
        }

        .ListGridContainer {
            display: flex;
            flex-wrap: wrap;
            gap: 2em;

            .rowContainerHolder {
                width: 100%;
                border-bottom: none;
                position: relative;
                display: flex;
                flex-direction: column;
                flex: 45%;
                background: transparent;
                border: 2px solid var(--red);
                border-radius: 20px;
                overflow: hidden;
                transition: all .2s ease;

                .rowContainer {
                    width: 100%;
                    border: none;
                    margin: 0 !important;
                    padding: 2em;
                    height: auto;
                    position: relative;
                    text-align: left;
                    display: flex;
                    flex-direction: column;
                    flex: 1 0 auto;
                    gap: 10px;
                    background: none;

                    .rowHeader {
                        padding: 0;
                        float: none;

                        .rowLabel a {
                            text-decoration: none !important;
                            color: inherit;
                            font-weight: 700;
                            font-size: 1.25rem;
                            line-height: 1.2;

                            @media (min-width: 40em) {
                                font-size: 1.5rem;
                            }
                        }
                    }

                    .rowContentContainer {
                        float: none;

                        .rowItemsContainer,
                        .rowItemsInnerContainer {
                            margin: 0;
                            padding: 0;
                        }

                            .rowItemsContainer .rowItemsInnerContainer {
                                display: flex;
                                flex-direction: column;
                                align-items: flex-start;
                                gap: 10px;
                                overflow: visible;

                                .rowItemsInnerContainer2 {
                                    display: flex;
                                    flex-wrap: wrap;
                                    align-items: flex-start;
                                    gap: 5px;
                                    overflow: visible;

                                    span {
                                        display: flex;
                                        width: auto;
                                        transition: all .2s ease;
                                        width: 100%;

                                        &::before {
                                            font-family: "Font Awesome 7 Pro";
                                            font-weight: 900;
                                            color: var(--red);
                                            transition: all .2s ease;
                                            margin-right: 5px;
                                        }

                                        &.codelist5value_vacancyColumn::before,
                                        &.city_vacancyColumn::before,
                                        &.distancefromlocationinkm_vacancyColumn::before {
                                            content: '\f3c5';
                                        }

                                        &.displaysalarydescription_vacancyColumn::before {
                                            content: '\f0d6';
                                        }

                                        &.pospublishenddate_vacancyColumn::before {
                                            content: '\e0d2';
                                        }

                                        &.lastpublisheddate_vacancyColumn::before {
                                            content: '\f2e1';
                                        }

                                        &.name_vacancyColumn::before {
                                            content: '\23';
                                        }

                                        &.text1_vacancyColumn {
                                            &::before {
                                                content: '\f017';
                                            }

                                            &::after {
                                                content: 'hours per week';
                                                margin-left: 5px;
                                            }
                                        }

                                        &.city_vacancyColumn,
                                        &.postcode_vacancyColumn {
                                            width: auto;
                                        }

                                        &.city_vacancyColumn {
                                            &::before {
                                                content: '\f3c5';
                                            }

                                            &:has(~ .postcode_vacancyColumn)::after {
                                                content: ',';
                                            }
                                        }

                                        &.comma {
                                            display: none;
                                        }
                                    }
                                }
                            }
                    }
                }

                &:hover {
                    background: var(--dark-red);
                    border-color: var(--dark-red);
                    color: #fff;

                    .rowContainer {
                        .rowContentContainer {
                            .rowItemsContainer {
                                .rowItemsInnerContainer {
                                    .rowItemsInnerContainer2 {
                                        span {
                                            color: #fff;

                                            &::before {
                                                color: inherit;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                .mapOuterContainer .addressContainer {
                    position: relative;
                    left: initial !important;
                    width: 100%;
                    box-sizing: border-box;
                    background: #f1f1f1;
                    border: none;
                    padding: 20px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    z-index: 1;

                    .addressInnerContainer {
                        width: 100%;
                        max-width: 500px;

                        form {
                            display: flex;
                            flex-direction: column;
                            gap: 5px;

                            .addressLabel {
                                width: 100%;
                                text-align: left;
                            }

                            .addressInput {
                                width: 100%;
                                position: relative;
                                display: inline-block;
                                vertical-align: middle;
                                margin: 0;
                            }
                        }
                    }
                }
            }
        }
    }
}
/* Results Page Styling Ends */
/* Job Description Styling */
#posdesc_pageBlockContainer #posdesc_pageBlock {
    width: 100%;

    .LeftJobBox {
        width: 100%;
        flex: calc(70% - var(--gap));
        display: flex;
        flex-direction: column;
        gap: 20px;

        .PosDescriptionText {
            display: flex;
            flex-direction: column;

            .earcu_posdescriptionContainer {
                padding-right: 0;
                text-align: left;

                ul,
                ol {
                    padding-left: 20px;

                    &:not(:last-child) {
                        margin-bottom: 20px;
                    }
                }

                ul {
                    li {
                        &::marker {
                            color: var(--red);
                        }
                    }
                }
            }
        }
    }

    .RightJobBox {
        width: 100%;
        flex: calc(30% - var(--gap));
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .rightBlock {
        padding: 1.5rem;
        background: var(--grey);
        border-radius: 20px;
        border: none;

        h3 {
            font-weight: bold;
            color: var(--primaryColor);
        }

        &.recruiterContainer {
            padding: 0;
            display: flex;

            .rec-img img {
                height: 100%;
            }

            .recruiterText {
                padding: 1.5rem;
                flex: 100%;
                display: flex;
                flex-direction: column;
                gap: 16px;

                p {
                    margin-bottom: 0;

                    &:empty {
                        display: none;
                    }
                }
            }
        }

        &.jobValues {
            .posdescriptionPropertyBox {
                margin: 0;
                border: none;
                padding: 0;

                ul {
                    display: flex;
                    flex-direction: column;
                    gap: 20px;
                    flex-wrap: wrap;

                    li {
                        margin-bottom: 0;

                        .jobSumValue {
                            margin: 0;

                            a {
                                cursor: text;
                                pointer-events: none;
                                color: inherit;
                                text-decoration: none;
                            }
                        }
                    }
                }
            }
        }

        &.possharing {
            text-align: center;

            #PosDescSharingItems {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                justify-content: center;

                a {
                    text-align: center;
                    color: var(--red);
                    transition: all .2s ease;
                    text-decoration: none;

                    &:before {
                        font-family: "Font Awesome 7 Brands";
                        font-size: 30px;
                    }

                    &#linkedin_PosDescSharingItem {
                        &:before {
                            content: '\f0e1';
                        }
                    }

                    &#facebook_PosDescSharingItem {
                        &:before {
                            content: '\f09a';
                        }
                    }

                    &#twitter_PosDescSharingItem {
                        &:before {
                            content: '\e61b';
                        }
                    }

                    &#email_PosDescSharingItem {
                        &:before {
                            font-family: "Font Awesome 7 Pro";
                            content: '\f0e0';
                        }
                    }

                    div {
                        display: none;
                    }

                    &:hover {
                        color: var(--dark-red);
                    }
                }
            }
        }

        &.arrowList {
            text-align: center;

            h3 {
                margin-bottom: 0;
            }
        }
    }

    .vidMap {
        display: flex;
        gap: 10px;
        flex-direction: column;

        .videoOuterContainer {
            flex: 50%;
            max-width: 50%;
            width: 100%;

            .movieOuterContainer > .moviePlayerContainer {
                max-width: 100% !important;
            }
        }

        .VacancyMap {
            flex: 50%;
            width: 100%;
            display: flex;
            flex-direction: column;

            .map {
                &,
                #JobDescriptionMap_vacancyMap_pageBlockContainer,
                #JobDescriptionMap_vacancyMap_pageBlockContainer .pageBlockContainerMiddle,
                #JobDescriptionMap_vacancyMap_pageBlockContainer .pageBlockContainerMiddle #JobDescriptionMap_vacancyMap_pageBlock,
                #JobDescriptionMap_vacancyMap_pageBlockContainer .pageBlockContainerMiddle #JobDescriptionMap_vacancyMap_pageBlock .pageBlockInner,
                #JobDescriptionMap_vacancyMap_pageBlockContainer .pageBlockContainerMiddle #JobDescriptionMap_vacancyMap_pageBlock .pageBlockInner .mapContainer,
                #JobDescriptionMap_vacancyMap_pageBlockContainer .pageBlockContainerMiddle #JobDescriptionMap_vacancyMap_pageBlock .pageBlockInner .mapContainer #vacancyMap {
                    display: flex;
                    flex-direction: column;
                    flex: 1 0 auto;
                }

                #JobDescriptionMap_vacancyMap_pageBlockContainer {
                    margin: 0;

                    .pageBlockContainerMiddle #JobDescriptionMap_vacancyMap_pageBlock {
                        padding: 0;

                        .pageBlockInner .mapContainer {
                            border-radius: 20px;
                            overflow: hidden;

                            #vacancyMap {
                                height: auto;
                                min-height: 200px;
                                background-size: cover !important;
                            }

                            .ButtonHolder .miniMapButton {
                                padding: 0;
                                background: none;

                                a {
                                    width: 100%;
                                    border-radius: 0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .arrowList {
        display: flex;
        flex-direction: column;
        gap: 20px;

        .arrowListTitle {
            font-size: 2.125rem;
            line-height: 1.2;
            font-weight: 700;
            font-family: "Playfair Display", serif;

            @media(min-width:40.063em) {
                font-size: 2.5rem;
            }
        }

        ul {
            list-style: none;
            padding-left: 0;
            display: flex;
            gap: 5px;
            flex-wrap: wrap;

            li {
                a {
                    position: relative;
                    display: flex;
                    gap: 5px;
                    width: auto;
                    height: auto;
                    min-width: 1px;
                    padding: 12px 56px;
                    margin: 0;
                    float: none;
                    background: var(--red);
                    border: none;
                    border-radius: 20px;
                    text-align: center;
                    color: #fff;
                    line-height: 1.5;
                    transition: all 0.3s;
                    text-decoration: none !important;

                    &:before {
                        content: '\f15c';
                        font-family: "Font Awesome 7 Pro";
                    }

                    &:hover {
                        background: var(--dark-red);
                        color: #fff !important;
                    }
                }
            }
        }
    }
}

div.posDescriptionContainer317 .BigVacancyMap {
    display: none;
    width: 100%;

    #JobDescriptionMap_BigVacancyMap_pageBlockContainer #JobDescriptionMap_BigVacancyMap_pageBlock {
        padding: 0;
    }

    .ButtonHolder .bigMapButton {
        padding: 0;
        background: none;

        span,
        a {
            width: 100%;
        }
    }

    #vacancyMap {
        background-size: cover !important;
    }
}
/* Job Description Styling Ends */
/* Login/Register Styling */
#UsernameForm_pageBlock .ssoIconsInnerContainer {
    text-align: center;
    max-width: 100%;
}

    #UsernameForm_pageBlock .ssoIconsInnerContainer .ssoIcon {
        float: none;
        display: inline-block;
        vertical-align: middle;
    }

.passwordreset_request #form_pageBlockContainer .blockSummarySurround {
    text-align: center;
}
/* Login/Register Styling Ends */
/* Profile Styling */
.welcome #WelcomeInfoBlock_pageBlockContainer #WelcomeInfoBlock_pageBlock #WelcomeInfoBlock_form {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

    .welcome #WelcomeInfoBlock_pageBlockContainer #WelcomeInfoBlock_pageBlock #WelcomeInfoBlock_form .formRowIconRow {
        width: 100%;
        flex: 48%;
        padding: 1.5rem;
        overflow: hidden;
        position: relative;
        background: var(--grey);
        display: block;
        cursor: pointer;
        transition: all .2s ease;
        margin: 0;
        border-radius: 20px;
    }

        .welcome #WelcomeInfoBlock_pageBlockContainer #WelcomeInfoBlock_pageBlock #WelcomeInfoBlock_form .formRowIconRow .iconContainer {
            padding: 0;
            margin: 0;
            overflow: visible;
        }

            .welcome #WelcomeInfoBlock_pageBlockContainer #WelcomeInfoBlock_pageBlock #WelcomeInfoBlock_form .formRowIconRow .iconContainer .iconImage {
                display: none;
            }

            .welcome #WelcomeInfoBlock_pageBlockContainer #WelcomeInfoBlock_pageBlock #WelcomeInfoBlock_form .formRowIconRow .iconContainer .iconValue {
                margin-left: 0;
                display: flex;
                flex-direction: column;
                gap: 10px;
            }

                .welcome #WelcomeInfoBlock_pageBlockContainer #WelcomeInfoBlock_pageBlock #WelcomeInfoBlock_form .formRowIconRow .iconContainer .iconValue .iconLabel {
                    margin-bottom: 0;
                    float: left;
                    text-transform: lowercase;
                }

                    .welcome #WelcomeInfoBlock_pageBlockContainer #WelcomeInfoBlock_pageBlock #WelcomeInfoBlock_form .formRowIconRow .iconContainer .iconValue .iconLabel:first-letter {
                        text-transform: uppercase
                    }

                    .welcome #WelcomeInfoBlock_pageBlockContainer #WelcomeInfoBlock_pageBlock #WelcomeInfoBlock_form .formRowIconRow .iconContainer .iconValue .iconLabel a {
                        text-decoration: none;
                        color: inherit;
                        font-size: 2.05rem;
                        line-height: 2.5rem;
                        margin-bottom: 1rem;
                    }


                .welcome #WelcomeInfoBlock_pageBlockContainer #WelcomeInfoBlock_pageBlock #WelcomeInfoBlock_form .formRowIconRow .iconContainer .iconValue .iconDescription {
                    color: inherit;
                }

            .welcome #WelcomeInfoBlock_pageBlockContainer #WelcomeInfoBlock_pageBlock #WelcomeInfoBlock_form .formRowIconRow .iconContainer .iconRowValues {
                line-height: 27px;
                font-size: .9em;
                overflow: visible;
                float: right;
                color: inherit;
            }

                .welcome #WelcomeInfoBlock_pageBlockContainer #WelcomeInfoBlock_pageBlock #WelcomeInfoBlock_form .formRowIconRow .iconContainer .iconRowValues .iconRowValue {
                    margin: 0;
                    float: none;
                    display: inline-block;
                    vertical-align: middle;
                }

                    .welcome #WelcomeInfoBlock_pageBlockContainer #WelcomeInfoBlock_pageBlock #WelcomeInfoBlock_form .formRowIconRow .iconContainer .iconRowValues .iconRowValue .iconRowValueLabel {
                        margin-right: 0;
                    }

                        .welcome #WelcomeInfoBlock_pageBlockContainer #WelcomeInfoBlock_pageBlock #WelcomeInfoBlock_form .formRowIconRow .iconContainer .iconRowValues .iconRowValue .iconRowValueLabel:after {
                            content: ':';
                            margin-right: 5px;
                        }

                    .welcome #WelcomeInfoBlock_pageBlockContainer #WelcomeInfoBlock_pageBlock #WelcomeInfoBlock_form .formRowIconRow .iconContainer .iconRowValues .iconRowValue .iconRowValueData {
                        font-weight: normal;
                    }

                        .welcome #WelcomeInfoBlock_pageBlockContainer #WelcomeInfoBlock_pageBlock #WelcomeInfoBlock_form .formRowIconRow .iconContainer .iconRowValues .iconRowValue .iconRowValueData:after {
                            content: '|';
                            padding: 0 12px;
                        }

                    .welcome #WelcomeInfoBlock_pageBlockContainer #WelcomeInfoBlock_pageBlock #WelcomeInfoBlock_form .formRowIconRow .iconContainer .iconRowValues .iconRowValue.iconRowValue_additional_information_required {
                        color: red;
                    }

                    .welcome #WelcomeInfoBlock_pageBlockContainer #WelcomeInfoBlock_pageBlock #WelcomeInfoBlock_form .formRowIconRow .iconContainer .iconRowValues .iconRowValue:last-child .iconRowValueData:after {
                        display: none;
                    }

        .welcome #WelcomeInfoBlock_pageBlockContainer #WelcomeInfoBlock_pageBlock #WelcomeInfoBlock_form .formRowIconRow:hover:before {
            height: 100%;
        }

        .welcome #WelcomeInfoBlock_pageBlockContainer #WelcomeInfoBlock_pageBlock #WelcomeInfoBlock_form .formRowIconRow:hover {
            background: var(--primaryColor);
            color: #fff;
        }

            .welcome #WelcomeInfoBlock_pageBlockContainer #WelcomeInfoBlock_pageBlock #WelcomeInfoBlock_form .formRowIconRow:hover .iconContainer .iconValue .iconLabel,
            .welcome #WelcomeInfoBlock_pageBlockContainer #WelcomeInfoBlock_pageBlock #WelcomeInfoBlock_form .formRowIconRow:hover .iconContainer .iconRowValues,
            .welcome #WelcomeInfoBlock_pageBlockContainer #WelcomeInfoBlock_pageBlock #WelcomeInfoBlock_form .formRowIconRow:hover .iconContainer .iconValue .iconDescription {
                color: #fff;
            }

                .welcome #WelcomeInfoBlock_pageBlockContainer #WelcomeInfoBlock_pageBlock #WelcomeInfoBlock_form .formRowIconRow:hover .iconContainer .iconValue .iconLabel a,
                .welcome #WelcomeInfoBlock_pageBlockContainer #WelcomeInfoBlock_pageBlock #WelcomeInfoBlock_form .formRowIconRow:hover .iconContainer .iconRowValues .iconRowValue,
                .welcome #WelcomeInfoBlock_pageBlockContainer #WelcomeInfoBlock_pageBlock #WelcomeInfoBlock_form .formRowIconRow:hover .iconContainer .iconRowValues .iconRowValue .iconRowValueData:after {
                    color: #fff;
                }

.pageBlockInner_FormBlock .formRowIconRow .iconRowValues .iconRowValueHighLight {
    transition: all .15s ease;
}

#MyDetails_Username_pageView #Summary_emailList_formRow .emailButtonsContainer .buttonsRight {
    max-width: 100%;
}

    #MyDetails_Username_pageView #Summary_emailList_formRow .emailButtonsContainer .buttonsRight ul {
        display: flex;
        gap: 5px;
        justify-content: flex-end;
    }

        #MyDetails_Username_pageView #Summary_emailList_formRow .emailButtonsContainer .buttonsRight ul li {
            width: auto;
            margin: 0;
        }

.mydetails div.pageBlockTitle {
    padding: 0;
    display: block;
    width: 100%;
}

.mydetails #MyDetails_pageView div.pageBlockContainer:first-of-type:before {
    display: none;
}

.mydetails #MyDetails_pageView div.pageBlockContainer:before {
    content: '';
    width: 100%;
    margin: 50px 0;
    overflow: hidden;
    height: 2px;
    background: #999999;
    display: block;
}

.mydetails #MyDetails_pageView div.pageBlockContainer div.pageBlockContent {
    padding: 0;
    margin-bottom: 20px;
}

    .mydetails #MyDetails_pageView div.pageBlockContainer div.pageBlockContent#intro_pageBlock,
    .mydetails #MyDetails_pageView div.pageBlockContainer div.pageBlockContent#MyDetailsStauts_pageBlock {
        padding: 0;
        border-radius: 0;
        background: none;
    }

    .mydetails #MyDetails_pageView div.pageBlockContainer div.pageBlockContent .labelContainer {
        color: inherit;
    }

    .mydetails #MyDetails_pageView div.pageBlockContainer div.pageBlockContent#ShowCurrentAppLink_pageBlock .buttonsRight,
    .mydetails #MyDetails_pageView div.pageBlockContainer div.pageBlockContent#ShowCurrentAppLink2_pageBlock .buttonsRight {
        margin-top: 20px;
    }

        .mydetails #MyDetails_pageView div.pageBlockContainer div.pageBlockContent#ShowCurrentAppLink_pageBlock .buttonsRight,
        .mydetails #MyDetails_pageView div.pageBlockContainer div.pageBlockContent#ShowCurrentAppLink_pageBlock .buttonsRight ul li,
        .mydetails #MyDetails_pageView div.pageBlockContainer div.pageBlockContent#ShowCurrentAppLink2_pageBlock .buttonsRight,
        .mydetails #MyDetails_pageView div.pageBlockContainer div.pageBlockContent#ShowCurrentAppLink2_pageBlock .buttonsRight ul li {
            width: 100%;
            text-align: center;
        }

.mydetails #MyDetailsStauts_pageBlockContainer #MyDetailsStauts_pageBlock .eArcuLeft {
    width: 100%;
}

    .mydetails #MyDetailsStauts_pageBlockContainer #MyDetailsStauts_pageBlock .eArcuLeft #eArcuProfileSummary {
        display: none;
    }

    .mydetails #MyDetailsStauts_pageBlockContainer #MyDetailsStauts_pageBlock .eArcuLeft #eArcuLinks {
        border: none;
        overflow: auto;
        padding: 0;
    }

        .mydetails #MyDetailsStauts_pageBlockContainer #MyDetailsStauts_pageBlock .eArcuLeft #eArcuLinks ul li {
            float: left;
            width: 49.5%;
            margin-bottom: 10px;
            padding: 0;
        }

            .mydetails #MyDetailsStauts_pageBlockContainer #MyDetailsStauts_pageBlock .eArcuLeft #eArcuLinks ul li:before {
                display: none;
            }

            .mydetails #MyDetailsStauts_pageBlockContainer #MyDetailsStauts_pageBlock .eArcuLeft #eArcuLinks ul li:nth-child(2n+2) {
                float: right;
            }

            .mydetails #MyDetailsStauts_pageBlockContainer #MyDetailsStauts_pageBlock .eArcuLeft #eArcuLinks ul li a {
                display: block;
                text-align: center;
            }

.mydetails #MyDetailsStauts_pageBlockContainer #MyDetailsStauts_pageBlock .eArcuRight {
    display: none;
}

.mydetails #MyDetailsStauts_pageBlockContainer #MyDetailsStauts_pageBlock .eArcuBottom {
    margin-top: 20px;
}

#MyDetails_pageView .editblocklink a,
#Application_Section_PersonalDetails_pageView .editblocklink a {
    margin: 0 !important;
}

.mydetails .pageBlockContainer_GridBlock.Renderer_ListWithEditButtons .pageBlockInner_GridBlock .ListGridContainer .rowContainer {
    border: none;
}

    .mydetails .pageBlockContainer_GridBlock.Renderer_ListWithEditButtons .pageBlockInner_GridBlock .ListGridContainer .rowContainer .rowHeader {
        padding: 0;
    }

        .mydetails .pageBlockContainer_GridBlock.Renderer_ListWithEditButtons .pageBlockInner_GridBlock .ListGridContainer .rowContainer .rowHeader .rowLabel {
            margin: 10px 0 0;
        }

    .mydetails .pageBlockContainer_GridBlock.Renderer_ListWithEditButtons .pageBlockInner_GridBlock .ListGridContainer .rowContainer .rowContentContainer .rowItemsContainer {
        margin: 0;
        padding: 0;
    }

        .mydetails .pageBlockContainer_GridBlock.Renderer_ListWithEditButtons .pageBlockInner_GridBlock .ListGridContainer .rowContainer .rowContentContainer .rowItemsContainer .rowItemContainer,
        .mydetails .pageBlockContainer_GridBlock.Renderer_ListWithEditButtons .pageBlockInner_GridBlock .ListGridContainer .rowContainer .rowContentContainer .rowItemsContainer .rowItemContainer .rowItemLabel {
            padding: 0;
        }

#MyDetails_ConnectedServices_pageView #ConnectedServicesForm_pageBlock .serviceContainer:nth-child(2n+1) {
    clear: left;
}

#MyDetails_ConnectedServices_pageView #ConnectedServicesForm_pageBlock .serviceContainer2 {
    padding: 20px;
    border: none;
    text-align: center;
    min-height: 90px;
    margin: 0;
}

    #MyDetails_ConnectedServices_pageView #ConnectedServicesForm_pageBlock .serviceContainer2 .logoContainer {
        width: 100%;
        margin-bottom: 20px;
    }

        #MyDetails_ConnectedServices_pageView #ConnectedServicesForm_pageBlock .serviceContainer2 .logoContainer img {
            margin: 0 auto;
            display: block;
        }

    #MyDetails_ConnectedServices_pageView #ConnectedServicesForm_pageBlock .serviceContainer2 .statusContainer {
        margin-left: 0;
        float: left;
        width: 100%;
    }

        #MyDetails_ConnectedServices_pageView #ConnectedServicesForm_pageBlock .serviceContainer2 .statusContainer .connectedContainer {
            margin-bottom: 20px;
        }

#Welcome_pageView #ToDoList_pageBlockContainer,
#Welcome_pageView #ToDoList_pageBlockContainer #ToDoList_pageBlock {
    overflow: visible;
}

    #Welcome_pageView #ToDoList_pageBlockContainer #ToDoList_pageBlock .ulListItem:before {
        display: none;
    }

    #Welcome_pageView #ToDoList_pageBlockContainer #ToDoList_pageBlock .ulListItemLabel {
        padding: 20px;
        background-image: none;
        text-align: center;
        background: var(--grey);
        border: none;
        border-radius: 20px;
    }

#MyDetails_pageView #eArcuContactConsent .buttonsRight .buttonAnchor:hover {
    color: #fff;
}

.pageBlockContainer_GridBlock.Renderer_ListWithEditButtons .pageBlockInner_GridBlock .ListGridContainer .rowButtons {
    padding: 0;
}

.interviewbookingbyapplication div.pageBlockContainer .pageBlockInner_GridBlock table.gridTable thead,
.interviewbookingbyapplication div.pageBlockContainer .pageBlockInner_GridBlock table.gridTable tbody,
.interviewbookingbyapplication div.pageBlockContainer .pageBlockInner_GridBlock table.gridTable tr {
    width: 100%;
}

    .interviewbookingbyapplication div.pageBlockContainer .pageBlockInner_GridBlock table.gridTable tr th:nth-child(n+3),
    .interviewbookingbyapplication div.pageBlockContainer .pageBlockInner_GridBlock table.gridTable tr td:nth-child(n+3) {
        width: 25%;
    }

.interviewdetailform .pageBlockInner_FormBlock .mapRow .mapContainer_Small {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

    .interviewdetailform .pageBlockInner_FormBlock .mapRow .mapContainer_Small .mapInnerContainer {
        width: 100%;
        margin: 0;
    }

.pageBlockInner_GridBlock table.gridTable {
    width: 100% !important;
    display: block;
}

div.pageBlockInner_FormBlock div.boxedText {
    background: none;
}

#MyJobFeedForm_pageBlockContainer #MyJobFeedForm_pageBlock .formRow .labelContainer,
.pos_alertcriteria #Form_pageBlockContainer #Form_pageBlock .formRow .labelContainer {
    font-weight: bold;
}

.myjobfeed div.pageBlockInner_FormBlock div.formRow#MyJobFeedForm_multicodelist2_formRow,
.myjobfeed div.pageBlockInner_FormBlock div.formRow#MyJobFeedForm_multicodelist12_formRow {
    display: none;
}

.pageBlockInner_GridBlock div.gridContent {
    border: none;
    padding-top: 0;
}

.pageBlockInner_GridBlock table.gridTable th {
    background: none;
}

.interviewdetailform .pageBlockInner_FormBlock .mapRow #interviewMap_Small {
    height: 300px;
}

.mapBlock2 {
    background-size: cover !important;
}
/* Profile Styling Ends */
/* Application/Onboarding Styling */
:is(#posSummaryBlockv2_pageBlockContainer, .pos_description_review #posSummaryBlockv2_pageBlockContainer) {
    padding-bottom: 0;
    margin-bottom: 0;

    .MySummaryItemsContainer {
        display: block;
        height: auto;

        .MySummaryItem {
            display: block;
            width: 100%;

            .MySummaryItemInner {
                margin: 0;
                border: none;
                background: none;

                .MySummaryItemTitle {
                    display: none;
                }

                .MySummaryItemContent {
                    margin: 0 0 28px 0;
                    font-size: 18px;
                    font-weight: 700;
                    color: var(--primaryColor);
                }
            }

            &.statusInfo .MySummaryItemInner .MySummaryItemContent {
                color: inherit;
                font-weight: normal;

                .appCompleteChartBack {
                    margin-bottom: 15px;
                }
            }
        }
    }
}

#posSummaryBlockv2_pageBlock .appCompleteChartBlock {
    .appCompleteChartBlockInner {
        border-radius: 15px;
    }

    &.done .appCompleteChartBlockInner {
        background: var(--dark-red);
        border-color: var(--dark-red);
    }
}

#HasAdditionalInformation_pageBlockContainer {
    padding-bottom: 0;
}

:is(#sectionslist_pageBlockContainer, #additionalinformationsectionslist_pageBlockContainer) {
    padding-top: 0;

    :is(#sectionslist_pageBlock, #additionalinformationsectionslist_pageBlock) .ulList {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;

        .ulListItem {
            border: none;
            margin: 0;
            height: auto;
            font-weight: normal;
            background: var(--grey);
            width: 100%;
            flex: 48%;
            padding: 1.5rem;
            overflow: hidden;
            position: relative;
            transition: all 0.2s ease;
            border-radius: 20px;

            &::before {
                display: none;
            }

            .ulListItemLabel {
                padding: 0;
                margin: 0;
                float: left;

                a {
                    font-weight: 700;
                    text-decoration: none !important;
                    margin: 0;
                    color: inherit;
                    font-size: 20px;
                }
            }

            .ulListItemValueContainer {
                float: right;
                padding: 2px 5px 0 0;
                display: block;
                color: red;
                transition: all 0.2s ease;

                .ulListItemValue {
                    font-size: 0.9em;
                }
            }

            &:hover,
            &.Completed {
                background: var(--primaryColor);
                color: #fff;

                :is(.ulListItemLabel, .ulListItemValueContainer) {
                    color: #fff;
                }

                .ulListItemLabel a {
                    color: #fff !important;
                }
            }
        }
    }
}

:is(#BackBlock_pageBlockContainer, #ButtonBlock_pageBlockContainer) {
    background: none !important;
    padding: 0 !important;
}

.pageBlockContainer_GridBlock .pageBlockContent_GridBlock {
    padding: 0;
}

.earcu_application .pageBlockContainer_GridBlock .pageBlockContent_GridBlock {
    &.gridTableContainer .rowContainer,
    &#questionsSummary_pageBlock {
        border: none;
        border-bottom: 1px dashed silver;
        margin-bottom: 10px;
        padding: 20px;
        background: #fff;
    }

    .gridTableContainer .rowContainer {
        &:last-of-type {
            border-bottom: none;
        }

        .rowLabel {
            margin: 0 0 0 2px;
        }

        .rowItemContainer .cell_ApplicationsGrid_status[title~="Additional"] {
            color: red;
        }
    }
}

#Application_Section_Submit_pageView :is(#SubmitForm_checkboxlegal_formRow, #SubmitForm_contactconsent_formRow) {
    .labelContainer {
        max-width: 100%;

        .formLabel {
            font-weight: bold;
        }
    }

    .controlContainer {
        max-width: 100%;
    }
}

.pageBlockInner_FormBlock div.formRowFileUploadRow {
    ul.fileupload {
        text-align: center;

        li.fileOuterContainer {
            float: none;
            display: inline-block;
        }
    }

    .filesContainer {
        &.uploadedFilesContainer {
            height: auto !important;
        }

        .dropHere {
            height: auto !important;
            display: block;
            text-align: center;
            padding: 10px 0 !important;
        }

        .nofilesmessage {
            display: none;
        }
    }
}

.mywelcomepacks_offerinformation_section #TitleBlock_pageBlockContainer,
#posSummaryBlockv2_pageBlock .PosMyWelcomePackSummaryLinks {
    display: none;
}

.pos_description_review #intro_pageBlockContainer #intro_pageBlock {
    text-align: center;
    color: #fff;
}

#Edit_OFFERGENERICFORM1_pageBlockContainer #Edit_OFFERGENERICFORM1_pageBlock #Edit_OFFERGENERICFORM1_Text1_formRow .controlContainer input {
    text-transform: uppercase;
}

#Application_Section_Rare_pageView {
    .rare_buttons {
        flex-wrap: wrap;
    }

    #countrylist {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;

        input {
            width: 25px;
        }

        .countrylabel {
            width: calc(100% - 35px);
            margin-right: 0;
        }
    }

    .rare_contentheader {
        color: var(--primaryColor);
        letter-spacing: initial;
        text-transform: lowercase;
        font-weight: bold;

        &::first-letter {
            text-transform: uppercase;
        }
    }

    #rare_contextualinformation .rarebutton.selected {
        background: var(--primaryColor);
        color: #fff;
    }

    .rare_button {
        margin: 10px 10px 10px 0;
    }
}

#signatureoptions .buttonsRight {
    max-width: 100%;

    ul#optionslist {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        li {
            max-width: 100%;
            padding: 0;
            width: auto;
            margin: 0 !important;
        }
    }
}

#questions_question_73_formRow,
#questions_question_319_formRow {
    .labelContainer,
    .controlContainer {
        max-width: 100% !important;
    }
}

.earcu_onboarding .pageBlockInner_FormBlock div.textLiteral.textLiteralAlignment_Unknown {
    text-align: left;
}

#OfferDetails_pageBlockContainer {
    #OfferDetails_pageBlock {
        text-align: center;

        .yourDecisionContainer {
            .statusContainer, .dateContainer {
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
            }
        }

        .filescontainer {
            margin: 30px 0;

            hr {
                margin: 10px 0;
            }

            .file {
                a {
                    &:before {
                        content: '\f15c';
                        font-family: "Font Awesome 7 Pro";
                        margin-right: 5px;
                    }
                }
            }
        }
    }
}
/* Application/Onboarding Styling Ends */
/* Responsive Styling */
@media all and (max-width:1199px) {
    body {
        padding-top: 55px;
    }

    .container {
        padding: 0 20px;
    }

    header {
        z-index: 9992;

        .headerContainer .navContainer {
            #js-hamburger {
                display: inline-block;
            }

            nav {
                position: absolute;
                top: 54px;
                right: 0;
                background: #fff;
                width: 50vw;
                height: calc(100vh - 54px);
                overflow: auto;
                display: none;

                > ul {
                    flex-direction: column;
                    gap: 0;

                    li {
                        width: 100%;

                        a {
                            width: 100%;
                            padding: 10px 20px;

                            &:after {
                                display: none;
                            }
                        }

                        &.hasChildren {
                            ul {
                                position: relative;
                                display: flex;
                                box-shadow: none;

                                li {
                                    a {
                                        padding: 10px 40px;
                                    }
                                }
                            }
                        }

                        &.account {
                            a {
                                border-radius: 0;
                            }
                        }
                    }
                }
            }
        }
    }

    footer {
        .topContainer {

            .footerContainer {
                flex-direction: column;
                gap: 30px;

                .logoContainer {
                    top: initial;

                    img {
                        max-height: 100px;
                    }
                }

                .navContainer {
                    nav {
                        ul {
                            max-height: 100%;
                            gap: 20px;
                        }
                    }
                }

                .socialsContainer {
                    margin-left: initial;

                    .accreditation {
                        a {
                            img {
                                max-width: 200px;
                            }
                        }
                    }
                }
            }
        }

        .bottomContainer {
            .footerContainer {
                flex-direction: column;
                gap: 20px;

                .linksContainer {
                    ul {
                        li {
                            a {
                                white-space: normal;
                            }
                        }
                    }
                }
            }
        }
    }

    .bannerContainer {
        flex-direction: column;

        img {
            position: relative;
            width: 100%;
            max-height: 476px;
        }

        .bannerContent {
            width: 100%;
            padding: 60px 20px;
            min-height: 1px;
        }
    }

    .quickSearchContainer {
        .container {
            #quickSearch {
                padding: 30px 20px;
            }
        }
    }
}

@media all and (max-width:1023px) {
    .pos_find_results .pageViewMain #posBrowser_ResultsGrid_pageBlockContainer .pageBlockContainerMiddle #posBrowser_ResultsGrid_pageBlock,
    #MapBlock_pageBlockContainer .pageBlockContainerMiddle #MapBlock_pageBlock {
        .gridTop,
        .gridFooter {
            flex-direction: column;
        }
    }

    .pos_find_results .pageViewMain #posBrowser_ResultsGrid_pageBlockContainer .pageBlockContainerMiddle #posBrowser_ResultsGrid_pageBlock, #MapBlock_pageBlockContainer .pageBlockContainerMiddle #MapBlock_pageBlock {
        & .gridContent {
            & .ListGridContainer {
                flex-direction: column;
            }
        }
    }
}

@media all and (max-width: 991px) {
    .mydetails #MyDetailsStauts_pageBlock #eArcuLinks ul li {
        width: 100%;
        text-align: center;

        a {
            display: inline-block;
            width: auto;
        }
    }

    #MyDetails_ConnectedServices_pageView #ConnectedServicesForm_pageBlock .serviceContainer {
        width: 100%;
        text-align: center;
    }

    .d-flex {
        flex-direction: column !important;

        > div {
            flex: 100% !important;
        }
    }

    .flexslider {
        padding: 0;

        ol.flex-control-nav {
            display: block;
        }

        ul.flex-direction-nav {
            display: none;
        }
    }

    .curve-divider svg,
    .wave-divider svg {
        height: 100px;
    }

    #benefitsContainer {
        .container {
            &:before,
            &:after {
                display: none;
            }
        }
    }
}

@media all and (max-width: 767px) {
    .pos_find_results .pageViewMain :is(#posBrowser_Filter_pageBlockContainer, #posBrowser_ResultsGrid_pageBlockContainer),
    #MapBlock_pageBlockContainer {
        width: 100%;
        margin-right: 0;
    }

    #posdesc_pageBlock .LeftJobBox .PosDescriptionText .vidMap {
        flex-direction: column;

        :is(.videoOuterContainer, .VacancyMap) {
            max-width: 100% !important;
        }

        .VacancyMap .map #JobDescriptionMap_vacancyMap_pageBlock .pageBlockInner .mapContainer #vacancyMap {
            min-height: 1px;
            aspect-ratio: 16/9;
        }
    }

    :is( #sectionslist_pageBlockContainer #sectionslist_pageBlock, #additionalinformationsectionslist_pageBlockContainer #additionalinformationsectionslist_pageBlock ) .ulList .ulListItem,
    .welcome #WelcomeInfoBlock_pageBlock #WelcomeInfoBlock_form .formRowIconRow {
        flex: 100%;
    }

        .welcome #WelcomeInfoBlock_pageBlock #WelcomeInfoBlock_form .formRowIconRow .iconContainer :is(.iconLabel, .iconRowValues),
        :is( #sectionslist_pageBlockContainer #sectionslist_pageBlock, #additionalinformationsectionslist_pageBlockContainer #additionalinformationsectionslist_pageBlock ) .ulList .ulListItem :is(.ulListItemLabel, .ulListItemValueContainer) {
            width: 100%;
            text-align: center;
        }

    .pos_find_results .pageViewMain #posBrowser_ResultsGrid_pageBlockContainer .pageBlockContainerMiddle #posBrowser_ResultsGrid_pageBlock .gridFooter,
    #MapBlock_pageBlockContainer .pageBlockContainerMiddle #MapBlock_pageBlock .gridFooter {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        margin-top: 10px;
        margin-bottom: 0;
    }

    .pos_find_results .pageViewMain #posBrowser_ResultsGrid_pageBlock .gridContent .ListGridContainer .rowContainer .rowHeader .rowLabel {
        float: none;
    }

    .pageView #posdesc_pageBlockContainer #posdesc_pageBlock .posDescriptionContainer {
        :is(.LeftJobBox, .RightJobBox .jobValues .posdescriptionPropertyBox, .RightJobBox .rightBlock) {
            padding: 20px;
        }

        .RightJobBox .benefitsContainer .benefitBlocksContainer .benefitBlock {
            flex: 100%;
        }
    }

    #MyDetails_Username_pageView #Summary_emailList_formRow {
        :is(.emailValuesContainer, .emailButtonsContainer, .emailPrimaryAlreadyContainer) {
            width: 100%;
        }

        .emailButtonsContainer .buttonsRight ul {
            justify-content: center;
            flex-direction: column;
        }
    }

    #Pos_Description_pageView #posdesc_pageBlockContainer :is(.ApplyNowContainer, .ApplyViaEmailContainer) {
        display: none;
    }

    .stickyApplyContainer {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        transform: none;

        > a {
            writing-mode: horizontal-tb;
            display: block;
            width: 100%;
            text-align: center;
            padding: 16px 20px;
            border-radius: 0;
            padding-bottom: max(16px, env(safe-area-inset-bottom));
        }
    }
}

@media all and (max-width: 500px) {
    .ui-dialog.ui-widget.ui-widget-content {
        width: 100% !important;
    }

    .pos_find_results .pageViewMain #posBrowser_ResultsGrid_pageBlock .gridContent .ListGridContainer .rowContainerHolder {
        flex: 100%;
        max-width: 100%;

        .rowContainer .rowContentContainer .rowItemsContainer .rowItemsInnerContainer span {
            width: 100%;
            display: block;

            &::after {
                display: none;
            }
        }
    }

    #Application_Section_Rare_pageView #rare_content {
        width: 100%;
    }

    header .headerContainer .navContainer nav {
        width: 90vw;
    }
}
/* Responsive Styling Ends */