.noUi-target, .noUi-target * {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    touch-action: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.noUi-target {
    position: relative
}

.noUi-base, .noUi-connects {
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 1
}

.noUi-connects {
    overflow: hidden;
    z-index: 0
}

.noUi-connect, .noUi-origin {
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    -ms-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform-style: preserve-3d;
    transform-style: flat;
    width: 100%;
    will-change: transform;
    z-index: 1
}

.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
    left: 0;
    right: auto
}

.noUi-vertical .noUi-origin {
    top: -100%;
    width: 0
}

.noUi-horizontal .noUi-origin {
    height: 0
}

.noUi-handle {
    backface-visibility: hidden;
    position: absolute
}

.noUi-touch-area {
    height: 100%;
    width: 100%
}

.noUi-state-tap .noUi-connect, .noUi-state-tap .noUi-origin {
    transition: transform .3s
}

.noUi-state-drag * {
    cursor: inherit !important
}

.noUi-horizontal {
    height: 18px
}

    .noUi-horizontal .noUi-handle {
        height: 28px;
        right: -17px;
        top: -6px;
        width: 34px
    }

.noUi-vertical {
    width: 18px
}

    .noUi-vertical .noUi-handle {
        bottom: -17px;
        height: 34px;
        right: -6px;
        width: 28px
    }

.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
    left: -17px;
    right: auto
}

.noUi-target {
    background: #fafafa;
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px #f0f0f0,0 3px 6px -5px #bbb
}

.noUi-connects {
    border-radius: 3px
}

.noUi-connect {
    background: #3fb8af
}

.noUi-draggable {
    cursor: ew-resize
}

.noUi-vertical .noUi-draggable {
    cursor: ns-resize
}

.noUi-handle {
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    box-shadow: inset 0 0 1px #fff,inset 0 1px 7px #ebebeb,0 3px 6px -3px #bbb;
    cursor: default
}

.noUi-active {
    box-shadow: inset 0 0 1px #fff,inset 0 1px 7px #ddd,0 3px 6px -3px #bbb
}

.noUi-handle:after, .noUi-handle:before {
    background: #e8e7e6;
    content: "";
    display: block;
    height: 14px;
    left: 14px;
    position: absolute;
    top: 6px;
    width: 1px
}

.noUi-handle:after {
    left: 17px
}

.noUi-vertical .noUi-handle:after, .noUi-vertical .noUi-handle:before {
    height: 1px;
    left: 6px;
    top: 14px;
    width: 14px
}

.noUi-vertical .noUi-handle:after {
    top: 17px
}

[disabled] .noUi-connect {
    background: #b8b8b8
}

[disabled] .noUi-handle, [disabled].noUi-handle, [disabled].noUi-target {
    cursor: not-allowed
}

.noUi-pips, .noUi-pips * {
    box-sizing: border-box
}

.noUi-pips {
    color: #999;
    position: absolute
}

.noUi-value {
    position: absolute;
    text-align: center;
    white-space: nowrap
}

.noUi-value-sub {
    color: #ccc;
    font-size: 10px
}

.noUi-marker {
    background: #ccc;
    position: absolute
}

.noUi-marker-large, .noUi-marker-sub {
    background: #aaa
}

.noUi-pips-horizontal {
    height: 80px;
    left: 0;
    padding: 10px 0;
    top: 100%;
    width: 100%
}

.noUi-value-horizontal {
    transform: translate(-50%,50%)
}

.noUi-rtl .noUi-value-horizontal {
    transform: translate(50%,50%)
}

.noUi-marker-horizontal.noUi-marker {
    height: 5px;
    margin-left: -1px;
    width: 2px
}

.noUi-marker-horizontal.noUi-marker-sub {
    height: 10px
}

.noUi-marker-horizontal.noUi-marker-large {
    height: 15px
}

.noUi-pips-vertical {
    height: 100%;
    left: 100%;
    padding: 0 10px;
    top: 0
}

.noUi-value-vertical {
    padding-left: 25px;
    transform: translateY(-50%)
}

.noUi-rtl .noUi-value-vertical {
    transform: translateY(50%)
}

.noUi-marker-vertical.noUi-marker {
    height: 2px;
    margin-top: -1px;
    width: 5px
}

.noUi-marker-vertical.noUi-marker-sub {
    width: 10px
}

.noUi-marker-vertical.noUi-marker-large {
    width: 15px
}

