@font-face {
    font-family: 'ServconnectShowroomIcons';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/materialsymbolssharp/v96/gNM_W2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4c2_whPnoY9ruReaU4bHmz450hZgFH-VBm65r3xeCKU0.woff2) format('woff2');

}

servconnectshowroom-tradein-background {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    background: #eeeeee;
    pointer-events: none;
    background: var(--accent-color-tradein, var(--accent-color, #111111));
}

@media(max-width: 900px) {

    section,
    section > content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
        height: unset !important;
    }


    servconnectshowroom-tradein-background {
        position: relative;
        display: block;
        height: 200px;
        flex: 0 0 200px;
        overflow: hidden;
    }
}


servconnectshowroom-tradein-background > overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #ffffff88 0%, #ffffff00 42%, #ffffff 50%, #ffffffaa 60%, #ffffffcc 100%);
    perspective: 1500px;
    perspective-origin: center center;
    z-index: 0;
    transform: translate3d(0, 0, 0);
    overflow: visible;
}

servconnectshowroom-tradein-background > overlay::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: '';
    background: linear-gradient(60deg, #ffffff 0%, #ffffff00 50%);
    z-index: -1;
}


servconnectshowroom-tradein-background > img {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 55% center;
    opacity: 0;
    transition: opacity .2s linear, transform 1s cubic-bezier(0.19, 1, 0.22, 1)
}

@media(max-width: 900px) {
    servconnectshowroom-tradein-background > img {
        top: -50%;
        position: relative;
        width: 100%;
        height: 200%;
        object-position: right center;
    }
}

servconnectshowroom-tradein-card {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}




servconnectshowroom-tradein-card > content {
    position: relative;
    display: block;
    width: 100%;
    max-width: 630px;
    background: #ffffffef;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid #dedede;
    overflow: hidden;
}

servconnectshowroom-tradein-card > content > buttons {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 12px;
    border-top: 1px solid #dedede;
}

servconnectshowroom-tradein-card > content > buttons > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 12px;
    opacity: 0;
    cursor: pointer;
    transition: opacity .12s linear;
}

servconnectshowroom-tradein-card > content > buttons > a > p {
    position: relative;
    display: inline-block;
    color: var(--accent-color);
    margin: 0;
    cursor: pointer;
}

servconnectshowroom-tradein-card > content > buttons > a > svg {
    position: relative;
    display: block;
    width: 24px;
    flex: 0 0 24px;
    height: 24px;
    fill: transparent;
    stroke: var(--accent-color);
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-width: 2.5;
}

servconnectshowroom-tradein-card > content > pagewrap {
    position: relative;
    display: block;
    width: 100%;
    height: 320px;
    overflow: hidden;
    transition: height .3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    z-index: 3;
}

servconnectshowroom-tradein-card > content > pagewrap > page {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    display: block;
    overflow: auto;
    opacity: 0;
    transition: opacity .12s linear;
    z-index: 1;
}

servconnectshowroom-tradein-card > content > pagewrap > page > content {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 32px;
}


servconnectshowroom-tradein-card > content > pagewrap spinner {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 320px;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s linear;
}


@media(max-width: 900px) {
    servconnectshowroom-tradein-card {
        display: block;
        width: 100%;
        height: auto;
    }

    servconnectshowroom-tradein-card > content {
        max-width: unset;
        background: unset;
        backdrop-filter: unset;
        -webkit-backdrop-filter: unset;
        border: unset;
        height: unset;
        display: block;
    }

    servconnectshowroom-tradein-card > content > buttons {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        border-top: 1px solid #dedede;
        z-index: 10;
        background: rgba(255, 255, 255, .8);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    servconnectshowroom-tradein-card > content > pagewrap {
        position: relative;
        display: block;
        width: 100%;
        height: unset !important;
        flex: 1 1 100%;
        overflow: unset;
    }

    servconnectshowroom-tradein-card > content > pagewrap > page {
        position: relative;
        height: unset;
        overflow: visible;
        height: unset !important;
        padding-bottom: 72px;
    }

    servconnectshowroom-tradein-card > content > pagewrap > page > content {
        position: relative;
        display: block;
        width: 100%;
        height: auto;
        padding: 32px 12px;
    }
}

spinner > wrap > svg {
    position: relative;
    display: block;
    animation: rotate 1.5s linear infinite;
    height: 120px;
    width: 120px;
    margin: 0 auto;
}

spinner > wrap > svg circle {
    stroke-dasharray: 1200;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite 0s, color 6s ease-in-out infinite;
    stroke-linecap: round;
    fill: none;
    stroke-width: 5;
}

@keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124;
    }
}

