@media (max-width: 767.2px) {
    a.navbar-brand.navbar-brand img {
max-width: 250px!important;
margin-top: 5px!important;
margin-bottom: 5px!important;
    }
}

[name = google_conversion_frame] { position: absolute; }

.banner-container #row-59a2c5b7beca41b1acd815fc31a1c8b9 .container {
padding-top: 0px!important;
padding-bottom: 0px!important;
}


 a.navbar-brand img {   
    margin-bottom: 30px!important;
}

li.menu-heading a {
    font-size: 13px!important;
}

.nav>li>a {
    position: relative;
    display: block;
    padding: 10px 11px;
}

#row-c1e77b51acdd44908fcbe901ff6cc45c >div> .container{
padding-top:0px;
padding-bottom:0px;
}
#row-f2182c167f4b4092b09264785cf5adf2 >div>.container{
padding-top:20px;
}
#row-55f8eeb2c64f4504bb2560ba7d5e9380 >div>.container{
padding-top:0px;
padding-bottom:0px;
}

.myButton {
	box-shadow:inset 0px 39px 0px -24px #e67a73;
	background-color:#e4685d;
	border-radius:4px;
	border:1px solid #ffffff;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	padding:6px 15px;
	text-decoration:none;
	text-shadow:0px 1px 0px #b23e35;
}
.myButton:hover {
	background-color:#eb675e;
}
.myButton:active {
	position:relative;
	top:1px;
}

.form-control {
    color: #000000;
}

.element-type-inventorysearch .form-control {
    background-color: var(--clr-neutral-750);
    color: #fff;
}

#element-e9346e4c418e4871ad8e7314cbc5be41 iframe {
   background: #fff;
}

.bg-color-active {
    background-color: rgb(82 72 72) !important;
}


/*==================================
    SELL YOUR CAR
    START / VIN SCREEN CLEANUP
==================================*/

/* Main first-step panel */
.element-type-valueyourtradeinform .start.step {
    width: 100% !important;
    max-width: 760px !important;

    margin: 0 auto !important;
    padding: 32px !important;

    background: #0d0d0d !important;

    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;

    box-shadow: none !important;
}


/* Remove shadows from everything inside this screen */
.element-type-valueyourtradeinform .start.step,
.element-type-valueyourtradeinform .start.step *,
.element-type-valueyourtradeinform .start.step *::before,
.element-type-valueyourtradeinform .start.step *::after {
    box-shadow: none !important;
}


/*==================================
    TITLE
==================================*/

.element-type-valueyourtradeinform .start.step h3 {
    margin: 0 0 22px !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 25px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;

    text-align: left !important;
}


/*==================================
    VIN / YEAR MAKE MODEL TABS
==================================*/

.element-type-valueyourtradeinform .start.step > .selectedItem-active,
.element-type-valueyourtradeinform .start.step > .deselectedItem-passive {
    min-height: 44px !important;

    margin: 0 8px 18px 0 !important;
    padding: 11px 18px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 6px !important;

    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;

    cursor: pointer !important;

    box-shadow: none !important;
}


/* Active tab */
.element-type-valueyourtradeinform .start.step > .selectedItem-active {
    background: #f2b705 !important;
    border: 1px solid #f2b705 !important;

    color: #111111 !important;
}


/* Inactive tab */
.element-type-valueyourtradeinform .start.step > .deselectedItem-passive {
    background: #161616 !important;

    border: 1px solid rgba(255, 255, 255, 0.18) !important;

    color: rgba(255, 255, 255, 0.82) !important;
}


/* Inactive hover */
.element-type-valueyourtradeinform .start.step > .deselectedItem-passive:hover {
    background: #1d1d1d !important;

    border-color: rgba(255, 255, 255, 0.38) !important;

    color: #ffffff !important;
}


/*==================================
    VIN FIELD
==================================*/

.element-type-valueyourtradeinform .start.step .tab > .border {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}


.element-type-valueyourtradeinform .start.step input[type="text"],
.element-type-valueyourtradeinform .start.step input[type="number"],
.element-type-valueyourtradeinform .start.step select {
    width: 100% !important;
    min-height: 48px !important;

    margin: 0 !important;
    padding: 12px 14px !important;

    background: #171717 !important;

    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;

    color: #ffffff !important;

    font-size: 15px !important;

    box-shadow: none !important;
    outline: none !important;
}