.noUi-tooltip {
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    color: #000;
    display: block;
    padding: 5px;
    position: absolute;
    text-align: center;
    white-space: nowrap
}

.noUi-horizontal .noUi-tooltip {
    bottom: 120%;
    left: 50%;
    transform: translate(-50%)
}

.noUi-vertical .noUi-tooltip {
    right: 120%;
    top: 50%;
    transform: translateY(-50%)
}

.noUi-horizontal .noUi-origin > .noUi-tooltip {
    bottom: 10px;
    left: auto;
    transform: translate(50%)
}

.noUi-vertical .noUi-origin > .noUi-tooltip {
    right: 28px;
    top: auto;
    transform: translateY(-18px)
}

body .noUi-horizontal.small {
    height: 10px
}

    body .noUi-horizontal.small .noUi-handle {
        border-radius: 50%;
        height: 20px;
        width: 20px
    }

body .noUi-horizontal .noUi-connect, body .noUi-horizontal .noUi-handle {
    background: #000;
    box-shadow: none
}

    body .noUi-horizontal .noUi-handle:after, body .noUi-horizontal .noUi-handle:before {
        content: none
    }

#used-intro-header {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 322px;
    padding: 50px 80px 0 30px
}

@media (min-width:576px) {
    #used-intro-header {
        min-height: 220px
    }
}

@media (min-width:768px) {
    #used-intro-header {
        padding: 45px 25% 35px 100px
    }
}

@media (min-width:1350px) {
    #used-intro-header {
        min-height: 270px;
        padding: 55px 36% 40px 144px
    }
}

#used-intro-header picture img {
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%
}

#used-intro-header h1 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 50px
}

@media (min-width:768px) {
    #used-intro-header h1 {
        font-size: 25px;
        margin-bottom: 30px
    }
}

@media (min-width:1350px) {
    #used-intro-header h1 {
        font-size: 28px
    }
}

#used-intro-header h1 strong {
    font-weight: 700
}

#used-intro-header p {
    line-height: 130%
}

    #used-intro-header p.representative-example {
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 1px
    }

@media (min-width:768px) {
    #used-intro-header p.representative-example {
        font-size: 14px
    }
}

@media (min-width:1350px) {
    #used-intro-header p.representative-example {
        font-size: 16px
    }
}

#used-intro-header p.representative-text {
    color: #fff;
    font-size: 11px;
    font-weight: 400
}

@media (min-width:768px) {
    #used-intro-header p.representative-text {
        font-size: 12px
    }
}

@media (min-width:1350px) {
    #used-intro-header p.representative-text {
        font-size: 14px
    }
}

@media (min-width:576px) {
    #used-intro-header #view-more, #used-intro-header #view-more-checkbox {
        display: none
    }
}

@media (max-width:575.98px) {
    #used-intro-header #view-more {
        border: 1px solid #fff;
        height: 40px;
        width: 40px
    }

    #used-intro-header #view-more-checkbox {
        display: none
    }

        #used-intro-header #view-more-checkbox:not(:checked) + label {
            background: url(/assets/svg/arrow-down-icon-white.svg) no-repeat 50%/11px transparent;
            display: block
        }

            #used-intro-header #view-more-checkbox:checked + label, #used-intro-header #view-more-checkbox:not(:checked) + label + div {
                display: none
            }
}

.used-result {
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-name: example;
    -webkit-animation-name: example;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    opacity: 0
}

.ani-delay-1 {
    animation-delay: 1s;
    -webkit-animation-delay: 1s
}

.ani-delay-15 {
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s
}

.ani-delay-2 {
    animation-delay: 2s;
    -webkit-animation-delay: 2s
}

.ani-delay-25 {
    animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s
}

.ani-delay-3 {
    animation-delay: 3s;
    -webkit-animation-delay: 3s
}

@keyframes example {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.used-sidebar {
    width: 100%
}

@media (min-width:768px) {
    .used-sidebar {
        overflow-y: scroll;
        position: sticky;
        top: 100px;
        width: 40%
    }
}

@media (min-width:1024px) {
    .used-sidebar {
        top: 120px;
        width: 30%
    }
}

@media (min-width:1350px) {
    .used-sidebar {
        width: 23%
    }
}

@media (min-width:1600px) {
    .used-sidebar {
        top: 160px;
        width: 19%
    }
}

.used-results-container {
    width: 100%
}

@media (min-width:768px) {
    .used-results-container {
        width: 60%
    }
}

@media (min-width:1024px) {
    .used-results-container {
        width: 70%
    }
}

@media (min-width:1350px) {
    .used-results-container {
        width: 77%
    }
}

@media (min-width:1600px) {
    .used-results-container {
        width: 81%
    }
}

#shortlist-popup .used-sidebar {
    min-height: 500px
}

    #shortlist-popup .used-sidebar button {
        border: none;
        width: 100%
    }

