.vrp4-auto {
    margin-bottom: 20px;
}

.vrp4-auto .vrp4-grid {
    display: grid;
    gap: 1rem;
}


@media screen and (max-width: 550px) {
    .desktop_search_bar {
        display: none;
    }
    .mobile_search_bar {
        display: block;
    }
}
@media screen and (min-width: 550px) {
    .desktop_search_bar {
        display: block;
    }
    .mobile_search_bar {
        display: none;
    }
}

.setting_vdp_icon {
    background-size: auto;
    height: 100%;
    background-repeat: no-repeat;
    border: solid 1px rgb(235, 235, 235);
    border-radius: 8px;
    margin-left: 16px;
    padding: 6px 34px 6px 0px;
}

.search_btn_container>.btn {
    padding: 0;
}

.setting_vdp_icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M24 0v24H0V0h24ZM12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036c-.01-.003-.019 0-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.016-.018Zm.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.010-.008l.003-.011l.018-.43l-.003-.012l-.010-.010l-.184-.092Z'/%3E%3Cpath fill='gray' d='M16 15c1.306 0 2.418.835 2.83 2H20a1 1 0 1 1 0 2h-1.17a3.001 3.001 0 0 1-5.66 0H4a1 1 0 1 1 0-2h9.17A3.001 3.001 0 0 1 16 15Zm0 2a1 1 0 1 0 0 2a1 1 0 0 0 0-2ZM8 9a3 3 0 0 1 2.762 1.828l.067.172H20a1 1 0 0 1 .117 1.993L20 13h-9.17a3.001 3.001 0 0 1-5.592.172L5.17 13H4a1 1 0 0 1-.117-1.993L4 11h1.17A3.001 3.001 0 0 1 8 9Zm0 2a1 1 0 1 0 0 2a1 1 0 0 0 0-2Zm8-8c1.306 0 2.418.835 2.83 2H20a1 1 0 1 1 0 2h-1.17a3.001 3.001 0 0 1-5.66 0H4a1 1 0 0 1 0-2h9.17A3.001 3.001 0 0 1 16 3Zm0 2a1 1 0 1 0 0 2a1 1 0 0 0 0-2Z'/%3E%3C/g%3E%3C/svg%3E");
    animation: flash_setting_vdp_icon 2s infinite alternate;
}

@keyframes flash_setting_vdp_icon {
  0% {
    background-color: rgb(248, 248, 248); 
  }
  50% {
    background-color: rgb(224, 232, 235); 
  }
  100% {
    background-color: rgb(248, 248, 248); 
  }

  /* 0% {
    fill: black;
  }
  50% {
    fill: gray;
  }
  100% {
    fill: black;
  } */
}


@media screen and (min-width: 768px) {
    .vrp4-auto .vrp4-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1024px) {
    .vrp4-auto .vrp4-grid {
        gap: 3rem
    }
}

@media screen and (min-width: 1200px) {
    .vrp4-auto .vrp4-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.vrp4-auto .vrp4-card {
    transition: box-shadow .15s ease-in-out;
}

.vrp4-auto .vrp4-card:hover {
    box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 25%)
}

