/*Finance Page*/
.finance-page { background: #33363E url(../images/enquire-form-bg.png) no-repeat center; background-size: auto; background-size: cover; padding: 20px 0; backdrop-filter: blur(30px); min-height: 70vh; } 

.finance-page-heading { color: #fff; font-size: 42px; font-weight: bold; margin-bottom: 20px; } 

.finance-page-heading:after { content: ""; display: block; width: 40px; height: 3px; background: #D85D38; margin-top: 20px; } 

.finance-page-heading-2 { color: #D85D38; font-size: 20px; font-weight: bold; margin-bottom: 20px; } 

.finance-car { border-radius: 5px; padding: 5px; background: #fff; margin-bottom: 10px; display: flex; } 

.finance-car-image { width: 170px; margin-right: 10px; } 

.finance-car-details { flex: 1 auto; font-size: 14px; line-height: 30px; } 

.finance-car-title { font-size: 18px; } 

.finance-car-title span { font-size: 16px; } 

.finance-car-finance-options { display: flex; column-gap: 15px; } 

.finance-form { border-radius: 5px; background: #fff; } 

.finance-step-counter { display: flex; align-items: center; font-size: 16px; color: #D85D38; margin-bottom: 10px; padding: 10px; } 

.finance-pagination { margin-left: 20px; display: flex; align-items: center; column-gap: 20px; } 

.finance-pagination span { display: block; width: 16px; height: 16px; border: 1px solid #D85D38; background: #fff; /* cursor: pointer; */
 border-radius: 50%; } 

.finance-pagination span.active { background: #D85D38; } 

.finance-steps { display: flex; overflow: hidden; padding: 10px; } 

.finance-step { width: 100%; flex: 1 auto; } 

.finance-step:not(.active) { display: none; } 

.finance-step.active { display: block; } 

.finance-row { display: flex; column-gap: 20px; margin-bottom: 10px; } 

.ff-input-group { flex: 1 50%; } 

.ff-input-label { font-weight: bold; font-size: 14px; line-height: 32px; } 

.ff-input-value :is(input[type=text], input[type=email],
 input[type=phone], input[type=date], textarea) { background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #EBEDEE; border-radius: 5px; height: 50px; display: block; width: 100%; box-sizing: border-box; padding: 0 10px; font-family: inherit; } 

.ff-input-value :is(textarea) { padding: 5px 10px !important; height: 78px !important; line-height: 22px; resize: none; } 

.ff-input-value :is(input[type=text]:focus,
 input[type=email]:focus, input[type=phone]:focus,
 input[type=date]:focus, textarea:focus) { box-shadow: 0 0 0 .2rem #33363E40; } 

.ff-input-value :is(input.error, textarea.error) { box-shadow: 0 0 0 .2rem #ff000040; } 

.ff-input-value.ff-radio, .ff-input-value.ff-checkbox { display: flex; line-height: 50px; align-items: center; gap: 5px; flex-wrap: wrap; } 

.ff-input-value.ff-radio input:not(:first-of-type) { margin-left: 20px; } 

.finance-row-buttons { margin-top: 20px; } 

.ff-button { /* width: 100%; */
 flex: 1 50%; padding: 0; text-transform: none; } 

.ff-button img { float: right; margin-top: 12px; margin-right: 10px; width: 13px; height: 20px; } 

.finance-track-buttons a { flex: 0 1 auto; padding: 0 20px; } 

.ff-button-back { background: #fff !important; border-color: #7E848B !important; color: #7E848B !important; } 

.ff-button-skip { background: #fff !important; color: var(--secondary-colour) !important; } 

.ff-backlink { font-weight: bold; font-size: 16px; } 

.ff-finish { width: 450px; max-width: 90%; margin-bottom: 20px; } 

.ff-summary { text-align: center; } 

.finance-car-summary .finance-car-image { margin: 0 auto 10px auto; } 

.finance-approval { color: #7CAF22; font-weight: bold; font-size: 24px; margin: 15px 0; } 

/*Car Payment*/
.payment_header { padding: 25px; border-bottom: 1px solid #eaeaea; background: #f9f9fa; } 

.payment_header a { color: #0056b8; font-size: 14px; text-transform: uppercase; font-weight: bold; } 

.payment_header a:before { content: ""; display: inline-block; vertical-align: middle; margin-right: 5px; background: #0056b8; height: 8px; width: 6px; clip-path: polygon(0 50%, 100% 0, 100% 100%); -webkit-clip-path: polygon(0 50%, 100% 0, 100% 100%); } 

.payment_title { font-size: 30px; font-weight: bold; color: #403f3f; margin-bottom: 20px; } 

.payment_banner { background: url(../images/payment-title-desktop.jpg) no-repeat center center; height: 120px; margin-bottom: 20px; } 

.payment_banner div { height: 100%; display: flex; align-items: center; } 

.payment_banner div h1 { text-transform: capitalize; color: #fff; font-weight: bold; } 

.carPaymentTitle { line-height: 50px; font-weight: bold; font-size: 32px; color: #231F20; margin-bottom: 10px; } 

.carPayment_header { display: flex; align-items: flex-start; margin-bottom: 10px; } 

.carPayment_header .cp_car_details_container { flex: 1 0 0; display: flex; flex-direction: column; } 

.cp_car_details { margin-bottom: 20px; } 

.cp_car { width: 420px; margin-right: 15px; } 

.cp_car_image { width: 100%; height: auto; } 

.cp_car_image img { max-width: 100%; max-height: 100%; } 

.cp_car_title { font-size: 20px; margin-bottom: 10px; } 

.cp_car_price { color: #0056b8; font-size: 24px; } 

.cp_car_price span { font-size: 16px; } 

.cp_howitworks { box-sizing: border-box; padding: 15px; border: 1px solid #e1e1e1; flex: 1 0 0; } 

.cp_howitworks_title { font-weight: bold; font-size: 18px; color: #ca0051; margin-bottom: 0px; padding-left: 30px; line-height: 30px; background: url(../images/icon-info.png) left center no-repeat; } 

.cp_howitworks_details { font-size: 14px; line-height: 30px; color: #403f3f; } 

.cp_howitworks_details span { display: inline-block; padding-left: 20px; background: url(../images/icon-tick.png) left center no-repeat; margin-right: 20px; vertical-align: middle; } 

.carPayment { background: #fff; border: 1px solid #e1e1e1; margin-bottom: 20px; color: #0c0c0c; font-size: 14px; clear: both; display: flex; flex-wrap: wrap; } 

.cp_payment_toggles { width: 100%; display: flex; } 

.cp_toggle { border: 1px solid #dcdedf; font-size: 18px; display: flex; width: 50%; flex: 1 auto; height: 55px; align-items: center; justify-content: center; cursor: pointer; background: #dcdedf; color: #0060af; } 

.cp_toggle.checked { border-color: #0060af; background: #0060af; color: #fff; } 

.cp_toggle span { display: flex; width: 18px; height: 18px; margin-right: 8px; flex-grow: 0; flex-shrink: 0; border-radius: 50%; box-sizing: border-box; border: 1px solid #bcbcbc; background: #fff; align-items: center; justify-content: center; } 

.cp_toggle.checked span:after { content: ""; height: 50%; width: 50%; display: block; background: #000; border-radius: inherit; } 

.cp_total { color: #0060af; font-size: 18px; line-height: 24px; width: 100%; padding: 20px 15px; } 

.cp_total b { font-size: 24px; } 

.cp_paymentform { border: 1px solid #e1e1e1; border-width: 1px 0; padding: 10px 15px; width: 100%; display: flex; flex-wrap: wrap; } 

.cp_heading { font-weight: bold; font-size: 24px; line-height: 36px; width: 100%; } 

.cp_subtitle { font-size: 16px; margin-bottom: 20px; width: 100%; } 

.cp_paymentform .cp_input { width: calc(50% - 10px); margin-bottom: 15px; position: relative; background: #f9f9f9; border: 1px solid #dddadb; box-sizing: border-box; } 

.cp_paymentform .cp_input:nth-of-type(2n) { margin-left: 20px; } 

.cp_input .label { font-size: 16px; position: absolute; top: 0; left: 10px; padding: 0 5px; line-height: 50px; display: block; z-index: 1; transition: all 0.3s ease-in; } 

.cp_input .label span { color: #0060af; } 

.cp_input.active { background: #fff; } 

.cp_input.active .label { background: #fff; transform: translate(0px, -9px); line-height: 16px; font-size: 12px; } 

.cp_paymentform input { font-size: 16px; font-weight: bold; height: 50px; box-sizing: border-box; border: 0; background: none; outline: none; padding: 0 15px; display: block; width: 100%; position: relative; z-index: 2; } 

.cp_paymentform .dd_container { height: 36px; line-height: 36px; border-color: #ccc; } 

.cp_tandc { margin: 20px 0; display: flex; align-items: center; color: #666464; } 

.cp_tandc label { padding-top: 0; font-weight: normal; } 

.cp_tandc input { margin-right: 10px; } 

.cp_info { color: #000000; font-size: 14px; line-height: 30px; border-bottom: 1px solid #e1e1e1; width: 100%; padding: 15px; } 

.cp_info b { font-size: 16px; } 

.cp_totals { font-size: 18px; color: #0060af; line-height: 24px; width: 100%; padding: 15px; } 

.inv_button { display: block; width: 200px; text-align: center; border: 0; outline: none; background: #ca0051; color: #fff; font-weight: bold; font-size: 16px; line-height: 50px; font-family: inherit; cursor: pointer; margin-right: 10px; } 

.show_reserve { color: #444; font-weight: normal; } 

.cp_instructions { font-size: 14px; color: #403f3f; line-height: 22px; margin-bottom: 10px; } 

.cp_instructions div:first-child { font-weight: bold; font-size: 18px; margin-bottom: 10px; } 

.cp_instructions img { vertical-align: middle; margin-right: 5px; } 

.cp_payment_section { padding: 15px; width: 100%; } 

.cp_payment_section .cp_heading { font-weight: normal; font-size: 22px; } 

/*---------------------*/
/* XL SCREEN > 1670px */
/*---------------------*/
@media (min-width: 1670px) { } 

/*---------------------*/
/* LARGE SCREEN > 1200 */
/*---------------------*/
@media (min-width: 1200px) and (max-width: 1669px) { } 


/*DESKTOP < 1199px*/
@media (min-width: 992px) and (max-width: 1199px) { } 


/* TABLET & MOBILE */
@media (max-width: 991px) { } 



/* TABLET */
@media (min-width: 768px) and (max-width: 991px) { } 

/* MOBILE */
@media (max-width: 767px) {
 /*Finance Page*/
 .finance-page-heading { font-size: 32px; } 

 .finance-car-title { line-height: 24px; } 

 .finance-car-finance-options { flex-direction: column; } 

 .finance-row { flex-wrap: wrap; row-gap: 15px; } 

 .ff-input-group { flex-basis: 100%; } 
 }