.mobile-search {
    z-index: 59
}

@media (min-width:768px) {
    .mobile-search {
        display: none
    }
}

.mobile-search button {
    background: #000;
    border: none;
    bottom: 0;
    justify-content: center;
    position: fixed;
    width: 100%
}

.used-sidebar {
    background-color: #f1f1f1
}

@media (max-width:767.98px) {
    .used-sidebar {
        position: fixed;
        top: 76px;
        transition: all .4s ease;
        z-index: 50
    }

        .used-sidebar .inside {
            height: calc(100vh - 77px);
            overflow-y: scroll;
            padding: 30px 20px 120px
        }

        .used-sidebar.hide {
            transform: translateX(-100%)
        }
}

@media (min-width:768px) {
    .used-sidebar .inside {
        padding-left: 20px;
        padding-right: 20px
    }
}

@media (min-width:1600px) {
    .used-sidebar .inside {
        padding-left: 40px;
        padding-right: 30px
    }
}

.used-sidebar .mobile-rep {
    padding-top: 40px
}

@media (min-width:768px) {
    .used-sidebar .mobile-rep {
        display: none
    }
}

.used-sidebar .mobile-rep .representative-example {
    font-family: Roboto-Bold,Arial,Sans-Serif;
    font-size: 18px
}

.used-sidebar .mobile-rep .representative-text {
    font-family: Roboto-Light,Arial,Sans-Serif;
    font-size: 11px
}

.filter-head {
    display: flex;
    justify-content: space-between;
    margin-top: 40px
}

    .filter-head .reset-filter {
        cursor: pointer;
        font-size: 14px
    }

        .filter-head .reset-filter svg {
            margin-right: 10px;
            width: 18px
        }

    .filter-head #filters-selected {
        align-items: center;
        color: var(--button-bg);
        display: flex;
        font-size: 14px;
        justify-content: left
    }

        .filter-head #filters-selected span {
            align-items: center;
            background-color: var(--button-bg);
            border-radius: 50%;
            color: #fff;
            display: flex;
            height: 25px;
            justify-content: center;
            line-height: 25px;
            margin-right: 10px;
            margin-top: -2px;
            width: 25px
        }

.refine-search {
    margin: 0
}

    .refine-search span {
        font-weight: 700
    }

#used-search-location {
    align-items: flex-end;
    display: flex;
    flex-direction: column
}

    #used-search-location input {
        background: #fff;
        border: none;
        color: #000;
        margin-bottom: 10px;
        padding: 10px;
        width: 100%
    }

    #used-search-location span {
        cursor: pointer;
        font-size: 12px;
        width: -moz-fit-content;
        width: fit-content
    }

.used-filters .filter-tabs {
    margin-top: 30px
}

    .used-filters .filter-tabs .nav-tabs {
        display: flex
    }

        .used-filters .filter-tabs .nav-tabs .nav-item {
            flex-grow: 1
        }

            .used-filters .filter-tabs .nav-tabs .nav-item svg {
                margin-right: 15px;
                max-height: 20px;
                max-width: 20px
            }

            .used-filters .filter-tabs .nav-tabs .nav-item .nav-link {
                align-items: center;
                background: none;
                border: none;
                border-radius: 0;
                display: flex;
                font-size: 13px;
                font-weight: 700;
                justify-content: center;
                letter-spacing: 3px;
                padding: 15px 0;
                text-align: center;
                text-transform: uppercase
            }

                .used-filters .filter-tabs .nav-tabs .nav-item .nav-link.active {
                    background: #fff
                }

.used-filters .search-filter-container .accordion, .used-filters .search-filter-container .accordion-button, .used-filters .search-filter-container .accordion-item {
    background: transparent;
    box-shadow: none;
    outline: none
}

    .used-filters .search-filter-container .accordion-button:not(.collapsed) {
        color: inherit
    }

        .used-filters .search-filter-container .accordion-button:not(.collapsed):after {
            background-image: var(--bs-accordion-btn-icon)
        }

    .used-filters .search-filter-container .accordion-item.button-hidden button {
        display: none
    }

    .used-filters .search-filter-container .accordion-item.button-hidden .accordion-body {
        padding-left: 0
    }