.element-type-valueyourtradeinform .start.step input[type="text"]:focus,
.element-type-valueyourtradeinform .start.step input[type="number"]:focus,
.element-type-valueyourtradeinform .start.step select:focus {
    border-color: #f2b705 !important;
    box-shadow: none !important;
}


.element-type-valueyourtradeinform .start.step input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}


/*==================================
    SELL YOUR CAR BUTTON
==================================*/

.element-type-valueyourtradeinform .start.step input[type="submit"] {
    width: 100% !important;
    min-height: 48px !important;

    margin: 0 !important;
    padding: 13px 20px !important;

    background: #f2b705 !important;

    border: 1px solid #f2b705 !important;
    border-radius: 6px !important;

    color: #111111 !important;

    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;

    box-shadow: none !important;
}


.element-type-valueyourtradeinform .start.step input[type="submit"]:hover,
.element-type-valueyourtradeinform .start.step input[type="submit"]:focus {
    background: #ffd12a !important;
    border-color: #ffd12a !important;

    color: #111111 !important;

    box-shadow: none !important;
}


/*==================================
    SPACING
==================================*/

.element-type-valueyourtradeinform .start.step .separator {
    height: 18px !important;
    margin: 0 !important;
}


/*==================================
    MOBILE
==================================*/

@media (max-width: 767px) {

    .element-type-valueyourtradeinform .start.step {
        max-width: 100% !important;

        padding: 22px 16px !important;

        border-radius: 8px !important;
    }


    .element-type-valueyourtradeinform .start.step h3 {
        font-size: 22px !important;
        margin-bottom: 18px !important;
    }


    .element-type-valueyourtradeinform .start.step > .selectedItem-active,
    .element-type-valueyourtradeinform .start.step > .deselectedItem-passive {
        width: 100% !important;

        margin: 0 0 8px !important;
    }


    .element-type-valueyourtradeinform .start.step input[type="text"],
    .element-type-valueyourtradeinform .start.step input[type="number"],
    .element-type-valueyourtradeinform .start.step select,
    .element-type-valueyourtradeinform .start.step input[type="submit"] {
        min-height: 46px !important;
    }
}

.trade-in-form .layout-container {
    border: none;
    border-radius: 10px;
    padding: 20px 10px;
    box-shadow: none;
}

.sell-intro {
    padding: 45px 20px 0 !important;
}

/*==================================
    FORM SECTION SPACING
==================================*/