@keyframes color {

    100%,
    0% {
        stroke: #000000;
    }

    50% {
        stroke: #333333;
    }
}


stitle {
    position: relative;
    display: block;
    margin: 0 0 24px 0;
}


sselect {
    position: relative;
    display: block;
    width: 100%;
}

sselect > entry,
vehicleselect > entry {
    position: relative;
    display: block;
    width: 100%;
    border: 3px solid #00000011;
    cursor: pointer;
    box-shadow: 0px 0px 0px transparent;
    transition: box-shadow .4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

sselect > entry:not(:last-child),
vehicleselect > entry:not(:last-child) {
    margin-bottom: 8px;
}

sselect > entry:active,
vehicleselect > entry:active {
    background: #f0f0f0;
}

sselect > entry.a,
vehicleselect > entry.a {
    background: #ffffff;
    border-color: var(--accent-color);
    box-shadow: 0px 0px 8px var(--accent-color);
}

sselect > entry > content {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 24px;
    pointer-events: none;
}

sselect > entry.d {
    opacity: .5;
    pointer-events: none;
}

sselect > entry > content > icon {
    position: relative;
    display: block;
    width: 38px;
    height: 38px;
    font-size: 38px;
    margin: 0 24px 0 0;
    color: #333;
    font-family: 'ServconnectShowroomIcons';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

sselect > entry > content > textwrap {
    position: relative;
    display: block;
}

sselect > entry > content > textwrap > p {
    position: relative;
    display: block;
    margin: 0;
    color: #666666;
}

sselect > entry > content > textwrap > p:first-of-type {
    font-weight: 600;
    font-size: 20px;
    color: #111111;
}




slicenseplate {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100px;
    border: 3px solid #000000;
    background: linear-gradient(to top, #ffc525 0%, #ffc525cc 100%);
    border-radius: 20px;
    overflow: hidden;
}

slicenseplate::before {
    position: relative;
    width: 75px;
    height: 100%;
    flex: 0 0 75px;
    background: linear-gradient(to top, #2323e7 0%, #2323e7cc 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    content: 'NL';
    color: #ffffff;
    font-size: 32px;
    text-align: center;
}

slicenseplate > content {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

slicenseplate > content > input {
    position: relative;
    display: block;
    outline: unset;
    border: unset;
    font-size: 52px;
    width: 100%;
    color: #000000;
    text-align: center;
    padding: 0;
    border-radius: 0;
    height: unset;
    text-transform: uppercase;
    background: transparent;
    font-weight: 700;
    letter-spacing: 4px;
}


sform {
    position: relative;
    display: block;
    width: 100%;
}

inputgroup {
    position: relative;
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
    width: 100%;
}


inputwrap {
    position: relative;
    width: 100%;
    margin: 4px 0;
    display: block;
    transition: margin .25s cubic-bezier(0.215, 0.610, 0.355, 1);
}

inputwrap > content {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid #cccccc;
}

inputs.e inputwrap {
    margin: 28px 0;
}

inputs.e inputwrap:first-child {
    margin-top: 0;
}

inputwrap::after {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--accent-color);
    content: '';
    z-index: 1;
    transform: scaleX(0);
    opacity: 0;
    transition: transform .2s cubic-bezier(0.215, 0.610, 0.355, 1), opacity .12s cubic-bezier(0.215, 0.610, 0.355, 1) .02s;
}

inputwrap:focus-within:after,
inputwrap.e::after {
    transition: transform .2s cubic-bezier(0.215, 0.610, 0.355, 1), opacity .12s cubic-bezier(0.215, 0.610, 0.355, 1);
    transform: scaleX(1);
    opacity: 1;
}

inputwrap.e::after {
    background: #ed2f20;
}

inputwrap > content > input:not([type="checkbox"]):not([type="radio"]):not(.no-style),
inputwrap > content > textarea,
inputwrap > content > select {
    position: relative;
    width: 100%;
    border: unset;
    border-radius: 0;
    padding: 0;
    font-size: 15px;
    outline: none;
    border: none;
    background: transparent;
}

inputwrap > content > select {
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" style="fill: rgb(100,100,100)" viewBox="0 0 56 56"><path d="M 28 7.2578 C 27.4844 7.2578 26.9688 7.4687 26.4063 7.9375 L 10.6094 20.7578 C 10.2110 21.1094 9.9766 21.6016 9.9766 22.3047 C 9.9766 23.5234 10.8906 24.4375 12.1328 24.4375 C 12.6250 24.4375 13.1406 24.2500 13.6797 23.8281 L 28 12.1562 L 42.3203 23.8281 C 42.8594 24.2500 43.3750 24.4375 43.8906 24.4375 C 45.1094 24.4375 46.0234 23.5234 46.0234 22.3047 C 46.0234 21.6016 45.7890 21.1094 45.3906 20.7578 L 29.5937 7.9140 C 29.0312 7.4687 28.5390 7.2578 28 7.2578 Z M 28 48.7422 C 28.5390 48.7422 29.0312 48.5312 29.5937 48.0859 L 45.3906 35.2422 C 45.7890 34.8906 46.0234 34.3984 46.0234 33.6953 C 46.0234 32.4765 45.1094 31.5391 43.8906 31.5391 C 43.3750 31.5391 42.8594 31.7500 42.3203 32.1718 L 28 43.8437 L 13.6797 32.1718 C 13.1406 31.7500 12.6250 31.5391 12.1328 31.5391 C 10.8906 31.5391 9.9766 32.4765 9.9766 33.6953 C 9.9766 34.3984 10.2110 34.8906 10.6094 35.2422 L 26.4063 48.0625 C 26.9688 48.5312 27.4844 48.7422 28 48.7422 Z"/></svg>');
    background-repeat: no-repeat;
    background-position-x: calc(100% - -2px);
    background-position-y: 3px;
}

inputwrap > content > input:not([type="checkbox"]):not([type="radio"]):not(.no-style),
inputwrap > content > select {
    height: 26px;
}

inputwrap > content > p {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    padding: 0px 2px;
    margin: 0;
    color: #666666;
    transition: opacity .12s linear .025s;
}

inputwrap:not(.a):not(:focus-within) > content > p {
    transition: opacity .075s linear;
    opacity: 0;
}

inputwrap.a > content > p {
    opacity: 1;
}

inputwrap > p:first-of-type {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 0 4px 0;
    transform-origin: left bottom;
    transition: transform .12s cubic-bezier(0.215, 0.610, 0.355, 1), opacity .12s cubic-bezier(0.215, 0.610, 0.355, 1);
    pointer-events: none;
}

inputwrap:not(.select):not(.toggle) > p:first-of-type {
    transform: translate3d(0, 150%, 0) scale(1);
}

inputwrap:focus-within > p:first-of-type,
inputwrap.a > p:first-of-type,
inputwrap.select > p:first-of-type {
    transform: translate3d(0, 4px, 0) scale(.85);
    opacity: .7;
}

inputwrap > p:last-of-type {
    position: absolute;
    top: 100%;
    left: 0;
    display: block;
    padding: 4px 0 0 0;
    margin: 0;
    color: #ed2f20;
}


inputwrap.toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
}

inputwrap.toggle:last-of-type {
    padding-bottom: 0;
}


inputwrap.toggle > p {
    transform: unset;
    padding-right: 32px;
}

inputwrap scformtoggle {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    border-radius: 5000px;
    flex: 0 0 52px;
    background: #ffffff;
    border: 1px solid #cccccc;
}

inputwrap scformtoggle:not(.d) {
    cursor: pointer;
}

inputwrap scformtoggle > content {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 3px;
}

inputwrap scformtoggle > content > handle {
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    background: #444444;
    border-radius: 50%;
    transform: translate3d(0, 0, 0);
    transition: background .2s cubic-bezier(0.215, 0.610, 0.355, 1), transform .2s cubic-bezier(0.215, 0.610, 0.355, 1);
}

inputwrap scformtoggle.a > content > handle {
    transform: translate3d(23px, 0, 0);
    background: var(--accent-color);
}

inputwrap scformtoggle:not(.d):active > content > handle {
    opacity: .8;
}






vehicleselect > entry > content {
    position: relative;
    display: flex;
    align-items: center;
    padding: 8px;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
}

vehicleselect > entry > content > imagewrap {
    position: relative;
    display: block;
    width: 74px;
    height: 74px;
    flex: 0 0 74px;
    margin: 0 12px 0 0;
    overflow: hidden;
    background: #00000011;
}

vehicleselect > entry > content > imagewrap > img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    overflow: hidden;
}


vehicleselect > entry > content > textwrap {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
}

vehicleselect > entry > content > textwrap > top {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
}

vehicleselect > entry > content > textwrap > top > h6 {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 0 2px 0;
    font-size: 20px;
}

vehicleselect > entry > content > textwrap > top > p {
    position: relative;
    display: block;
    margin: 0;
}




imagegrid {
    position: relative;
    display: block;
    width: 100%;
}

imagegrid > content {
    position: relative;
    display: grid;
    width: 100%;
    gap: 8px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

@media(max-width: 900px) {
    imagegrid > content {
        grid-template-columns: 1fr 1fr;
    }
}



imagegrid > content > uploadtile,
imagegrid > content > entry {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1;
    border: 3px solid #00000011;
}

imagegrid > content > uploadtile {
    cursor: pointer;
}

imagegrid > content > uploadtile:active {
    background: #f0f0f0;
}

imagegrid > content > uploadtile > content {
    position: relative;
    display: block;
    width: 100%;
    pointer-events: none;
}


imagegrid > content > uploadtile > content > icon {
    position: relative;
    display: block;
    width: 100%;
    font-size: 38px;
    text-align: center;
    margin: 0 0 4px;
    color: var(--accent-color);
}

imagegrid > content > uploadtile > content > p {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    margin: 0;
    color: var(--accent-color);
}


imagegrid > content > entry > content {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

imagegrid > content > entry > content > overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .75);
    cursor: pointer;
}

imagegrid > content > entry > content > overlay > icon {
    position: relative;
    display: block;
    text-align: center;
    padding: 0;
    margin: 0;
    color: #ffffff;
    cursor: pointer;
}


imagegrid > content > entry > content > img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
}



summaryfield {
    position: relative;
    display: block;
    width: 100%;
    padding: 6px 0;
    border-bottom: 1px solid #cccccc;
}

summaryfield > content {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

summaryfield > content > p {
    position: relative;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1;
    margin: 0;
    padding: 0;
}

summaryfield > content > p:first-of-type {
    color: #666666;
    margin: 0 8px 0 0;
}

summaryfield > content > p:last-of-type {
    color: #333333;
    font-weight: 550;
}

page > content > h6 {
    position: relative;
    display: block;
    margin: 32px 0 2px 0;
}

page > content > h6:first-of-type {
    margin-top: 0;
}


statuswrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 0;
}

statuswrap > icon {
    position: relative;
    display: block;
    width: 32px;
    flex: 0 0 32px;
    height: 32px;
    font-size: 32px;
    margin: 0 12px 0 0;
    transition: opacity .12s linear;
    opacity: 0;
    color: #333333;
}

statuswrap > p {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    font-size: 20px;
    color: #333333;
    font-weight: 550;
}