.used-filters .search-filter-container .sub-tab {
    justify-content: space-between;
    margin-top: -20px
}

.used-filters .search-filter-container .center-tab {
    align-items: center;
    display: flex;
    padding: 0
}

.used-filters .search-filter-container .accordion-item {
    border-bottom: 1px solid rgba(0,0,0,.1)
}

    .used-filters .search-filter-container .accordion-item .tick {
        background: url(/assets/svg/tick.svg) no-repeat 50%/12px var(--button-bg);
        border-radius: 50%;
        display: none;
        height: 20px;
        margin-right: 10px;
        width: 20px
    }

    .used-filters .search-filter-container .accordion-item div {
        font-family: Roboto-Medium,Arial,Sans-Serif;
        font-size: 15px
    }

        .used-filters .search-filter-container .accordion-item div span {
            display: block;
            font-family: Roboto-Regular,Arial,Sans-Serif;
            font-size: 14px
        }

@media (max-width:767.98px) {
    .used-filters .search-filter-container .accordion-item button {
        padding-left: 0;
        padding-right: 0
    }
}

.used-filters ul.filters {
    list-style: none;
    padding: 0
}

    .used-filters ul.filters li {
        display: flex;
        justify-items: center;
        margin: 15px 0;
        padding: 0
    }

        .used-filters ul.filters li input {
            display: none
        }

        .used-filters ul.filters li label {
            color: grey;
            cursor: pointer;
            font-size: 14px
        }

@media (min-width:1350px) {
    .used-filters ul.filters li label {
        font-size: 13px
    }
}

.used-filters ul.filters li input + label {
    background: #fff;
    border-radius: 50%;
    height: 20px;
    margin-right: 10px;
    width: 20px
}

    .used-filters ul.filters li input + label + label {
        margin-top: 2px
    }

.used-filters ul.filters li input:checked + label {
    background: url(/assets/svg/tick.svg) no-repeat 50%/12px var(--button-bg)
}

    .used-filters ul.filters li input:checked + label + label {
        color: #000
    }

.used-filters ul.filters .slider-output {
    padding-bottom: 16px;
    text-align: right
}

.used-filters .sort-by .filters {
    padding: 16px 20px 20px 0
}

#used-full-container, #used-listing-container {
    position: relative
}

.used-results-container {
    background: #f1f1f1;
    overflow: hidden;
    position: relative;
    z-index: 9
}

@media (max-width:767.98px) {
    .used-results-container {
        background: #fff
    }
}

.used-results-container:after, .used-results-container:before {
    content: "";
    display: block;
    left: 0;
    position: absolute;
    z-index: 10
}

.used-results-container:before {
    background: #fff;
    -webkit-clip-path: polygon(75% 0,0 80%,0 0);
    clip-path: polygon(75% 0,0 80%,0 0);
    height: 0;
    padding: 50%;
    width: 0
}

.used-results-container:after {
    background: #fff;
    background: linear-gradient(90deg,rgba(0,0,0,.4),rgba(0,0,0,.4) 100%);
    height: 1px;
    left: 71%;
    position: absolute;
    top: 0;
    transform: rotate(133.5deg);
    transform-origin: left;
    width: 200vh
}

.top-section {
    align-items: center;
    font-size: 16px;
    padding-bottom: 20px;
    padding-top: 20px
}

@media (max-width:767.98px) {
    .top-section {
        background: #fff;
        display: none;
        height: 77px;
        padding: 0 30px;
        position: sticky;
        top: 0;
        z-index: 41
    }
}

@media (min-width:768px) {
    .top-section {
        font-size: 17px;
        padding-bottom: 40px;
        padding-top: 60px
    }
}

@media (min-width:1024px) {
    .top-section {
        font-size: 19px
    }
}

@media (min-width:1350px) {
    .top-section {
        font-size: 23px
    }
}

.loading {
    margin: 30px 0;
    text-align: center
}

@media (min-width:1024px) {
    .loading {
        margin: 50px 0
    }
}

#shortlist-popup .used-results-header .shortlist-heart {
    margin-right: 20px
}

    #shortlist-popup .used-results-header .shortlist-heart span {
        font-weight: 700
    }