.element-type-valueyourtradeinform {
    width: 100% !important;
    max-width: 1050px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* MOBILE */
@media (max-width: 767px) {

    .element-type-valueyourtradeinform {
        padding: 32px 15px 45px !important;
    }
}


/*==========================================
    ANYTIME AUTO GROUP
    SELL US YOUR CAR - GENERATED FORM
==========================================*/


/*==========================================
    FORM ROOT
==========================================*/

.layout-container {
    color: #f5f5f5 !important;
    color-scheme: dark;
}


/* Main headings */

.layout-container .stepTitle {
    margin: 0 0 28px !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 30px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;

    text-align: left !important;
}


.layout-container .step h3 {
    margin: 30px 0 12px !important;

    color: #ffffff !important;

    font-size: 20px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}


/* Normal explanatory text */

.layout-container .step > p,
.layout-container .step > span {
    color: #d0d0d0 !important;

    font-size: 14px !important;
    line-height: 1.55 !important;
}


/*==========================================
    STEP PROGRESS
==========================================*/

.layout-container .col-md-3:has(> .step-viewer) {
    padding-left: 6px !important;
    padding-right: 6px !important;
}


.layout-container .step-viewer {
    min-height: 54px !important;

    padding: 10px 4px 12px !important;

    display: flex !important;
    align-items: center !important;
    gap: 9px !important;

    background: transparent !important;

    border: 0 !important;
    border-bottom: 2px solid #323232 !important;

    color: #8f8f8f !important;

    cursor: default;
}


/* Step number */

.layout-container .step-viewer .dot {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #252525 !important;

    border: 1px solid #474747 !important;
    border-radius: 50% !important;

    color: #a5a5a5 !important;

    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
}


/* Step label */

.layout-container .step-viewer > span {
    color: #8f8f8f !important;

    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
}


/* CURRENT STEP */

.layout-container .step-viewer.bg-color-active {
    background: transparent !important;

    border-bottom-color: #ffffff !important;
}


.layout-container .step-viewer.bg-color-active .dot {
    background: #ffffff !important;

    border-color: #ffffff !important;

    color: #111111 !important;
}


.layout-container .step-viewer.bg-color-active > span {
    color: #ffffff !important;
}


/* COMPLETED STEP */

.layout-container .step-viewer.hand-cursor {
    border-bottom-color: #666666 !important;

    cursor: pointer !important;
}


.layout-container .step-viewer.hand-cursor .dot {
    background: #ffffff !important;

    border-color: #ffffff !important;

    color: #111111 !important;
}


.layout-container .step-viewer.hand-cursor > span {
    color: #e5e5e5 !important;
}


/* Existing platform line no longer needed */

.layout-container .hrSteps {
    display: none !important;
}


/* Give progress area breathing room */

.layout-container .step-viewer + * {
    box-shadow: none !important;
}


/*==========================================
    MAIN FORM LAYOUT
==========================================*/

.layout-container .layout {
    margin-top: 0 !important;
}


.layout-container .layout::before,
.layout-container .layout::after {
    content: "";
    display: table;
    clear: both;
}


.layout-container .layout > .col-md-7 {
    padding-left: 15px !important;
    padding-right: 28px !important;
}


.layout-container .layout > .col-md-5 {
    padding-left: 18px !important;
    padding-right: 15px !important;
}


/*==========================================
    START / VIN AREA
==========================================*/

.layout-container .start.step {
    width: 100% !important;
    max-width: 650px !important;
}


.layout-container .start.step h3 {
    margin-top: 0 !important;
}


/* VIN / YMMT tabs */

.layout-container .start.step .selectedItem-active,
.layout-container .start.step .deselectedItem-passive {
    min-height: 42px !important;

    margin: 0 5px 12px 0 !important;
    padding: 10px 15px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid #444444 !important;
    border-radius: 4px !important;

    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;

    cursor: pointer !important;

    box-shadow: none !important;
}


.layout-container .start.step .deselectedItem-passive {
    background: #151515 !important;

    color: #d2d2d2 !important;
}


.layout-container .start.step .selectedItem-active {
    background: #ffffff !important;

    border-color: #ffffff !important;

    color: #111111 !important;
}


/* Manual-entry notice */

.layout-container .alert-info {
    margin: 10px 0 18px !important;
    padding: 12px 14px !important;

    background: #171717 !important;

    border: 1px solid #383838 !important;
    border-radius: 4px !important;

    color: #c9c9c9 !important;
}


.layout-container .alert-info a,
.layout-container .start.step a {
    color: #ffffff !important;

    text-decoration: underline !important;
}


/*==========================================
    STANDARD FIELD CONTAINERS
==========================================*/

.layout-container .step .border.border-passive,
.layout-container .start.step .border.border-passive {
    width: 100% !important;

    margin: 0 !important;
    padding: 10px 13px !important;

    background: #151515 !important;

    border: 1px solid #383838 !important;
    border-radius: 5px !important;

    color: #ffffff !important;

    box-shadow: none !important;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease !important;
}


/* Focus */

.layout-container .step .border.border-passive:focus-within,
.layout-container .start.step .border.border-passive:focus-within {
    background: #181818 !important;

    border-color: #ffffff !important;
}


/* Field labels generated as <p> */

.layout-container .step .border.border-passive > p,
.layout-container .start.step .border.border-passive > p {
    margin: 0 0 5px !important;
    padding: 0 !important;

    color: #a9a9a9 !important;

    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
}


/*==========================================
    INPUTS / SELECTS / TEXTAREAS
==========================================*/

.layout-container .step input[type="text"],
.layout-container .step input[type="email"],
.layout-container .step input[type="number"],
.layout-container .step select,
.layout-container .step textarea,
.layout-container .start.step input[type="text"],
.layout-container .start.step input[type="email"],
.layout-container .start.step input[type="number"],
.layout-container .start.step select,
.layout-container .start.step textarea {
    width: 100%;

    margin: 0 !important;
    padding: 5px 0 !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    color: #ffffff !important;

    font-size: 15px !important;
    line-height: 1.4 !important;

    box-shadow: none !important;
    outline: none !important;
}


/* Placeholder */

.layout-container input::placeholder,
.layout-container textarea::placeholder {
    color: #777777 !important;

    opacity: 1 !important;
}


/* Select options */

.layout-container select option {
    background: #171717 !important;

    color: #ffffff !important;
}


/* Textareas */

.layout-container textarea {
    min-height: 105px !important;

    padding: 9px !important;

    background: #111111 !important;

    border: 1px solid #383838 !important;
    border-radius: 4px !important;

    resize: vertical !important;
}


/*==========================================
    MILEAGE
==========================================*/

.layout-container .milieage {
    width: 68% !important;
}


.layout-container .milieage-unit {
    width: 32% !important;

    padding-left: 10px !important;

    border-left: 1px solid #3d3d3d !important;
}


/*==========================================
    FIELD SPACING
==========================================*/

.layout-container .step .separator {
    height: 16px !important;

    margin: 0 !important;

    background: transparent !important;

    border: 0 !important;
}


/*==========================================
    RADIO / CHOICE BUTTONS
==========================================*/

.layout-container .step .deselectedItem-active,
.layout-container .step .selectedItem-active {
    min-height: 42px !important;

    margin: 7px 5px 7px 0 !important;
    padding: 10px 17px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 4px !important;

    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;

    cursor: pointer !important;

    box-shadow: none !important;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease !important;
}


/* Unselected */

.layout-container .step .deselectedItem-active {
    background: #151515 !important;

    border: 1px solid #414141 !important;

    color: #d5d5d5 !important;
}


.layout-container .step .deselectedItem-active:hover {
    background: #1d1d1d !important;

    border-color: #737373 !important;

    color: #ffffff !important;
}


/* Selected */

.layout-container .step .selectedItem-active {
    background: #ffffff !important;

    border: 1px solid #ffffff !important;

    color: #111111 !important;
}


/*==========================================
    COLOR PICKERS - STEP 1
==========================================*/

.layout-container .form-control-color-picker {
    min-height: 42px !important;

    padding: 0 12px !important;

    display: flex !important;
    align-items: center !important;

    border: 1px solid #555555 !important;
    border-radius: 4px !important;

    font-size: 14px !important;

    box-shadow: none !important;
}


.layout-container .form-control-color-picker-value {
    width: 100% !important;

    padding-right: 20px !important;

    color: inherit !important;

    font-weight: 600 !important;
}


/* Dropdown */

.layout-container .form-control-color-picker-dropdown {
    overflow: hidden !important;

    background: #111111 !important;

    border: 1px solid #555555 !important;
    border-radius: 5px !important;

    box-shadow: none !important;
}


/*
    Keep each item's generated vehicle color.
    We only clean spacing / borders.
*/

.layout-container .form-control-color-picker-dropdown-item {
    min-height: 38px !important;

    padding: 9px 12px !important;

    display: flex !important;
    align-items: center !important;

    border-width: 0 0 1px !important;
    border-style: solid !important;
    border-color: rgba(255, 255, 255, 0.15) !important;

    font-size: 13px !important;
    font-weight: 600 !important;
}


.layout-container
.form-control-color-picker-dropdown-item:last-child {
    border-bottom: 0 !important;
}


.layout-container
.form-control-color-picker-dropdown-item.selected {
    outline: 2px solid #ffffff !important;
    outline-offset: -3px !important;
}


/*==========================================
    LOAN / LEASE DATE FIELDS
==========================================*/

.layout-container
[alias="BasicInformation"] .display-table {
    width: 100% !important;

    display: flex !important;
    gap: 12px !important;
}


.layout-container
[alias="BasicInformation"] .display-cell {
    width: auto !important;

    flex: 1 1 0 !important;
}


.layout-container
[alias="BasicInformation"]
.display-cell .border {
    width: 100% !important;
}


/*==========================================
    STEP 2 - PHOTO UPLOADER
==========================================*/

.layout-container
[alias="FeaturesPhotos"] .fileUploader-container {
    padding: 12px !important;

    background: #141414 !important;

    border: 1px dashed #4a4a4a !important;
    border-radius: 5px !important;
}


.layout-container
[alias="FeaturesPhotos"] .filepond--root {
    margin: 0 !important;

    color: #ffffff !important;
}


.layout-container
[alias="FeaturesPhotos"] .filepond--panel-root {
    background-color: #141414 !important;

    box-shadow: none !important;
}


.layout-container
[alias="FeaturesPhotos"] .filepond--drop-label {
    color: #cfcfcf !important;
}


.layout-container
[alias="FeaturesPhotos"] .filepond--drop-label label {
    color: #cfcfcf !important;

    font-size: 14px !important;
}


.layout-container
[alias="FeaturesPhotos"] .filepond--label-action {
    color: #ffffff !important;

    font-weight: 700 !important;

    text-decoration: underline !important;
}


.layout-container
[alias="FeaturesPhotos"] .filepond--drip {
    background: #ffffff !important;

    opacity: 0.05 !important;
}


/* Vehicle Features textarea if platform uses manual mode */

.layout-container
[alias="FeaturesPhotos"] textarea:disabled {
    background: #121212 !important;

    color: #9b9b9b !important;

    opacity: 1 !important;
}


/*==========================================
    STEP 3 - CONTACT INFORMATION
==========================================*/

.layout-container
[alias="ContactInfo"] > p:first-child {
    margin: 0 0 20px !important;

    color: #bcbcbc !important;

    font-size: 14px !important;
    line-height: 1.5 !important;
}


/* Legal consent text */

.layout-container .form-legal-consent-area {
    color: #a5a5a5 !important;

    font-size: 12px !important;
    line-height: 1.5 !important;
}


.layout-container .form-legal-consent-area a {
    color: #ffffff !important;
}


/*==========================================
    STEP 4 - CONDITION & HISTORY
==========================================*/

.layout-container
[alias="ConditionHistory"] > p:first-child {
    margin: 0 0 24px !important;

    color: #bcbcbc !important;

    font-size: 14px !important;
    line-height: 1.5 !important;
}


/* Questions */

.layout-container
[alias="ConditionHistory"] > span {
    display: block !important;

    margin: 24px 0 6px !important;

    color: #ffffff !important;

    font-size: 15px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
}


/* Section headings */

.layout-container
[alias="ConditionHistory"] > h3 {
    margin-top: 32px !important;

    padding-top: 0 !important;

    border-top: 0 !important;
}


/*==========================================
    CHECKBOX GROUPS
==========================================*/

.layout-container
[alias="ConditionHistory"] .display-table {
    width: 100% !important;

    display: flex !important;
    gap: 12px !important;

    table-layout: fixed !important;
}


.layout-container
[alias="ConditionHistory"] .display-cell {
    width: auto !important;

    flex: 1 1 0 !important;

    vertical-align: top !important;
}


/* Checkbox row */

.layout-container .checkbox-container {
    position: relative !important;

    min-height: 56px !important;

    margin: 0 0 8px !important;
    padding: 10px 12px 10px 44px !important;

    display: block !important;

    background: #151515 !important;

    border: 1px solid #383838 !important;
    border-radius: 5px !important;

    color: #a9a9a9 !important;

    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;

    cursor: pointer !important;

    box-shadow: none !important;
}


/* Checkbox title */

.layout-container .checkbox-container b {
    color: #ffffff !important;

    font-size: 14px !important;
    font-weight: 600 !important;
}


/* Checkbox square */

.layout-container .checkbox-container .checkmark {
    width: 20px !important;
    height: 20px !important;

    top: 50% !important;
    left: 12px !important;

    transform: translateY(-50%) !important;

    background: #0d0d0d !important;

    border: 1px solid #696969 !important;
    border-radius: 3px !important;

    box-shadow: none !important;
}


/* Checked */

.layout-container
.checkbox-container input:checked ~ .checkmark {
    background: #ffffff !important;

    border-color: #ffffff !important;
}


/* Keep check visible */

.layout-container
.checkbox-container .checkmark::after {
    border-color: #111111 !important;
}


/* Checkbox hover */

.layout-container .checkbox-container:hover {
    background: #1b1b1b !important;

    border-color: #626262 !important;
}


/*==========================================
    CONDITIONAL "ANY DETAILS?" FIELDS
==========================================*/

.layout-container
[alias="ConditionHistory"] .border textarea {
    width: 100% !important;

    min-height: 90px !important;

    margin-top: 4px !important;
}


/*==========================================
    VEHICLE INFORMATION BOX
==========================================*/

.layout-container .details-box {
    width: 100% !important;

    margin: 0 !important;
    padding: 18px 20px !important;

    background: #141414 !important;

    border: 1px solid #383838 !important;
    border-left: 3px solid #ffffff !important;
    border-radius: 5px !important;

    color: #b9b9b9 !important;

    font-size: 13px !important;
    line-height: 1.65 !important;

    box-shadow: none !important;
}


.layout-container .details-box h3 {
    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 17px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
}


.layout-container .details-box hr {
    margin: 14px 0 !important;

    border: 0 !important;
    border-top: 1px solid #383838 !important;
}


.layout-container .details-box b {
    color: #ffffff !important;

    font-weight: 600 !important;
}


/*==========================================
    ERROR / VALIDATION
==========================================*/

.layout-container label.error,
.layout-container .errorMessage,
.layout-container .error {
    color: #ff7272 !important;

    font-size: 12px !important;
    line-height: 1.4 !important;
}


.layout-container
.border:has([aria-invalid="true"]) {
    border-color: #b95151 !important;
}


/*==========================================
    FORM BUTTONS
==========================================*/

.layout-container input.button,
.layout-container .button {
    min-height: 46px !important;

    padding: 12px 24px !important;

    border-radius: 4px !important;

    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;

    letter-spacing: 0.04em !important;

    text-transform: uppercase !important;

    cursor: pointer !important;

    box-shadow: none !important;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease !important;
}


/* Previous */

.layout-container .button.prev {
    background: #151515 !important;

    border: 1px solid #4a4a4a !important;

    color: #ffffff !important;
}


.layout-container .button.prev:hover {
    background: #1f1f1f !important;

    border-color: #777777 !important;
}


/* Next / final submit */

.layout-container .button.next,
.layout-container .start.step .button {
    background: #ffffff !important;

    border: 1px solid #ffffff !important;

    color: #111111 !important;
}


.layout-container .button.next:hover,
.layout-container .start.step .button:hover {
    background: #dddddd !important;

    border-color: #dddddd !important;

    color: #111111 !important;
}


/*==========================================
    RECAPTCHA SPACING
==========================================*/

.layout-container .g-recaptcha {
    margin-top: 24px !important;
    margin-bottom: 8px !important;
}


/*==========================================
    TABLET
==========================================*/

@media (max-width: 991px) {

    /* Keep step tracker compact instead of
       Bootstrap stacking all 4 vertically */

    .layout-container
    .col-md-3:has(> .step-viewer) {
        width: 50% !important;

        float: left !important;

        margin-bottom: 8px !important;
    }


    .layout-container .step-viewer {
        min-height: 50px !important;
    }


    /* Stack form / vehicle summary */

    .layout-container .layout > .col-md-7,
    .layout-container .layout > .col-md-5 {
        width: 100% !important;

        float: none !important;

        padding-left: 15px !important;
        padding-right: 15px !important;
    }


    .layout-container .layout > .col-md-5 {
        margin-top: 24px !important;
    }


    .layout-container .details-box {
        max-width: none !important;
    }
}


/*==========================================
    MOBILE
==========================================*/

@media (max-width: 767px) {

    .layout-container {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }


    .layout-container .stepTitle {
        margin-bottom: 22px !important;

        font-size: 24px !important;
    }


    .layout-container .step h3 {
        margin-top: 26px !important;

        font-size: 18px !important;
    }


    /* 2 x 2 progress layout */

    .layout-container
    .col-md-3:has(> .step-viewer) {
        width: 50% !important;

        padding-left: 4px !important;
        padding-right: 4px !important;
    }


    .layout-container .step-viewer {
        min-height: 48px !important;

        gap: 6px !important;
    }


    .layout-container .step-viewer .dot {
        width: 25px !important;
        min-width: 25px !important;
        height: 25px !important;
    }


    .layout-container .step-viewer > span {
        font-size: 11px !important;
    }


    /* Form columns */

    .layout-container .layout > .col-md-7,
    .layout-container .layout > .col-md-5 {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }


    /* Choice buttons */

    .layout-container .step .deselectedItem-active,
    .layout-container .step .selectedItem-active {
        width: 100% !important;

        margin: 4px 0 !important;
    }


    /* Loan / lease date */

    .layout-container
    [alias="BasicInformation"] .display-table {
        gap: 8px !important;
    }


    /* Condition checkbox columns */

    .layout-container
    [alias="ConditionHistory"] .display-table {
        display: block !important;
    }


    .layout-container
    [alias="ConditionHistory"] .display-cell {
        width: 100% !important;

        display: block !important;
    }


    .layout-container .checkbox-container {
        min-height: 54px !important;
    }


    /* Vehicle summary */

    .layout-container .details-box {
        margin-top: 4px !important;

        padding: 16px !important;
    }


    .layout-container .details-box h3 {
        font-size: 15px !important;
    }


    /* Navigation buttons */

    .layout-container .button.prev,
    .layout-container .button.next {
        width: calc(50% - 5px) !important;

        min-width: 0 !important;

        padding-left: 8px !important;
        padding-right: 8px !important;
    }


    .layout-container .button.prev {
        float: left !important;
    }


    .layout-container .button.next {
        float: right !important;
    }


    /* reCAPTCHA can overflow very small screens */

    .layout-container .g-recaptcha {
        max-width: 100% !important;

        transform-origin: left top !important;
    }
}


/*==========================================
    SMALL MOBILE
==========================================*/

@media (max-width: 360px) {

    .layout-container .g-recaptcha {
        transform: scale(0.90) !important;

        margin-bottom: -7px !important;
    }
}

/*==========================================
    FIX STEP TITLE OVERLAP
==========================================*/

.layout-container #stepViewer-container::after {
    content: "";
    display: block;
    clear: both;
}