.vrp4-auto .vrp4-card-header {
    /* to align the images we need to set a height to the header, and for that we need to hardcode every line-heights */
    --small-lh: 1.125rem;
    --normal-lh: 1.5rem;
    --title-lh: 2.5rem;
    /* match height to make + disponibility line-height */
    --certification-max-height: calc(var(--title-lh) + var(--small-lh));

    color: inherit;
    border-left: solid 4px var(--primary);
    padding-left: .5rem;
    margin-bottom: 1rem;
    /* 4 .car-info-small + model + car-make's lineheight */
    min-height: calc( 4 * var(--small-lh) + var(--normal-lh) + var(--title-lh)); 
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.vrp4-auto .vrp4-card-header:hover {
    color: inherit;
    text-decoration: none;
}
.vrp4-auto .car-info-small {
    /* using a custom class instead of .class to have the lineheight=1.115rem (used for min-height of header) */
    font-size: .75rem;
    line-height: var(--small-lh);
}

.vrp4-auto .car-certification-container {
    display: flex;
    align-items: center;
}
.vrp4-auto .car-make-container {
    font-size: 1.5rem;
    line-height: var(--title-lh);
    white-space: nowrap;
}

.vrp4-auto .car-make {
    font-weight: bold;
    text-transform: uppercase;
    line-height: var(--normal-lh);
}   
.vrp4-auto .car-make,
.vrp4-auto .car-make:hover {
    color: var(--component-text-color, var(--text-color), #212529)
}

.vrp4-auto .car-year {
    /* we set 50% of the car-make's font-size to align it perfectly top */
    font-size: 50%;
    vertical-align: super;
    line-height: var(--normal-lh);
}

.vrp4-auto .car-trim {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vrp4-auto .car-certification {
    margin-left: auto;
    max-width: 50%;
    max-height: var(--certification-max-height);
    /* position: absolute;
    bottom: 0;
    right: 0;
    height: var(--certification-width);
    width: var(--certification-width); */
}

.vrp4-auto .car-link {
    display: block;
    position: relative; /* for the absoluted .car-overlay-viewMore */
}

.vrp4-auto .car-img-container {
    /* used to overlap both img without using absolute */
    display: grid;
    grid-template-areas: 'stack';
}

.vrp4-auto .car-img-container .car-img,
.vrp4-auto .car-img-container .car-watermark {
    grid-area: stack;
}

.vrp4-auto .car-watermark,
.vrp4-auto .car-img {
    aspect-ratio: 4 / 3; /* belvedaire asked for this ratio */
    width: 100%;
    height: auto;
    object-fit: cover;
}

.vrp4-auto .car-overlay-viewMore {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    color: white;
    z-index: 1;
    font-size: 1.5rem;
    font-weight: bold;
    backdrop-filter: blur(3px);
}

.vrp4-auto .carousel-control-next, 
.vrp4-auto .carousel-control-prev {
    background: none;
    border: none;
}

.car-price-container {
    margin-bottom: 0.7rem;
}

.vrp4-auto .car-price-previous {
    text-decoration: line-through;
    font-size: 1.1rem !important;
    margin-right: .3rem;
}

.vrp4-auto .car-price {
    color: var(--primary);
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.vrp4-auto .card-body .frequency_text {
    font-size: 0.80rem;
}

.vrp4-auto .car-transport-container {
    margin-bottom: 1rem;
}

.vrp4-auto .car-transport {
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    transition: .15s ease-in-out;
}

.vrp4-auto .car-transport:hover {
    cursor: pointer;
    color: var(--primary, #dadada);
}

.vrp4-auto .vrp4-card-footer {
    background-color: transparent;
    border-top: 0;
    padding-top: 0;
    padding-bottom: 1.25rem; /* card-body's padding */
}

.vrp4-auto .car-btn-row {
    --gap: .5rem;
    margin-right: calc( -.5 * var(--gap));
    margin-left: calc( -.5 * var(--gap));
}
.vrp4-auto .car-btn-row>* {
    padding-right: calc( .5 * var(--gap));
    padding-left: calc( .5 * var(--gap));
}

.vrp4-auto .carfax-img {
    max-height: 3rem;
    max-width: 100%;
}

.pagination {
    margin: 25px;
    justify-content: center;
}

.status_watermark_vrp {
    text-align: center;
    z-index: 10;
    object-fit: contain;
    filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.6));
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.warning-block {
    display: flex;
    align-items: center;
    border: 2px solid #f5a623;
    border-radius: 4px;
    background-color: #fff7e6;
    padding: 10px;
}

.warning-icon {
    margin-right: 10px;
    color: #f5a623;
}

.warning-message {
    font-size: 14px;
    color: #333;
    line-height: 1.4;
}