.used-results-inner {
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    z-index: 11
}

@media (min-width:1600px) {
    .used-results-inner {
        margin-right: 80px
    }
}

.used-results-header {
    display: flex
}

@media (max-width:767.98px) {
    .used-results-header.fixed {
        background: #fff;
        font-size: 16px;
        left: 0;
        padding: 20px;
        position: fixed;
        top: 77px;
        width: 100%;
        z-index: 11
    }

        .used-results-header.fixed p {
            display: none
        }
}

.used-results-header p {
    margin: 0
}

@media (max-width:767.98px) {
    .used-results-header.desktop {
        display: none
    }
}

@media (min-width:768px) {
    .used-results-header.mobile {
        display: none
    }
}

.used-results-header div span {
    color: var(--button-bg)
}

.used-results-header .shortlist {
    align-items: center;
    background: none;
    border: none;
    display: flex
}

    .used-results-header .shortlist p {
        color: var(--button-bg);
        letter-spacing: 2px;
        margin: 0 20px 0 0;
        text-transform: uppercase
    }

.used-results-header .shortlist-heart {
    align-items: center;
    color: #fff;
    display: flex;
    font-size: 13px;
    height: 23px;
    justify-content: center;
    position: relative;
    width: 36px
}

    .used-results-header .shortlist-heart .heart-icon {
        position: absolute;
        z-index: -1
    }

        .used-results-header .shortlist-heart .heart-icon path {
            fill: var(--button-bg)
        }

    .used-results-header .shortlist-heart i {
        font-style: normal
    }

.used-results-header span {
    color: #000;
    font-weight: 700
}

.used-result > .row {
    padding: 10px 5px 20px
}

.used-result .card {
    box-shadow: 2px 2px 10px rgba(0,0,0,.3)
}

.used-result.timeless .used-images:before {
    background: url(https://cdn.invictamotors.co.uk/assets/invicta/used-cars/listing-page/timeless.webp) no-repeat 50%/contain;
    width: 100px
}

.used-result.selezione .used-images:before {
    background: url(https://cdn.invictamotors.co.uk/assets/invicta/used-cars/listing-page/selezione.webp) no-repeat 50%/contain;
    width: 158px
}

.used-result .used-images {
    position: relative
}

    .used-result .used-images:before {
        content: "";
        height: 50px;
        left: 50px;
        position: absolute;
        top: -1px;
        z-index: 1
    }

    .used-result .used-images .used-image {
        height: 0;
        padding-bottom: 55%
    }

        .used-result .used-images .used-image img {
            height: 100%;
            -o-object-fit: cover;
            object-fit: cover;
            position: absolute
        }

    .used-result .used-images .love, .used-result .used-images .loved {
        background: url(/assets/svg/heart-outline-white.svg) no-repeat 50%/26px var(--button-bg);
        border-radius: 50%;
        cursor: pointer;
        height: 50px;
        position: absolute;
        right: 40px;
        transform: translateY(-50%);
        width: 50px
    }

        .used-result .used-images .love.saved, .used-result .used-images .loved.saved {
            background: url(/assets/svg/cross-icon-white.svg) no-repeat 50%/13px var(--button-bg)
        }

        .used-result .used-images .love.results.saved, .used-result .used-images .loved.results.saved {
            background: url(/assets/svg/heart-outline-white-filled.svg) no-repeat 50%/26px var(--button-bg)
        }

.used-result .used-listing-details .button-primary {
    background-color: var(--button-bg);
    justify-content: center;
    letter-spacing: normal;
    padding: 0
}

.used-result .card-detail {
    background: #fff;
    padding: 30px
}

@media (min-width:1600px) {
    .used-result .card-detail {
        padding: 40px
    }
}

.used-result .card-detail .vehicle-name {
    text-transform: uppercase
}

@media (min-width:1350px) {
    .used-result .card-detail .vehicle-name {
        height: 34px
    }
}

.used-result .card-detail .vehicle-name span {
    font-weight: 700;
    text-transform: inherit
}

    .used-result .card-detail .vehicle-name span + span {
        display: block
    }

.used-result .card-detail .vehicle-price {
    font-size: 14px
}

    .used-result .card-detail .vehicle-price span {
        font-size: 18px;
        font-weight: 700
    }

@media (min-width:1600px) {
    .used-result .card-detail .vehicle-price span {
        font-size: 16px
    }
}

.used-result .card-detail .vehicle-price span.monthly-price, .used-result .card-detail .vehicle-price span.monthly-price .small {
    font-size: 16px;
    font-weight: 400
}

@media (min-width:1600px) {
    .used-result .card-detail .vehicle-price span.monthly-price, .used-result .card-detail .vehicle-price span.monthly-price .small {
        font-size: 14px
    }
}

.used-result .card-detail .vehicle-price .month {
    font-size: 12px;
    font-weight: 400;
    padding-left: 20px;
    position: relative;
    text-transform: uppercase
}

    .used-result .card-detail .vehicle-price .month:before {
        border-left: 1px solid #676767;
        content: "";
        height: 36px;
        left: 9px;
        position: absolute;
        top: -13px;
        transform: rotate(50deg);
        width: 1px
    }

.used-result .card-detail .vehicle-specs {
    border-bottom: 1px solid #f1f1f1;
    border-top: 1px solid #f1f1f1;
    margin: 0 0 15px;
    padding: 15px 0
}

    .used-result .card-detail .vehicle-specs p {
        font-size: 16px;
        font-weight: 700;
        line-height: 120%;
        padding: 0
    }

        .used-result .card-detail .vehicle-specs p span {
            color: #676767;
            display: block;
            font-size: 12px;
            font-weight: 400
        }

.used-result .card-detail .dealership {
    align-items: center;
    display: flex
}

    .used-result .card-detail .dealership p {
        font-size: 14px;
        font-weight: 700;
        margin: 0
    }

    .used-result .card-detail .dealership span {
        display: block;
        font-weight: 400
    }

#shortlist-popup {
    background: rgba(0,0,0,.5);
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    transform: translateY(-100%);
    transition: transform .4s ease;
    width: 100%;
    z-index: 70
}

@media (min-width:768px) {
    #shortlist-popup {
        top: 0
    }
}