.layout-container .stepTitle {
    clear: both !important;

    margin-top: 24px !important;
    margin-bottom: 28px !important;
}

/*==========================================
    STEP 2 - PHOTO UPLOADER FIX
==========================================*/

/* Override the normal generated field styling */
.layout-container
[alias="FeaturesPhotos"]
.border.border-passive.fileUploader-container {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #151515 !important;

    border: 1px solid #3d3d3d !important;
    border-radius: 5px !important;

    overflow: hidden !important;

    box-shadow: none !important;
}


/* Main FilePond area */
.layout-container
[alias="FeaturesPhotos"] .filepond--root {
    width: 100% !important;
    height: 76px !important;

    margin: 0 !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
}


/* REMOVE the Files fieldset completely */
.layout-container
[alias="FeaturesPhotos"] .filepond--data {
    display: none !important;
}


/* Remove FilePond background layers */
.layout-container
[alias="FeaturesPhotos"] .filepond--panel,
.layout-container
[alias="FeaturesPhotos"] .filepond--panel-root,
.layout-container
[alias="FeaturesPhotos"] .filepond--panel-top,
.layout-container
[alias="FeaturesPhotos"] .filepond--panel-center,
.layout-container
[alias="FeaturesPhotos"] .filepond--panel-bottom {
    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
}


/* Center upload text */
.layout-container
[alias="FeaturesPhotos"] .filepond--drop-label {
    height: 76px !important;
    min-height: 76px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #d0d0d0 !important;
}


.layout-container
[alias="FeaturesPhotos"] .filepond--drop-label label {
    margin: 0 !important;
    padding: 0 15px !important;

    color: #d0d0d0 !important;

    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;

    text-align: center !important;
}


/* Browse */
.layout-container
[alias="FeaturesPhotos"] .filepond--label-action {
    color: #ffffff !important;

    font-weight: 700 !important;

    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}


/* Remove interaction overlay */
.layout-container
[alias="FeaturesPhotos"] .filepond--drip {
    display: none !important;
}


/* Keep hidden file input hidden */
.layout-container
[alias="FeaturesPhotos"] .filepond--browser {
    position: absolute !important;
}


/* Error only takes space when it contains text */
.layout-container
[alias="FeaturesPhotos"] .fileUploader-container .error:empty {
    display: none !important;
}