@import "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap";

h1,
h2,
h3,
h4,
p,
li,
button,
input,
label {
    font-family: "Montserrat", sans-serif;
}

div.dateTimeStamp,
div.notification {
    font-family: "Montserrat", sans-serif;
}

* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

html {
    --font-size-xsm: 0.563rem;
    --font-size-sm: 0.75rem;
    --font-size-sm2: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.25rem;
    --font-size-lg: 1.5rem;
    --font-size-xl: 1.75rem;
    --font-size-xxl: 2rem;
    --font-size-xxxl: 2.25rem;
}

html, body {
    height:100%;
}

img {
    color: var(--brand-colour-icons) !important;
    stroke: var(--brand-colour-icons) !important;
}

body {
    background-color: var(--background-colour);
   }

div.page.dashboard {
    display: grid;
    height: 100vh;
    width: 100%;
    grid-template-rows: auto 1fr;
}

@media (min-width: 992px) {html
    div.page.dashboard {
        grid-template-columns: 232px auto;
        grid-template-rows: auto 1fr;
    }
}

div.page.dashboard div.header {
    grid-column: 1/-1;
    position: -webkit-sticky;
    position: sticky;
    width: 100%;
    z-index: 30;
}

div.page.dashboard div.navigation {
    display: none;
}

@media (min-width: 992px) {
    div.page.dashboard div.navigation {
        display: block;
    }
}

div.page.dashboard div.cards div.card:hover {
    box-shadow: 0px 4px 30px rgba(41, 77, 157, 0.3);
}

div.heroCard {
    background-color: #fff;
    padding: 24px 18px;
    box-shadow: 0px 4px 30px rgba(41, 77, 157, 0.1);
    border-radius: 6px;
    width: 100%;
}

@media (min-width: 992px) {
    div.heroCard {
        /*padding: 50px 88px;*/
    }
}

div.heroCard div.progressTracker {
    display: grid;
}

@media (min-width: 576px) {
    div.heroCard div.progressTracker {
        grid-column-gap: 20px;
        grid-template-columns: 364px auto;
    }
}

@media (min-width: 992px) {
    div.heroCard div.progressTracker {
        grid-column-gap: 76px;
    }
}

@media (min-width: 1920px) {
    div.heroCard div.progressTracker {
        grid-column-gap: 128px;
    }
}

@media (min-width: 1920px) {
    div.heroCard div.progressTracker {
        grid-template-columns: auto auto;
    }
}

@media (min-width: 1920px) {
    div.heroCard div.progressTracker div.progressIllustration {
        margin-left: auto;
    }
}

div.heroCard div.progressSummary {
    padding-top: 25px;
}

    div.heroCard div.progressSummary div.viewTasksCallToAction {
        margin-top: 32px;
    }

div.summaryItem {
    margin-bottom: 24px;
}

@media (min-width: 1920px) {
    div.summaryItem {
        display: flex;
    }
}

div.summaryItem h2 {
    margin-bottom: 8px;
    color: var(--greeting);
    text-transform: capitalize;
    font-style: normal;
    font-weight: 600;
}

@media (min-width: 1920px) {
    div.summaryItem h2 {
        width: 200px;
    }
}

div.summaryItem div.summaryItemDetail {
    display: flex;
    gap: 8px;
    line-height: 24px;
}

@media (min-width: 1920px) {
    div.summaryItem div.summaryItemDetail {
        align-items: center;
    }
}

div.summaryItem div.summaryItemDetail div.notification {
    flex: 0 0 16px;
    height: 17px;
    width: 16px;
    margin-top: 3px;
}

div.summaryItem div.summaryItemDetail p {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #989898;
}

@media (min-width: 1920px) {
    div.summaryItem div.summaryItemDetail p {
        white-space: nowrap;
    }
}

div.summaryItem div.summaryItemDetail p span span.taskCount {
    color: var(--task-count);
    white-space: nowrap;
}

    div.summaryItem div.summaryItemDetail p span span.taskCount.greyed {
        color: #989898;
    }

div.cards {
    margin-top: 20px;
    display: grid;
    grid-row-gap: 20px;
    grid-column-gap: 20px;
}

@media (min-width: 992px) {
    div.cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

div.cards div.card h2 {
    display: flex;
    align-items: flex-start;
}

    div.cards div.card h2 span {
        color: red;
        margin-top: 5px;
    }

        div.cards div.card h2 span img {
            color: red;
            stroke: red;
        }

div.navigation {
    background: var(--nav-background);
    background-blend-mode: multiply;
    box-shadow: 10px 0px 20px rgba(0, 0, 0, 0.25);
    position: relative;
}

    div.navigation ul {
        list-style-type: none;
        margin-top: 56px;
        z-index: 10;
        position: relative;
        display: flex;
        flex-direction: column;
        row-gap: 8px;
	    width: 100%;
    }

        div.navigation ul li {
            font-style: normal;
            font-weight: 600;
            font-size: var(--font-size-sm2);
            line-height: 24px;
            text-transform: capitalize;
            display: flex;
            align-items: center;
            height: 40px;
            margin: 0px 16px;
        }

            div.navigation ul li span.navigationIcon {
                line-height: 24px;
                display: inline-block;
                padding-right: 13px;
                display: flex;
                align-items: center;
            }

            div.navigation ul li a {
                color: #fff;
                text-decoration: none;
            }

            div.navigation ul li span.notification {
                margin-left: auto;
                margin-right: 32px;
            }

            div.navigation ul li.side-nav-item-myaccount {
                margin-top: 32px;
            }

            div.navigation ul li:hover {
                background: rgba(255, 255, 255, 0.1);
                border-radius: var(--button-corners);
            }

                div.navigation ul li:hover img {
                    margin-left: -2px;
                    margin-right: -2px;
                    width: 20px;
                    height: 20px;
                }

    div.navigation div.backgroundAnimation {
        display: none;
    }

.notification {
    background-color: #e40521;
    color: #fff;
    width: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 4px;
    font-style: normal;
    font-weight: 600;
    font-size: 8px;
}

    .notification.greyed {
        background-color: #d3d3d3;
    }

    .notification.largeNotification {
        font-size: 14px;
        width: 24px;
        line-height: 24px;
    }

span.notification {
    display: inline-block;
}

div.header {
    display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    padding-bottom: 20px;
    align-items: center;
    background-color: #fff;
    box-shadow: 0px 4px 30px rgba(41, 77, 157, 0.1);
}

@media (min-width: 576px) {
    div.header {
        grid-column-gap: 20px;
        grid-template-columns: auto auto;
        padding-bottom: 20px;
    }
}

@media (min-width: 992px) {
    div.header {
        grid-template-columns: 232px auto 300px;
        padding-bottom: 0px;
    }
}

div.header div.greeting {
    grid-column: 1/-1;
}

@media (min-width: 576px) {
    div.header div.greeting {
        grid-column: unset;
    }
}

div.header div.contextSwitcher {
    grid-column: 1/-1;
}

@media (min-width: 576px) {
    div.header div.contextSwitcher {
        grid-column: unset;
    }
}

div.header div.contextSwitcher p {
    white-space: nowrap;
}

div.header div.logo {
    width: 90px;
    padding-left: 16px;
    display: flex;
    align-items: center;
}

    div.header div.logo div.desktopLogo {
        display: none;
    }

@media (min-width: 992px) {
    div.header div.logo div.desktopLogo {
        display: block;
    }
}

div.header div.logo div.mobileLogo {
    display: block;
}

@media (min-width: 992px) {
    div.header div.logo div.mobileLogo {
        display: none;
    }
}

div.header div.logo div.openMobileNavigation img {
    display: inline;
}

@media (min-width: 576px) {
    div.header div.logo {
        padding-left: 27px;
    }
}

@media (min-width: 992px) {
    div.header div.logo {
        padding-left: 33px;
    }
}

div.header div.logo img {
    cursor: pointer;
    height: 65px;
}

div.header div.logo div.openMobileNavigation {
    margin-right: 20px;
}

    div.header div.logo div.openMobileNavigation img {
        width: 27px;
        height: 19px;
    }

@media (min-width: 992px) {
    div.header div.logo div.openMobileNavigation {
        display: none;
    }
}

div.header div.greeting {
    margin: 0px 16px;
}

@media (min-width: 576px) {
    div.header div.greeting {
        margin-left: 27px;
    }
}

@media (min-width: 992px) {
    div.header div.greeting {
        margin-left: 20px;
    }
}

div.header div.greeting p {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--greeting);
}

div.header div.statusIcons {
    justify-content: end;
}

@media (min-width: 992px) {
    div.header div.statusIcons {
        display: none;
    }
}

div.pageStage {
    padding: 12px;
}

@media (min-width: 576px) {
    div.pageStage {
        padding: 24px;
    }
}

div.contextSwitcher {
    cursor: pointer;
    position: relative;
    background: #fff;
    border: 1px solid #dfdfdf;
    border-radius: var(--button-corners);
    display: inline-flex;
    align-items: flex-start;
    margin-left: 16px;
    margin-right: 16px;
}

@media (min-width: 576px) {
    div.contextSwitcher {
        margin-left: 33px;
        margin-right: 27px;
        justify-self: right;
        width: 260px;
    }
}

@media (min-width: 768px) {
    div.contextSwitcher {
        margin-left: 0px;
    }
}

@media (min-width: 992px) {
    div.contextSwitcher {
        width: 320px;
    }
}

div.contextSwitcher p {
    padding: 9px 16px;
    padding-left: 0px;
    padding-right: 0px;
    color: var(--brand-colour-3);
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    flex-basis: 100%;
}

    div.contextSwitcher p img {
        width: 10px;
        height: 7px;
        float: right;
        margin-top: 5px;
        transform: rotate(0deg);
        transition: transform 0.2s ease-out;
        margin-left: 5px;
        margin-right: 20px;
    }

div.contextSwitcher div.choices {
    display: none;
    animation: animateVisibleKeyframes 0.5s;
}

div.contextSwitcher.isOpen {
    border: 1px solid var(--brand-colour-3);
}

    div.contextSwitcher.isOpen div.choices {
        display: block;
    }

    div.contextSwitcher.isOpen p img {
        transform: rotate(180deg);
        transition: transform 0.2s ease-out;
    }

div.contextSwitcher div.choices {
    position: absolute;
    margin-top: 4px;
    width: 100%;
    border: 1px solid #dfdfdf;
    border-radius: 6px;
    padding: 7px 7px;
    background-color: #fff;
}

    div.contextSwitcher div.choices p {
        border-radius: 4px;
        padding: 9px 16px;
    }

        div.contextSwitcher div.choices p:hover {
            background-color: #ecf0f4;
        }