#shortlist-popup.opened {
    display: block
}

#shortlist-popup.active {
    transform: translateY(0)
}

#shortlist-popup .row:first-child {
    padding-bottom: 60px
}

#shortlist-popup .close {
    align-items: center;
    border: none;
    color: #000;
    display: flex;
    font-size: 14px;
    justify-items: center;
    position: absolute;
    right: 40px;
    z-index: 26
}

@media (max-width:767.98px) {
    #shortlist-popup .close {
        background: transparent;
        top: 95px
    }
}

@media (min-width:768px) {
    #shortlist-popup .close {
        top: 20px
    }
}

@media (min-width:1350px) {
    #shortlist-popup .close {
        top: 40px
    }
}

#shortlist-popup .close svg {
    height: 17px;
    margin-left: 15px;
    width: 17px
}

#shortlist-results {
    height: calc(100vh - 77px);
    overflow-y: scroll;
    padding-top: 50px
}

@media (min-width:768px) {
    #shortlist-results {
        height: calc(85vh - 100px);
        padding-top: 0
    }
}

@media (min-width:1600px) {
    #shortlist-results {
        height: calc(85vh - 160px)
    }
}

@media (max-width:767.98px) {
    #no-results {
        left: 0;
        padding: 0 50px;
        position: fixed;
        text-align: center;
        top: 50%;
        width: 100%
    }
}

#no-results p {
    font-size: 16px;
    font-weight: 700
}

@media (min-width:768px) {
    #no-results p {
        font-size: 20px
    }
}

body[data-brand=invicta] #postcode-required .inner-container {
    max-width: 850px
}

body[data-brand=invicta] #used-range {
    margin-top: 100px
}

#postcode-required {
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    background: hsla(0,0%,100%,.8);
    height: 100vh;
    left: 0;
    padding: 0;
    position: fixed;
    width: 100vw;
    z-index: 70
}

    #postcode-required .brand-banner {
        background: #e1e3e0;
        padding: 50px 0;
        text-align: center;
        width: 100%
    }

        #postcode-required .brand-banner img {
            margin-bottom: 30px;
            max-height: 50px
        }

    #postcode-required .inner-container {
        margin: 75px auto;
        max-width: 550px
    }

@media (min-width:768px) {
    #postcode-required .inner-container {
        margin: 50px auto
    }
}

@media (min-width:1350px) {
    #postcode-required .inner-container {
        margin: 100px auto
    }
}

