@font-face { font-family: 'CharlesWright'; src: url('https://cdn.carowl.co.uk/fonts/CharlesWright-Bold.ttf') format("truetype"); } :root { interpolate-size: allow-keywords; --blue: #1163D4; --indigo: #6610f2; --purple: rgb(135 98 255); --purple-2: #3f27da; --pink: #e83e8c; --red: #D43526; --dark-green: #dcffde; --dark-green-2: #DDF2D7; --green: #57BD36; --teal: #20c997; --cyan: #5590E0; --white: #fff; --black: #000000; --gray: #acacac; --muted: #acacac; --gray-dark: #343a40; --primary: #1163D4; --secondary: #acacac; --success: #57BD36; --info: #5590E0; --warning: #FFA015; --danger: #D43526; --orange-1: #F46601; --orange-2: #F8AC37; --orange-3: #FF9700; --light: #f8f9fa; --light-2: #f3f3f3; --dark-1: #44494F; --dark-2: #343a40; --grey-1: #D7DADD; --grey-2: #E4E6E8; --grey-3: #b1b1b1; --dark-blue: #205271; --lighter: rgb(230, 230, 230); --lighter-20: rgb(204, 204, 204); --lighter-30: rgb(179, 179, 179); --lighter-40: rgb(153, 153, 153); --lighter-50: rgb(128, 128, 128); --lighter-60: rgb(102, 102, 102); --lighter-70: rgb(77, 77, 77); --lighter-80: rgb(51, 51, 51); --lighter-t-50: rgb(255 255 255 / 50%); --lighter-t-80: rgb(255 255 255 / 80%); --lighter-t-95: rgb(255 255 255 / 95%); --darker-03: rgb(249, 249, 249); --darker-05: rgb(243, 243, 243); --darker-07: rgb(237, 237, 237); --darker-10: rgb(230, 230, 230); --darker-15: rgb(217, 217, 217); --darker-20: rgb(204, 204, 204); --darker-30: rgb(179, 179, 179); --darker-40: rgb(153, 153, 153); --darker-50: rgb(128, 128, 128); --darker-60: rgb(102, 102, 102); --darker-70: rgb(77, 77, 77); --darker-80: rgb(51, 51, 51); --darker-90: rgb(26, 26, 26); --darker-t-05: rgb(0 0 0 / 5%); --darker-t-10: rgb(0 0 0 / 10%); --darker-t-15: rgb(0 0 0 / 15%); --darker-t-20: rgb(0 0 0 / 20%); --darker-t-30: rgb(0 0 0 / 30%); --darker-t-50: rgb(0 0 0/ 50%); --darker-t-70: rgb(0 0 0/ 70%); --darker-t-80: rgb(0 0 0/ 80%); --nav-bar-height: 64px; --message-input-height: 41px; --body-content-height: calc(100vh - var(--nav-bar-height)); --body-content-height: calc(100svh - var(--nav-bar-height)); --poppins-font: system-ui, sans-serif; --charles-wright: CharlesWright, sans-serif; --breakpoint-xs: 0; --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; } @media (prefers-color-scheme: light) { .vehicle-valuation-img.cap { filter: invert(1); } } @media (prefers-color-scheme: dark) { :root { --dark-green: #223123 !important; --dark-green-2: #222a25 !important; --muted: #656A6E !important; --grey-1: #575a5d !important; --dark-1: #f8f9fa !important; --dark-2: #D8D9DA !important; --dark-blue: #436D87 !important; --light: #1a1a1a !important; --light-2: #212121 !important; --white: #000000 !important; --black: #FFFFFF !important; --lighter: rgb(25, 25, 25); --lighter-20: rgb(51, 51, 51); --lighter-30: rgb(76, 76, 76); --lighter-40: rgb(102, 102, 102); --lighter-50: rgb(127, 127, 127); --lighter-60: rgb(153, 153, 153); --lighter-70: rgb(178, 178, 178); --lighter-80: rgb(204, 204, 204); --lighter-t-50: rgb(0 0 0 / 50%); --lighter-t-80: rgb(0 0 0 / 80%); --lighter-t-95: rgb(0 0 0 / 95%); --darker-03: rgb(8, 8, 8); --darker-05: rgb(13, 13, 13); --darker-07: rgb(18, 18, 18); --darker-10: rgb(26, 26, 26); --darker-15: rgb(38, 38, 38); --darker-20: rgb(51, 51, 51); --darker-30: rgb(76, 76, 76); --darker-40: rgb(102, 102, 102); --darker-50: rgb(127, 127, 127); --darker-60: rgb(153, 153, 153); --darker-70: rgb(178, 178, 178); --darker-80: rgb(204, 204, 204); --darker-90: rgb(229, 229, 229); --darker-t-05: rgb(255 255 255 / 5%); --darker-t-10: rgb(255 255 255 / 10%); --darker-t-15: rgb(255 255 255 / 15%); --darker-t-20: rgb(255 255 255 / 20%); --darker-t-30: rgb(255 255 255 / 30%); --darker-t-50: rgb(255 255 255 / 50%); --darker-t-70: rgb(255 255 255 / 70%); --darker-t-80: rgb(255 255 255 / 80%); } .navbar .logo, .brand-logo { background-image: url('https://carowl-images.b-cdn.net/website-images/logos/logo-tiny.webp') !important; } .trustpilot-widget .logo { filter: grayscale(1) brightness(260); } } *{ -webkit-print-color-adjust: exact; } body, html, app, main { height: 100vh; height: -webkit-fill-available; } html { scroll-padding-top: var(--nav-bar-height); } :is(button, input, select, textarea):focus { outline: none !important; box-shadow: 0 0 0 2px var(--primary) !important; } .routine-maintenance { background-color:black; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; text-align:center; } .routine-maintenance > .content{ } .routine-maintenance > .content img { margin-bottom: 2rem; display: block; margin-inline: auto; } .routine-maintenance > .content h1 { color: var(--black); font-size: 3rem; margin-bottom: 2rem; } .routine-maintenance > .content h1 span{ text-shadow:0 0 30px var(--orange-1); } .routine-maintenance > .content p { color: var(--darker-50); margin-inline:auto; } .t { background:var(--darker-10); margin-bottom: 0; padding: 1rem 1rem; display: flex; align-items: center; gap: 1rem; position: relative; overflow: hidden; } .text-darker-70 { color: var(--darker-70); } .text-darker-t-70 { color: var(--darker-t-70); } .page-container { position: relative; background-color: var(--white); min-height: 100vh; padding-bottom: 0; } .body-content { padding-left: 15px !important; padding-right: 15px !important; background-color: var(--white); min-height: var(--body-content-height); } .min-body-height { min-height: var(--body-content-height); } #content-wrap { padding-bottom: 180px; } h1, h2, h3, h4, h5, h6 { line-height: 1.35; font-weight: 700; font-family: var(--poppins-font); color:var(--black); } td, span, summary { font-family: var(--poppins-font); } h1 { font-size: 3.5rem; letter-spacing: -2px; font-weight: 700; } h2 { font-size: clamp(2rem, 6vw + 1rem, 3rem); font-weight: 700; letter-spacing: -2px; } h3 { font-size: clamp(1.5rem, 4vw + 0.8rem, 2.5rem); font-size: clamp(1.5rem, 6cqw, 2rem); } h4 { font-size: clamp(1rem, 4vw + 0.8rem, 2); font-size: clamp(1rem, 6cqw, 2rem); } .text-orange-gradient { background: -webkit-linear-gradient(0deg, var(--orange-1), var(--orange-2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 30px var(--orange-1); font-weight: 700; } .text-deluxe { background: linear-gradient(90deg, var(--purple-2), var(--orange-1)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-style:italic; font-weight:800; } .text-blue-pink-gradient { background: -webkit-linear-gradient(45deg, #00ffb1, #7a0278); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .text-shadow-purple { text-shadow: 0 0 30px #6149ff; } .drop-shadow-purple { filter: drop-shadow(0px 0px 8px var(--purple-2)); } .drop-shadow-orange { filter: drop-shadow(0px 0px 8px var(--orange-2)); } :is(p) span { } .optional { background: unset; -webkit-background-clip: unset; -webkit-text-fill-color: unset; background-color: var(--darker-10); border: 1px solid var(--darker-15); border-radius: 50rem; font-size: 12px; font-style: normal; text-shadow: unset; font-weight: 500; color: var(--darker-50); padding-inline: 0.5rem; padding-block: 0.05rem; margin-left: 1rem; } :is(h1, h2, h3, h4, h5, h6) .cursor-help { color: var(--darker-50); margin-left: .25rem; } ::after, li { font-family: var(--poppins-font); } a { line-height: 1.1; color: #1478ff; font-family: var(--poppins-font); cursor:pointer; } a:hover { color: #549dff; } a:visited { text-decoration:underline; } label { font-size: 1rem; line-height: 1.1; font-family: var(--poppins-font); color:var(--black); } dt{ color:var(--black); } dd { color: var(--darker-60); } p { color: var(--darker-60); line-height: 1.35; } :is(p, .validation-message) { font-family: var(--poppins-font); font-size: 16px; max-width: 55ch; margin-bottom: 0; } .small-text { font-size: 12px; } img { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .user-html-content { color: var(--black); } .user-html-content > table { width:unset; } .user-html-content h1 { } .user-html-content p { max-width:unset; color:var(--black); } .user-html-content :is(h1, h2, h3, h4, h5, h6, p) span { all: revert; color: var(--black); } button { font-family: var(--poppins-font) !important; } .trade-2-trade .a { color: #1163D4; text-decoration: none; background-color: transparent; transition: ease-in-out; transition-duration: 0.2s; font-weight: 600; } .a:hover { color: #4F85CF; text-decoration: underline; cursor: pointer; transition: ease-in-out; transition-duration: 0.2s; } .orange-a { color: var(--orange-2) !important; text-decoration: none; background-color: transparent; transition: ease-in-out; transition-duration: 0.2s; font-weight: 600; } .orange-a:hover { color: var(--orange-3); text-decoration: underline; cursor: pointer; } .purple-a { color: var(--purple); text-decoration: none; background-color: transparent; transition: ease-in-out; transition-duration: 0.2s; font-weight: 600; } .purple-a:hover { color: var(--purple-2); text-decoration: underline; cursor: pointer; } .white-a { color: var(--black) !important; text-decoration: none; background-color: transparent; transition: ease-in-out; transition-duration: 0.2s; font-weight: 600; } .white-a:hover { color: var(--orange-2) !important; text-decoration: underline; cursor: pointer; } .grey-a { color: #676767; text-decoration: none; background-color: transparent; transition: ease-in-out; transition-duration: 0.2s; font-weight: 600; } .grey-a:hover { color: var(--dark-2); text-decoration: underline; cursor: pointer; } a:not([href]) { color: #1163D4; text-decoration: none; background-color: transparent; transition: ease-in-out; transition-duration: 0.2s; font-weight: 600; } a:not([href]):hover { color: #4F85CF; text-decoration: underline; cursor: pointer; } .one-wing-owl { --owl-height: 56px; height: var(--owl-height); width: auto; position: absolute; top: calc(-4px - var(--owl-height)); left: 10px; } .owl-in-car { text-align: center; min-height: 30vh; background-size: auto 100%; background-repeat: repeat-x; transition: background-position-x 1s ease-in-out; overflow: hidden; padding-inline: 0rem; } .owl-driving { max-width: 320px; height: auto; position: absolute; bottom: 18px; -webkit-animation: car-driving 14s linear infinite; animation: car-driving 14s ease-in-out infinite, vibrate-1 .35s linear infinite; } @keyframes car-driving { 0% { left: -100%; } 15% { left: calc(50% - (256px / 2)); } 20%, 90% { left: calc(50% - (256px / 2)); } 100% { left: calc(110%); } } .navbar { min-height: var(--nav-bar-height); z-index: 100; width: 100%; transition: all .25s ease-in-out; padding: .5rem; background: var(--darker-05); backdrop-filter: blur(20px); } .navbar .logo { background-image: url('https://cdn.carowl.co.uk/website-images/logos/logo-tiny-black.webp'); background-size: 100%; background-position: center; background-repeat: no-repeat; width: 168px; height: 28px; } .navbar .logo img { } .navbar .logo:focus { box-shadow:unset !important; } .navbar.open { position: fixed; } .navbar .navbar-toggler { border: unset; padding: 0; } .navbar .navbar-toggler:focus { box-shadow:unset !important; } .navbar mobile-signin { border: unset; padding: 0; } .navbar .buttons { max-width: 330px; display: flex; justify-content: end; } .navbar-content-block { position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; z-index: 99; background-color: rgba(0, 0, 0, 0.2); backdrop-filter: blur(8px); transition: backdrop-filter 0.25s ease-in-out; pointer-events: auto; opacity: 1; } .navbar-content-block.closed { background-color: rgba(0, 0, 0, 0); backdrop-filter: blur(0px); height: 0; opacity: 0; pointer-events: none; } @-webkit-keyframes nav-bar-closed-bg-animation { 0% { height: 100vw; } 100% { height: 0; } } @keyframes nav-bar-closed-bg-animation { 0% { width: 100vw; } 100% { width: 0; } } .navbar-nav { margin-top: 1rem; margin-inline: auto; } .nav-item { text-decoration: none; transition: all ease .3s; } .nav-item a { padding:.5rem .5rem; font-weight: 500; text-decoration: none; color: var(--black); font-size: 1rem; border-radius: .5rem; height: 100%; display: flex; align-items: center; text-align: left; margin-inline: auto; position: relative; overflow: hidden; justify-content: space-between; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: all ease .3s; } .nav-item > .nav-link.active { background-color: var(--darker-15); border-color: var(--orange-1); color: var(--black); } .nav-item > .nav-link > svg g path { transition: fill linear 250ms; } .nav-item > .nav-link.active > svg g path { fill: var(--black); } .nav-item > .nav-link.active > svg g path { fill: var(--black) !important; } .nav-item > .nav-link.active:focus { box-shadow:unset !important; } .nav-item a:hover { color:var(--black); text-decoration:none !important; background:var(--darker-15); } .nav-item a:focus { background:var(--darker-20); } .nav-item a > svg g path { display: flex; justify-content: center; flex: 0 0 auto; width: auto; max-width: 100%; } .navbar .nav-item a { font-size: 1rem; color: var(--black); gap:.5rem; } .navbar .nav-item a > svg path { } .nav-item .dropdown-item{ font-weight:400; color:var(--darker-70) !important; } .tooltip-inner { padding: 0.75rem; color: var(--light-2); text-align: left; background-color: var(--dark-2); font-weight: 600; border-radius: 0.5rem; font-family: var(--poppins-font); overflow: hidden; } .nav-tabs .nav-item a { color: var(--darker-80) !important; padding-block: .5rem; } .form-control { display: block; width: 100%; padding: 0.5rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--black); caret-color:var(--orange-2); background-color: var(--white); background-clip: padding-box; border: 2px solid var(--darker-20); border-radius: .5rem; transition: all ease-in-out .2s; font-family: var(--poppins-font); outline: 0; } .form-control option { margin: 40px; padding-block:.5rem; background: rgba(0, 0, 0, 0.5); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); } .form-control::placeholder { color: var(--darker-40); transition: all ease-in-out .2s; } .form-control:focus-within::placeholder { } .form-control:-webkit-autofill, .form-control:-webkit-autofill:hover, .form-control:-webkit-autofill:focus, .form-control:-webkit-autofill:active { border: 2px solid var(--darker-20); -webkit-text-fill-color: var(--black) !important; -webkit-box-shadow: 0 0 0px 1000px var(--white) inset; transition: background-color 999999s ease-in-out 0s, border ease-in-out .2s, box-shadow ease-in-out .2s; } .form-control:focus-within::placeholder{ opacity:1; } .form-control.invalid:not(:focus-within) { border-color: rgb(200, 0, 0); } .form-control:not(:disabled):is(:focus, :focus-within, :active) { border-color: var(--black) !important; box-shadow: unset !important; } .form-control.vehicle { border-color: var(--grey-1); background-color: transparent; color: var(--black); } .form-control:disabled { background-color: var(--darker-30); color: var(--darker-50); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .form-control:disabled { cursor: not-allowed; } .form-control.form-control-lg { font-size: 2rem; height: unset; padding-block: 0.5rem; } .form-control.form-control-lg:is(:focus, :focus-within, :active) { box-shadow: var(--primary) 0px 7px 13px -4px; } .form-container { margin-inline: auto; max-width:25rem; } .form-container > p { color: rgb(255 255 255 / 80%); } .input-parent { margin-inline: auto; width: 100%; margin-bottom: 1rem; position: relative; } .input-parent > label { color: var(--black); font-size: 16px; line-height:20px; margin-bottom:8px; font-weight: 500; } .row .input-parent:last-of-type { } .disabled .input-parent label { color: var(--darker-40) !important; cursor:default !important; } .disabled span { color: var(--darker-40) !important; cursor: default !important; } .checkbox-parent { display: flex; -webkit-align-items: center; align-items: center; gap: 1rem; } .checkbox-parent label { margin-bottom: 0 !important; font-size: 14px; font-weight: 500; cursor: pointer; color: var(--black); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .checkbox-parent input[type='checkbox'] { min-width: 16px; min-height: 16px; cursor: pointer; } input[type='checkbox']:disabled { cursor: not-allowed; } .input-parent .far.fa-question-circle { right: 0; color: var(--black); } .disabled .input-parent .far.fa-question-circle { color: var(--grey-3); cursor: default !important; } .input-parent .input-group.password input { border-radius: .5rem; position: relative; padding-right:3.5rem; } .input-group.password > .custom-select:not(:last-child), .input-group.password > .form-control:not(:last-child) { border-top-right-radius: .5rem; border-bottom-right-radius: .5rem; } .input-parent .input-group .input-group-prepend span { display: flex; align-items: center; justify-content: center; font-size: 1rem; background-color: var(--darker-20); border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; border-color: transparent; font-weight: 400; color: var(--darker-90); padding-left: 1rem; padding-right: 0.25rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; letter-spacing: 1px; } .input-parent .input-group.password .input-group-append .btn { border-radius: .5rem; padding-block: 0; background-color: transparent; z-index: 4; border-color: transparent; display: flex; align-items: center; justify-content: center; font-size: 1em; color: var(--darker-40); min-width: 44px; height: 100%; transition-duration: 200ms; position:absolute; right:0; } .grayscale-off { filter: grayscale(0%) !important; } .owl-section { justify-content: center; position: relative; padding-top: 1rem; padding-block: 5rem; } .owl-section:only-of-type { align-items:center; justify-content:center; min-height: var(--body-content-height); padding-block:1.5rem; } .owl-section:first-of-type { } .owl-section > * { z-index: 2; } .owl-section > .col-12:first-of-type > :is(h1, h2, h3) { text-align: center; } .owl-section > .col-12:first-of-type > :is(h2, h3) { margin-bottom: 2rem; } .owl-section:nth-child(even) { } .dealer-portal .owl-section{ } .dealer-portal .owl-section:nth-child(even) { } .dealer-portal .trustpilot-widget .logo { filter: grayscale(1) brightness(260); } .dealer-portal .owl-section :is(h1, h2, h3, h5, h6) { } .dealer-portal > .col-12 > :is(p, label) { } .nav-link[aria-expanded="false"] svg:last-of-type { transform: rotate(0deg); transition: transform 0.3s ease; } .nav-link[aria-expanded="true"] svg:last-of-type { transform: rotate(180deg); transition: transform 0.3s ease; } .btn-register-signup { display: flex; align-items: center; justify-content: center; padding-block: 0; background-color: var(--darker-10); border-radius: .5rem !important; color: var(--black) !important; transition: all ease-in-out 200ms; min-height: 40px; } .btn-register-signup:hover { background-color: var(--darker-15); color: var(--black); } .btn-register-signup > svg { margin-left: .5rem; } .register-confirmation-helpful { color: white; text-shadow: 1px 1px #0000006b; margin-inline: auto; border-radius: 6px; position: relative; max-width: 47rem; font-weight: 500; line-height: 1.1; } .register-confirmation-helpful b { text-shadow: 1px 1px #00000091; color:var(--orange-2); } .navbar-toggler { position: relative; } #nav-icon { width: 18px; height: 18px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .2s ease-in-out; -moz-transition: .2s ease-in-out; -o-transition: .2s ease-in-out; transition: .2s ease-in-out; cursor: pointer; position: relative; } #nav-icon span { display: block; position: absolute; height: 2px; width: 100%; background-color: var(--darker-40); border-radius: 40px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .2s ease-in-out; -moz-transition: .2s ease-in-out; -o-transition: .2s ease-in-out; transition: .2s ease-in-out; } #nav-icon span:nth-child(1) { top: 0px; } #nav-icon span:nth-child(2), #nav-icon span:nth-child(3) { top: 8px; } #nav-icon span:nth-child(4) { bottom: 0px; } #nav-icon.open span:nth-child(1) { top: 14px; width: 0%; left: 50%; } #nav-icon.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); height: 2px; } #nav-icon.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); height: 2px; } #nav-icon.open span:nth-child(4) { top: 14px; width: 0%; left: 50%; } @-webkit-keyframes nav-selection { 0% { width: 0%; } 100% { width: 100%; } } @keyframes nav-selection { 0% { width: 0%; } 100% { width: 100%; } } .profile-button, .notification-button { height: 48px; width: 48px; border-radius: 0.5rem !important; padding: 0; transition: all ease-in-out 300ms; border: 0; display:flex; align-items:center; justify-content:center; position:relative; background-color:transparent; } .profile-button svg g path, .notification-button svg g path { transition: fill ease-in-out 300ms; } .profile-button { margin-left: .5rem; } .profile-button span, .notification-button span { font-size: 2rem; color: var(--darker-50); transition: all ease-in-out 300ms; font-weight:300; } .profile-button:hover, .notification-button:hover { background-color: var(--darker-20); color:var(--black); } .profile-button:is(:active, :focus, :focus-within), .notification-button:is(:active, :focus, :focus-within) { background-color: var(--darker-30); color: var(--black); } .profile-button:hover svg g path, .notification-button:hover svg g path { fill: var(--black); } .profile-button:is(:active, :focus, :active, :focus-within) svg g path, .notification-button:is(:active, :focus, :active, :focus-within) svg g path { color: var(--black); } .profile-dropdown { min-width: 14rem !important; } .skip-nav-link { background: rgb(255,151,0); background: -moz-linear-gradient(90deg, rgba(255,151,0,1) 0%, rgba(255,199,117,1) 100%); background: -webkit-linear-gradient(90deg, rgba(255,151,0,1) 0%, rgba(255,199,117,1) 100%); background: linear-gradient(90deg, rgba(255,151,0,1) 0%, rgba(255,199,117,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff9700",endColorstr="#ffc775",GradientType=1); padding: .5rem 1.5rem; border-radius: 50rem; position: absolute; z-index: 1000; transform: translateY(-120%); left: 0.5rem; color: var(--white); transition: transform 325ms ease-in; } .skip-nav-link:focus { transform: translateY(10px); } .font-charles { font-family: var(--charles-wright); } .font-times { font-family: "Times New Roman", Times, serif; } .login-paragraph { color: white; margin-inline: auto; text-align:center; } .cool-marker::marker { font-weight: bold; } .dealer-portal-cta { justify-content: center; min-height: var(--body-content-height); } .dealer-portal-cta.second { background-image: unset; padding-block: 7rem; } .dealer-portal-cta > .col-12 > :is(h1,h2) { line-height:1; } .dealer-portal-cta.second :is(h1,h2) { text-align: center !important; margin-top: 1rem; margin-bottom: 1rem; } .dealer-portal-cta > .col-12 > p { text-align: left; } .dealer-portal-cta > .col-12 > label { margin-top:1rem; } .dealer-portal-cta.second > .col-12 > p { text-align: left; font-weight:300; margin-inline: auto; } .dealer-portal-cta.second > .col-12 > label { text-align: center; margin-inline: auto; max-width: unset; display:block; } .dealer-portal-cta.second img { width: 100%; margin-inline: auto; display: block; margin-top: auto; } .dealer-portal-cta > .col-12 > .btn { max-width: 320px; } .dealer-portal-cta.second .btn { margin-inline: auto; } .dealer-portal-cta.form { padding-block:3rem !important; background-image:unset; min-height:unset; } .dealer-portal-cta h1 { margin-bottom: 0; font-weight: 600; letter-spacing:-1px; } #signup-component .col-md-auto .stage-parent:first-child { max-width: 28rem; margin-inline: auto; padding: 32px 16px; border-radius: 1rem; background-color: var(--darker-05); overflow: hidden; } #signup-component :is(.upd,.verify-your-email) { border: unset !important; padding:0 !important; } #signup-component .verify-your-email > .col-12 { padding:0 !important; } .dealer-portal-cta .col-12 .col-md-auto { margin-block: auto; } .dealer-portal-cta .col-lg-6 { position:relative; } .dealer-portal-cta > .col-12:only-child { margin-top: auto; margin-bottom: auto; } .cta-button { width: 100%; max-width: 300px; display: block; margin-inline: auto; } .module-items h2 { margin-bottom:1rem; text-align:center; } .module-items .container { max-width:70rem; } .how-it-works.seller { justify-content: center; } .dealer-pricing h3 { font-size: 1.6rem; text-align: center; } .dealer-pricing p { font-size: 1rem; margin-inline: auto; text-align: center; } .dealer-pricing ul { display: grid; grid-template-columns: repeat(2, 1fr); } .comparison-row { max-width: 49rem; margin-inline: auto; } .comparison-row:first-of-type { border-radius: 1rem 1rem 0 0; } .comparison-row:last-of-type { border-radius: 0 0 1rem 1rem; } .comparison-row:first-of-type div { font-size:1.3rem; } .comparison-row:first-of-type :is(div:nth-child(2)) { padding-block: 2rem; border-radius: 2rem 2rem 0rem 0rem; border-top: 2px solid var(--orange-1); } .comparison-row:last-of-type div:nth-child(2) { border-bottom: 2px solid var(--orange-1); border-radius: 0 0 2rem 2rem; } .comparison-row:first-of-type { border-radius: 1rem 1rem 0 0; } .comparison-row:nth-of-type(even) { background-color:var(--darker-10); } .comparison-row:nth-of-type(odd) { } .comparison-row:first-of-type div:nth-child(2) img { width:80%; margin:auto; } .dealer-pricing .comparison-row:nth-of-type(even) { } .comparison-row:first-of-type div:nth-child(3) { color: var(--darker-50); } .comparison-row div { text-align: center; color: white; padding-block: .75rem; font-family: var(--poppins-font); display: flex; align-items: center; justify-content: center; font-family: var(--poppins-font); min-height: 59px; } .comparison-row div:nth-child(1) { color: var(--darker-70); font-weight: 400; text-align: start; justify-content: start; font-size: 15px; line-height: 1.1; } .comparison-row div:nth-child(2) { text-align: center; font-weight: 700; font-family: var(--poppins-font); position: relative; border-inline: 2px solid var(--orange-1); background-color: #fe6f071f; color: var(--orange-1); line-height: 1.1; } .comparison-row div:nth-child(2) img { max-width:130px; } .comparison-row div:nth-child(2) .material-symbols-outlined { color: white; font-size: 2rem; } .comparison-row:not(:first-of-type) div:nth-child(3) { text-align: center; color: var(--darker-40); font-size:15px; } .comparison-row div:nth-child(3) { text-align: center; } .dealer-testimonials .wrapper { overflow: auto; flex-wrap: nowrap; flex-direction: row; scroll-snap-type: inline mandatory; justify-content: center; padding-bottom: 1rem; margin-inline: 0; } .dealer-testimonials h3 { text-align: center; margin-bottom: 2rem; } .dealer-testimonials .testimonials .col-auto { padding:3rem; background-color:rgb(0 0 0 /10%); } .dealer-testimonials .testimonial { padding-top: 2rem; padding-bottom: 2rem; padding-inline: 2rem; scroll-snap-align: center; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; scroll-snap-stop: always; overflow: hidden; border-radius: 2rem; } .dealer-testimonials .wrapper .testimonial:not(:last-of-type) { margin-right:1rem; } .dealer-testimonials .testimonial img { display:block; margin-inline:auto; max-width:220px; width: auto; min-height: 44px; object-fit: contain; margin-bottom: 1.5rem; margin-inline: auto; transition:all ease-in-out 250ms; } .dealer-testimonials .testimonial img:hover { transform:scale(1.1); } .dealer-testimonials .testimonial p { margin-inline: auto; text-align: left; color: var(--black); font-style: italic; font-size: 16px; line-height: 1.6; } .brands-we-offer img { width: 90px; height: 90px; object-fit:contain; } .max-width-100 p { max-width: 100vw; } .step-progressbar { list-style: none; padding-inline: 1rem; display: flex; justify-content: space-between; align-items: center; position:relative; gap:4rem; margin-bottom:1rem; } .step-progressbar::before { content: ''; position: absolute; top: 16px; left: 8%; height: 2px; width: 80%; background-color: var(--darker-20); } .step-progressbar li { height: 32px; width:100%; position: relative; display: flex; align-items: center; justify-content: center; } .step-progressbar li span { width: 100%; height: 100%; font-size:16px; background-color: var(--darker-10); color: var(--darker-50); font-weight: 600; border-radius: 5rem; position: relative; text-align:center; display: flex; align-items: center; justify-content: center; transition:all 250ms ease-in-out; line-height:.9; line-height:1; } .step-progressbar li.current span { color: white; background-image: linear-gradient(45deg, var(--orange-1), var(--purple-2)); } .step-progressbar.orange li.current span { background-image: linear-gradient(45deg, var(--orange-1), var(--orange-2)); color: white; border-width: 1px; text-shadow: 1px 1px black; } .step-progressbar li.complete span { color: white; background-color: var(--darker-10); border: 1px solid var(--success); } .step-progressbar li.complete svg { } .step-progressbar li span:last-child::after { display: none; } .step-labels { list-style: none; display: flex; justify-content: space-between; padding-left: 0; margin-bottom:.5rem; gap:2rem; } .step-labels li { text-align: center; flex: 1; color: var(--muted); font-size: 12px; line-height:1.2; } @keyframes gradientAnimation { 0% { background-position: -500% 0%; } 100% { background-position: 0% 0%; } } .seller-call-to-action-2 { min-height: var(--body-content-height); position: relative; } .bg-orange-animation { animation: gradientAnimation 250s linear infinite; background: linear-gradient( 90deg, rgba(229, 117, 0, 0.4) 0%, var(--white) 25%, rgba(229, 117, 0, 0.4) 50%, var(--white) 75%, rgba(229, 117, 0, 0.4) 100% ); background-size: 1000% 100%; } .bg-purp-animation { animation: gradientAnimation 250s linear infinite; background: linear-gradient( 90deg, rgba(71, 42, 209, 0.4) 0%, var(--white) 25%, rgba(71, 42, 209, 0.4) 50%, var(--white) 75%, rgba(71, 42, 209, 0.4) 100% ); background-size: 1000% 100%; } .bg-purp { background: linear-gradient( 180deg, rgba(71, 42, 209, 0.4), var(--white)); } .bg-grad-radial-orange { background: rgb(229 117 0 / 40%); background: -moz-radial-gradient(circle, rgb(229 117 0 / 40%) 0%, var(--white) 80%); background: -webkit-radial-gradient(circle, rgb(229 117 0 / 40%) 0%, var(--white) 80%); background: radial-gradient(circle, rgb(229 117 0 / 40%) 0%, var(--white) 80%); } .bg-gradient-lighter { background: #fe6f0751; background: -moz-linear-gradient(to bottom, #fe6f0751 0%, var(--white) 80%); background: -webkit-linear-gradient(to bottom, #fe6f0751 0%, var(--white) 80%); background: linear-gradient(to bottom, #fe6f0751 0%, var(--white) 80%); } .bg-gradient-lighter-top { background: #fe6f0751; background: -moz-linear-gradient(to top, #fe6f0751 0%, var(--white) 80%); background: -webkit-linear-gradient(to top, #fe6f0751 0%, var(--white) 80%); background: linear-gradient(to top, #fe6f0751 0%, var(--white) 80%); } .bg-trans-orange { background: #fe6f0751; background: -moz-linear-gradient(to bottom,#fe6f0721 0%, #fe6f0761 80%); background: -webkit-linear-gradient(to bottom,#fe6f0721 0%, #fe6f0761 80%); background: linear-gradient(to bottom,#fe6f0721 0%, #fe6f0761 80%) } .bg-gradient-orange { background: var(--white); background: -moz-linear-gradient(to top, var(--orange-1) 0%, var(--orange-2) 80%); background: -webkit-linear-gradient(to top, var(--orange-1) 0%, var(--orange-2) 80%); background: linear-gradient(to top, var(--orange-1) 0%, var(--orange-2) 80%); } .bg-grad-linear-orange { background: rgb(229 117 0 / 40%); background: -moz-linear-gradient(to right, rgb(229 117 0 / 40%) 0%, rgb(229 117 0 / 10%) 80%); background: -webkit-linear-gradient(to right, rgb(229 117 0 / 40%) 0%, rgb(229 117 0 / 10%) 80%); background: linear-gradient(to right, rgb(229 117 0 / 40%) 0%, rgb(229 117 0 / 10%) 80%); } .seller-call-to-action-2 > .col-12:first-of-type { margin-block: auto; } .seller-call-to-action-2 .cta-button { max-width: 180px; padding-block: .5rem; } :is(.owl-left, .owl-right, .owl-bottom) { position: absolute; width: auto; height: auto; opacity: .9; z-index: 0; filter: drop-shadow(0px 0px 4px var(--darker-20)); } .owl-left { bottom: 0%; left: 0; } .owl-right { top: -15%; right: 0; } .owl-bottom { bottom: 0; width: 360px; right:calc(50% - 180px); } .seller-index-component .seller-modules { } .seller-index-component .seller-modules h2 { text-align:center; color:var(--black); letter-spacing:0; } ul[role=tablist] { flex-wrap: wrap; } .effortless-selling .col-12 { margin-block:auto; } .effortless-selling h2 { margin-bottom: 1rem; } .effortless-selling .child { max-width: 430px; background-origin: border-box; background-clip: padding-box, border-box; border-radius: 2rem; padding-block: 4rem; margin: 1rem; text-align: center; width: 100%; transition: 150ms all ease-in-out; border: double 2px var(--orange-1); background-image: linear-gradient(45deg, #fe6f0742 0%, var(--white) 80%); display: flex; justify-content: center; overflow: hidden; height: fit-content; } .effortless-selling .child:first-of-type { } .effortless-selling .child:last-of-type { } .effortless-selling.dealer .child:first-of-type { background-image: linear-gradient(black, black), linear-gradient(230deg, #3f27da, var(--orange-1)); } .effortless-selling.dealer .child:last-of-type { background-image: unset; } .effortless-selling.dealer .child .content { padding-inline:2rem; } .effortless-selling h3 { color:var(--black); font-size:2rem; margin-bottom:.5rem !important; } .effortless-selling.dealer h3 { color: white; } .effortless-selling h3 > img { max-height: 34px; margin-top:0; } .effortless-selling h4 { color: var(--darker-50); font-size: 1rem; font-weight:400; } .effortless-selling p { max-width: 37ch; margin-inline: auto; font-weight: 400; padding-inline:.5rem; } .effortless-selling :is(img, video) { margin-top:1.5rem; max-height: 291px; width: auto; height: auto; margin-inline: auto; filter: brightness(0.9); } .effortless-selling.dealer :is(img, video) { margin-top: unset; } .effortless-selling .child:first-of-type img { } .contact-us { } .contact-us .child { height:100%; } .contact-us .child .content { border-radius: 1rem; } .contact-us .child > .content > :is(span, svg) { color:var(--black); font-size:4rem; margin-bottom:1rem; margin-right:1rem; } .contact-us .child a { width:100%; } .material-symbols-outlined.fill { font-variation-settings: 'FILL' 1; } .contact-us img { margin-top: 0rem; margin-bottom: 2rem; max-height: unset; width: 100%; border-top-left-radius: 1rem; border-top-right-radius: 1rem; } .contact-us a { margin-top:1rem; margin-inline:auto; } .best-choice-wrapper{ position:relative; } .best-choice-wrapper::after { content: 'Best Value'; position: absolute; top: 0; left: 2rem; padding-inline: 1rem; border-radius: 0 0 .5rem .5rem; background: linear-gradient(230deg, #3f27da, #9d35da); color: white; font-size: 1rem; letter-spacing: 2px; font-weight: 400; } .currency { font-size: 13px; margin-right: 1px; } .whole-price { font-size: 28px; line-height: 1; } .decimal-price { font-size: 13px; vertical-align: top; margin-left: 2px; position: relative; } .index-titles { margin-block: auto; display: block; height: fit-content; text-align:center; } .index-titles h1 { color: var(--black) !important; font-weight: 700; text-wrap: unset; margin-bottom:0rem; } .bar-left::before, .bar-right::after { content: ""; position: absolute; top: 0rem; bottom: -1rem; width: 12vw; z-index: 3; } .bar-left::before { background: linear-gradient(-90deg, var(--orange-1), var(--orange-2)); left: -8vw; -webkit-animation: slide-in-left-cta 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-in-left-cta 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; transition:all linear 250ms; } .bar-right::after { background: linear-gradient(90deg, var(--orange-1), var(--orange-2)); right: -8vw; -webkit-animation: slide-in-right-cta 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-in-right-cta 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; transition: all linear 250ms; } .bar-left::before { transform: rotate(-0deg); } .bar-right::after { transform: rotate(0deg); } .bar-left.hide-bars::before { left:-18vw; } .bar-right.hide-bars::after { right: -18vw; } .index-titles h1 span { } .index-titles p { color: var(--darker-70); font-size: 1rem; max-width: unset; margin-inline: auto; font-weight: 400; margin-bottom: 1rem; } .index-titles > img { margin-bottom:.5rem; } .seller-call-to-action-3 .index-titles h1 { line-height:.9; } .seller-call-to-action-3 .index-titles p { } .vehicle-seller-journey { text-align:left; } .vehicle-seller-journey .progress-steps { max-width: 23rem; } .vehicle-seller-journey .login-form { padding: 1rem 0 .5rem 0px !important; max-width:unset !important; } .vehicle-seller-journey .btn-radius-hover { padding-block:1rem; } .vehicle-summary { max-width: 28rem; margin-inline: auto; background-color: var(--darker-07); opacity: 0; animation: side-opacity-load 400ms ease-in forwards; -webkit-animation: side-opacity-load 400ms ease-in forwards; border-radius: .5rem; overflow: hidden; border: 1px solid var(--darker-15); padding: 0.5rem; } .vehicle-summary .vehicle-summary-title { margin-top:.5rem; } .not-my-car { font-weight: 600; color: var(--primary); padding: 0px; margin-top: .25rem; } summary { line-height: 1.3; margin-inline-start: 1rem; } summary::marker { color:var(--black); margin-inline-start: 1rem; margin-right: 1rem; } summary .btn.expand svg { transition: transform 150ms linear; } details[open] summary .btn.expand svg { transform: rotate(180deg); } .open > .btn.expand svg { transform: rotate(180deg); } summary h3 { font-size: 1rem; display: contents; } .expand { border-radius: 50rem !important; transition: all 50ms linear; border:0; } .expand svg { transition: transform 150ms linear; } .expand:hover path { fill: unset !important; } .expand:hover { transform: scale(1.05); box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; } details * { margin: 0; } details::details-content { block-size: 0; transition: block-size .2s linear, content-visibility .2s linear; transition-behavior: allow-discrete; overflow:hidden; } details[open] summary::marker { display:block; transform:rotate(45deg); } details[open]::details-content { block-size: auto; } details * { margin: 0; } .vehicle-component h3 { color: var(--black); font-size: 1.14rem; text-wrap: unset; } .vehicle-registration-label { color: black !important; font-size: 1.5rem; font-family: var(--charles-wright); letter-spacing: 1px; padding-block: 0.25rem; padding-inline: 0.75rem; border-radius: 0.5rem; background-color: #fbdb00; margin-bottom: 0; text-align: left !important; -webkit-print-color-adjust: exact; } .vin { background: var(--black) !important; color: var(--white) !important; letter-spacing: -.5px; padding-block: 0.25rem; padding-inline: 0.75rem; border-radius: 0.5rem; margin-bottom: 0; text-align: left !important; font-weight: 600; -webkit-print-color-adjust: exact; } .vehicle-summary img { max-width:50px; max-height: 50px; width: auto; } .vehicle-summary .stats .col-3 { padding: 0; } .vehicle-summary .stats { max-width: 28rem; border-radius: 1rem; justify-content: space-evenly; padding-block: 0.5rem; } .vehicle-summary .stats .col-3 { padding:0; } .vehicle-summary .stats .col-3 .vehicle-stat { background-color: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .vehicle-summary .stats .col-3 .vehicle-stat span { font-size: 1.8rem; color: var(--darker-50); font-weight:200; } .vehicle-summary .stats .col-3 .vehicle-stat label:first-of-type { font-size: 10px; font-weight: 400; color: var(--darker-50); } .vehicle-summary .stats .col-3 .vehicle-stat label:last-of-type { font-size: 15px; color: var(--black); font-weight: 500; margin-top: auto; } .box-shadow1 { box-shadow: var(--darker-30) 0px 1px 2px 0px, var(--darker-15) 0px 2px 6px 2px; } .box-shadow-orange { box-shadow: var(--orange-1) 0px -5px inset; } .box-shadow-purple { box-shadow: #3f27da 0px -5px inset; } .scrollable-table { max-height: 400px; overflow-y: auto; -ms-overflow-style: -ms-autohiding-scrollbar; } .mw-20rem { max-width: 20rem; } .mw-30rem { max-width: 30rem !important; } .mw-50rem { max-width: 50rem; } .mw-75rem { max-width: 75rem; } .mh-20rem { max-height: 20rem; } .mh-50rem { max-height: 50rem; } .mt-minus-3{ margin-top:-.75rem; } .mt-minus-4 { margin-top: -1rem; } .mt-minus-5 { margin-top: -1.5rem; } .scroll-fade { position: relative; overflow: hidden; --bg-color:var(--white); } .scroll-fade::before { content: ""; position: absolute; pointer-events: none; z-index: 2; left: 0; top: 0; bottom: 0; width: 64px; background: linear-gradient(to right, var(--bg-color), transparent); } .scroll-fade::after, .scroll-fade-horizontal::after { content: ""; position: absolute; pointer-events: none; z-index: 2; background: linear-gradient(transparent, var(--darker-03)); } .scroll-fade::after { right: 0; top: 0; bottom: 0; width: 64px; background: linear-gradient(to left, var(--bg-color), transparent); } .scroll-fade-horizontal::after { left: 0; right: 0; top: -50px; height: 50px; } .wizard-buttons{ position:fixed; bottom:0; left:0; width:100%; height:6rem; background-color:var(--darker-03); padding-bottom:1rem; z-index:2; } .transparent-progress { position: absolute; bottom: 0; left: 0; width: 100%; background-color: var(--darker-15); height: 8px; border-radius:0; } .bg-gradient { --gradient-color-1: var(--white); --gradient-color-2: var(--darker-05); background: linear-gradient(180deg, var(--gradient-color-1), var(--gradient-color-2)); position: relative; } .bg-gradient.dark { --gradient-color-1: #1b242c; --gradient-color-2: #2c3842; } .bg-gradient > .title { color: #d1ebff; text-shadow: 1px 1px 1px #3f7aa8; text-align: center; margin-bottom: 1.5rem; text-shadow: 3px 3px 0px rgba(0,0,0,0.2); font-size: clamp(2.5rem, 6vw + 1rem, 3.7rem); } .bg-gradient.dark::before { --col-1: rgb(34 38 42); --col-2: rgb(19 20 20); --bor-col-1: rgb(39 42 45); } .bg-gradient.dark::after { --col-1: rgb(34 38 42); --col-2: rgb(19 20 20); --bor-col-1: rgb(39 42 45); } .bg-orange { background-color: var(--orange-1) !important; } .bg-orange-purple-gradient { background: linear-gradient(45deg, #3f27da, var(--orange-1)); } @keyframes fadeIn { 0% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes fadeOut { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(20px); opacity: 0; } } .border-gradient-pink { border: double 2px transparent !important; background-image: linear-gradient(var(--white), var(--white)), linear-gradient(45deg, #77487e, #ce5262) !important; background-origin: border-box; background-clip: padding-box, border-box; } .trustpilot-widget { padding-inline: 1.5rem; z-index: 2; width: auto; margin-inline: auto; display: flex; align-items: center; } .trustpilot-widget :is(.col-auto, .col-12) { padding: 0; } .trustpilot-widget img { width: auto; max-height: 23px; } .trustpilot-widget img:hover { transform:scale(1.05); } .trustpilot-widget a { color:var(--black); font-size: 1rem; font-weight: 600; } .trustpilot-widget a:hover { text-decoration:unset; text-decoration-color:var(--orange-2); text-decoration-thickness:2px; } .modules { width: 100%; margin: auto; justify-content:center; } .modules .child { max-width: 320px; padding:1rem; } .module { padding-inline: 1rem; padding-block: 2rem; height: 100%; width: 100%; text-align: center !important; border: double 2px transparent; background-image: linear-gradient(var(--darker-05), var(--darker-05)), linear-gradient(45deg, #FE6F07, #F8AC37); background-origin: border-box; background-clip: padding-box, border-box; border-radius: 2rem; margin-inline: auto; } .module > span { font-size: 5.3em; font-weight: 100; margin-bottom: 1rem; color: #F8AC37; display: flex; align-items: center; justify-content: center; } .module > i::before { } .module > h3 { color: var(--black); font-weight: 600; text-shadow: unset !important; margin-bottom: 0.5rem; font-size: 1.4rem; } .module > p { color: var(--darker-70); max-width: 28ch; font-weight: 300; font-size: 16px; margin-top: .5rem !important; margin-inline: auto !important; } .module.trader { background-image: linear-gradient(var(--white), var(--white)), linear-gradient(45deg, #3f27da, var(--orange-1)); } .module.trader > span { background: -webkit-linear-gradient(45deg, #472ad1, #f56b10); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .module.trader > h3 { font-size: 1.2rem; text-shadow: 2px 2px 0px rgba(0,0,0,0.2); } .module.trader > p { } @keyframes background-slide { 0% { background-position-x: 10000000px; } 100% { background-position-x: 0; } } .dealer-toggle-checkbox-parent { background-color:var(--light); padding:.5rem; border-radius:.5rem; margin:.5rem; } .carousel-indicators li { background-color: var(--grey-3); } .rounded-number { width: 38px; height: 38px; font-size: 1.6rem; border: 2px solid var(--orange-1); background-color: var(--orange-2); border-radius: 50rem; margin-left: auto; margin-right: auto; margin-bottom: 0.9rem; color: var(--white); text-align: center; } .listing-title { font-size: 1.8rem; color: #4E8CE1; transition: all ease-in-out; transition-duration: 0.25s; text-shadow: 0px 0px 5px #0B428D; } .listing-title:hover { text-decoration: underline; color: #C7DFFD; text-shadow: 0px; } .blazored-typeahead__input { border:1px solid var(--grey-1) !important; background-color: var(--white) !important; color: var(--dark-2) !important; border-radius: .5rem !important; transition: ease-in-out; transition-duration: 0.2s; } .blazored-typeahead__result { border-top: 0 !important; color: var(--dark-2) !important; border-color: var(--grey-1) !important; background-color: var(--light) !important; max-height: 17rem !important; text-align:left; } .blazored-typeahead__results { border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; border-color: var(--grey-1) !important; background-color: var(--light) !important; max-height: 15rem !important; } .blazored-typeahead__notfound { border: 0 !important; color: var(--orange-2) !important; font-weight: 600; } .blazored-typeahead__result:hover { background-color: var(--light-2) !important; color: var(--dark-2) !important; } .blazored-typeahead__input-mask-wrapper--disabled .blazored-typeahead__input-mask { background-color: var(--grey-1) !important; color: var(--grey-3) !important; } .blazored-typeahead:focus-within { box-shadow: none !important; border-color: #006cff !important; } .blazored-typeahead { border: none !important; background-color: var(--white); border-color: var(--grey-1) !important; border-radius: .5rem !important; transition: all ease-in-out 200ms; } .blazored-typeahead__input-icon { border-radius: 0 .5rem .5rem 0 !important; transition: all ease-in-out 200ms; } .blazored-typeahead__input-icon:hover { background-color: var(--dark-2) !important; color: var(--white) !important; } .blazored-typeahead__clear { color: var(--grey-1) !important; font-weight: 800; transition: all ease-in-out 200ms; font-size:1.3rem; } .blazored-typeahead__clear:hover { color: var(--orange-2) !important; } .blazored-typeahead__input-mask { border: 1px solid var(--grey-1) !important; border-color: var(--grey-1) !important; background-color: var(--white) !important; color: var(--dark-2) !important; border-radius: .5rem !important; padding: 0rem 1rem !important; } .blazored-typeahead__input-mask-wrapper--disabled { border-radius: .5rem !important; } .town-results{ max-height:17rem; overflow-y:auto; border-radius:.5rem; } .town-results .list-group-item { border: 1px solid var(--darker-10); background-color: var(--darker-20); color: var(--black); padding-inline: 0.5rem; font-family: var(--poppins-font); text-align: left; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: all 200ms ease; margin-top: 2px; } .town-results .list-group-item-danger { color: #6e1c14; } .town-results .list-group-item:first-child { padding-block: 0.2rem; color: var(--black); } .town-results .list-group-item:first-child span { color: var(--black); font-family: var(--poppins-font); font-weight: 400; font-size: 12px; } .town-results .list-group-item:not(:first-child) { opacity: 0; transform: translateZ(-1400px) translateX(-1000px); -webkit-animation: slide-in-fwd-left 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-in-fwd-left 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; font-weight: 400; } .town-results .list-group-item:not(:first-child):is(:hover, :focus-within) { background-color: var(--darker-10); border-color: rgba(250, 169, 41, 1) !important; box-shadow: rgb(250 169 41 / 40%) 0px 7px 13px -4px; } .selected-town { display: flex; justify-content: space-between; align-items: center; border-radius: 0.5rem; font-size: 1rem !important; background-color: var(--white); background-clip: padding-box; border: 1px solid var(--darker-20); font-family: var(--poppins-font); font-weight: 400; text-align: left; cursor: not-allowed; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; min-height: 42px; margin-bottom: 0; padding-left: 0.75rem; } .selected-town.disabled { background-color: var(--darker-30); color: var(--darker-50); } .selected-town .btn-link { background-color: var(--lighter-10); } .selected-town .btn-link:hover { background-color: var(--lighter-30); color:var(--dark-2); } .three-dee-icon { font-size: 5em !important; color: rgb(255 225 175); padding: 0.5rem; background-color: rgb(250 170 43); border-radius: 1rem 2rem; height: 100px; width: 100px; display: flex; align-items: center; justify-content: center; box-shadow: rgb(165 112 31 / 67%) 3px 10px 0px, rgb(0 0 0 / 26%) 12px 20px 12px; margin-inline: auto; border: 1px solid rgb(85 54 6 / 11%); margin-bottom: 2rem; } .brand-logo { background-image: url(https://carowl-images.b-cdn.net/website-images/logos/logo-tiny-black.webp); background-size: 100%; background-repeat: no-repeat; background-position:center; display: block; width: 155px; height: 26px; } .carousel-inner img { max-height: calc(100vh - 10rem); object-fit: scale-down; } .carousel-item { transition: all .2s ease-out; } .carousel-indicators li { height: 5px; transition: all .2s ease; } .carousel-indicators .active { opacity: 1; height: 7px; border-top-width: 9px; } .custom-file { display: inline-block; width: 100%; height: auto; margin-bottom: 0; } .custom-file-input { position: relative; z-index: 1; width: 100%; height: 5rem; margin: 0; opacity: 0; background-color: var(--dark-2); text-align: center; cursor: pointer; max-width: 30rem; } .custom-file-input:hover .custom-file-label { background-color: var(--orange-2) !important; } .sco { max-width: 500px; height: auto; width: 100%; border-radius:2rem; } .custom-file-label { cursor: pointer; background-color: var(--white); color: var(--primary); border-radius: .5rem; z-index: 2; border: 0; height: 4rem; padding: 0.375rem 0.75rem; font-weight: 400; display: flex; align-items: center; justify-content:center; font-size: 1rem; border: 1px solid var(--darker-10); margin-inline: auto; max-width: 30rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .custom-file-label:hover { background-color: var(--darker-15) !important; } .custom-file-label::after { content: '' !important; display: none !important; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } .nav-tabs { border-bottom: 0; } .invalid { border-color: #9a0000; } .validation-message { margin-left: 5px; color: #c21818 !important; text-align: left; font-weight: 600 !important; letter-spacing: 0px; margin-top: .3rem; -webkit-animation: opacity-load 400ms ease-in; animation: opacity-load 400ms ease-in; font-size: 12px !important; } .required{ color:rgb(255 0 0); font-size:1.1rem; } #blazor-error-ui { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; overflow: hidden; text-align: center; font-weight: bold; height: 100vh; width: 100vw; display: none; } #blazor-error-ui::after { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1001; overflow: hidden; text-align: center; font-weight: bold; height: 100vh; width: 100vw; display: none; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } .friendly-error { background-color: var(--lighter-t-80); height: 100vh; width: 100vw; display: flex; align-items: center; -webkit-animation: top-opacity-load 250ms ease-in forwards, blur-background 400ms ease-in forwards; animation: top-opacity-load 250ms ease-in forwards, blur-background 400ms ease-in forwards; } @keyframes blur-background{ 0% { backdrop-filter:blur(0px); } 100% { backdrop-filter: blur(32px); } } .friendly-error .content { width: 100%; } .friendly-error img { } .friendly-error .content h3 { font-size: 2.4rem; } .friendly-error .content h4 { font-size: 2rem; } .big-checkbox { min-width: 20px; min-height: 20px; cursor: pointer; } .checkbox-round{ cursor:pointer; justify-content:center; } .checkbox-round > input[type='checkbox'] { width: 1.5em; height: 1.5em; background-color: var(--light); border-radius: 50%; vertical-align: middle; border: 1px solid var(--grey-1); -webkit-appearance: none; outline: none; transition: ease-in-out; transition-duration: 0.2s; cursor: pointer; position: absolute !important; } .checkbox-round > input[type='checkbox']:checked { background-color: var(--orange-2); border: 4px solid var(--orange-1); } .checkbox-round > input[type='checkbox']:focus-within { box-shadow: 0px 0px 2px 2px #0084ff; } .checkbox-round > label { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 1rem; margin-left: 2rem; margin-bottom: 0; cursor: pointer; color: var(--dark-2); } .stars { background: linear-gradient(to right, currentcolor 62px, #80868b 0%); color: var(--orange-1); clip-path: polygon(6px 0, 4.31px 3.98px, 0 4.34px, 3.28px 7.18px, 2.29px 11.4px, 6px 9.16px, 9.71px 11.4px, 8.72px 7.18px, 12px 4.34px, 7.69px 3.98px, 6px 0, 20px 0, 18.31px 3.98px, 14px 4.34px, 17.28px 7.18px, 16.29px 11.4px, 20px 9.16px, 23.71px 11.4px, 22.72px 7.18px, 26px 4.34px, 21.69px 3.98px, 20px 0, 34px 0, 32.31px 3.98px, 28px 4.34px, 31.28px 7.18px, 30.29px 11.4px, 34px 9.16px, 37.71px 11.4px, 36.72px 7.18px, 40px 4.34px, 35.69px 3.98px, 34px 0, 48px 0, 46.31px 3.98px, 42px 4.34px, 45.28px 7.18px, 44.29px 11.4px, 48px 9.16px, 51.71px 11.4px, 50.72px 7.18px, 54px 4.34px, 49.69px 3.98px, 48px 0, 62px 0, 60.31px 3.98px, 56px 4.34px, 59.28px 7.18px, 58.29px 11.4px, 62px 9.16px, 65.71px 11.4px, 64.72px 7.18px, 68px 4.34px, 63.69px 3.98px, 62px 0); display: inline-block; zoom: var(--google-fs); width: 68px; height: 11.4px; } .accept-terms { } .accept-terms > a { font-weight: 500; } .border-orange-gradient { border: double 2px transparent; background-image: linear-gradient(var(--white), var(--white)), linear-gradient(45deg, #FE6F07, #F8AC37); background-origin: border-box; background-clip: padding-box, border-box; } .border-orange { border-color: var(--orange-1) !important; } .border-deluxe { border: double 2px transparent; background-image: linear-gradient(var(--white), var(--white)), linear-gradient(45deg, #3f27da, var(--orange-1)); background-origin: border-box; background-clip: padding-box, border-box; } .border-ai { border: double 2px transparent; background-image: linear-gradient(var(--darker-05), var(--white)), linear-gradient(45deg, #9E72BA, #D6635C); background-origin: border-box; background-clip: padding-box, border-box; } .border-purple { border: 2px solid #3B00FF; } .border-middle { border: 2px solid #9C3784; } .border-last { border: 2px solid #FC6F0A; } .cta-corn { border-radius: 2rem 1rem 2rem 1rem !important; } .previously-searched { } .previously-searched button { color: black; background-color: white; min-height: unset; padding: 0; border: 0 !important; outline: 2px solid transparent !important; font-size: 16px; font-weight: 600; font-family: 'CharlesWright' !important; border-radius: 0.5rem; padding-inline: 0.5rem; padding-block: 0.25rem; margin-left: 0.5rem; transition: all 200ms linear; } .previously-searched button:is(:focus,:focus-within,:focus-visible) { color: var(--primary); box-shadow: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline: 2px solid var(--darker-50) !important; } .snap-scrolling { overflow: auto; flex-wrap: nowrap; flex-direction: row; scroll-snap-type: inline mandatory; } .snap-scrolling .col-auto { scroll-snap-align: center; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; scroll-snap-stop: always; } .letter-spacing-1{ letter-spacing:-1px; } .attach-file:is(:focus, :active) { box-shadow: none !important; } .bid-bar { background-color: var(--darker-10); z-index: 5; } .bid-input-group { flex-grow: 1; } .bid-bar .input-group-text { background-color:var(--white); border:0; color: var(--black); } .vehicle-photo-list { overflow: auto; flex-wrap: nowrap; flex-direction: row; scroll-snap-type: x mandatory; scroll-behavior: smooth; max-height:calc(100vh - 60px); } .vehicle-photo-list .item { cursor: pointer; scroll-snap-align: center; } .vehicle-photo-list .item.selected { cursor: unset; filter: brightness(1) } .vehicle-photo-list .item img { object-fit: scale-down; width: 100%; height: 100%; filter:saturate(1.5); } .vehicle-photo-list .item.selected > img { filter: grayscale(0); } .progress-label{ animation:opacity-animation } .progress-label .loading { color: var(--black); font-size: 1.3rem; font-weight: 500; width: 100%; text-align: center; margin-top: .5rem; } .progress-label .tip { color: var(--darker-30); font-size: 12px; width: 100%; text-align: center; margin-bottom: 1rem; } .loader { border: 4px solid var(--darker-30); border-top: 4px solid var(--darker-80); border-radius: 50%; min-width:32px; min-width:32px; width: 32px; height: 32px; margin-inline:auto; animation: spin .6s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .contact-pill { display: inline-flex; align-items: center; justify-content: center; background-color: var(--darker-10); border-radius: 50px; height: 26px; border: 1px solid var(--darker-15); font-family: var(--poppins-font); } .contact-pill > span { padding-inline: 1rem; align-items: center; justify-content: center; font-size: 12px; text-align: center; font-weight: 600; letter-spacing: 1px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; font-family: var(--poppins-font); } .scroll-button { height:100%; max-height:75px; background: rgba(255, 255, 255, 0.7); border: none; font-size: 1.5rem; cursor: pointer; z-index: 1; } .scroll-button.left { left: 0; } .scroll-button.right { right: 0; } .text-trade-2-trade { color: #00c2ff; } .contact-pill.trade-2-trade > span { color: #00c2ff; } .contact-pill.free{ background-color:var(--darker-20); } .contact-pill.free > span { background: -webkit-linear-gradient(0deg, var(--black), var(--black)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .contact-pill.verified { color: var(--black); padding-inline: .5rem; font-size: 12px; font-weight: 600; gap:.25rem; } .contact-pill.seller > span { background: -webkit-linear-gradient(0deg, var(--orange-1), var(--orange-2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .deluxe-animation { border: double 1px transparent; background: -webkit-linear-gradient(0deg, #4005b5, #b54e03, #4005b5, #b54e03, #4005b5); background-origin: border-box; background-clip: padding-box, border-box; background-size: 1000% 100%; animation: deluxe-tab-background 100s linear infinite forwards; animation-delay: 500ms; } .contact-pill.deluxe-animation > span { color: #ffffffbf; } .contact-pill.deluxe-animation.no-animation { animation: unset; } @keyframes deluxe-tab-background{ 0% { background-position: 0% 0%; } 100% { background-position: 500% 0%; } } @keyframes deluxe-tab-pop { 0% { transform: scale(1); } 50% { transform: scale(.97); } 100% { transform: scale(1); } } .contact-pill.deluxe > span { color: #ffffffc2; font-style:italic; } .vehicle-container { padding-inline:1rem; gap:1.5rem; } .vehicle-container .vehicle-component:not(:only-of-type, :last-of-type) { margin-bottom: 2rem; } .oneline { overflow: auto; flex-wrap: nowrap; flex-direction: row; scroll-snap-type: inline mandatory; } .oneline::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: var(--darker-20); } .oneline::-webkit-scrollbar { width: 10px; background-color: var(--darker-10); } .oneline::-webkit-scrollbar-thumb { background-color: #F90; background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent) } .add-features .vehicle-feature:not(:last-of-type) { margin-bottom: .5rem; } .vehicle-details-page h1 { margin-bottom: 0; } .vehicle-details-page > h3 { color: var(--darker-70); font-weight:400; } .copied-text { top: -5px; right: 120%; background-color: var(--darker-20); border: 1px solid var(--darker-30); width: 80px; height: 25px; cursor: default; z-index: 5; } .vehicle-valuation-img { max-height:22px; width:auto; height:100%; object-fit:contain; user-select:none; -webkit-user-select:none; } .clean-valuation { background-color:rgb(0 255 0 / 10%) !important; } .average-valuation { background-color: rgb(255 156 0 / 10%) !important; } .below-average-valuation { background-color: rgb(255 0 0 / 10%) !important; } .retail{ background-color:var(--darker-15) !important; } .pending-action-pill { font-size: 1rem; margin-inline: 0.5rem; margin-block: 0.25rem; padding: 0.25rem 0.5rem; border-radius: 0.5rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: black; outline: 2px solid var(--orange-1); background-color: var(--orange-3); font-weight: 600; box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px; } .offer-rejected-pill { font-size: 1rem; margin-inline: 0.5rem; margin-block: 0.25rem; padding: 0.25rem 0.5rem; border-radius: 0.5rem; color: white; font-weight: 400; background-color: var(--muted); text-shadow: 1px 1px 0px grey; outline: 2px solid grey; } .live-blinker { position: relative; margin-right: 20px; } .live-blinker::after { content: ''; position: absolute; top:1px; left: 0; border-radius: 50%; margin: 0px; height: 12px; width: 12px; transform: scale(1); transform: scale(1); animation: pulse-black 2s infinite; background-color: var(--success); box-shadow: 0 0 0 0 var(--success); animation: vehicle-offer-live 2s infinite; } .live-blinker.non-blinking::after { animation: none; } .live-blinker.grey::after { background-color: var(--darker-30); box-shadow: 0 0 0 0 var(--darker-30); } .live-blinker.green::after { background-color: var(--success); box-shadow: 0 0 0 0 var(--success); } .live-blinker.red::after { background-color: red; box-shadow: 0 0 0 0 red; } .live-blinker.orange::after { background-color: var(--orange-1); box-shadow: 0 0 0 0 var(--orange-2); } @keyframes vehicle-offer-live { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0,240,0, .7); } 70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(0,240,0, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0,240,0, 0); } } .vehicle-information-details .accordion .card-body { padding-inline:1rem !important; } .trader-card { text-align: center; justify-content: center; } .trader-card .offer-from { color: var(--dark-2); text-shadow: 2px 2px 2px 2px var(--orange-1); font-weight: 600; padding-inline: 0.7rem; padding-block: .5rem; background-color: var(--light); border-radius: .5rem; outline: 1px solid var(--darker-20); margin: 0; } .seo-content { margin-inline: auto; padding: 0; max-width: 75rem; } .seo-content h2 { font-size: 2rem; text-align: left !important; margin-bottom: 1rem; color: var(--black) !important; text-wrap: balance; } .seo-content h2:not(:first-of-type) { margin-top: 5rem; } .seo-content h3 { margin-top: 3rem; color: var(--black) !important; text-wrap: balance; } .seo-content p { margin-bottom: 1rem; color: var(--darker-70) !important; max-width: 60ch; line-height: 1.9; } .seo-content ul { max-width: 35rem; padding-left: 1rem; } .seo-content :is(ul, ol) li { color: var(--darker-70); line-height: 1.9; max-width: 60ch; } .seo-content ul li:not(:last-of-type) { margin-bottom:.5rem; } #fields{ isolation:isolate; } .nav-tabs .nav-link { border-color: transparent; } .dealer-overview { margin-bottom: 1rem; font-size: 1rem; font-weight: 700; text-align: center; color: var(--darker-70); font-family: var(--poppins-font); display: flex; align-items: end; } .dealer-overview .deluxe { margin-left:.5rem; } .tab-group { padding: 1rem; background-color: var(--darker-05); min-height: var(--body-content-height); max-width: 17rem; z-index: 2; } .tab-group .tab { margin-bottom: .5rem !important; } .tab-group .nav-tabs .nav-link { border-radius: 1rem; color: var(--darker-40) !important; border-bottom: solid 2px transparent; box-shadow: none !important; transition: all 250ms linear; justify-content: start; padding-left:1rem !important; padding-block:.75rem; } .tab-group .nav-tabs .nav-link span { color: var(--darker-40); margin-right: .5rem; transition: all 250ms linear; } .tab-group .nav-tabs .nav-link svg { margin-right: .5rem; } .tab-group .nav-tabs .nav-link path { stroke: var(--darker-40); transition: all 250ms linear; } .tab-group .nav-tabs .nav-link.deluxe { background-clip: padding-box, border-box; background-origin: border-box; background-image: linear-gradient(230deg, var(--darker-05), var(--darker-05)), linear-gradient(45deg, #3f27da, var(--orange-1)); } .tab-group .nav-tabs .nav-link.active { border-color: var(--orange-1); color: var(--black) !important; } .tab-group .nav-tabs .nav-link.deluxe.active { color: white !important; background-image: linear-gradient(0deg, transparent, transparent), linear-gradient(45deg, #3f27da, var(--orange-1)); } .tab-group .nav-tabs .nav-link.deluxe.active span { color: white !important; background:unset; -webkit-background-clip: unset; -webkit-text-fill-color: unset; } .tab-group .nav-tabs .nav-link.active span { border-color: var(--darker-20); color: var(--black) !important; } .tab-group .nav-tabs .nav-link.active path { border-color: var(--darker-20); stroke: var(--black); } .tab-group .nav-tabs .nav-link.active.saved path { fill:red !important; } .tab-group .nav-tabs .nav-link.deluxe.active path { color:white !important; } .tab-group .nav-tabs .nav-item:not(.active) > .nav-link:hover { border-color: var(--darker-20); } .tab-content { padding-block: 1rem; background-color: var(--white); min-height: var(--body-content-height); overflow-y: auto; z-index: 1; } .tab-content .content-heading { justify-content: center; } .tab-content .content { margin-inline:auto; } .tab-content .content .collapsible-panel:not(:last-of-type){ margin-bottom:1rem; } .tab-content .content .collapsible-panel { } .text { background-color: #4CAF50; color: var(--white); font-size: 16px; padding: 16px 32px; } .text-muted { color: var(--darker-60) !important; } .card { transition: ease-in-out; transition-duration: 0.2s; } .card-header { transition: ease-in-out; transition-duration: 0.2s; } .card-footer { transition: ease-in-out; transition-duration: 0.2s; } .card-hover-dark { } .card-hover-dark:hover { background-color: #5d626b !important; } hr{ border-color:var(--darker-20); } .hr-thick { background-color: var(--orange-2); width: 100%; height: 5px; border-radius: 0.3rem; } .hr-footer { background-color: var(--orange-2); width: 100%; height: 3px; } .pointer { cursor: pointer; } .cursor-not-allowed { cursor: not-allowed; } .cursor-expand { cursor: zoom-in; } .border-selected { border-style: solid; border-width: 4px; border-color: #4EB26C; } .spinner-car-image { width: 90px; height: auto; position: absolute; left: calc(50% - 45px); top: -54px; -webkit-animation: vibrate-1 0.4s linear infinite both; animation: vibrate-1 0.4s linear infinite both; filter: saturate(1.5); } .spinner { background: var(--darker-10); border-radius: 50%; margin-inline: auto; width: 135px; height: 135px; animation: spin 3.5s infinite linear; position: relative; } @keyframes ellipsis { 0% { content: ''; } 33% { content: '.'; } 66% { content: '..'; } 100% { content: '...'; } } .ellipsis-animation::after { content: ''; animation: ellipsis 1.5s infinite; display: inline-block; width: 1ch; } @keyframes spin { 0% { transform: rotate(0) } 100% { transform: rotate(360deg) } } .custom-switch.custom-switch-sm .custom-control-label { padding-left: 1rem; padding-bottom: 1rem; } .custom-switch.custom-switch-sm .custom-control-label::before { height: 1rem; width: calc(1rem + 0.75rem); border-radius: 2rem; } .custom-switch.custom-switch-sm .custom-control-label::after { width: calc(1rem - 4px); height: calc(1rem - 4px); border-radius: calc(1rem - (1rem / 2)); } .custom-switch.custom-switch-sm .custom-control-input:checked ~ .custom-control-label::after { transform: translateX(calc(1rem - 0.25rem)); } .custom-switch.custom-switch-md .custom-control-label { padding-left: 2rem; padding-bottom: 1.5rem; } .custom-switch.custom-switch-md .custom-control-label::before { height: 1.5rem; width: calc(2rem + 0.75rem); border-radius: 3rem; } .custom-switch.custom-switch-md .custom-control-label::after { width: calc(1.5rem - 4px); height: calc(1.5rem - 4px); border-radius: calc(2rem - (1.5rem / 2)); } .custom-switch.custom-switch-md .custom-control-input:checked ~ .custom-control-label::after { transform: translateX(calc(1.5rem - 0.25rem)); } .custom-switch.custom-switch-lg .custom-control-label { padding-left: 3rem; padding-bottom: 2rem; } .custom-switch.custom-switch-lg .custom-control-label::before { height: 2rem; width: calc(3rem + 0.75rem); border-radius: 4rem; } .custom-switch.custom-switch-lg .custom-control-label::after { width: calc(2rem - 4px); height: calc(2rem - 4px); border-radius: calc(3rem - (2rem / 2)); } .custom-switch.custom-switch-lg .custom-control-input:checked ~ .custom-control-label::after { transform: translateX(calc(2rem - 0.25rem)); } .custom-switch.custom-switch-xl .custom-control-label { padding-left: 4rem; padding-bottom: 2.5rem; } .custom-switch.custom-switch-xl .custom-control-label::before { height: 2.5rem; width: calc(4rem + 0.75rem); border-radius: 5rem; } .custom-switch.custom-switch-xl .custom-control-label::after { width: calc(2.5rem - 4px); height: calc(2.5rem - 4px); border-radius: calc(4rem - (2.5rem / 2)); } .custom-switch.custom-switch-xl .custom-control-input:checked ~ .custom-control-label::after { transform: translateX(calc(2.5rem - 0.25rem)); } .spinning { -webkit-animation: spin2 1s infinite linear; animation: spin 1s infinite linear; } @keyframes spin { from { transform: scale(1) rotate(0deg); } to { transform: scale(1) rotate(360deg); } } @-webkit-keyframes spin2 { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } .fa-left { margin-right: 7px; } .darkerScrollbar::-webkit-resizer { } .darkerScrollbar::-webkit-scrollbar{ width: 10px; height: 12px; cursor:pointer; } .darkerScrollbar.thin::-webkit-scrollbar { height: 6px; } .darkerScrollbar::-webkit-scrollbar-track { background: var(--darker-20); } .darkerScrollbar::-webkit-scrollbar-thumb { background: var(--darker-30); } .no-scrollbar::-webkit-scrollbar{ height:0; } .dropdown-menu { padding-block: .5rem; background-color: var(--darker-10); border-radius: 1rem; overflow: hidden; box-shadow: rgb(0 0 0 / 5%) 0 0 0 1px, rgb(0 0 0 / 12%) 0 15px 30px 0; min-width: 140px; left: unset; right: 0px; border: 0; transform: scaleY(0); transform-origin: top; transition: transform 0.3s ease, opacity 0.3s ease; animation: dropdown 0.3s forwards; z-index:3; } .dropdown-toggle::after { display: none !important; } .dropdown-item { border-radius: 0 !important; padding: 12px 12px 8px 12px !important; display: flex; align-items: center; color: var(--darker-70); font-size: 14px; transition: all 150ms ease-in; border: 1px solid transparent; gap:.5rem; } .dropdown-item.red { color:var(--danger); } .dropdown-item.red > span { color: var(--danger); } .dropdown-divider { border-top: 1px solid var(--darker-20); margin-block:.25rem; } .dropdown-item :is(i, span) { font-size: 16px; margin-right: .5rem !important; } .dropdown-toggle i { margin-right: 0 !important; } .dropdown-item:hover { background-color: var(--darker-20); color: var(--black) !important; border-color: transparent; } .navbar-collapse{ justify-content:end; } .notifications-panel { max-width: 35rem; justify-content: space-between; } .notifications-panel h2 { font-size: 1.4rem !important; letter-spacing: 3px; text-align: center; } .notifications-panel .title h2 span { text-shadow: 20px var(--orange-1); } .notifications-panel .title button span{ color: red; } .notifications-panel .notifications { min-height: 15rem; border-radius:.5rem; margin-bottom:.25rem; } .notifications-panel .button__mark_all_read{ border:0; width:100% !important; padding-bottom:0; } .notifications-panel .button__mark_all_read:is(:active, :hover) { background-color:transparent; } .unreadCount { width: 22px; height: 22px; position: absolute; top: -5px; left: 29px; font-size: .8rem !important; font-weight: 700 !important; color: white !important; background-color: var(--red); border-radius: .5rem; margin: 0; padding: 0.25rem; display: flex; align-items: center; justify-content: center; -webkit-animation: opacity-load 400ms ease-in; animation: opacity-load 400ms ease-in; } .no-new-notifications { min-height: 200px; text-align: center; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--darker-60); font-weight:400; } .notification { padding-block: .5rem; cursor: pointer; } .notification:first-of-type{ margin-top:0; } .notification .col-auto { padding-right: 0.5rem; } .notification .col { padding-right: 0.5rem; } .notification-actions { border: 0; border-radius: .5rem !important; color: var(--darker-80); background-color: transparent; display: flex; align-items: center; justify-content: center; } .notification-actions:is(:hover, :active, :focus, :active) { background-color: var(--darker-30); box-shadow: unset; } .notification h6 { font-size: 14px; margin-bottom: 0; text-wrap: unset; } .notification .tab { font-style: normal; text-shadow:unset; } .notification.read h6 { font-weight: 400; color: var(--darker-40); } .notification:not(.read) :is(h6, label) { font-weight: 600; color: var(--black); font-weight: 700; } .notification label { color: var(--darker-60); font-weight: 400; font-size: 12px; margin: 0; line-height: 1.2; } .notification.read label { font-weight: 400; color: var(--darker-30); } .notification:hover { transition: ease-in-out; transition-duration: 0.2s; } .filter-pills:has(span){ padding-bottom:1rem; } .seller-call-to-action-3 { padding-block: 2rem; } .rounded-window { border-radius: 100% 100% 100% 0% / 100% 100% 0% 100%; } .wisdombase-title h4 { font-weight:400; } .wisdombase-title img { max-height: 167px; height: 100%; width: auto; object-fit: scale-down; } .max-width-75 { max-width:75rem; } .max-width-unset { max-width: unset; } .max-width-60 { max-width: 60rem; } .wbsub p{ font-weight:400; } .wbsub .card-body { transition: all ease-in-out .15s; } .wbsub .card-body svg { margin-bottom: 1rem; } .wbsub .card-body:hover { transform: scale(1.05) rotate(-2deg); z-index: 4; box-shadow: 0 0 30px var(--orange-1); background-color: #fe6f0721; } .wisdombase-summary .card-body { background-color: var(--darker-05); border-radius: 2rem; box-shadow: var(--darker-t-10) 0px 1px 3px, var(--darker-t-20) 0px 1px 2px; padding: 2rem; cursor: pointer; } .wisdombase-summary { padding-bottom: 4rem; opacity: 0; animation: side-opacity-load 400ms ease-in forwards; -webkit-animation: side-opacity-load 400ms ease-in forwards; } .wisdombase-summary .col-12 { margin-inline:auto; max-width:75rem; } .wisdombase-summary h1 { font-size: 2rem; font-weight: 600; text-align: left !important; margin-bottom: 2rem; } .wisdombase-summary h2 { font-size: 1.6rem; font-weight: 600; text-align: left !important; margin-bottom: .5rem; } .wisdombase-summary .col-12 > p { font-weight:400; font-size:14px; color:var(--darker-60); padding-bottom:1rem; border-bottom: 1px solid var(--darker-10); } .wisdombase-summary p:not(:last-of-type) { margin-bottom: 1rem; } .wisdombase-summary p > a { display: block; font-size: 1.1rem; margin-bottom: .25rem; font-weight:600; } .wisdombase-summary a:hover { text-decoration: unset; } .faqs { } .faq p { font-size: 14px; } .accordion a { justify-content: space-between; } .accordion a:is(:hover, :focus-within, :focus) { text-decoration: unset; } .accordion a:focus { text-decoration: unset !important; } .accordion a > span { display: inline-block; margin-right: 5px; } .accordion a:hover > span { text-decoration: unset; } .accordion a > span::before { content: "expand_more"; } .accordion a[aria-expanded="true"] > span::before { content: "expand_less"; } .wizard .header { background: linear-gradient(45deg, var(--orange-1), #6e2ccb); } .wizard .header :is(h2,p) { color: white; } .noUi-target, .noUi-target * { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -ms-touch-action: none; touch-action: none; -ms-user-select: none; -moz-user-select: none; user-select: none; -moz-box-sizing: border-box; box-sizing: border-box } .noUi-target { position: relative } .noUi-base, .noUi-connects { width: 100%; height: 100%; position: relative; z-index: 1 } .noUi-connects { overflow: hidden; z-index: 0 } .noUi-connect, .noUi-origin { will-change: transform; position: absolute; z-index: 1; top: 0; right: 0; height: 100%; width: 100%; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; -webkit-transform-style: preserve-3d; transform-origin: 0 0; transform-style: flat } .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 { -webkit-backface-visibility: hidden; backface-visibility: hidden; position: absolute } .noUi-touch-area { height: 100%; width: 100% } .noUi-state-tap .noUi-connect, .noUi-state-tap .noUi-origin { -webkit-transition: transform .3s; transition: transform .3s } .noUi-state-drag * { cursor: inherit !important } .noUi-horizontal { height: 10px } .noUi-horizontal .noUi-handle { width: 24px; height: 24px; right: -16px; top: -7px; border-radius: 1rem; } .noUi-vertical { width: 18px } .noUi-vertical .noUi-handle { width: 28px; height: 34px; right: -10px; bottom: -17px } .noUi-txt-dir-rtl.noUi-horizontal .noUi-handle { left: -17px; right: auto } .noUi-target { background: var(--black); border-radius: 4px; box-shadow: inset 0 1px 1px #F0F0F0,0 3px 6px -5px #BBB } .noUi-connects { border-radius: 3px } .noUi-connect { background: var(--orange-1); max-height:10px; } .noUi-draggable { cursor: ew-resize } .noUi-vertical .noUi-draggable { cursor: ns-resize } .noUi-handle { border: 3px solid var(--black); border-radius: 3px; background: var(--darker-20); cursor: default; } .noUi-active { box-shadow: inset 0 0 1px #FFF,inset 0 1px 7px #DDD,0 3px 6px -3px #BBB } .noUi-handle:after { left: 17px } .noUi-vertical .noUi-handle:after, .noUi-vertical .noUi-handle:before { width: 14px; height: 1px; left: 6px; top: 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 * { -moz-box-sizing: border-box; box-sizing: border-box } .noUi-pips { position: absolute; color: #999 } .noUi-value { position: absolute; white-space: nowrap; text-align: center } .noUi-value-sub { color: #ccc; font-size: 10px } .noUi-marker { position: absolute; background: #CCC } .noUi-marker-sub { background: #AAA } .noUi-marker-large { background: #AAA } .noUi-pips-horizontal { padding: 10px 0; height: 80px; top: 100%; left: 0; width: 100% } .noUi-value-horizontal { -webkit-transform: translate(-50%,50%); transform: translate(-50%,50%) } .noUi-rtl .noUi-value-horizontal { -webkit-transform: translate(50%,50%); transform: translate(50%,50%) } .noUi-marker-horizontal.noUi-marker { margin-left: -1px; width: 2px; height: 5px } .noUi-marker-horizontal.noUi-marker-sub { height: 10px } .noUi-marker-horizontal.noUi-marker-large { height: 15px } .noUi-pips-vertical { padding: 0 10px; height: 100%; top: 0; left: 100% } .noUi-value-vertical { -webkit-transform: translate(0,-50%); transform: translate(0,-50%); padding-left: 25px } .noUi-rtl .noUi-value-vertical { -webkit-transform: translate(0,50%); transform: translate(0,50%) } .noUi-marker-vertical.noUi-marker { width: 5px; height: 2px; margin-top: -1px } .noUi-marker-vertical.noUi-marker-sub { width: 10px } .noUi-marker-vertical.noUi-marker-large { width: 15px } .noUi-tooltip { display: block; position: absolute; border: 1px solid #D9D9D9; border-radius: 3px; background: #fff; color: #000; padding: 5px; text-align: center; white-space: nowrap } .noUi-horizontal .noUi-tooltip { -webkit-transform: translate(-50%,0); transform: translate(-50%,0); left: 50%; bottom: 120% } .noUi-vertical .noUi-tooltip { -webkit-transform: translate(0,-50%); transform: translate(0,-50%); top: 50%; right: 120% } .noUi-horizontal .noUi-origin > .noUi-tooltip { -webkit-transform: translate(50%,0); transform: translate(50%,0); left: auto; bottom: 10px } .noUi-vertical .noUi-origin > .noUi-tooltip { -webkit-transform: translate(0,-18px); transform: translate(0,-18px); top: auto; right: 28px } .vehicle-information-details .accordion .collapsible-panel .content { padding: 0; } .trade-valuation .content { padding: 0 !important; } .listing-features .content { padding-block: 1rem; } .listing-feature .col-12:not(:last-of-type) { margin-bottom: .5rem; } .wisdom-page { } .wisdom-page :is(ul,ol) li::marker { font-weight:800; } .wisdom-page :is(ol) li::marker { margin-right:.5rem; } .wisdom-page :is(ol, ul) li:not(:first-of-type) { margin-top: 1rem; } .wisdom-page :is(li, dt) { color: var(--black); font-family: var(--poppins-font); font-weight: 400; line-height: 26px; font-size: 17px; } .wisdom-page li::marker { color:var(--orange-1); } .wisdom-page img { border-radius: .5rem; margin-block:2rem; } .wisdom-page h1 { margin-bottom: 1rem; } .wisdom-page h2 { color: var(--black); margin-top: 80px; letter-spacing: 0px; margin-bottom:16px; } .wisdom-page img + h2 { margin-top: 0; } .wbcont > img:first-child { margin-top: 0; } .wisdom-page h3 { color: var(--black); margin-top: 1.5rem; margin-bottom: 1rem; letter-spacing: 0px; } .wisdom-page h4 { font-size: 1.25rem; margin-bottom:1rem; } .wisdom-page :is(p, dd) { color: var(--black); line-height: 26px; font-weight: 400; max-width: 780px; font-size: 17px; } .wisdom-page dd { margin-bottom:1rem; } .wisdom-page dt { margin-bottom: .5rem; } .wisdom-page ul ul { margin-top: 1rem; } .wisdom-page p:not(:last-of-type) { margin-bottom: 1em; } .wisdom-page > h2 > p:first-of-type { border-top-left-radius: 1rem; border-top-right-radius: 1rem; } .wisdom-page a { position: relative; display: inline-flex; } .wisdom-page table { width: 100%; border-collapse: collapse; border: 1px solid var(--darker-15); } .wisdom-page table thead { background-color: var(--darker-15); } .wisdom-page th, .wisdom-page td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--darker-10); color:var(--darker-60); } .wisdom-page th { font-weight: 600; color: var(--black); } .wisdom-page tbody tr:hover { background-color: var(--darker-10); } .wisdom-page tbody tr:nth-child(even) { background-color: var(--darker-05); } .wisdom-page-summary { max-width: 40rem; margin-inline: auto; } .wisdom-page-summary ul { margin-top: 0; padding:1rem 0 0 1rem; } .wisdom-page-summary li { margin-bottom:.25rem; } .wisdom-page-summary li a { font-weight:500; } .wisdom-page .wisdom-page-summary { margin-inline: unset; } .features { overflow-x: auto; gap: .5rem; margin-bottom: 1rem; flex-wrap: nowrap; padding-inline: 1rem; } .awesome-feature { display: flex; align-items: center; gap: .25rem; text-align: left; background-color: var(--darker-t-10); border: 1px solid var(--darker-t-10); border-radius: 50rem; padding-inline: .75rem; padding-block: 0.25rem; backdrop-filter: blur(10px); } .awesome-feature span { background: -webkit-linear-gradient(0deg, var(--orange-1), var(--orange-2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; font-size: 1.5rem; font-weight: 200; user-select: none; } .awesome-feature p { color:var(--darker-80); font-size:14px; } awesome-feature:not(:last-of-type) { } .dealer-shop{ background-color:var(--white); } .dealer-shop.subscriptions { max-width: unset; } .dealer-shop h1 { margin-bottom:.5rem; } .dealer-shop .title :is(h1,h2,h3) { } .dealer-shop .title label { font-weight: 400; font-size: 1rem; color: var(--darker-50); text-align: center; margin-inline: auto; display: block; margin-bottom:0rem; } .product-container { overflow: auto; flex-wrap: nowrap; flex-direction: row; padding-top: 2rem; padding-bottom: 1rem; scroll-snap-type: inline mandatory; } .dealer-shop.subscriptions .product-container { } .expand-animation { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s ease-in-out, padding-block .5s ease-in-out; overflow: hidden; } .expand-animation.expanded { grid-template-rows: 1fr; } .subscription .yearly-saving { background-color: red; padding: 0rem 1rem; border-radius: 50rem; top: -1rem; font-weight: 700; right: 1rem; color: white; position: absolute; font-family: var(--poppins-font); text-shadow: 1px 1px 0 black; } .vertical-text { writing-mode: vertical-lr; transform: rotate(180deg); } .product { align-items: center; justify-content: center; border: 1px solid transparent; background-color: var(--darker-05); padding: .5rem; border-radius: 1rem; transition: all ease-in 500ms; cursor: pointer; scroll-snap-align: center; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; scroll-snap-stop: always; position: relative; margin: .5rem; } .product.selected { background-color: var(--darker-10); box-shadow: var(--orange-2) 0px 0px 0px 3px; z-index: 1; } .product.offer-credit { max-width: 264px; margin-bottom: auto; border:1px solid var(--darker-10); } .product.offer-credit.selected { transform: scale(1.02); } .product.subscription { max-width: 265px; padding: 1rem; border-radius: 2rem; border: 2px solid var(--darker-30); background-color:var(--white); cursor:default; padding-bottom:5rem; } .product.subscription button{ } .product.subscription.deluxe, .product.subscription.deluxe button { background-clip: padding-box, border-box; background-origin: border-box; background-image: linear-gradient(230deg, var(--white), var(--white)), linear-gradient(230deg, #3f27da, var(--orange-1)); border-color: transparent; box-shadow: 0 0 10px #3f27da; } .product.subscription.pro { background-clip: padding-box, border-box; background-origin: border-box; background-image: linear-gradient(230deg, var(--white), var(--white)), linear-gradient(230deg, var(--orange-2), var(--orange-1)); border-color: transparent; box-shadow: 0 0 10px var(--orange-1); margin-inline: 1.25rem; } .product.subscription.deluxe.selected { background-clip: padding-box, border-box; background-origin: border-box; background-image: linear-gradient(230deg, var(--darker-10), var(--darker-10)), linear-gradient(230deg, #3f27da, var(--orange-1)); } .product > label { top: 0; left: 0; width: 100%; text-align: center; font-size: 15px; font-weight: 600; padding-block: .25rem; margin-bottom: 0; border-radius: 1rem 1rem 0 0; } .product :is(img, video) { width: 208px; height: 103px; object-fit: cover; margin-inline: auto; display: block; } .subscription.deluxe :is(img, video) { padding: 0px; background-clip: padding-box, border-box; background-origin: border-box; background-image: linear-gradient(230deg, var(--darker-05), var(--darker-05)), linear-gradient(230deg, #3f27da, var(--orange-1)); border: 2px solid transparent; } .product h2 { color: var(--darker-90); margin-bottom: 0; } .subscription.pro :is(h2, h3, .subscription-benefit > span) { background: linear-gradient(230deg, var(--orange-2), var(--orange-1)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .subscription.deluxe :is(h2, h3, .subscription-benefit > span) { background: linear-gradient(230deg, #3f27da, var(--orange-1)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .product h3 { font-size:1.3rem; color:var(--black); margin-bottom:0; } .product.offer-credit h3 { text-align: center; font-weight: 500; color: var(--darker-50); } .product h4 { font-size: 1.6rem; font-weight: 800; text-align: center; margin-top: 0.5rem; } .product h6 { font-size: 1.1rem; text-align:center; margin-bottom:0; font-size:14px; } .product h6 > span { font-style:normal; } .product ol { margin-bottom: 0.5rem; padding-left: 0; margin-top: 1rem; } .product button { width: 100%; font-size: 1rem; margin-top: 1rem; filter: grayscale(0); } .product.selected button { box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; background-color: var(--darker-20); filter: grayscale(1); } .subscription .contact-pill { } .subscription.current { position: relative; cursor: default; } .subscription.current::after { top: 0; left: calc(100% / 2 - 90px); content: 'Current Tier'; position: absolute; height: 2rem; width: 180px; background: var(--black); font-style: normal; font-weight: 800; font-size: 15px; display: flex; align-items: center; border-bottom-left-radius: 50rem; border-bottom-right-radius: 50rem; justify-content: center; line-height: 117.5%; letter-spacing: 0px; color: var(--white); text-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25); } .subscription .btn { position: absolute; bottom: 1rem; left: 5%; margin-inline: auto; width: 90%; background-image: unset; border: 1px solid var(--darker-70); color:var(--black); } .subscription.pro .btn { border: 1px solid var(--orange-1); box-shadow:0 0 5px var(--orange-2); } .subscription .btn:hover { color: var(--black) !important; } .subscription.deluxe button { } .subscription{ } .subscription h2 { text-align: center; margin-bottom: 1.5rem; margin-top: 2rem; font-weight: 700; } .subscription.pro h2 { text-shadow: 0 0 20px var(--orange-1); } .subscription h4 { text-align: center; font-size: 2.2rem; color: var(--black); margin-bottom: 0.75rem; margin-top: .75rem; font-weight: 300; } .subscription h5 { text-shadow: unset; font-size: 14px; color: var(--darker-60); font-weight: 300; text-align: center; } .subscription-benefit { color:var(--darker-90); display:flex; align-items:center; margin-bottom:.25rem; gap:.25rem; font-size:15px; } .subscription-benefit > span{ margin-right:.5rem; font-size:1.2rem; } .current-offer-credits { } .current-offer-credits .col-12 { display: flex; align-items: center; } .current-offer-credits img { max-width: 48px; width: auto; height: auto; } .order-success { --check-size: 100px; padding-top: 5rem; padding-bottom: 1rem; max-width: 350px; margin-inline: auto; margin-top: 100px; position: relative; background-color: var(--darker-05); border-radius: 1rem; border: 1px solid var(--darker-10); } .order-success .confirmation-check { width: var(--check-size); height: var(--check-size); left: calc(50% - (var(--check-size) / 2)); top: -130px; position: absolute; background-color: var(--light); border-radius: 50rem; display: flex; align-items: center; justify-content: center; box-shadow: rgb(255 147 0) 0px 0px 22px; } .order-success .confirmation-check span { font-size: 4rem; font-weight: 600; color: var(--orange-2); } .order-success .col-12 { text-align:center; } .order-success h2 { text-align: center; color: var(--orange-2); font-size: 1.2rem; letter-spacing:0; } .order-success h1 { text-align: center; color: var(--black); font-size: 1.6rem; letter-spacing: 0; } .order-success h3 { text-align: left; color: var(--dark-2); font-size: 1rem; } .order-success h4 { color: var(--muted); font-size: 1rem; } .order-success p { text-align: center; margin-inline: auto; color: var(--dark-2); margin-bottom:2rem; } .order-success .product { max-width: 335px; margin-inline: auto; background-color: var(--white); border-radius: .5rem; box-shadow: var(--orange-1) 0px 0px 8px 2px, rgb(248 151 29 / 55%) 0px 1px 0px -1px; } .order-success .product:not(:last-of-type) { margin-bottom:1rem; } .order-success .product :is(.col, .col-auto) { display:flex; align-items:center; } .order-success .product img { width:64px; height:64px; } .order-success .product label { font-size:1.2rem; color:var(--black); margin-bottom:0; font-weight:700; } .order-success .payment-intent{ text-align:center; margin-top:1rem; } .order-success .payment-intent h4 { text-align: center; margin-top: 1rem; margin-bottom:0; color:var(--dark-2); letter-spacing:0; font-size:1.1rem; } .order-success .payment-intent label { font-size:2rem; } .deluxe-s { background: -webkit-linear-gradient(0deg, #4005b5, #b54e03, #4005b5, #b54e03, #4005b5); color: #fff; background-clip: text; text-fill-color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 700% 100%; animation: deluxe-tab-background 10s linear infinite forwards; } @keyframes shimmer { to { background-position: 200% center; } } .hvr { position: relative; overflow: hidden; } .hvr::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgb(0, 0, 0, 0.4); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .hvr:hover::after { opacity: 1; } .payment-component { justify-content: center; width: 100%; margin-inline: auto; padding-top: 1rem; } .payment-component .col-12{ text-align:center; } .payment-component img { height: 20px; width: auto; transition: all ease-in-out 400ms; } .payment-component img:is(:hover, :active) { transform:scale(1.05), rotate(1deg); } .payment-component button { margin-inline:auto; } .line { flex: 1; height: 2px; background-color: var(--darker-30); border-radius: 2rem; } .email-flow{ padding-inline:.5rem; } .email-flow:not(:last-of-type) { margin-bottom:.5rem; } .email-flow h3 { color:var(--black); font-size:1.2rem; text-align:left; margin-bottom:.25rem; } .email-flow p { color: var(--darker-60); text-align: left; font-size:14px; } .email-flow label { color: var(--darker-90); text-align: left; font-size: 14px; font-weight:600; } .email-flow.disabled :is(h3, p, label) { text-decoration: line-through; color: var(--darker-40); } .dealer-dashboard-item p { color:var(--darker-80); } .referral img{ } .referral span { width:32px; height:32px; } .referral h5 { font-size:1.07rem; } .referral p { font-size: 14px; } .form-max-width{ max-width:28rem; } @media (min-width: 0) { :root { --nav-bar-height: 60px; --header-height: 66px; } h1 { font-size: 3rem; } .navbar { padding: .75rem 1rem; max-height: 100vh; overflow-y: auto; } .profile-dropdown { top:unset; bottom:100%; } .index-titles h1 { font-size: 3rem; } .owl-section { padding-block: 8rem; } .date-container .messages .message .col-auto .row p { max-width: 30ch; } .buyer-owl { width: 200px; top: -150px; } .word-cycle { width: 93px; height: 42px; margin-left: .25rem; } .word-cycle__word { font-weight:700; } .notifications-panel { border-radius: .5rem; max-width: unset; } .notifications-panel .notifications { border-radius: 0; } .tab-group { min-height: auto; max-width: 100%; min-width: 320px; } .owl-section .background-image img { max-width: 206px; } .owl-section.bg-gradient:first-of-type::before { position: unset; } .stats .col-auto .vehicle-stat { padding-inline: .5rem; } .stats .col-auto .vehicle-stat label:first-of-type { font-size: .75rem; } .stats .col-auto .vehicle-stat label:last-of-type { font-size: 1.2rem; } .wisdom-page-cta { padding-block: 3rem; } .ac { border-width: 0; } .date-container .messages .message .col-auto .row { max-width: calc(100vw - 2rem); } .date-container{ padding-inline:unset; } .vehicle-summary .title .col{ padding-left:.5rem; } .dealer-pricing .comparison-row:first-of-type .col:nth-child(2){ background-size:90%; } .dealer-pricing .comparison-row .col:nth-child(1) { padding-right: .5rem; padding-left: .5rem; } .dealer-pricing .comparison-row .col:nth-child(2) { margin-right:0; } .navbar-nav { animation: side-opacity-load 400ms ease-in; -webkit-animation: side-opacity-load 400ms ease-in; margin-inline:auto; } .navbar .nav-item a { justify-content: start; padding: 1rem; } .dropdown-menu .dropdown-item { padding: .5rem !important; } .nav-item:not(:last-of-type) { margin-bottom:.5rem; } .dealer-testimonials .wrapper { justify-content: start; } .dealer-testimonials .testimonial{ max-width:90%; } .dealer-signup-cta { padding-block: 2rem; } .progress-steps > div{ max-width:unset; } .progress-steps > div:not(:last-of-type) { } .seller-index-component .owl-in-car img { max-width: 78px; bottom: 8px; } .vehicle-summary .title img { max-height: 52px; width: 52px; } .vehicle-summary .title h3 { font-size: 1.4rem; } .dealer-portal-cta { background-position: -877px 0px; } .dealer-portal-cta h1 { font-size:2.5rem; } .effortless-selling img{ max-height:194px; } .subscription { max-width: 230px; } :is(.owl-left, .owl-right) { height: auto; width: 160px; } .owl-left { bottom: -93px; left: 0; } .owl-right { bottom: -43px; right: 0; top: unset; } .wisdom-page p { line-height: 1.75; } .vehicle-image .placeholder { } .vehicle-image .placeholder img { } .seller-call-to-action-2{ padding-top:2rem; padding-bottom:150px; } .vehicle-offer > .offer-price { } .vehicle-offer.is-deluxe > .offer-price { border-bottom: 1px solid rgb(255 255 255 / 15%); } .bar-left::before, .bar-right::after { width: 12vw; } .bid-bar { position: fixed; z-index: 30; right: 0; left: 0; bottom: 0; margin-inline: 0; } .send-message, .chat-header { position: fixed; } .chat-header{ top:var(--nav-bar-height); } .wizard-buttons { z-index:3; width: 100%; height: 8rem; } .car-svg { width: 134px; height: 100px; display: block; left: calc(50% - 67px); } .owl-in-car{ min-height:200px; } } @media (min-width: 375px) { .index-titles h1{ font-size:3.8rem; } .index-titles h5 { } .seller-testimonial { margin-right: 1rem; min-width: 300px; max-width: 300px; } .owl-in-car { min-height: 200px; } .dealer-portal-cta h1 { font-size: 3rem; } } @media (min-width: 375px) { .index-titles h1 { font-size: 3.7rem; } .seller-testimonial { margin-right: 1rem; min-width: 330px; max-width: 330px; } } @media (min-width: 576px) { h1 { font-size: 3.5rem; } .word-cycle { width: 107px; height: 45px; margin-left: .25rem; } .word-cycle__word { text-align: left; } .nav-link { text-align: center; } .dealer-pricing .comparison-row:first-of-type .col:nth-child(2) { background-size: 70%; } .progress-steps { max-width: unset; } .progress-steps > div:not(:last-of-type) { margin-bottom: 0; } .dealer-signup-cta .progress-steps { max-width: 28rem; } .dealer-portal-cta { } :is(.owl-left, .owl-right) { position: absolute; width: 190px; height: auto; } .wisdom-page p { line-height: 1.75; } .vehicle-offer.is-deluxe > .offer-price { border-color: rgb(255 255 255 / 15%); border-bottom: 0; } } @media (min-width: 768px) { .tab-group { min-height: var(--body-content-height); } .bid-bar { position: unset; } .send-message, .chat-header { position:absolute; } .chat-header { top: 0; } .owl-section{ padding-block:10rem; } .buyer-owl { display: block; width:300px; top:-223px; } .date-container .messages .message .col-auto .row p { max-width: 60ch; } .owl-section .background-image img { max-width: 310px; } .vehicle-summary .stats .col-auto .vehicle-stat { padding-inline: 1.5rem; } .wisdom-page-cta { padding-block: 4rem; } .date-container .messages .message .col-auto .row { max-width: 80vw; } .vehicle-summary .title .col { padding-left: 1rem; } .dealer-pricing .comparison-row .col:nth-child(1) { padding-right: 0; } .dealer-testimonials .testimonial { max-width: 350px; } .index-titles h1 { font-size: 5rem; } .owl-in-car { min-height: 300px; } .word-cycle { height: 61px; width: 127px; } .vehicle-summary .title img { max-height: 72px; width: 72px; } .effortless-selling img { max-height: 290px; } .seller-call-to-action-2 { padding-top: 7rem; } :is(.owl-left, .owl-right) { position: absolute; width: 200px; height: auto; } .owl-left { bottom: -12%; left: 0; } .owl-right { top: -12%; bottom: unset; right: 0; } .border-md-0{ border:0 !important; } .bar-left::before, .bar-right::after { top:-1rem; width: 15vw; } .wizard-buttons { height: 6rem; } .car-svg { width: 234px; height: 200px; display: block; left: calc(50% - 117px); } .mw-md-20rem { max-width: 20rem; } .wisdom-page :is(p, li, dt, dd) { font-size:18px; } .wisdom-page :is(p, dd):not(:last-of-type), .wisdom-page ul { margin-bottom: 25px; } .wisdom-page :is(ol, ul) li:not(:first-of-type) { margin-top: 15px; } } @media (min-width: 992px) { :root { --nav-bar-height: 64px; --header-height: 64px; } .navbar { padding: 0; max-height: 100vh; overflow-y: unset; } .navbar .nav-item a { padding: .75rem; } .rounded-more-lg{ border-radius: 1rem; } .dropdown-menu .dropdown-item{ padding:.5rem; } .profile-dropdown { top: 100%; bottom: unset; } .notifications-panel { max-width: 35rem; } .bar-left::before, .bar-right::after { top: -1rem; width: 25vw; } .dropdown:hover > .dropdown-menu { display: block; margin-top: 0; margin-left: 0; } .dropdown:hover .nav-link svg:last-of-type { transform: rotate(180deg); transition: transform 0.3s ease; } .navbar-content-block.open { display: none; } .navbar.open { height: unset; } .navbar .nav-item span { font-size: 1.2rem; } .navbar .nav-item:not(:last-of-type) { margin-bottom: unset; margin-right: 1rem; } .navbar-nav { max-width:unset; animation: unset; -webkit-animation: unset; } .notification-main-panel { width: 97vw; max-width: 500px; top: 100%; bottom: unset; } .page-container.no-footer { padding-bottom: 0; } .navbar { border-top-left-radius: unset; border-top-right-radius: unset; } .tab-group { min-height: var(--body-content-height); max-width: 17rem; border-right: 1px solid var(--darker-15); } :is(.owl-left, .owl-right) { position: absolute; width: 267px; height: auto; } .owl-left { bottom: 0%; left: 0; } .owl-right { bottom: unset; top: -130px; right: 0; } .dealer-testimonials .wrapper { justify-content: center; } .dealer-portal-cta { background-position-x: -1077px; } .subscription { min-width: 265px; } .important-info { position: sticky; top: 2rem; } .ac { border-right: 1px solid var(--darker-20); } .mw-lg-20rem { max-width: 20rem; } } @media (min-width: 1300px) { .dealer-portal-cta { } } @media (min-width: 1921px) { .dealer-portal-cta { } .seller-testimonial { margin-right: 7rem; min-width: 1000px; max-width: 1000px; } } @media print { * { --black:black; --white:white; box-shadow: none !important; color: black !important; } .block-print{ display: block !important; } .row, .col-12, .col-md-6 { width: 100% !important; max-width:unset !important; } .expand { display: none !important; } .no-print, .navbar, .footer, .sidebar, .skip-nav-link { display: none !important; } .print{ max-height:unset !important; } .content { display: block !important; } .page-break { page-break-before: always; } .avoid-break { page-break-inside: avoid; } body { font-family: Arial, sans-serif; font-size: 12pt; line-height: 1.4; margin: 1cm; padding: 0; color: #000; background: #fff; } a { color: #000; text-decoration: underline; } img { max-width: 100% !important; height: auto !important; } table { width: 100%; border-collapse: collapse; } table { page-break-inside: avoid; page-break-after: auto; } .kmh{ max-height:unset !important; } }