div.contextSwitcher div.currentlyOn {
    display: flex;
    padding-left: 16px;
    flex-basis: content;
    gap: 9px;
    flex-grow: 1;
}

    div.contextSwitcher div.currentlyOn div.currentlyOnIcon {
        display: flex;
        justify-content: center;
        flex-basis: auto;
    }

        div.contextSwitcher div.currentlyOn div.currentlyOnIcon img {
            margin: auto;
            display: inline-block;
            margin-top: 6px;
            flex-basis: auto;
        }

div.card {
    padding: 32px 40px;
    background-color: #fff;
    transition: box-shadow 0.2s ease;
    box-shadow: 0px 4px 30px rgba(41, 77, 157, 0.1);
    border-radius: var(--card-corners);
    display: flex;
    flex-direction: column;
}

    div.card h2 {
        font-style: normal;
        font-weight: 600;
        font-size: 24px;
        line-height: 32px;
        margin-bottom: 16px;
        text-transform: capitalize;
        color: #141D3A;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        div.card h2 img {
            display: flex;
            align-items: center;
        }

    div.card p {
        margin-bottom: 16px;
        color: #8c8c8c;
        font-style: normal;
    }

    div.card div.callToAction {
        margin-top: auto;
    }

div.button button, button.button {
    cursor: pointer;
    display: inline-block;
    background-color: var(--button-color-1);
    padding: 4px 16px;
    border: 1px solid var(--button-color-1);
    border-radius: var(--button-corners);
    color: #fff;
    text-transform: capitalize;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

@media (min-width: 576px) {
    div.button button {
        padding: 8px 16px;
    }
}

div.button button:not(.close-case-btn):not([disabled]):hover, div.button a:not([disabled]):hover {
    background-color: var(--button-hover-color) !important;
    border-color: var(--button-hover-color) !important;
    color: var(--button-hover-text-colour) !important;
}

div.button.button_primary button {
    padding: 12px 16px;
}

div.button.button_secondary button {
    padding: 8px 16px;
}

div.button.button_block {
    width: 100%;
}

    div.button.button_block button {
        display: block;
        width: 100%;
    }

@media (min-width: 576px) {
    div.button.button_block button {
        width: unset;
    }
}

div.button.button_isBlocked button {
    background-color: #8c8c8c;
    border: none;
    border: 2px solid #8c8c8c;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    color: #8c8c8c;
    cursor: not-allowed;
}

    div.button.button_isBlocked button:hover {
        background-color: unset;
    }

div.button.button_isBlocked button {
    background-color: #fff;
}

div.button.button_danger button {
	background-color: var(--error);
	border-color: var(--error) !important;
	margin-top: 30px;
}


@media (min-width: 992px) {
	.side-nav {
		display: flex !important;
	}
}

.side-nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.side-nav.mobile {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
div.button.button_invertedStyle button {
    border: 2px solid var(--button-color-2);
    color: var(--button-color-2);
    background-color: #fff;
}

    div.button.button_invertedStyle button:hover {
        background-color: var(--button-2-hover-color) !important;
        color: var(--button-2-hover-text-colour) !important;
    }

div.formField.hasCurrency input {
    padding-left: 30px;
}


div.formField.hasPlaceholder input {
    padding-left: 42px;
}

    div.formField.hasPlaceholder img.currency-icon {
        margin-top: -31px;
        position: absolute;
        margin-left: 16px;
    }

    div.formField.hasPlaceholder img.calendar-icon {
        margin-top: -34px;
        position: absolute;
        margin-left: 16px;
    }

div.statusIcons {
    display: flex;
    column-gap: 20px;
    margin-right: 27px;
}

div.statusIcon {
    position: relative;
    color: #0075C3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

    div.statusIcon div.icon {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #d2d2d2;
        border-radius: 128px;
        width: 32px;
        height: 32px;
        margin-bottom: 4px;
    }

        div.statusIcon div.icon img {
            width: 14px;
            height: 14px;
        }

    div.statusIcon p {
        font-style: normal;
        font-weight: 700;
        font-size: 10px;
        line-height: 150%;
        line-height: 150%;
        text-align: center;
        position: absolute;
        top: 35px;
    }

    div.statusIcon div.notification {
        position: absolute;
        top: 0px;
        right: 0px;
        margin-top: -10px;
        margin-right: -8px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
    }

        div.statusIcon div.notification span {
            display: inline-block;
            padding: 3px 0px;
            padding-left: 2px;
            padding-top: 4px;
            font-style: normal;
            font-weight: 700;
            font-size: 10px;
            line-height: 12px;
            text-align: center;
            letter-spacing: 1.5px;
            text-transform: uppercase;
        }

@media (min-width: 992px) {
    div.drawer {
        display: none;
	    gap: 12px;
    }
}

div.drawer div.drawerStage {
    display: none;
}

div.drawer.isOpen div.drawerStage {
    display: block;
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
}

div.drawer div.closeDrawer {
    position: absolute;
    cursor: pointer;
    z-index: 80;
    top: 32px;
    left: 40px;
}

    div.drawer div.closeDrawer img {
        display: block;
        width: 18px;
        height: 18px;
    }

div.drawer div.navigation {
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 60vw;
    padding-top: 108px;
    min-width: 225px;
}

    div.drawer div.navigation ul {
        max-width: 240px;
        margin-top: 0px;
        padding-left: 32px;
	    gap: 12px;
    }

        div.drawer div.navigation ul li {
            margin: 0px;
            padding-left: 0px;
        }

            div.drawer div.navigation ul li:hover {
                background: unset;
            }

            div.drawer div.navigation ul li:last-child {
                margin-top: 32px;
            }

            div.drawer div.navigation ul li span.notification {
                margin-right: 16px;
            }

    div.drawer div.navigation div.backgroundAnimation {
        display: none;
    }

div.systemAlert {
    background: rgba(228, 5, 33, 0.1);
    border: 1px solid rgba(228, 5, 33, 0.3);
    border-radius: 6px;
    margin-bottom: 24px;
    display: flex;
}

    div.systemAlert p {
        font-style: normal;
        font-weight: 600;
        font-size: 12px;
        line-height: 16px;
        margin: 16px 10px;
        color: #e40521;
    }

    div.systemAlert div.alertIcon {
        padding-left: 25px;
        padding-top: 16px;
    }

        div.systemAlert div.alertIcon img {
            display: inline-block;
            line-height: 16px;
            margin-right: 10px;
        }

div.svg-item {
    position: relative;
    background: linear-gradient( 180deg, rgba(217, 217, 217, 0.13) 0%, rgba(217, 217, 217, 0) 100% );
    display: inline-block;
    width: 100%;
    font-size: 16px;
    margin: 0 auto;
    animation: donutfade 1s;
}

@media (min-width: 576px) {
    div.svg-item {
        max-width: 364px;
    }
}

div.svg-item div.svg-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

    div.svg-item div.svg-overlay p {
        text-transform: capitalize;
        font-style: normal;
        font-weight: 600;
        font-size: 12px;
        color: #455ea2;
        margin-top: 5px;
    }

div.svg-item .donut-data {
    font-style: normal;
    font-weight: 600;
    font-size: 1.4px;
    line-height: 1;
    transform: translateY(0.5em);
    text-align: center;
    text-anchor: middle;
    text-transform: capitalize;
    color: #455ea2;
    fill: #455ea2;
    animation: donutfadelong 1s;
}

div.svg-item .donut-text {
    fill: #ff6200;
}

div.svg-item .donut-text-3 {
    fill: #455ea2;
}

div.svg-item .donut-ring {
    stroke: #ebedf4;
}

div.svg-item .donut-segment {
    transform-origin: center;
    stroke: #455ea2;
}

div.svg-item .donut-segment-4 {
    stroke: #455ea2;
    animation: donut3 3s;
}

div.svg-item .donut-percent {
    animation: donutfadelong 1s;
}

div.svg-item .donut-hole-data-shadow {
    filter: drop-shadow(0px 0px 10px rgba(69, 94, 162, 0.4));
}

div.svg-item-ng {
    position: relative;
    display: inline-block;
    width: 100%;
    font-size: 16px;
    margin: 0 auto;
   /* animation: donutfade 1s;*/
}

@media (min-width: 576px) {
    div.svg-item-ng {
        max-width: 364px;
    }
}

div.svg-item-ng div.svg-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

    div.svg-item-ng div.svg-overlay p {
        text-transform: capitalize;
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 24px;
        color: #fff;
        margin-top: 5px;
    }

div.svg-item-ng .donut-data {
    font-style: normal;
    font-weight: 600;
    font-size: 1.4px;
    line-height: 1;
    transform: translateY(0.5em);
    text-align: center;
    text-anchor: middle;
    text-transform: capitalize;
    color: #455ea2;
    fill: #455ea2;
    animation: donutfadelong 1s;
}

div.svg-item-ng .donut-text {
    fill: #ff6200;
}

div.svg-item-ng .donut-text-3 {
    fill: red;
}

div.svg-item-ng .donut-ring {
    stroke: #fff;
}

div.svg-item-ng .donut-segment {
    transform-origin: center;
}

div.svg-item-ng .donut-segment-4 {
    animation: donut3 3s;
}

div.svg-item-ng .donut-percent {
    animation: donutfadelong 1s;
}

@keyframes donutfade {
    0% {
        opacity: 0.2;
    }

    100% {
        opacity: 1;
    }
}

@keyframes donutfadelong {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes donut3 {
    0% {
        stroke-dasharray: 0, 100;
    }

    100% {
        stroke-dasharray: var(--segment-one), var(--segment-two);
    }
}

div.tooltipIcon,
span.tooltipIcon {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 20px;
    margin-right: 8px;
    margin-top: 1.5px;
    z-index: 60;
}

    div.tooltipIcon img,
    span.tooltipIcon img {
        cursor: pointer;
    }

    div.tooltipIcon.isOpen,
    span.tooltipIcon.isOpen {
        z-index: 61;
    }

    div.tooltipIcon.isClosed div.tooltip,
    span.tooltipIcon.isClosed div.tooltip {
        display: none;
    }

    div.tooltipIcon.isOpen div.tooltip,
    span.tooltipIcon.isOpen div.tooltip {
        display: block;
    }

    div.tooltipIcon div.tooltip,
    span.tooltipIcon div.tooltip {
        position: fixed;
        width: 80vw;
        left: 20px;
        right: 20px;
        margin: 0px auto;
        top: 40%;
    }

@media (min-width: 576px) {
    div.tooltipIcon div.tooltip,
    span.tooltipIcon div.tooltip {
        position: absolute;
        margin-top: -62px;
        width: 310px;
        top: 0px;
        left: unset;
    }
}

div.tooltipIcon div.tooltip div.tooltipCard,
span.tooltipIcon div.tooltip div.tooltipCard {
    border: 1px solid #8c8c8c;
    background-color: #fff;
    padding: 24px;
    border-radius: 6px;
}

    div.tooltipIcon div.tooltip div.tooltipCard h3,
    span.tooltipIcon div.tooltip div.tooltipCard h3 {
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 24px;
        color: #141D3A;
        margin-bottom: 4px;
    }

        div.tooltipIcon div.tooltip div.tooltipCard h3 + p,
        span.tooltipIcon div.tooltip div.tooltipCard h3 + p {
            margin-bottom: 16px;
            font-style: normal;
            font-weight: 400;
            font-size: 12px;
            line-height: 16px;
            color: #141D3A;
        }

    div.tooltipIcon div.tooltip div.tooltipCard div.button button,
    span.tooltipIcon div.tooltip div.tooltipCard div.button button {
        padding: 8px 16px;
    }

@media (min-width: 576px) {
    div.tooltipIcon div.tooltip.tooltip-left,
    span.tooltipIcon div.tooltip.tooltip-left {
        right: 34px;
    }
}

div.tooltipIcon div.tooltip.tooltip-left::after,
span.tooltipIcon div.tooltip.tooltip-left::after {
    display: none;
    position: absolute;
    right: 0px;
    margin-right: -14px;
    top: 0px;
    margin-top: 57px;
    z-index: 20;
    background: url("/svgs/tooltip/arrow.svg") no-repeat;
    width: 16px;
    height: 27px;
    content: "";
}

@media (min-width: 576px) {
    div.tooltipIcon div.tooltip.tooltip-left::after,
    span.tooltipIcon div.tooltip.tooltip-left::after {
        display: block;
    }
}

@media (min-width: 576px) {
    div.tooltipIcon div.tooltip.tooltip-right,
    span.tooltipIcon div.tooltip.tooltip-right {
        left: 34px;
    }
}

div.tooltipIcon div.tooltip.tooltip-right::before,
span.tooltipIcon div.tooltip.tooltip-right::before {
    display: none;
    position: absolute;
    margin-top: 18px;
    top: 0px;
    margin-left: -14px;
    transform: rotate(180deg);
    background: url("/svgs/tooltip/arrow.svg") no-repeat;
    top: 40px;
    width: 16px;
    height: 27px;
    content: "";
}

@media (min-width: 576px) {
    div.tooltipIcon div.tooltip.tooltip-right::before,
    span.tooltipIcon div.tooltip.tooltip-right::before {
        display: block;
    }
}

div.tooltipIcon div.tooltip div.tooltipBackground,
span.tooltipIcon div.tooltip div.tooltipBackground {
    position: absolute;
    background: rgba(31, 40, 76, 0.9);
    mix-blend-mode: normal;
    -webkit-backdrop-filter: blur(5.5px);
    backdrop-filter: blur(5.5px);
    z-index: -1;
    top: -5000px;
    left: -9000px;
    width: 20000px;
    height: 10000px;
    display: none;
}

@media (min-width: 576px) {
    div.tooltipIcon div.tooltip div.tooltipBackground,
    span.tooltipIcon div.tooltip div.tooltipBackground {
        background: unset;
        mix-blend-mode: unset;
        -webkit-backdrop-filter: unset;
        backdrop-filter: unset;
    }
}

div.tooltipIcon div.tooltip div.tooltipBackground.isOpen,
span.tooltipIcon div.tooltip div.tooltipBackground.isOpen {
    display: block;
}

div.page.useradmin .pageStage {
    overflow-y: scroll;
}

@media (min-width: 992px) {
    div.page.useradmin {
        display: flex;
        height:100%;
    }
}

div.useradmin-header {
    display: grid;
    grid-template-columns: auto auto;
    background: var(--onboarding-background);
    background-blend-mode: multiply;
    mix-blend-mode: normal;
}

@media (min-width: 992px) {
    div.useradmin-header {
        grid-template-columns: auto;
        grid-template-rows: min-content auto;
        grid-row-gap: 145px;
    }
}

@media (min-width: 992px) {
    div.useradmin-header {
        text-align: center;
        padding-top: 168px;
        max-width: 30%;
    }
}

div.useradmin-header div.onboardingLogo {
    margin-left: 32px;
    margin-top: 45px;
}

    div.useradmin-header div.onboardingLogo div.desktopLogo {
        display: none;
    }

@media (min-width: 992px) {
    div.useradmin-header div.onboardingLogo div.desktopLogo {
        display: block;
    }
}

div.useradmin-header div.onboardingLogo div.tabletLogo {
    display: none;
}

@media (min-width: 576px) {
    div.useradmin-header div.onboardingLogo div.tabletLogo {
        display: block;
    }
}

@media (min-width: 992px) {
    div.useradmin-header div.onboardingLogo div.tabletLogo {
        display: none;
    }
}

div.useradmin-header div.onboardingLogo div.mobileLogo {
    display: block;
}

@media (min-width: 576px) {
    div.useradmin-header div.onboardingLogo div.mobileLogo {
        display: none;
    }
}

@media (min-width: 576px) {
    div.useradmin-header div.onboardingLogo {
        margin-left: 56px;
        margin-top: 44px;
        margin-bottom: 44px;
    }
}

@media (min-width: 992px) {
    div.useradmin-header div.onboardingLogo {
        margin-left: 0px;
        padding: 0px 20px;
        margin-top: 0px;
    }

        div.useradmin-header div.onboardingLogo img {
            width: 226px;
            height: 80px;
        }
}

div.useradmin-header div.headerIllustrationDetail {
    text-align: right;
    margin-right: 24px;
}

@media (min-width: 576px) {
    div.useradmin-header div.headerIllustrationDetail {
        margin-right: 56px;
    }
}

@media (min-width: 992px) {
    div.useradmin-header div.headerIllustrationDetail {
        text-align: unset;
        margin-right: unset;
        margin: 0px 68px;
    }
}

div.useradmin-header div.headerIllustrationDetail img {
    width: 135px;
    height: 72px;
    margin-top: 24px;
}

@media (min-width: 992px) {
    div.useradmin-header div.headerIllustrationDetail img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: 367px;
        max-height: 196px;
        min-width: 200px;
        margin: 0px auto;
    }
}

div.page.useradmin div.pageStage {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 576px) {
    div.page.useradmin div.pageStage {
        
    }
}

@media (min-width: 992px) {
    div.page.useradmin div.pageStage {
      display: flex;
      justify-content: center;
      align-items: center;
    }
}

div.page.useradmin div.pageStage div.card {
    margin-top: 0px;
    padding: 32px 24px;
    padding-top: 48px;
    padding-bottom: 64px;
}

@media (min-width: 576px) {
    div.page.useradmin div.pageStage div.card {
        padding-left: 85px;
        padding-right: 85px;
    }
}

@media (min-width: 992px) {
    div.page.useradmin div.pageStage div.card {
        padding-left: 64px;
        padding-right: 64px;
    }
}

div.page.useradmin div.pageStage div.card h2 {
    text-transform: unset;
}

div.page.useradmin div.pageStage div.card div.tooltip div.card {
    border: 1px solid red;
    padding: 0px !important;
}

div.page.useradmin div.card {
   
}

@media (min-width: 576px) {
    div.page.useradmin div.card {
        max-width: 486px;
    }
}

@media (min-width: 992px) {
    div.page.useradmin div.card {
        width: 486px;
    }
}

div.progressPage h1 {
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.5px;
    color: var(--greeting);
    margin-bottom: 24px;
}

div.progressPage div.accordion p.dateUploaded {
    display: none;
}

div.progressPage div.accordion div.accordionItem div.downloadAllControl {
    display: none;
}

div.progressPage
div.accordion
div.accordionSubItem
div.accordionSubItemData > div,
div.progressPage
div.accordion
div.accordionSubItem
div.accordionSubItemData > p {
    align-self: start;
}

div.progressPage
div.accordion
div.accordionSubItem
div.accordionSubItemData
div.category {
    margin-top: -2px;
}

div.progressPage
div.accordion
div.accordionSubItem
div.accordionSubItemData
div.taskText
div.tooltipIcon {
    align-self: start;
    margin-top: 2px;
    margin-left: 0px;
}

@media (min-width: 576px) {
    div.progressPage
    div.accordion
    div.accordionSubItem
    div.accordionSubItemData
    div.taskText
    div.tooltipIcon {
        margin-left: 8px;
    }
}

div.progressPage
div.accordion
div.accordionSubItem
div.accordionSubItemData
div.taskAction
div.button
button {
    margin-left: 0px;
}

div.page.getintouch {
    height: 100vh;
    width: 100%;
}

    div.page.getintouch div.header {
        position: -webkit-sticky;
        position: sticky;
        width: 100%;
        z-index: 30;
    }

div.getInTouchPage div.desktopView {
    display: flex !important;
    flex-direction: column !important;
}

@media (min-width: 768px) {
    div.getInTouchPage div.desktopView {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
}

div.getInTouchPage div.mobileView {
    display: flex;
}

div.getInTouchPage div.mobileView div.card img {
    width: 24px;
    height: 24px;
}

@media (min-width: 576px) {
    div.getInTouchPage div.mobileView div.card img {
        width: 32px;
        height: 32px;
    }
}

div.getInTouchPage div.desktopView div.innerLayout {
    display: grid;
    grid-template-columns: auto 232px;
    grid-template-rows: auto;
    grid-column-gap: 16px;
    column-gap: 16px;
}

@media (min-width: 1650px){
    div.getInTouchPage div.desktopView div.innerLayout {
        grid-template-columns: auto 360px;
    }
}

    div.getInTouchPage div.desktopView div.innerLayout div.liveChat div.chat {
        border: 1px solid #e2e2e2;
        box-shadow: 0px 4px 30px rgba(41, 77, 157, 0.1);
        height: 100%;
        border-radius: 6px;
    }

    div.getInTouchPage div.desktopView div.innerLayout div.auxillary {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

div.getInTouchPage > div.desktopView h1 {
    margin-bottom: 0px;
}

div.getInTouchPage > div.desktopView > h2, div.getInTouchPage > div.desktopView .page-subtitle {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--greeting);
    margin: 0px 0px 16px 0px;
}

div.getInTouchPage > div.desktopView > p, div.getInTouchPage > div.desktopView .page-details {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #141D3A;
    margin: 8px 0px 16px 0px;
}

div.getInTouchPage > div.desktopView form.formField {
    margin-top: 8px;
    margin-bottom: 24px;
}

    div.getInTouchPage > div.desktopView form.formField input {
        height: 48px;
    }

div.getInTouchPage div.mobileView div.cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-row-gap:48px !important;
}


@media (min-width: 728px) {
    div.getInTouchPage div.mobileView div.cards {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: auto auto;
        grid-row-gap: 48px !important;
    }
}

div.getInTouchPage div.mobileView div.card {
    position: relative;
    display: flex;
    align-content: center;
    text-align: center;
    cursor: pointer;
}

    div.getInTouchPage div.mobileView div.card img {
        margin-bottom: 20px;
    }

@media (min-width: 576px) {
    div.getInTouchPage div.mobileView div.card img {
        margin-bottom: 12px;
    }
}

div.getInTouchPage div.mobileView div.card p {
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    font-size: 16px;
    color: #141D3A;
    margin-bottom: 0px;
}


@media (min-width: 576px) {
    div.getInTouchPage div.mobileView div.card p {
        font-size: 20px;
        line-height: 32px;
    }
}

div.getInTouchPage div.mobileView div.card div.notification {
    position: absolute;
    top: 16px;
    right: 16px;
}

@media (min-width: 768px) {
    div.getInTouchPage div.mobileView div.card div.notification {
        top: 25px;
        right: 25px;
    }
}

div.getInTouchPage h1 {
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.5px;
    color: var(--greeting);
    margin-bottom: 24px;
}

div.getInTouchPage div.card h3 {
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 32px;
    display: flex;
    align-items: center;
    color: #141D3A;
    margin-bottom: 16px;
}

div.page.getintouch div.getInTouchPage div.chat div.conversationHistory {
    max-height: unset;
}

div.formField {
    margin-bottom: 32px;
}

    div.formField label {
        font-style: normal;
        font-weight: 600;
        font-size: 12px;
        line-height: 16px;
        margin-bottom: 4px;
        color: #141D3A;
        display: block;
        text-transform: capitalize;
        display: flex;
        align-items: center;
    }

        div.formField label span.tooltipIcon {
            margin-left: 5px;
        }

    div.formField input {
        padding: 12px 16px;
        height: 40px;
        width: 100%;
        background: #fff;
        border: 1px solid #999;
        border-radius: var(--button-corners);
        font-size: 12px;
    }

@media (min-width: 576px) {
    div.formField input {
        height: 48px;
    }
}

@media (min-width: 576px) {
    div.formField input {
        font-size: 14px;
    }
}

div.formField input::placeholder {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 24px;
    color: #141D3A;
}

@media (min-width: 576px) {
    div.formField input::placeholder {
        font-size: 14px;
    }
}

div.loginPage h2 {
    font-size: 24px;
}

@media (min-width: 576px) {
    div.loginPage h2 {
        font-size: 32px;
    }
}

div.loginPage p.forgotPassword {
    margin-top: 18px;
    margin-bottom: 0px;
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
}

    div.loginPage p.forgotPassword a {
        color: var(--brand-colour-3);
        text-decoration: none;
    }

@media (min-width: 576px) {
    div.loginPage p.forgotPassword {
        text-align: left;
    }
}

div.passwordCriteria {
    margin-bottom: 24px;
}

    div.passwordCriteria h4 {
        font-family: "Montserrat";
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
        display: flex;
        align-items: center;
        color: #141D3A;
        margin-bottom: 16px;
    }

    div.passwordCriteria ol {
        margin-bottom: 8px;
        margin-left: 16px;
    }

        div.passwordCriteria ol > li {
            list-style-type: decimal outside;
        }

    div.passwordCriteria li {
        font-family: "Montserrat";
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 24px;
        color: #8c8c8c;
    }

    div.passwordCriteria ol li ul {
        list-style-type: initial;
        list-style-type: square outside;
    }

div.changePasswordPage div.innerLayout {
    display: grid;
    grid-row-gap: 24px;
    row-gap: 24px;
}

@media (min-width: 768px) {
    div.changePasswordPage div.innerLayout {
        grid-template-columns: auto 232px;
        grid-template-rows: auto;
        grid-column-gap: 32px;
        column-gap: 32px;
    }
}

div.changePasswordPage div.innerLayout div.auxillary {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

div.changePasswordPage h1 {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.5px;
    color: var(--greeting);
    margin-bottom: 24px;
}

div.changePasswordPage div.card h3 {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 32px;
    display: flex;
    align-items: center;
    color: #141D3A;
    margin-bottom: 16px;
}

div.changePasswordPage div.card form {
    max-width: 360px;
}

@media (min-width: 576px) {
    div.changePasswordPage div.card form div.formField {
        margin-bottom: 24px;
    }
}

div.changePasswordPage div.card form div.button {
    padding-top: 8px;
}

div.myAccountModalContent {
    padding: 32px 16px;
}

@media (min-width: 576px) {
    div.myAccountModalContent {
        padding: 56px 32px;
    }
}

@media (min-width: 768px) {
    div.myAccountModalContent {
        padding: 56px;
    }
}

div.myAccountModalContent h2.modalTitle {
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 32px;
    color: #141D3A;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
}

    div.myAccountModalContent h2.modalTitle img {
        margin-right: 10px;
    }

div.myAccountModalContent div.formControls {
    margin-top: 24px;
    display: flex;
    gap: 16px;
    margin-left: auto;
}

    div.myAccountModalContent div.formControls button {
        padding: 8px 16px;
    }

div.showModal {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

    div.showModal + div.modalContainer div.modal {
        display: none;
    }

div[data-targetmodal="stopRemortgage"] + div.modalContainer
div.modal.stopRemortgageModal {
    display: flex;
}

div[data-targetmodal="logout"] + div.modalContainer div.modal.logoutModal {
    display: flex;
}

div.registerCaseTrackerPage h2 {
    color: #141D3A;
    font-size: 24px;
}

@media (min-width: 576px) {
    div.registerCaseTrackerPage h2 {
        font-size: 32px;
        line-height: 40px;
    }
}

div.registerCaseTrackerPage h3 {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #141D3A;
    margin-bottom: 8px;
}

div.registerCaseTrackerPage p {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    color: #8c8c8c;
}

div.registerCaseTrackerPage form {
    margin-top: 24px;
}

div.registerCaseTrackerPage div.propertyInfo {
    display: flex;
    align-items: center;
    position: relative;
}

    div.registerCaseTrackerPage div.propertyInfo div.tooltipIcon {
        margin-left: 10px;
        margin-bottom: 16px;
    }

div.setPasswordPage h2 {
    color: #141D3A;
    font-size: 24px;
}

@media (min-width: 576px) {
    div.setPasswordPage h2 {
        font-size: 32px;
        line-height: 40px;
    }
}

div.borrowerDetailsPage h2 {
    color: #141D3A;
    font-size: 24px;
}

@media (min-width: 576px) {
    div.borrowerDetailsPage h2 {
        font-size: 32px;
    }
}

div.borrowerDetailsPage h2 + p {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    display: flex;
    align-items: center;
    color: #141D3A;
}

div.accordionHeader {
    cursor: pointer;
    display: grid;
    grid-template-columns: min-content 30px auto min-content;
    padding-top: 24px;
    padding-bottom: 24px;
    align-items: flex-start;
    padding-right: 16px;
    border: 1px solid #e2e2e2;
    background-color: #fff;
    box-shadow: 0px 4px 30px rgba(41, 77, 157, 0.1);
    border-radius: 6px;
}

@media (min-width: 768px) {
    div.accordionHeader {
        padding-right: 24px;
    }
}

div.accordionHeader h2 {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #1f284c;
}

div.accordionHeader div.openOrClosed {
    margin-left: 16px;
    margin-right: 16px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
}

div.accordionHeader div.notification {
    margin-left: 20px;
}

div.accordion {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 576px) {
    div.accordion {
        gap: 24px;
    }
}

div.accordionItem {
    display: grid;
    grid-row-gap: 8px;
    transition: max-height 0.5s ease-out;
}

    div.accordionItem div.accordionSubItem,
    div.accordionItem div.accordionControls,
    div.accordionItem div.accordionSubItemNoData {
        display: none;
        animation: animateVisibleKeyframes 0.5s;
    }

    div.accordionItem.isClosed div.accordionHeader div.openOrClosed img {
        transform: rotate(-90deg);
        transition: transform 0.2s ease-out;
    }

    div.accordionItem.isOpen {
        height: auto;
    }

        div.accordionItem.isOpen div.accordionSubItem,
        div.accordionItem.isOpen div.accordionSubItemNoData {
            display: block;
        }

        div.accordionItem.isOpen div.accordionControls {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

            div.accordionItem.isOpen div.accordionControls div.downloadAllControl {
                text-align: right;
            }

        div.accordionItem.isOpen div.seeMore {
            display: flex;
        }

div.documentsPage div.accordion div.accordionSubItemData {
    display: grid;
}

div.accordionSubItem {
    position: relative;
    padding-top: 24px;
    padding-bottom: 24px;
    background-color: rgba(255, 255, 255, 0.6);
    align-items: center;
    overflow: visible;
}

    div.accordionSubItem:hover {
        margin: -8px;
        border-radius: 4px;
        background-color: #fff;
        z-index: 90;
        box-shadow: 0px 4px 30px rgba(41, 77, 157, 0.1);
    }

        div.accordionSubItem:hover div.accordionSubItemData {
            padding: 8px;
        }

.progressPage div.accordionSubItem div.accordionSubItemData {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 equal columns */
    grid-template-rows: auto auto auto;
    gap: 1rem;
}

.progressPage div.accordionSubItem div.category {
    display: flex;
    justify-content: end;
    padding-right: 16px;
}

.progressPage div.accordionSubItem div.taskAction {
    width: 100%;
    grid-column: 1 / span 2;
    grid-row: 3;
}

div.taskAction div.button, div.taskAction div.button a {
    width: 100%;
}



@media (min-width: 576px) {
    .progressPage div.accordionSubItem div.accordionSubItemData {
        grid-template-columns: 32px 3fr 2fr 175px 200px !important;
        grid-template-rows: unset;
    }

    .progressPage div.accordionSubItem div.category {
        justify-content: unset;
        padding-right: 0px;
    }

    .progressPage div.accordionSubItem div.taskAction {
        width: auto;
        grid-column: unset;
        grid-row: unset;
        margin-right: 24px;
    }

    .progressPage div.taskAction div.button, div.taskAction div.button a {
        width: unset;
    }

    .progressPage div.accordionSubItem div.taskAction a {
        margin-right: unset;
    }
}

div.accordionSubItem div.accordionSubItemData div.categoryTag {
    grid-column: 1/-1;
}

@media (min-width: 576px) {
    div.accordionSubItem div.accordionSubItemData div.categoryTag {
        grid-column: unset;
    }
}

div.accordionSubItem div.accordionSubItemData div.taskText {
    grid-column: 1/-1;
}

@media (min-width: 576px) {
    div.accordionSubItem div.accordionSubItemData div.taskText {
        grid-column: unset;
    }
}

div.accordionSubItem div.accordionSubItemData div.taskText,
div.accordionSubItem div.accordionSubItemData p.dateAdded {
    margin-left: 20px;
}

@media (min-width: 576px) {
    div.accordionSubItem div.accordionSubItemData div.taskText,
    div.accordionSubItem div.accordionSubItemData p.dateAdded {
        margin-left: unset;
    }
}

div.accordionSubItem div.accordionSubItemData div.accordion {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 576px) {
    div.accordionSubItem div.accordionSubItemData div.accordion {
        gap: 24px;
    }
}

div.accordionSubItem div.accordionSubItemData div.accordionItem {
    display: grid;
    grid-row-gap: 8px;
    height: 74px;
    max-height: 74px;
    transition: max-height 0.5s ease-out;
    overflow: hidden;
}

    div.accordionSubItem
    div.accordionSubItemData
    div.accordionItem
    div.accordionSubItem,
    div.accordionSubItem
    div.accordionSubItemData
    div.accordionItem
    div.accordionControls {
        display: none;
        animation: animateVisibleKeyframes 0.5s;
    }

    div.accordionSubItem div.accordionSubItemData div.accordionItem.isClosed {
        max-height: 74px;
    }

        div.accordionSubItem
        div.accordionSubItemData
        div.accordionItem.isClosed
        div.accordionHeader
        div.openOrClosed
        img {
            transform: rotate(-90deg);
            transition: transform 0.2s ease-out;
        }

    div.accordionSubItem div.accordionSubItemData div.accordionItem.isOpen {
        max-height: 1000px;
        height: auto;
    }

        div.accordionSubItem
        div.accordionSubItemData
        div.accordionItem.isOpen
        div.accordionSubItem {
            display: block;
        }

        div.accordionSubItem
        div.accordionSubItemData
        div.accordionItem.isOpen
        div.accordionSubItemNoData {
            display: block;
        }

        div.accordionSubItem
        div.accordionSubItemData
        div.accordionItem.isOpen
        div.accordionControls {
            display: grid;
            grid-template-columns: 50% 50%;
        }

            div.accordionSubItem
            div.accordionSubItemData
            div.accordionItem.isOpen
            div.accordionControls
            div.downloadAllControl {
                text-align: right;
            }

        div.accordionSubItem
        div.accordionSubItemData
        div.accordionItem.isOpen
        div.seeMore {
            display: flex;
        }

@media (min-width: 576px) {
    .progressPage div.accordionSubItem div.accordionSubItemData {
        margin-left: unset;
    }
}

div.accordionSubItem div.taskText {
    display: flex;
}

div.accordionSubItem p.dateAdded {
    display: flex;
    align-items: start;
}

    div.accordionSubItem p.dateAdded img {
        margin-right: 10px;
        margin-top: 6px;
    }

div.accordionSubItem p.dateUploaded {
    display: flex;
    align-items: start;
}

    div.accordionSubItem p.dateUploaded img {
        margin-right: 10px;
        margin-top: 6px;
    }

div.accordionSubItem div.categoryTag {
    margin-left: 0px;
}

div.accordionSubItem p {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #141D3A;
}

@media (min-width: 576px) {
    div.accordionSubItem p {
        margin-left: unset;
    }
}

div.accordionSubItem.hasBeenRead p {
    color: #8c8c8c;
}

div.accordionSubItem div.taskAction {
    display: flex;
    flex-direction: row;
    margin-left: auto;
    align-items: center;
    margin-top: -2px;
}

    div.accordionSubItem div.taskAction button {
        margin-left: 10px;
        white-space: nowrap;
        font-size: 12px;
    }

div.accordionControls {
    margin-top: 16px;
}

    div.accordionControls div.seeMore {
        cursor: pointer;
        display: flex;
        align-items: center;
        margin-bottom: 0px;
    }

        div.accordionControls div.seeMore p {
            font-style: normal;
            font-weight: 600;
            font-size: 12px;
            line-height: 16px;
            color: var(--brand-colour-3);
            margin-right: 8px;
        }

div.accordionNoItems p {
    margin: 16px 0px 0px 0px;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    color: #141D3A;
}

div.categoryTag {
    display: inline-flex;
    flex-direction: row;
    border-radius: 30px;
    padding: 3px 13px 3px 0px;
    flex: auto 1 auto;
    line-height: 20px;
    align-items: center;
}

    div.categoryTag.enactCategory {
        background-color: var(--brand-colour-3);
    }

    div.categoryTag.youCategory {
        background-color: #0075C3;
    }

    div.categoryTag.third-partyCategory {
        background-color: #fab855;
    }

    div.categoryTag div.categoryIcon {
        height: 20px;
        overflow: hidden;
    }

    div.categoryTag p {
        text-transform: uppercase;
        color: #fff !important;
        font-style: normal;
        font-weight: 700 !important;
        font-size: 10px !important;
        line-height: 14px !important;
        letter-spacing: 0.5px !important;
        white-space: nowrap;
    }

div.activatePINPage h2 {
    color: #141D3A;
    font-size: 24px;
}

@media (min-width: 576px) {
    div.activatePINPage h2 {
        font-size: 32px;
        line-height: 40px;
    }
}

div.activatePINPage h2 + p {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    display: flex;
    align-items: center;
    color: #141D3A;
}

div.activatePINPage div.card {
    padding-top: 48px !important;
    padding-bottom: 64px !important;
}

div.activatePINPage p {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
}

@media (min-width: 576px) {
    div.activatePINPage p {
        font-size: 14px;
    }
}

div.activatePINPage form {
    margin-top: 8px;
}

@media (min-width: 576px) {
    div.activatePINPage form {
        margin-top: 24px;
    }
}

@keyframes animateVisibleKeyframes {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes spindownKeyframes {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes contextSwitcherRotateKeyframes {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

div.breadCrumbGoBack {
    padding-left: 3px;
    margin: 16px 0px;
}

@media (min-width: 576px) {
    div.breadCrumbGoBack {
        margin-bottom: 24px;
    }
}

div.breadCrumbGoBack a {
    font-family: "Montserrat";
    color: #0075C3;
    display: flex;
    align-items: center;
    gap: 16px;
}

    div.breadCrumbGoBack a img {
        cursor: pointer;
    }

    div.breadCrumbGoBack a span.currentPage {
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
    }

        div.breadCrumbGoBack a span.currentPage::before {
            content: " ";
            white-space: pre;
            width: 4px;
            height: 16px;
            background: url("/assets/svgs/get-in-touch/goback-divider.svg") no-repeat left center;
            margin-right: 8px;
        }

div.breadCrumbGoBack + a {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #141D3A;
    margin-bottom: 16px;
}

div.card.getInTouchCard button {
    line-height: 16px;
}

div.card.getInTouchCard h3 img {
    display: none;
}

div.card.getInTouchCard p {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #141D3A;
}

    div.card.getInTouchCard p.caseHandler {
        font-weight: 600;
    }

        div.card.getInTouchCard p.caseHandler span.caseHandlerName {
            white-space: nowrap;
        }

div.card.getInTouchCard div.directDial span.phoneNumber a {
    text-decoration: none;
    color: #141D3A;
}

div.card.getInTouchCard div.formField input {
    height: 40px !important;
}

div.auxillary div.card.logOutCard,
div.auxillary div.card.stopRemortgageCard,
div.auxillary div.card.getInTouchCard,
div.auxillary div.card.documentsCard,
div.auxillary div.card.helpAndAdviceCard,
div.auxillary div.card.auxillaryCard,
div.auxillary div.card.sharingCard {
    padding: 32px 40px;
}

@media (min-width: 768px) {
    div.auxillary div.card.logOutCard,
    div.auxillary div.card.stopRemortgageCard,
    div.auxillary div.card.getInTouchCard,
    div.auxillary div.card.documentsCard,
    div.auxillary div.card.helpAndAdviceCard,
    div.auxillary div.card.auxillaryCard,
    div.auxillary div.card.sharingCard {
        padding: 24px;
    }
}

div.auxillary div.card.logOutCard h3,
div.auxillary div.card.stopRemortgageCard h3,
div.auxillary div.card.getInTouchCard h3,
div.auxillary div.card.documentsCard h3,
div.auxillary div.card.helpAndAdviceCard h3,
div.auxillary div.card.auxillaryCard h3,
div.auxillary div.card.sharingCard h3{
    display: flex;
    align-items: center !important;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    div.auxillary div.card.logOutCard h3,
    div.auxillary div.card.stopRemortgageCard h3,
    div.auxillary div.card.getInTouchCard h3,
    div.auxillary div.card.documentsCard h3,
    div.auxillary div.card.helpAndAdviceCard h3,
    div.auxillary div.card.auxillaryCard h3,
    div.auxillary div.card.sharingCard h3 {
        margin-bottom: 8px;
        font-size: 14px;
    }
}

div.auxillary div.card.logOutCard h3 img,
div.auxillary div.card.stopRemortgageCard h3 img,
div.auxillary div.card.getInTouchCard h3 img,
div.auxillary div.card.documentsCard h3 img,
div.auxillary div.card.helpAndAdviceCard h3 img,
div.auxillary div.card.auxillaryCard h3 img,
div.auxillary div.card.sharingCard img {
    display: inline-block;
    margin-right: 10px;
}

div.auxillary div.card.logOutCard p,
div.auxillary div.card.stopRemortgageCard p,
div.auxillary div.card.getInTouchCard p,
div.auxillary div.card.documentsCard p,
div.auxillary div.card.helpAndAdviceCard p,
div.auxillary div.card.auxillaryCard p,
div.auxillary div.card.sharingCard p{
    font-size: 14px;
    line-height: 150%;
    margin-bottom: 0px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    color: #141D3A;
}

@media (min-width: 576px) {
    div.auxillary div.card.logOutCard p,
    div.auxillary div.card.stopRemortgageCard p,
    div.auxillary div.card.getInTouchCard p,
    div.auxillary div.card.documentsCard p,
    div.auxillary div.card.helpAndAdviceCard p,
    div.auxillary div.card.auxillaryCard p,
    div.auxillary div.card.sharingCard p{
        font-size: 16px;
    }
}

@media (min-width: 768px) {
    div.auxillary div.card.logOutCard p,
    div.auxillary div.card.stopRemortgageCard p,
    div.auxillary div.card.getInTouchCard p,
    div.auxillary div.card.documentsCard p,
    div.auxillary div.card.helpAndAdviceCard p,
    div.auxillary div.card.auxillaryCard p,
    div.auxillary div.card.sharingCard p{
        font-size: 12px;
    }
}

@media (min-width: 768px) {
    div.auxillary div.card.logOutCard p,
    div.auxillary div.card.stopRemortgageCard p,
    div.auxillary div.card.getInTouchCard p,
    div.auxillary div.card.documentsCard p,
    div.auxillary div.card.helpAndAdviceCard p,
    div.auxillary div.card.auxillaryCard p,
    div.auxillary div.card.sharingCard p{
        line-height: 16px;
    }
}

div.auxillary div.card.logOutCard p + div.button,
div.auxillary div.card.stopRemortgageCard p + div.button,
div.auxillary div.card.getInTouchCard p + div.button,
div.auxillary div.card.documentsCard p + div.button,
div.auxillary div.card.helpAndAdviceCard p + div.button,
div.auxillary div.card.auxillaryCard p + div.button,
div.auxillary div.card.sharingCard p + div.button{
    margin-top: 16px;
}

@media (min-width: 576px) {
    div.auxillary div.card.logOutCard p + div.button,
    div.auxillary div.card.stopRemortgageCard p + div.button,
    div.auxillary div.card.getInTouchCard p + div.button,
    div.auxillary div.card.documentsCard p + div.button,
    div.auxillary div.card.helpAndAdviceCard p + div.button,
    div.auxillary div.card.auxillaryCard p + div.button,
    div.auxillary div.card.sharingCard  p + div.button {
        font-size: 24px;
    }
}

@media (min-width: 768px) {
    div.auxillary div.card.logOutCard p + div.button,
    div.auxillary div.card.stopRemortgageCard p + div.button,
    div.auxillary div.card.getInTouchCard p + div.button,
    div.auxillary div.card.documentsCard p + div.button,
    div.auxillary div.card.helpAndAdviceCard p + div.button,
    div.auxillary div.card.auxillaryCard p + div.button,
    div.auxillary div.card.sharingCard p + div.button {
        font-size: 30px;
    }
}

div.auxillary div.card.getInTouchCard div.address p {
    margin: 8px 0px;
}

div.auxillary div.card.logOutCard button,
div.auxillary div.card.stopRemortgageCard button,
div.auxillary div.card.getInTouchCard button,
div.auxillary div.card.helpAndAdviceCard button,
div.auxillary div.card.auxillaryCard button,
div.auxillary div.card.sharingCard button {
    padding: 4px 16px;
    font-size: 12px;
}

@media (min-width: 576px) {
    div.auxillary div.card.logOutCard button,
    div.auxillary div.card.stopRemortgageCard button,
    div.auxillary div.card.getInTouchCard button,
    div.auxillary div.card.helpAndAdviceCard button,
    div.auxillary div.card.auxillaryCard button,
    div.auxillary div.card.sharingCard button{
        padding: 8px 16px;
        font-size: 14px;
    }
}

div.auxillary div.card.stopRemortgageCard {
    padding-right: 20px;
}

div.showModal {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

    div.showModal + div.modal {
        display: flex;
    }

div.showTooltip {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

    div.showTooltip + div.tooltipBackground {
        display: flex;
    }

div.modal {
    display: none;
    z-index: 999;
    background: rgba(31, 40, 76, 0.9);
    mix-blend-mode: normal;
    -webkit-backdrop-filter: blur(5.5px);
    backdrop-filter: blur(5.5px);
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    align-items: center;
    justify-content: center;
}

    div.modal div.modalStage {
        background-color: #fff;
        box-shadow: 0px 4px 30px rgba(41, 77, 157, 0.1);
        border-radius: 6px;
        position: relative;
        width: 100%;
        max-width: 760px;
        margin: 0px 16px;
    }

@media (min-width: 576px) {
    div.modal div.modalStage {
        margin: 0px 50px;
    }
}

@media (min-width: 576px) {
    div.modal div.modalStage {
        max-width: 530px;
    }
}

@media (min-width: 768px) {
    div.modal div.modalStage {
        max-width: 584px;
    }
}

div.modal div.modalClose {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}

div.chat {
    position: relative;
    height: 100vh;
    background-color: #fff;
    display: flex;
    flex-direction: column;
}

    div.chat div.enterMessage {
        margin-top: auto;
        border-radius: 0px 0px 6px 6px;
    }

    div.chat div.conversationHistory {
        flex: 1 1;
        max-height: 520px;
        height: 520px;
        overflow: auto;
        display: flex;
        flex-direction: column-reverse;
    }

div.enterMessage {
    position: relative;
    background-color: #fff;
    padding: 24px;
    border-top: 1px solid #e2e2e2;
}

    div.enterMessage form.formField {
        margin-bottom: 0px !important;
    }

        div.enterMessage form.formField label {
            display: none;
        }

        div.enterMessage form.formField input {
            background-color: #ecf0f4;
            border: 1px solid #e2e2e2;
            border-radius: 6px;
        }

    div.enterMessage div.messageExtraControls {
        position: absolute;
        top: 36px;
        right: 44px;
        display: flex;
        gap: 20px;
    }

@media (min-width: 768px) {
    div.enterMessage div.messageExtraControls {
        top: 45px;
    }
}

div.enterMessage div.messageExtraControls div.sendMessage img {
    margin-left: 6px;
    color: blue;
    fill: currentColor;
}

@media (min-width: 576px) {
    div.enterMessage div.messageExtraControls img {
        width: 24px;
        height: 24px;
    }
}

div.dateTimeStamp {
    font-style: normal;
    font-weight: 600;
    font-size: 10px;
    line-height: 16px;
    margin: 24px 0px;
    color: #1f284c;
    text-align: center;
}

@media (min-width: 560px){
    div.message {
        border-radius: 15px;
        padding: 12px 16px;
        max-width: 70%;
        position: relative;
    }

        div.message.sentToyou {
            margin-left: 45px;
        }

        div.message.sentTome {
            margin-right: 40px;
        }

        div.message p {
            font-size: 14px !important;
            line-height: 24px;
        }
}

div.message {
    border-radius: 15px;
    padding: 16px 24px;
    max-width: 80%;
    position: relative;
}


    div.message p {
        font-style: normal;
        font-weight: 400;
        font-size: 13px;
        line-height: 20px;
        color: #141D3A;
    }

    div.message.sentToyou {
        margin-left: 16px;
        margin-right: auto;
        background-color: #ecf0f4;
    }

    div.message .timestamp {
        text-align: right;
        font-size: 10px !important;
        font-weight: 700 !important;
    }

        div.message.sentToyou::before {
            position: absolute;
            left: 0px;
            bottom: 0px;
            content: " ";
            white-space: pre;
            width: 22px;
            height: 36px;
            background: url("/svgs/get-in-touch/tail-left.svg") no-repeat;
            margin-left: -10px;
        }

    div.message.sentTome {
        background-color: var(--message-sent-colour);
        color: var(--message-sent-font-colour);
        margin-left: auto;
        margin-right: 16px;
    }

    div.message.sentTome p {
        color: var(--message-sent-font-colour) !important;
    }

        div.message.sentTome::after {
            position: absolute;
            right: 0px;
            bottom: 0px;
            content: " ";
            white-space: pre;
            width: 22px;
            height: 36px;
            background: url("/svgs/get-in-touch/tail-right.svg") no-repeat;
            margin-right: -10px;
        }

div.messageRecipient {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e2e2e2;
    padding: 8px 32px;
    box-shadow: 0px 4px 30px rgba(41, 77, 157, 0.1);
}

    div.messageRecipient div.recipientAvatar {
        border: 2px solid #8c8c8c;
        border-radius: 50px;
        width: 32px;
        height: 32px;
    }

        div.messageRecipient div.recipientAvatar.hasAvatar {
            border: none;
            overflow: hidden;
        }

            div.messageRecipient div.recipientAvatar.hasAvatar img {
                width: 32px;
                height: 32px;
            }

    div.messageRecipient p {
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 24px;
        color: #141D3A;
        margin-left: 16px;
    }

div.conversation {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: #fff;
    padding-bottom: 20px;
    min-height: 200px;
    overflow: hidden;
}

div.sendDocument {
    padding: 32px 16px;
}

@media (min-width: 576px) {
    div.sendDocument {
        padding: 56px 32px;
    }
}

@media (min-width: 768px) {
    div.sendDocument {
        padding: 56px;
    }
}

div.sendDocument h2.modalTitle {
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 32px;
    color: #141D3A;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
}

    div.sendDocument h2.modalTitle img {
        margin-right: 10px;
    }

div.sendDocument div.formControls {
    display: grid;
    grid-template-columns: 50% 50%;
}

    div.sendDocument div.formControls > div:last-child {
        text-align: right;
    }

    div.sendDocument div.formControls button {
        padding: 8px 16px;
    }

@media (min-width: 768px) {
    div.documentsPage div.innerLayout {
        display: grid;
        grid-template-columns: auto 232px;
        grid-column-gap: 32px;
        column-gap: 32px;
    }
}

div.documentsPage div.auxillary {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

div.documentsPage h1 {
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.5px;
    color: var(--greeting);
    margin-bottom: 24px;
}

div.documentsPage div.accordion {
    margin-bottom: 24px;
}


    div.documentsPage div.accordion div.accordionSubItemData {
       display: flex;
       flex-direction: column;
       gap: 8px;
    }

        div.documentsPage div.accordion div.accordionSubItemData > div,
        div.documentsPage div.accordion div.accordionSubItemData > p {
            align-self: start;
        }

@media (min-width: 576px) {
    div.documentsPage div.accordion div.accordionSubItemData {
        display: grid !important;
        grid-template-columns: 3fr 2fr 230px;
        padding-right: 16px;
    }
}

div.documentsPage div.accordion div.tooltipIcon {
    align-items: start;
    margin-top: 2px;
}

div.documentsPage div.accordion p.dateUploaded {
    margin-left: 25px;
}

@media (min-width: 576px) {
    div.documentsPage div.accordion p.dateUploaded {
        margin-left: unset;
    }
}

div.documentsPage div.accordion p.dateUploaded img {
    margin-right: 10px;
}

div.documentsPage div.accordion p.dateAdded {
    display: none;
}

/*div.documentsPage div.accordion div.taskText {
    margin-left: 20px;
}*/

div.documentsPage div.accordion div.taskAction button {
    margin-left: 0px;
}

div.documentsPage div.card h3 {
    font-style: normal;
    font-weight: 600;
    color: #141D3A;
    margin-bottom: 16px;
}

div.documentsPage div.card p {
    color: #141D3A;
    font-size: 12px;
    line-height: 150%;
}

div.documentsPage div.card div.button.button_primary button {
    padding: 8px 16px;
}

div.helpAndAdvicePage div.innerLayout {
    display: grid;
    grid-row-gap: 32px;
    row-gap: 32px;
}

@media (min-width: 768px) {
    div.helpAndAdvicePage div.innerLayout {
        grid-template-columns: auto 232px;
        column-gap: 32px;
    }
}

div.helpAndAdvicePage div.auxillary {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

    div.helpAndAdvicePage div.auxillary h3 {
        font-style: normal;
        font-weight: 600;
        color: #141D3A;
    }

div.helpAndAdvicePage > h1 {
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.5px;
    color: var(--greeting);
    margin-bottom: 24px;
}

    div.helpAndAdvicePage > h1 + p {
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 24px;
        color: #141D3A;
        margin: 8px 0px 16px 0px;
    }

        div.helpAndAdvicePage > h1 + p + h2 {
            font-style: normal;
            font-weight: 600;
            font-size: 16px;
            line-height: 24px;
            color: var(--greeting);
            margin: 16px 0px;
        }

div.faqAccordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

div.faqAccordionItem {
    transition: max-height 0.5s ease-out;
    overflow: hidden;
    border: 1px solid #e2e2e2;
    background-color: #fff;
    box-shadow: 0px 4px 30px rgba(41, 77, 157, 0.1);
    border-radius: 6px;
}

    div.faqAccordionItem div.accordionSubItem,
    div.faqAccordionItem div.accordionControls {
        display: none;
        animation: animateVisibleKeyframes 0.5s;
    }

    div.faqAccordionItem.isClosed div.faqAccordionHeader img.openControl {
        display: block;
    }

    div.faqAccordionItem.isClosed div.faqAccordionHeader img.closedControl {
        display: none;
    }

    div.faqAccordionItem.isOpen {
        max-height: 1000px;
        height: auto;
    }

        div.faqAccordionItem.isOpen div.accordionSubItem {
            display: block;
        }

        div.faqAccordionItem.isOpen div.faqAccordionHeader img.openControl {
            display: none;
        }

        div.faqAccordionItem.isOpen div.faqAccordionHeader img.closedControl {
            display: block;
        }

    div.faqAccordionItem p {
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        color: #141D3A;
    }

@media (min-width: 768px) {
    div.faqAccordionItem p {
        font-size: 14px;
    }
}

div.faqAccordionHeader {
    cursor: pointer;
    display: grid;
    grid-template-columns: auto min-content;
    padding-top: 24px;
    padding-bottom: 24px;
    align-items: center;
    padding-right: 16px;
}

@media (min-width: 768px) {
    div.faqAccordionHeader {
        padding-right: 24px;
    }
}

div.faqAccordionHeader > h2 {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #1f284c;
}

div.faqAccordionHeader > h2 {
    padding-left: 32px;
}

div.faqAccordionHeader + p {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #141D3A;
    padding: 0px 72px 24px 32px;
}

div.faqAccordionHeader div.openOrClosed {
    margin-left: 20px;
}

    div.faqAccordionHeader div.openOrClosed div.openOrClosed img {
        transform: rotate(-90deg);
        transition: transform 0.2s ease-out;
    }

div.myAreaPage div.innerLayout {
    display: grid;
    grid-row-gap: 24px;
    row-gap: 24px;
}

@media (min-width: 768px) {
    div.myAreaPage div.innerLayout {
        grid-template-columns: 1fr 1fr;
        column-gap: 32px;
    }
}

div.myAreaPage > h1 {
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.5px;
    color: var(--greeting);
    margin-bottom: 24px;
}

    div.myAreaPage > h1 + p {
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 24px;
        color: #141D3A;
        margin: 8px 0px 16px 0px;
    }

@media (min-width: 576px) {
    div.myAreaPage > h1 + p {
        font-size: 14px;
    }
}

div.myAreaPage > h1 + p + h2 {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--greeting);
    margin: 16px 0px;
}

div.myAreaPage div.innerLayout div.mainContent {
    display: flex;
    flex-direction: column;
    row-gap: 24px;
    column-gap: 20px;
}

@media (min-width: 576px) {
    div.myAreaPage div.innerLayout div.mainContent {
        flex-direction: row;
    }
}

@media (min-width: 768px) {
    div.myAreaPage div.innerLayout div.mainContent {
        flex-direction: column;
    }
}

div.myAreaPage div.innerLayout div.mainContent div.mainContentSection {
    display: flex;
    flex-direction: column;
}

@media (min-width: 576px) {
    div.myAreaPage div.innerLayout div.mainContent div.mainContentSection {
        width: 50%;
    }
}

@media (min-width: 768px) {
    div.myAreaPage div.innerLayout div.mainContent div.mainContentSection {
        width: 100%;
    }
}

div.myAreaPage div.innerLayout div.mainContent div.mainContentSection > h2 {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    color: var(--greeting);
    margin-bottom: 16px;
}

@media (min-width: 576px) {
    div.myAreaPage div.innerLayout div.mainContent div.mainContentSection > h2 {
        font-size: 16px;
    }
}

div.myAreaPage
div.innerLayout
div.mainContent
div.mainContentSection
div.googleMaps {
    position: relative;
    border: 1px solid #e2e2e2;
    box-shadow: 0px 4px 30px rgba(41, 77, 157, 0.1);
    border-radius: 6px;
    overflow: hidden;
}

    div.myAreaPage
    div.innerLayout
    div.mainContent
    div.mainContentSection
    div.googleMaps
    img {
        position: unset !important;
    }

div.myAreaPage
div.innerLayout
div.mainContent
div.mainContentSection
div.weatherstackContainer {
    background-image: url("/images/weatherstack-placeholder.png");
    padding: 20px;
    background-size: 100% 100%;
    border-radius: 6px;
}

    div.myAreaPage
    div.innerLayout
    div.mainContent
    div.mainContentSection
    div.weatherstackContainer
    img {
        position: unset !important;
    }

div.myAreaPage div.innerLayout div.mainContent div.mainContentSection > div {
    margin-top: auto;
}

div.myAreaPage div.auxillary > h2 {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    color: var(--greeting);
    margin-bottom: 16px;
}

@media (min-width: 576px) {
    div.myAreaPage div.auxillary > h2 {
        font-size: 16px;
    }
}

div.myAreaPage div.auxillary div.amenitiesOptions {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
}

    div.myAreaPage div.auxillary div.amenitiesOptions div.amenitiesCard div.card {
        padding: 24px 26px;
    }

        div.myAreaPage div.auxillary div.amenitiesOptions div.amenitiesCard div.card p {
            margin-bottom: 0px;
            font-style: normal;
            font-weight: 600;
            font-size: 16px;
            line-height: 32px;
            color: #141D3A;
        }

            div.myAreaPage
            div.auxillary
            div.amenitiesOptions
            div.amenitiesCard
            div.card
            p
            img {
                display: inline-block;
                margin-right: 10px;
                vertical-align: middle;
            }

        div.myAreaPage
        div.auxillary
        div.amenitiesOptions
        div.amenitiesCard
        div.card:hover {
            cursor: pointer;
            box-shadow: 0px 6px 20px rgba(41, 77, 157, 0.15);
        }

div.page.error div.error-header div.logo {
    padding-top: 48px;
    padding-left: 16px;
    padding-bottom: 55px;
}

    div.page.error div.error-header div.logo div.desktopLogo {
        display: none;
    }

@media (min-width: 992px) {
    div.page.error div.error-header div.logo div.desktopLogo {
        display: block;
    }
}

div.page.error div.error-header div.logo div.mobileLogo {
    display: block;
}

@media (min-width: 992px) {
    div.page.error div.error-header div.logo div.mobileLogo {
        display: none;
    }
}

@media (min-width: 576px) {
    div.page.error div.error-header div.logo {
        padding-left: 28px;
    }
}

div.page.error div.errorPage div.pageLayout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 44px;
    column-gap: 44px;
}

@media (min-width: 576px) {
    div.page.error div.errorPage div.pageLayout {
        column-gap: 85px;
    }
}

div.page.error div.errorPage div.pageLayout div.pageIllustration {
    display: flex;
    justify-content: right;
    align-items: right;
}

div.page.error div.errorPage div.pageLayout div.pageContent {
    max-width: 275px;
}

div.page.error div.errorPage div.pageIllustration img {
    margin-bottom: auto;
    position: unset !important;
    height: unset !important;
    max-width: 262px;
    min-width: 120px;
}

div.page.error div.errorPage div.pageContent > h1,
div.page.error div.errorPage div.callToAction > h1 {
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 16px;
    color: var(--greeting);
}

@media (min-width: 576px) {
    div.page.error div.errorPage div.pageContent > h1,
    div.page.error div.errorPage div.callToAction > h1 {
        font-size: 80px;
        margin-bottom: 24px;
        line-height: 96px;
    }
}

div.page.error div.errorPage div.pageContent > p,
div.page.error div.errorPage div.callToAction > p {
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 32px;
    color: #141D3A;
    margin-bottom: 32px;
}

@media (min-width: 576px) {
    div.page.error div.errorPage div.pageContent > p,
    div.page.error div.errorPage div.callToAction > p {
        font-size: 24px;
        margin-bottom: 34px;
    }
}

div.page.error div.errorPage div.callToAction {
    grid-column: 1/-1;
}

@media (min-width: 576px) {
    div.page.error div.errorPage div.callToAction {
        grid-column: 2;
    }
}

div.page.error div.errorPage div.callToAction > p {
    text-align: center;
    font-size: 16px;
}

@media (min-width: 576px) {
    div.page.error div.errorPage div.callToAction > p {
        text-align: left;
    }
}

@media (min-width: 576px) {
    div.page.error div.errorPage div.callToAction > p {
        font-size: 24px;
    }
}

div.page.error div.errorPage div.callToAction > p > a {
    color: var(--greeting);
    text-decoration: none;
}

div.portfolioPage h1 {
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.5px;
    color: var(--greeting);
    margin-bottom: 24px;
}

div.portfolioPage div.accordion div.accordionSubItem div.accordionSubItemData {
    grid-template-columns: auto auto;
    grid-row-gap: 16px;
    grid-column-gap: 16px;
    grid-column-gap: 60px;
}

@media (min-width: 576px) {
    div.portfolioPage
    div.accordion
    div.accordionSubItem
    div.accordionSubItemData {
        grid-template-columns: auto 1fr 200px min-content;
    }
}

div.portfolioPage
div.accordion
div.accordionSubItem
div.accordionSubItemData > div {
    align-self: start;
}

div.portfolioPage
div.accordion
div.accordionSubItem
div.accordionSubItemData
div.addressDetails {
    grid-column: 1/-1;
    margin-left: 16px;
}

@media (min-width: 576px) {
    div.portfolioPage
    div.accordion
    div.accordionSubItem
    div.accordionSubItemData
    div.addressDetails {
        grid-column: unset;
    }
}

@media (min-width: 576px) {
    div.portfolioPage
    div.accordion
    div.accordionSubItem
    div.accordionSubItemData
    div.addressDetails {
        margin-left: 0px;
    }
}

div.portfolioPage
div.accordion
div.accordionSubItem
div.accordionSubItemData
div.referenceText {
    grid-column: 1/-1;
}

@media (min-width: 576px) {
    div.portfolioPage
    div.accordion
    div.accordionSubItem
    div.accordionSubItemData
    div.referenceText {
        grid-column: unset;
    }
}

div.portfolioPage
div.accordion
div.accordionSubItem
div.accordionSubItemData
div.referenceText
p {
    white-space: nowrap;
    margin-left: 16px;
}

@media (min-width: 576px) {
    div.portfolioPage
    div.accordion
    div.accordionSubItem
    div.accordionSubItemData
    div.referenceText
    p {
        margin-left: 24px;
    }
}

div.portfolioPage
div.accordion
div.accordionSubItem
div.accordionSubItemData
div.taskAction {
    margin-left: 16px;
}

@media (min-width: 576px) {
    div.portfolioPage
    div.accordion
    div.accordionSubItem
    div.accordionSubItemData
    div.taskAction {
        margin-left: 0px;
    }
}

div.portfolioPage
div.accordion
div.accordionSubItem
div.accordionSubItemData
div.viewButton {
    margin: -4px 16px 0px auto;
}

@media (min-width: 576px) {
    div.portfolioPage
    div.accordion
    div.accordionSubItem
    div.accordionSubItemData
    div.viewButton {
        margin-right: 24px;
    }
}

div.questionnairePage h1 {
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.5px;
    color: var(--greeting);
    margin-bottom: 24px;
}

div.questionnaireSummary {
  margin-top: 24px;
  background: #dee4eb;
  border-radius: 6px;
  padding: 16px 24px;
  margin-bottom: 24px;
}

    div.questionnaireSummary h2 {
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
        color: var(--brand-colour-3);
        margin-bottom: 8px;
    }

    div.questionnaireSummary p {
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #1f284c;
    }

div.questionnairePage h3 {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #141D3A;
    margin-bottom: 8px;
}

div.questionnairePage p {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #141D3A;
    margin-bottom: 16px;
}

div.questionnairePage div.formField {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
}

div.formField.formFieldErrored input {
    border-color: #e40521 !important;
    margin-bottom: 4px;
}

div.formField.formFieldErrored p.formFieldErrorMessage {
    color: #e40521 !important;
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 16px;
}

div.formFieldChoices {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

    div.formFieldChoices.choicesVertical {
        flex-direction: column;
    }

    div.formFieldChoices.formFieldErrored {
        margin-bottom: 8px;
    }

        div.formFieldChoices.formFieldErrored input[type="radio"] {
            accent-color: #e40521;
        }

        div.formFieldChoices.formFieldErrored label {
            color: #e40521;
        }

        div.formFieldChoices.formFieldErrored + p.formFieldErrorMessage {
            color: #e40521 !important;
            font-style: normal;
            font-weight: 600;
            font-size: 12px;
            line-height: 16px;
            margin-bottom: 16px;
        }

div.formFieldChoice {
    align-items: center;
    justify-content: flex-end;
}

    div.formFieldChoice label {
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 24px;
        color: #141D3A;
        display: flex;
        align-items: center;
    }

        div.formFieldChoice label span.tooltipIcon {
            display: flex;
            align-items: center;
            margin-left: 10px;
        }

div.formFieldCheckbox {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 16px;
}

div.formFieldDate {
    display: flex;
    gap: 16px;
}

    div.formFieldDate div.formField {
        width: 56px;
    }

        div.formFieldDate div.formField.formFieldYear {
            width: 144px;
        }

div.formFieldChoice {
    display: flex;
    flex-direction: row-reverse;
    gap: 8px;
}

    div.formFieldChoice label {
        text-transform: capitalize;
    }

div.questionnaireControls {
    display: grid;
    grid-template-columns: auto auto;
    margin-top: 60px;
    margin-bottom: 60px;
}

    div.questionnaireControls div.progression {
        display: flex;
        justify-content: right;
        column-gap: 16px;
    }

@media (min-width: 768px) {
    div.questionnaireControls div.progression {
        column-gap: 24px;
    }
}

div.questionnaireControls div.button button {
    padding: 8px 16px;
    line-height: 16px;
    font-size: 14px;
}

div.formFieldCheckbox label {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #141D3A;
}

div.formFieldCheckbox input {
    background: #fff;
    border: 1px solid #141D3A;
    border-radius: 4px;
}

div.formFieldTextarea {
    margin-bottom: 16px;
}

    div.formFieldTextarea label {
        font-style: normal;
        font-weight: 600;
        font-size: 12px;
        line-height: 16px;
        margin-bottom: 8px;
        color: #141D3A;
        display: block;
        display: flex;
    }

    div.formFieldTextarea textarea {
        height: 130px;
        background: #fff;
        border: 1px solid #999;
        border-radius: var(--button-corners);
        resize: none;
        padding: 12px 16px;
        font-family: "Montserrat", sans-serif;
    }

div.questionnairePage div.formField input,
div.questionnairePage div.formField textarea,
div.questionnairePage div.formFieldTextarea input,
div.questionnairePage div.formFieldTextarea textarea {
    width: 100%;
}

@media (min-width: 768px) {
    div.questionnairePage div.formField input,
    div.questionnairePage div.formField textarea,
    div.questionnairePage div.formFieldTextarea input,
    div.questionnairePage div.formFieldTextarea textarea {
        width: 438px;
    }
}

div.formFieldDate div.formField input {
    width: inherit;
}

div.questionnairePage div.formSectionContent ul {
    margin-bottom: 16px;
    margin-left: 16px;
    list-style-type: none;
}

    div.questionnairePage div.formSectionContent ul li {
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 24px;
        color: #141D3A;
    }

        div.questionnairePage div.formSectionContent ul li:before {
            position: absolute;
            content: "•";
            margin-left: -10px;
        }

    div.questionnairePage div.formSectionContent ul + div.formFieldCheckbox {
        margin-bottom: 24px;
    }

div.questionnairePage div.questionnaireAccordionHeader {
    margin-bottom: 24px;
}

div.questionnairePage div.questionnaireAccordionItem div.button {
    margin-top: 40px;
    margin-bottom: 56px;
}

    div.questionnairePage div.questionnaireAccordionItem div.button button {
        padding: 8px 16px;
        line-height: 16px;
        font-size: 14px;
    }

div.questionnairePage
div.questionnaireAccordionItem.isClosed
div.questionnaireAccordionHeader
div.openOrClosed
img {
    transform: rotate(90deg);
    transition: transform 0.2s ease-out;
}

div.questionnairePage
div.questionnaireAccordionItem.isClosed
div.formSectionContent {
    display: none;
}

div.questionnairePage
div.questionnaireAccordionItem.isOpen
div.questionnaireAccordionHeader
div.openOrClosed
img {
    transform: rotate(0deg);
    transition: transform 0.2s ease-out;
}

div.questionnaireProgressTracker {
  overflow: hidden;
  margin-bottom: 16px;
  left: 0px;
}

@media (min-width: 992px) {
    div.questionnaireProgressTracker {
        left: 0px;
    }
}

div.questionnaireProgressTracker > div {
    overflow: hidden;
}

@media (min-width: 576px) {
    div.questionnaireProgressTracker > div {
        
    }
}

@media (min-width: 768px) {
    div.questionnaireProgressTracker > div {
        overflow: hidden;
        padding-right: 0px;
    }
}

@media (min-width: 992px) {
    div.questionnaireProgressTracker > div {
        
    }
}

div.questionnaireProgressTracker ul {
  display: flex;
  gap: 8px;
  list-style-type: none;
  margin-left: 0px;
  overflow: scroll;
  scrollbar-width: none;
}

@media (min-width: 992px) {
    div.questionnaireProgressTracker ul {
        padding-left: 0px;
    }
}

div.questionnaireProgressTracker ul::-webkit-scrollbar {
    display: none;
}

div.wfProgressTracker ul li {
    cursor: pointer;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    background: #fff;
    border: 1px solid #0075C3;
    border-radius: 6px;
    color: #141D3A;
    padding: 4px 16px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 14px;
}

    div.wfProgressTracker ul li span::first-letter {
        text-transform: capitalize;
    }

    div.wfProgressTracker ul li.selected {
        background: #0075C3;
        color: #fff;
        cursor: default;
    }

        div.wfProgressTracker ul li.not-available {
            background: #c3ccd6;
            border-radius: 6px;
            border: none;
            font-weight: 400;
            cursor: not-allowed;
        }

div.confirmUpToDate {
    width: 250px;
    display: flex;
    flex-direction: column;
}

    div.confirmUpToDate p {
        margin-right: auto;
    }

    div.confirmUpToDate div.confirmationField {
        display: flex;
    }

div.confirmRisksCovered {
    display: grid;
    grid-template-columns: min-content auto;
    grid-gap: 16px;
    gap: 16px;
    margin: 32px 0px;
}

    div.confirmRisksCovered p:last-child {
        grid-column: 2;
    }

div.questionnairePage div.systemAlert p {
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    color: #e40521;
}

div.questionnairePage p.label {
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    color: #141D3A;
}

div.questionnaireAccordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

div.questionnaireAccordionItem.isOpen {
    height: auto;
}

    div.questionnaireAccordionItem.isOpen div.accordionSubItem {
        display: block;
    }

    div.questionnaireAccordionItem.isOpen
    div.questionnaireAccordionHeader
    img.openControl {
        display: none;
    }

    div.questionnaireAccordionItem.isOpen
    div.questionnaireAccordionHeader
    img.closedControl {
        display: block;
    }

div.questionnaireAccordionItem.isClosed {
    max-height: 74px;
}

div.questionnaireAccordionHeader {
    cursor: pointer;
    display: grid;
    grid-template-columns: 24px auto 24px;
    padding-top: 24px;
    padding-bottom: 24px;
    align-items: center;
    padding-right: 16px;
    border: 1px solid #e2e2e2;
    background-color: #fff;
    box-shadow: 0px 4px 30px rgba(41, 77, 157, 0.1);
    border-radius: 6px;
}

@media (min-width: 768px) {
    div.questionnaireAccordionHeader {
        padding-right: 24px;
    }
}

div.questionnaireAccordionHeader > h2 {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #1f284c;
}

div.questionnaireAccordionHeader > h2 {
    padding-left: 32px;
}

div.questionnaireAccordionHeader + p {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #141D3A;
    padding: 0px 72px 24px 32px;
}

div.questionnaireAccordionHeader div.openOrClosed {
    margin-left: 20px;
}

    div.questionnaireAccordionHeader div.openOrClosed div.openOrClosed img {
        transform: rotate(-90deg);
        transition: transform 0.2s ease-out;
    }

div.leaseType {
    margin-bottom: 24px;
}

    div.leaseType div.formFieldChoice {
        margin-bottom: 8px;
    }


.choose-file-button {
    display: flex;
    align-items: center;
}

input.error {
    border: 2px solid var(--error) !important;
}

label.error {
   color: var(--error) !important;
}

.temp-loader {
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.5px;
    color: #0075C3;
    margin-bottom: 24px;
}

.live-chat-container {
    align-items: center;
    justify-content: center;
    gap:24px;
}

.live-chat-container p {
    text-align: center;
}

.desktop-live-chat {
    display: none;
}



@media (min-width:992px){
    .mobile-live-chat {
        display: none;
    }

    .desktop-live-chat {
        display: block;
    }
}

.live-chat-page img {
    width:250px;
}

.live-chat-page p {
    text-align: center;
}

.live-chat-mobile {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.live-chat-page {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:32px;
}

#feedback-modal .modalStage {
    padding: 24px;
    display: flex;
    flex-direction: column;
}

@media (min-width:992px){

    #feedback-modal .modalStage {
        padding: 56px;
        width: 816px;
        max-width: unset !important;
    }
}

#feedback-modal .modalStageContainer {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

#feedback-modal .modalTitle {
    display: flex;
    gap:16px;
    align-items: center;
}

#feedback-modal .content-container {
    display: flex;
    gap: 24px;
    flex-direction: column;
}

#feedback-modal .formControls {
    display: flex;
    justify-content: end;
}