#postcode-required .content {
    display: flex;
    flex-direction: column
}

    #postcode-required .content p {
        text-align: center
    }

        #postcode-required .content p#used-range {
            font-family: Roboto-Thin,Arial,Sans-Serif;
            font-size: 32px;
            margin-bottom: 30px
        }

@media (max-width:767.98px) {
    #postcode-required .content p#used-range {
        font-size: 25px
    }
}

#postcode-required .content p#used-range span {
    font-weight: 700
}

#postcode-required .content p#awaits {
    font-family: Roboto-Light,Arial,Sans-Serif;
    font-size: 20px
}

#postcode-required .content p#optimise {
    font-size: 20px;
    font-weight: 700
}

@media (max-width:767.98px) {
    #postcode-required .content p#optimise {
        font-size: 16px;
        padding: 0 20px
    }
}

#postcode-required .content svg {
    margin-bottom: 25px;
    max-height: 50px
}

@media (min-width:768px) {
    #postcode-required .content svg {
        margin-bottom: 30px
    }
}

@media (min-width:1350px) {
    #postcode-required .content svg {
        margin-bottom: 100px
    }
}

#postcode-required .content svg path {
    fill: #000;
    margin: 0 auto
}

#postcode-required .container-fluid {
    margin-top: 30px
}

@media (min-width:768px) {
    #postcode-required .container-fluid {
        margin-top: 20px
    }
}

@media (min-width:1350px) {
    #postcode-required .container-fluid {
        margin-top: 90px
    }
}

#postcode-required .select2-container .select2-selection {
    background: #efede9
}

    #postcode-required .select2-container .select2-selection span {
        color: #000;
        font-weight: 700
    }

#postcode-required input {
    background: #f1f1f1;
    border: none;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 25px;
    padding: 10px 20px
}

    #postcode-required input::-moz-placeholder {
        color: #000
    }

    #postcode-required input::placeholder {
        color: #000
    }

#postcode-required button {
    justify-content: center;
    margin-top: 15px;
    text-align: center
}

@media (min-width:1350px) {
    #postcode-required button {
        margin-top: 30px
    }
}

#postcode-required input, #postcode-required select {
    height: 40px
}

@media (min-width:1350px) {
    #postcode-required input, #postcode-required select {
        height: 45px
    }
}

#postcode-required button, #postcode-required input {
    margin-left: auto;
    margin-right: auto;
    max-width: 550px;
    width: 100%
}

.validate label {
    display: none
}

.validate .error + label, .validate .error + span + label {
    color: red;
    display: block;
    font-size: 12px;
    position: absolute;
    top: 45px
}

@media (min-width:1024px) {
    .validate .error + label, .validate .error + span + label {
        top: 50px
    }
}

@media (min-width:1200px) {
    .validate .error + label, .validate .error + span + label {
        top: 60px
    }
}

.modal-inner {
    background: #fff;
    box-shadow: 3px 3px 30px rgba(0,0,0,.3);
    display: flex;
    left: 50%;
    min-height: 200px;
    min-width: 80%;
    padding: 20px;
    position: fixed;
    top: 50%;
    transform: translate(-50%,-50%)
}

@media (min-width:768px) {
    .modal-inner {
        min-height: 300px;
        min-width: 500px;
        padding: 30px
    }
}

@media (min-width:1350px) {
    .modal-inner {
        min-height: 460px;
        min-width: 1000px;
        padding: 40px 80px
    }
}

.modal {
    background: hsla(0,0%,100%,.5);
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 90
}

    .modal .centered {
        align-items: center;
        display: flex;
        justify-content: center
    }

    .modal button {
        border: none
    }

.centered {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%
}

    .centered p {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 40px;
        text-align: center
    }

@media (min-width:768px) {
    .centered p {
        font-size: 20px
    }
}

@media (min-width:1350px) {
    .centered p {
        font-size: 25px
    }
}

.centered .container-fluid {
    align-items: center;
    display: flex;
    justify-content: center
}

.centered .buttons {
    -moz-column-gap: 30px;
    column-gap: 30px;
    display: flex;
    flex-direction: row
}

.centered input {
    background: #fff;
    margin-bottom: 10px;
    padding: 5px 20px;
    width: 100%
}

@media (min-width:768px) {
    .centered input {
        padding: 10px 20px
    }
}

.centered .email-container {
    margin-bottom: 30px;
    position: relative
}