/* Gilroy Font Family Export */
@font-face {
font-family: 'Gilroy';
src: url('../webfonts/gilroy/Gilroy-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Gilroy';
src: url('../webfonts/gilroy/Gilroy-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Gilroy';
src: url('../webfonts/gilroy/Gilroy-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Gilroy';
src: url('../webfonts/gilroy/Gilroy-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/*Common css*/
.tvl-width-50 {
width: 50%;
}
/* Step 0: Vehicle Type Selection */
div#tvl-step-0 {
margin-top: -40px;
padding-bottom: 50px;
}
/* Hero Banner */
.tvl-hero-banner {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
padding: 80px 20px 180px;
background-color: #000;
}
.tvl-hero-banner::after {
content: '';
background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.7) 23%, rgba(0, 0, 0, 0) 60%);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.tvl-hero-content {
margin: 0 auto;
color: #fff;
position: relative;
z-index: 3;
}
#tvl-step-0 .tvl-hero-content h2 {
font-family: 'Gilroy', sans-serif;
font-size: clamp(30px, 8vw, 60px) !important;
font-weight: 800 !important;
line-height: 1 !important;
margin-bottom: 15px !important;
color: #fff !important;
}
.tvl-hero-content .text-green {
color: #bbef00;
}
.tvl-hero-content p {
font-family: 'Gilroy', sans-serif;
font-size: clamp(18px, 1vw, 20px);
font-weight: 600;
line-height: 1.1;
margin: 0;
padding-bottom: 0px;
}
/* Vehicle Cards Grid */
.tvl-vtype-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
margin-top: -160px;
position: relative;
z-index: 10;
}
.tvl-vtype-card {
flex: 0 0 calc(12.5% - 15px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 55px 10px 30px;
background: #fff;
border: none;
border-radius: 12px;
text-decoration: none !important;
color: #333 !important;
transition: all 0.2s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.tvl-vtype-arrow {
display: flex;
}
.tvl-vtype-card:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
transform: translateY(-4px);
}
.tvl-vtype-icon img {
max-width: 100px;
min-height: 80px;
}
.tvl-vtype-label {
font-family: 'Gilroy', sans-serif;
font-weight: 600;
font-size: clamp(18px, 1vw, 20px);
margin: 10px 0px 12px;
}
/* Bottom Graphics */
.tvl-bottom-graphics {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
width: 100%;
margin-top: 40px;
}
.tvl-feature-graphic {
max-width: 1000px;
width: 100%;
height: auto;
}
.main-content img.tvl-feature-graphic {
max-width: 85%;
display: block;
margin: auto;
}
.tvl-redbook-graphic {
width: 100%;
height: auto;
}
.tvl-step-indicator {
text-align: center;
color: #6b7280;
font-size: 15px;
margin-top: 20px;
font-weight: 500;
}
/* Custom resets / general */
.tvl-step-back {
font-size: 14px;
}
.tvl-wrapper {
max-width: 1120px;
margin: 0 auto 50px;
color: #333;
}
#tvl-container:has(#tvl-step-0) {
max-width: unset;
}
.tvl-wrapper select {
appearance: none;
/* Standard */
-webkit-appearance: none;
/* Safari/Chrome */
-moz-appearance: none;
/* Firefox */
background: none;
/* Remove background if needed */
padding: 12px 20px 12px 15px !important;
/* Add spacing if you plan to use a custom icon */
}
.tvl-step {
display: flex;
gap: 32px;
flex-direction: column;
}
.tvl-step.tvl-wizard-step {
gap: 0;
}
.tvl-step.tvl-edit-dashboard .tvl-section-header>h3 {
gap: 10px;
}
.tvl-step.tvl-edit-dashboard .tvl-section-header>h3>i {
top: 0;
}
.tvl-step h2 {
font-size: clamp(25px, 5vw, 34px);
font-weight: 600;
/* margin: 0px !important; */
line-height: 1;
}
/* Unified Template Visibility */
.tvl-active-step {
display: block !important;
}
.tvl-hidden-step {
display: none !important;
}
.tvl-step-wrapper {
width: 100%;
}
/* Unified Template Visibility */
.tvl-active-step {
display: block !important;
}
.tvl-hidden-step {
display: none !important;
}
.tvl-step-wrapper {
width: 100%;
}
.tvl-form-group label {
display: block;
font-size: 14px !important;
color: #000000;
margin-bottom: .2rem;
font-weight: 600;
}
#tvl-step-2 {
gap: 24px !important;
}
#tvl-step-2 h2 {
margin-bottom: 0;
}
#tvl-step-2 .tvl-link-wrapper {
margin: 0px !important;
}
#tvl-step-2 .tvl-car-card {
margin: 0px !important;
}
#tvl-step-2 #tvl-confirm-form button.tvl-primary-btn {
text-transform: initial !important;
}
#tvl-step-2 p:has(.reg-display) {
padding-bottom: 0;
}
#tvl-step-2 strong.reg-display {
text-transform: uppercase;
}
#tvl-step-3 .tvl-form-group label {
font-size: 14px;
font-weight: 600;
color: #000000;
}
.tvl-form-group input:focus,
.tvl-form-group select:focus,
.tvl-custom-textarea:focus {
border: 1px #d1d5db solid;
}
.tvl-custom-textarea {
resize: vertical;
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
max-width: 820px;
border: 1px solid;
font-size: 14px !important;
font-weight: 500;
line-height: 18px;
}
#tvl-step-1-form {
max-width: 320px;
width: auto;
display: grid;
justify-items: start;
gap: 32px;
grid-auto-rows: minmax(min-content, max-content);
}
.tvl-form-group {
width: 100% !important;
}
#tvl-step-1-form .tvl-bike-odometer {
border: 0;
}
/* Alerts */
.tvl-alert {
padding: 15px;
border-radius: 6px;
font-size: 14px;
line-height: 1.5;
}
.tvl-alert-warning {
background-color: #fff8e1;
color: #856404;
}
.tvl-alert-warning a {
color: #bbef00;
text-decoration: none;
}
.tvl-alert-success {
background-color: #e8f5e9;
color: #155724;
}
.tvl-alert-info {
background-color: #e3f2fd;
color: #0c5460;
}
/* Sections and Headers */
.tvl-section {
padding: 30px 0;
border-bottom: 1px solid #eaeaea;
}
.tvl-section-header {
margin-bottom: 20px;
}
.tvl-section-header h3 {
margin: 0 0 5px 0;
font-size: 22px;
line-height: 26.88px;
display: flex;
align-items: center;
color: #4a4a4a;
}
.tvl-check-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: #008a3d;
color: #fff;
border-radius: 50%;
font-size: 11px;
margin-right: 15px;
flex-shrink: 0;
}
.tvl-check-icon.tvl-inactive {
background: #e0e0e0;
}
.tvl-check-icon>i {
top: 0;
}
.tvl-subheading {
margin: 0;
margin-left: 39px;
color: #666;
font-size: 14px;
}
.tvl-selling-content {
margin-left: 39px;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
/* Links and Buttons */
.tvl-link-wrapper {
font-size: 14px;
}
.tvl-link-wrapper>a {
color: #000000;
text-decoration: underline;
}
.tvl-right-link {
color: #bbef00;
text-decoration: none;
font-weight: 500;
}
.tvl-link-wrapper>a:hover,
.tvl-link-wrapper>a:focus,
.tvl-right-link:hover,
.tvl-right-link:focus {
color: #a9d30f;
}
button.tvl-primary-btn {
/* background-color: transparent;
color: #bbef00;
padding: 9.5px 20px;
border: 1px solid #bbef00;
border-radius: 10rem; */
font-size: 14px !important;
/* cursor: pointer;
font-weight: 600; */
width: fit-content;
text-transform: initial !important;
}
.tvl-primary-btn:hover,
.tvl-primary-btn:focus {
background-color: #bbef0014;
border-color: #bbef00;
color: #bbef00;
}
.tvl-btn-large {
padding: 12px 30px;
font-size: 16px !important;
}
.tvl-outline-btn {
background: transparent;
color: #bbef00;
border: 1px solid #bbef00;
padding: 9.5px 20px;
border-radius: 10rem;
font-size: 14px;
cursor: pointer;
}
.tvl-outline-btn:hover {
background: #bbef0014;
color: #bbef00;
border-color: #bbef00;
}
/* Grid Layouts */
.tvl-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-bottom: 15px;
max-width: 750px;
}
.tvl-grid-small-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.tvl-grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
/* Step 2: Confirm Car Card */
.tvl-car-card {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 16px;
margin: 25px 0 35px;
}
.tvl-car-card>h3 {
margin-bottom: 4px;
font-size: clamp(17px, 2vw, 20px);
line-height: 30px;
}
.tvl-car-card>p.desc {
margin-bottom: 0px !important;
padding-bottom: 10px;
font-size: 13px;
}
.tvl-car-card #tvl-confirm-form {
display: flex !important;
flex-direction: column !important;
width: 100%;
}
.tvl-car-card #tvl-confirm-form .tvl-pill-btn {
display: block !important;
width: fit-content;
text-transform: initial !important;
}
.tvl-car-info {
flex: 1;
padding-right: 30px;
display: flex;
flex-direction: column;
}
.tvl-car-info h3#tvl-card-title {
font-size: 24px;
font-weight: 700;
margin: 0 0 10px 0 !important;
color: #111827;
}
.tvl-car-info p#tvl-card-subtitle {
font-size: 15px;
color: #6b7280;
margin: 0 0 20px 0 !important;
}
.tvl-badges {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.tvl-badge {
border: 1px solid #000000;
border-radius: 8px;
padding: 0px 8px;
font-size: 11px;
color: #000000;
background: #f2f5f7;
display: inline-block;
font-weight: 500;
}
.tvl-grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 10px;
}
.tvl-grid-4 strong {
font-size: 15px;
}
.tvl-grid-4 span {
font-size: 13px;
}
.tvl-grid-label {
font-size: 13px;
color: #6b7280 !important;
font-weight: normal !important;
margin-bottom: 4px;
display: inline-block;
}
.tvl-grid-val {
font-size: 16px;
font-weight: 700;
color: #111827;
}
.tvl-car-image {
width: 200px;
flex-shrink: 0;
min-height: 140px;
background: #fcfcfc;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
overflow: hidden;
}
#tvl-card-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.tvl-max-width-350,
.tvl-detail-common,
.tvl-reg-details {
max-width: 360px;
}
/* Input Groups */
.tvl-input-group {
display: flex;
align-items: center;
border: 1px solid #aaa;
border-radius: 4px;
background: #fff;
overflow: hidden;
}
.tvl-input-group input {
border: none !important;
flex: 1;
}
.tvl-input-addon {
padding: 12px 15px;
background: #f8f9fa;
color: #666;
font-size: 16px;
}
.border-left {
border-left: 1px solid #aaaaaa;
}
.border-right {
border-right: 1px solid #aaaaaa;
}
.tvl-input-group .tvl-input-divider {
width: 1px;
align-self: stretch;
background: #aaa;
flex-shrink: 0;
}
.tvl-input-group:focus-within .tvl-input-divider {
background: #bbef00;
}
.tvl-input-group input:focus + .tvl-input-addon,
.tvl-input-group:focus-within {
border-color: #bbef00;
}
/* Suggested Price */
.tvl-suggested-price-box {
margin-top: 25px;
padding-left: 15px;
}
.tvl-suggested-label {
margin: 0;
font-size: 14px;
color: #666;
}
.tvl-suggested-amount {
margin: 5px 0;
font-size: 28px;
font-weight: bold;
}
.tvl-suggested-desc {
margin: 0;
font-size: 13px;
color: #888;
line-height: 1.4;
}
/* Toggles (Yes/No) */
.tvl-toggle-group {
display: flex;
border: 1px solid #ccc;
border-radius: 4px;
overflow: hidden;
}
.tvl-toggle-btn {
flex: 1;
padding: 12px;
text-align: center;
cursor: pointer;
background: #fff;
font-weight: 500;
transition: background-color 0.2s, color 0.2s;
}
.tvl-toggle-btn+.tvl-toggle-btn {
border-left: 1px solid #ccc;
}
.tvl-toggle-btn.active {
background: #bbef00;
color: #fff;
border-color: #bbef00;
}
.tvl-flex-toggle-lbl.active {
background: #bbef00 !important;
color: #fff !important;
border-color: #bbef00 !important;
}
/* Option Boxes */
.tvl-option-item,
.tvl-option-box {
border: 1px solid #eaeaea;
padding: 15px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
color: #333;
}
/* Autocomplete Custom Styling */
.tvl-wizard-header ul {
list-style: none !important;
list-style-type: none !important;
padding: 0 !important;
margin: 0 0 10px 0 !important;
}
.tvl-wizard-header li {
list-style: none !important;
list-style-type: none !important;
background: none !important;
padding: 0 !important;
margin: 0 !important;
font-size: 16px;
color: #333;
}
.tvl-wizard-header li::before,
.tvl-wizard-header li::after {
content: none !important;
display: none !important;
}
#tvl-custom-details-form {
max-width: 455px;
}
#tvl-custom-details-form>.tvl-form-group.tvl-autocomplete-wrapper {
margin-top: 20px;
}
#tvl-step-3 #tvl-detail-odometer-unit {
padding: 11px 15px;
}
.tvl-autocomplete-wrapper {
position: relative;
}
.tvl-autocomplete-list {
position: absolute;
left: 0;
width: 100%;
max-width: 455px;
background: #fff;
border: 1px solid #ccc;
border-top: none;
border-radius: 0 0 4px 4px;
max-height: 150px;
overflow-y: auto;
z-index: 100;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.tvl-ac-item {
padding: 10px 12px;
color: #33373d;
cursor: pointer;
border-bottom: 1px solid #f0f0f0;
font-size: 15px;
}
.tvl-ac-item:hover {
background: #f0f0f0;
}
.tvl-ac-notice {
padding: 10px 12px;
color: #888;
font-size: 14px;
border-bottom: 1px solid #f0f0f0;
background: #fafafa;
cursor: default;
}
/* Error Handling */
.tvl-error {
color: #d93025;
font-size: 13px;
margin-top: 5px;
display: none;
}
.tvl-input-error {
border-color: #d93025 !important;
}
.tvl-toggle-group.tvl-input-error {
border: 1px solid #d93025 !important;
}
.tvl-divider {
border-top: 1px solid #eee;
margin: 30px 0;
}
/* Upload Grid Setup */
.tvl-media-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 145px;
gap: 12px;
margin-bottom: 20px;
}
#tvl-imp-media-grid {
margin-top: 30px;
}
.tvl-media-item,
.tvl-media-empty,
.tvl-media-add,
.tvl-sortable-placeholder {
position: relative;
border-radius: 6px;
overflow: hidden;
background: #fff;
border: 1px solid #eee;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
/* Large 2x2 main slot for main grid only */
.tvl-media-grid>.tvl-is-main {
grid-row: span 2;
grid-column: span 2;
}
/* Ensure imperfection grid is always standard size */
#tvl-imp-media-grid>.tvl-is-main {
grid-row: auto;
grid-column: auto;
}
.tvl-media-item {
background: #000;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
cursor: move;
}
.tvl-media-empty {
background: #fff;
border-color: #eee;
}
.tvl-sortable-placeholder {
background: #fcfcfc;
border: 2px dashed #bbef00 !important;
visibility: visible !important;
height: 100% !important;
width: 100% !important;
}
.ui-sortable-helper {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
opacity: 0.8 !important;
cursor: move !important;
}
.tvl-media-item img,
.tvl-media-item video {
width: 100%;
height: 100%;
object-fit: cover;
background: #000;
}
.tvl-media-item.is-video {
cursor: default;
}
.tvl-media-add {
border: 1px solid #eee;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
background: #fff;
transition: background 0.2s;
}
.tvl-media-add:hover {
background: #fafafa;
}
.tvl-media-add span {
font-size: 12px;
font-weight: 500;
color: #000000 !important;
}
.tvl-imp-note {
font-size: 14px;
color: #666;
margin-top: 15px;
}
#tvl-step-3 .tvl-media-add>i,
#tvl-step-3 .tvl-media-overlay i {
top: 0px;
}
/* Hover Actions on Media Item */
.tvl-media-overlay {
position: absolute;
bottom: 5px;
right: 5px;
display: flex;
gap: 5px;
transition: opacity 0.2s;
}
#tvl-edit-car-dashboard .tvl-media-overlay button.tvl-action-btn>i,
.ui-sortable-helper .tvl-media-overlay button.tvl-action-btn>i {
top: 0;
}
#tvl-container button.tvl-action-btn,
.ui-sortable-helper button.tvl-action-btn {
background: rgba(255, 255, 255, .6);
border: none;
border-radius: 4px !important;
width: 30px;
height: 30px;
display: flex;
padding: 0;
justify-content: center;
align-items: center;
cursor: pointer;
color: #bbef00;
}
.tvl-action-btn:hover {
background: #fff;
}
.tvl-action-btn:hover,
.tvl-action-btn:focus {
color: #bbef00 !important;
}
/* Badge for Video */
.tvl-video-badge {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 40px;
color: rgba(255, 255, 255, 0.8);
pointer-events: none;
}
/* Modal */
.tvl-modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
max-width: 100% !important;
}
.tvl-modal-content {
margin: 5% auto;
width: 80%;
max-width: 800px;
background: #000;
position: fixed;
padding: 20px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 500px;
overflow-y: auto;
/* Custom Scrollbar Styles */
scrollbar-width: thin;
scrollbar-color: #999 #33333300;
}
.tvl-modal-content img,
.tvl-modal-content video {
width: 100%;
height: auto;
max-height: 80vh;
object-fit: contain;
}
.tvl-close-modal {
position: absolute;
top: 20px;
right: 20px;
width: 32px;
height: 32px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s;
z-index: 100;
}
.tvl-close-modal::before,
.tvl-close-modal::after {
content: '';
position: absolute;
width: 24px;
height: 1px;
background-color: #fff;
/* Media modal usually dark background */
transition: background-color 0.2s;
}
.tvl-close-modal::before {
transform: rotate(45deg);
}
.tvl-close-modal::after {
transform: rotate(-45deg);
}
.tvl-close-modal:hover {
transform: scale(1.1);
}
.tvl-search-box {
border: 1px solid #eaeaea;
border-radius: 8px;
margin-top: 20px;
}
.tvl-search-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
border-bottom: 1px solid #eaeaea;
}
.tvl-search-row select {
border: none;
background: transparent;
outline: none;
font-size: 16px;
text-align: right;
}
.tvl-price-input-combined,
.tvl-price-input-wizard {
display: grid;
align-items: stretch;
width: 100%;
max-width: 455px;
border: 1px solid #aaa;
border-radius: 4px;
overflow: hidden;
background: #fff;
}
.tvl-price-input-combined {
grid-template-columns: 50px 1px 1fr 1px 150px;
}
.tvl-price-input-wizard {
grid-template-columns: 160px 1px 1fr;
}
.tvl-price-currency-addon {
display: flex;
align-items: center;
justify-content: center;
background: #f8f9fa;
color: #666;
font-size: 16px;
}
.tvl-price-input-combined select,
.tvl-price-input-combined input,
.tvl-price-input-wizard select,
.tvl-price-input-wizard input {
padding: 12px 15px !important;
border: 0px !important;
border-radius: 0px !important;
background-color: transparent !important;
width: 100%;
height: 100%;
}
.tvl-price-type-select {
appearance: none;
-webkit-appearance: none;
cursor: pointer;
}
.tvl-price-input-combined .tvl-price-divider,
.tvl-price-input-wizard .tvl-price-divider {
width: 1px;
height: 100%;
background: #aaa;
}
.tvl-price-input-combined input[type=text]:focus,
.tvl-price-input-combined select:focus {
box-shadow: None !important;
border-color: transparent !important;
}
.tvl-price-input-combined:focus-within,
.tvl-price-input-wizard:focus-within{
border-color:#bbef00;
}
.tvl-price-input-combined:focus-within .tvl-price-divider,
.tvl-price-input-wizard:focus-within .tvl-price-divider {
background:#bbef00;
}
/* Vehicle Details Menu (Exact Match) */
.tvl-wizard-container {
margin: 0 auto;
}
.tvl-vd-heading {
font-size: 24px;
font-weight: normal;
margin-bottom: 20px;
margin-top: 20px;
color: #333;
}
.tvl-vd-list {
margin-bottom: 20px;
}
.tvl-vd-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
border: 1px solid #eaeaea;
border-radius: 6px;
cursor: pointer;
font-size: 15px;
color: #333;
margin-bottom: 15px;
}
a.tvl-vd-item.tvl-vd-item-link:hover {
background: #f6f6f6;
}
.tvl-vd-label {
color: #888;
}
.tvl-vd-right {
display: flex;
align-items: center;
}
.tvl-vd-val {
font-size: 15px;
}
.tvl-color-purple-dark {
color: #6a3f73;
}
.tvl-color-purple-mid {
color: #8a3070;
}
.tvl-color-blue {
color: #bbef00;
}
.tvl-vd-chevron {
margin-left: 15px;
color: #bbb;
font-size: 14px;
}
.tvl-vd-footer {
margin-top: 30px;
}
.tvl-vd-back {
color: #888;
text-decoration: none;
font-size: 15px;
}
/* Wizard Containers & Globals */
.tvl-wizard-back-wrap {
margin-bottom: 20px;
margin-top: 20px;
}
.tvl-back-link {
color: #000000;
text-decoration: none;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.tvl-vd-back:hover,
.tvl-vd-back:focus,
.tvl-back-link:hover,
.tvl-back-link:focus {
color: #a9d30f;
text-decoration: underline;
}
.tvl-back-link i {
margin-right: 5px;
margin-top: 4px;
font-size: 12px;
}
.tvl-wizard-title {
font-size: 26px;
font-weight: normal;
margin-bottom: 20px;
color: #333;
}
.tvl-wizard-title-large {
font-size: 32px;
margin-bottom: 10px;
line-height: 1.2;
}
.tvl-wizard-title strong {
font-weight: 600;
}
.tvl-wizard-subtitle {
margin-bottom: 20px;
padding: 0;
font-size: 16px;
color: #333;
}
.tvl-wizard-subtitle-light {
color: #555;
margin-bottom: 30px;
font-size: 16px;
text-transform: none;
}
.tvl-wizard-input-wrap {
margin-top: 30px;
position: relative;
max-width: 455px;
}
.tvl-wizard-input {
width: 100%;
padding: 15px !important;
font-size: 18px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
outline: none;
}
.tvl-odometer-input-combined {
display: grid;
grid-template-columns: 1fr 1px 60px;
align-items: stretch;
width: 100%;
border: 1px solid #aaa;
border-radius: 4px;
overflow: hidden;
background: #fff;
box-sizing: border-box;
}
.tvl-odometer-input-combined:focus-within{
border-color: #bbef00;
}
.tvl-odometer-input-combined:focus-within .tvl-odometer-divider{
background: #bbef00;
}
.tvl-odometer-input-combined input.tvl-wizard-input {
border: none !important;
border-radius: 0 !important;
background: transparent;
}
.tvl-odometer-divider {
width: .9px;
height: 100%;
background: #aaa;
}
.tvl-odometer-addon {
display: flex;
align-items: center;
justify-content: center;
background: #f8f9fa;
color: #000000;
font-size: 16px;
}
.tvl-wizard-chevron-pos {
position: absolute !important;
right: 20px;
top: 15px !important;
color: #666;
pointer-events: none;
line-height: 0 !important;
}
.tvl-price-type-wrap .tvl-wizard-chevron-pos {
top: 50% !important;
transform: translateY(-50%);
margin-top: 0 !important;
}
.tvl-thin-chevron {
transition: transform 0.2s ease;
}
.tvl-autocomplete-wrapper.active .tvl-thin-chevron,
.tvl-form-group.active .tvl-thin-chevron,
.tvl-wizard-input-wrap.active .tvl-thin-chevron,
.tvl-filter-item.active .tvl-thin-chevron,
.tvl-wizard-input:focus~.tvl-thin-chevron,
.tvl-price-type-select:focus~.tvl-thin-chevron,
select:focus~.tvl-thin-chevron {
transform: translateY(0%) rotate(180deg) !important;
}
.tvl-wizard-list-dropdown {
border-radius: 0 0 8px 8px;
}
/* Inline styles extracted from templates */
/* Helpers */
.tvl-btn-wrap-left {
text-align: left;
}
.tvl-footer-link-wrap {
margin-top: 50px;
}
.tvl-title-mb-30 {
margin-bottom: 30px;
}
.tvl-title-mb-10 {
margin-bottom: 10px;
font-weight: 600;
}
.tvl-title-mb-5 {
margin-bottom: 5px;
}
/* Form Field Icons & Spacing */
.tvl-input-with-icon-wrap {
position: relative;
}
.tvl-input-with-icon-wrap>i {
position: absolute;
top: 50%;
}
.tvl-input-icon {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #666;
pointer-events: none;
}
.tvl-input-prefix {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
font-weight: bold;
color: #333;
pointer-events: none;
}
.tvl-input-pad-icon {
padding-left: 45px !important;
}
.tvl-input-pad-prefix {
padding-left: 30px !important;
}
/* Custom Form Grid Structural */
.tvl-custom-form-desc {
max-width: 800px;
font-size: 13px;
color: #555;
line-height: 1.4;
margin: 10px 0px 30px;
}
.tvl-custom-form-desc-price {
font-size: 13px;
color: #555;
line-height: 1.5;
margin: 30px 0px;
max-width: 455px;
}
.tvl-sec-check {
color: #d1d5db;
}
.tvl-flex-row-gap {
display: flex;
gap: 10px;
}
.tvl-flex-col {
flex: 1;
}
.tvl-custom-form-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #ddd;
}
.tvl-back-link-no-margin {
margin: 0;
}
/* Flex Toggles replacing standard radio inline styles */
.tvl-flex-toggle-wrap {
display: flex;
padding: 0 !important;
overflow: hidden;
border: 1px solid #ccc;
justify-content: space-between;
align-items: stretch;
}
.tvl-flex-toggle-lbl {
flex: 1;
text-align: center;
padding: 16px 12px;
cursor: pointer;
margin: 0 !important;
line-height: 1.2;
}
.tvl-flex-toggle-border {
border-right: 1px solid #ccc;
}
/* Confirm Car Layout */
.tvl-confirm-subtitle {
color: #555;
margin-bottom: 30px;
}
.tvl-confirm-rego-line {
font-size: 16px;
color: #6b7280;
margin-bottom: 25px;
}
.tvl-confirm-rego-line strong {
color: #111827;
margin-left: 5px;
font-weight: bold;
}
/* Vehicle Details Links */
.tvl-vd-item-link {
display: flex;
text-decoration: none !important;
color: inherit;
}
/* Step 3 Overview */
.tvl-mb-15 {
margin-bottom: 15px !important;
}
.tvl-mb-20 {
margin-bottom: 20px !important;
}
.tvl-mb-30 {
margin-bottom: 30px !important;
}
.tvl-mb-40 {
margin-bottom: 40px !important;
}
.tvl-mb-50 {
margin-bottom: 50px !important;
}
.tvl-mt-15 {
margin-top: 15px !important;
}
.tvl-mt-20 {
margin-top: 20px !important;
}
.tvl-mt-30 {
margin-top: 30px !important;
}
.tvl-mt-40 {
margin-top: 40px !important;
}
.tvl-mt-50 {
margin-top: 50px !important;
}
.tvl-text-center {
text-align: center !important;
}
.tvl-no-border-bottom {
border-bottom: none !important;
}
.tvl-selling-title {
font-weight: bold;
margin-bottom: 5px;
}
.tvl-selling-subtitle {
font-size: 13px;
color: #666;
}
.tvl-option-arrow {
float: right;
color: #999;
}
.tvl-color-success {
color: #0f5132;
}
.tvl-w-200,
.tvl-form-group-half {
max-width: 360px;
}
.tvl-photo-guide-link {
font-size: 14px;
font-weight: 500;
text-decoration: none;
color: #000;
}
.tvl-photo-guide-link:hover,
.tvl-photo-guide-link:active,
.tvl-photo-guide-link:focus {
color: #000;
}
a#tvl-plate-blur-guide-trigger,
a#tvl-imperfections-guide-trigger {
color: #000;
}
.tvl-photo-count-text {
font-size: 14px;
color: #555;
margin-top: 5px;
margin-bottom: 0px !important;
}
.tvl-photo-min-error {
color: #d93025;
font-size: 14px;
margin-top: 8px;
font-weight: normal;
}
.tvl-imp-desc {
font-size: 13px;
color: #666;
margin-bottom: 10px;
}
.tvl-imp-count-text {
font-size: 14px;
color: #555;
margin-top: 15px;
margin-bottom: 0px !important;
}
.tvl-char-count-box {
max-width: 820px;
font-size: 12px;
color: #999;
margin-top: -8px;
padding: 5px;
border: 1px solid #ccc;
border-top: none;
background: #f9f9f9;
}
.tvl-phone-verify-note {
font-size: 12px;
color: #666;
margin-top: 5px;
}
.tvl-checkbox-lbl {
display: flex !important;
align-items: center;
font-weight: normal;
font-size: 14px;
color: #333;
}
.tvl-checkbox-input {
width: 16px;
height: 16px;
margin-right: 10px;
accent-color: #bbef00;
}
.tvl-wizard-btn-wrap {
margin-top: 30px;
}
.tvl-wizard-footer-link {
margin-top: 40px;
font-size: 14px;
color: #555;
}
.tvl-wizard-footer-link a {
color: #000;
text-decoration: none;
}
.tvl-wizard-year-wrap {
margin-top: 30px;
max-width: 300px;
}
.tvl-year-input {
border: none;
text-align: center;
font-size: 20px;
color: #000;
background: transparent;
width: 100%;
outline: none;
font-weight: normal;
}
.tvl-wizard-year-link {
margin-bottom: 30px;
}
.tvl-wizard-year-link a {
color: #000;
text-decoration: none;
font-size: 14px;
}
.tvl-date-group>div {
width: 50%;
}
/* Match Details Box (Variant Layout) */
.tvl-car-match-box {
border: 1px solid #eaeaea;
border-radius: 6px;
padding: 25px;
display: flex;
gap: 20px;
margin-bottom: 15px;
cursor: pointer;
transition: border-color 0.2s;
}
.tvl-car-match-box:hover {
border-color: #bbef00;
}
.tvl-car-match-box.selected {
border-color: #bbef00;
}
.tvl-car-match-check {
padding-top: 2px;
}
.tvl-car-match-check i {
color: #ccc;
font-size: 24px;
transition: color 0.2s;
}
.tvl-car-match-box.selected .tvl-car-match-check i {
color: #bbef00;
}
.tvl-car-match-content {
flex: 1;
}
.tvl-car-match-top {
display: flex;
justify-content: space-between;
margin-bottom: 25px;
}
.tvl-car-match-info {
flex: 1;
padding-right: 20px;
}
.tvl-car-match-title {
font-size: 16px;
margin-bottom: 5px;
color: #333;
font-weight: normal;
}
.tvl-car-match-subtitle {
font-size: 14px;
margin-bottom: 20px;
color: #555;
}
.tvl-car-match-specs {
display: flex;
gap: 40px;
font-size: 13px;
color: #333;
}
.tvl-car-match-spec-lbl {
margin-bottom: 5px;
color: #666;
font-size: 13px;
}
.tvl-car-match-spec-val {
font-weight: 500;
font-size: 14px;
}
.tvl-car-match-bottom-text {
font-size: 14px;
color: #333;
margin-bottom: 15px;
}
.tvl-car-match-view-specs a {
color: #bbef00;
text-decoration: none;
font-size: 14px;
}
/* Global Pill Button Update */
.tvl-pill-btn {
background-color: #bbef00;
color: #000;
padding: 12px 35px;
border: none;
border-radius: 30px;
font-size: 15px !important;
cursor: pointer;
font-weight: 600 !important;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}
.tvl-pill-btn:hover,
.tvl-pill-btn:focus {
background-color: #a9d30f;
}
.tvl-year-box {
border: 1px solid #bbef00;
border-radius: 6px;
padding: 20px;
text-align: center;
background: #f4f8ff;
cursor: pointer;
}
/* Large Selection Blocks */
.tvl-large-opts {
display: flex;
gap: 20px;
margin-bottom: 30px;
margin-top: 30px;
}
.tvl-large-opt {
flex: 1;
max-width: 186px;
padding: 24px 16px;
text-align: center;
border: 1px solid #ccc;
border-radius: 6px;
cursor: pointer;
color: #333;
font-size: 18px;
transition: all 0.2s;
}
.tvl-large-opt:hover {
border-color: #bbef00;
}
.tvl-large-opt.selected {
border-color: #bbef00;
background: #f4f8ff;
color: #bbef00;
font-weight: 500;
}
/* Bulletproof hide for native file inputs in case theme uses display:block !important */
#tvl-container input[type="file"].tvl-hidden-file-input,
#tvl-container input[type="file"]#tvl-photo-input,
#tvl-container input[type="file"]#tvl-video-input,
#tvl-container input[type="file"]#tvl-imp-media-input {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
position: absolute !important;
width: 0 !important;
height: 0 !important;
z-index: -9999 !important;
}
/* Custom Ad Modal & Flow */
.tvl-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
}
.tvl-modal-content {
background: #fff;
border-radius: 8px;
width: 90%;
max-width: 500px;
position: fixed;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.tvl-modal-header {
position: absolute;
right: 20px;
top: 20px;
}
.tvl-modal-close {
position: relative;
width: 32px;
height: 32px;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
box-shadow: none;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s;
}
.tvl-modal-close::before,
.tvl-modal-close::after {
content: '';
position: absolute;
width: 20px;
height: 1px;
background-color: #4a4a4a;
transition: background-color 0.2s;
}
.tvl-modal-close::before {
transform: rotate(45deg);
}
.tvl-modal-close::after {
transform: rotate(-45deg);
}
.tvl-modal-close:hover::before,
.tvl-modal-close:hover::after {
background-color: #000;
}
.tvl-modal-close:hover,
.tvl-modal-close:active,
.tvl-modal-close:focus {
transform: scale(1.1);
background-color: transparent;
}
.tvl-modal-body {
font-size: 14px;
color: #555;
line-height: 1.5;
}
.tvl-pill-btn-outline {
display: inline-block;
border: 1px solid #bbef00;
color: #000000;
padding: .375rem 1.5rem;
border-radius: 10rem;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
background: transparent;
}
.tvl-pill-btn-outline:hover {
background: #bbef0014;
color: #bbef00;
}
/* Custom Flow Grid */
.tvl-custom-sec-header {
font-size: 18px;
font-weight: 500;
color: #333;
margin: 20px 0 15px;
display: flex;
align-items: center;
}
.tvl-custom-sec-div {
height: 1px;
background: #eaeaea;
margin: 30px 0;
}
.tvl-custom-grid {
display: grid;
grid-template-columns: 1fr 1fr;
max-width: 710px;
row-gap: 15px;
}
.tvl-input-sm {
font-size: 15px;
padding: 0px 12px;
}
.tvl-select-wrap {
position: relative;
}
a.tvl-cancel-link {
color: #000000;
}
/* .tvl-select-wrap::after { content: "\f107"; font-family: "FontAwesome"; font-weight: normal; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #999; } */
/* Not Found Step */
#tvl-step-not-found {
padding: 40px 20px;
}
#tvl-step-not-found .tvl-wizard-title {
margin-bottom: 40px;
}
.tvl-text-center {
text-align: center;
}
.tvl-plate-box {
display: inline-block;
padding: 2px;
border: 1px solid #bbef00;
border-radius: 6px;
background: #fff;
}
.tvl-plate-inner {
border: 1px solid #bbef00;
border-radius: 4px;
padding: 5px 30px 10px;
text-align: center;
}
.tvl-plate-state {
font-size: 13px;
color: #bbef00;
margin-bottom: 5px;
}
.tvl-plate-rego {
font-size: 32px;
font-weight: bold;
color: #bbef00;
line-height: 1;
letter-spacing: 1px;
}
.tvl-not-found-actions {
margin-top: 40px;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
/* Build Year Info Modal */
.tvl-by-modal-content {
max-width: 560px !important;
max-height: 88vh;
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
}
.tvl-by-modal-body {
padding: 35px 30px 30px;
overflow-y: auto;
font-size: 14px;
color: #444;
line-height: 1.6;
flex: 1;
}
.tvl-by-modal-title {
font-size: 20px;
font-weight: 600;
color: #111;
margin: 0 0 12px;
padding-right: 30px;
/* room for close btn */
}
.tvl-by-modal-heading {
font-size: 17px;
font-weight: 600;
color: #111;
margin: 24px 0 8px;
}
.tvl-by-modal-list {
margin: 0 0 12px 20px;
padding: 0;
}
.tvl-by-modal-list li {
margin-bottom: 4px;
}
.tvl-by-plate-card {
position: relative;
display: inline-block;
margin: 14px 0 0;
border-radius: 6px;
overflow: visible;
}
.tvl-by-plate-card-last {
margin-top: 12px;
}
.tvl-by-plate-img {
display: block;
width: 100%;
max-width: 340px;
border: 1px solid #e0e0e0;
border-radius: 6px;
background: #f5f5f5;
}
.tvl-by-plate-badge {
position: absolute;
right: -18px;
top: 50%;
transform: translateY(-50%);
font-size: 26px;
line-height: 1;
}
.tvl-by-badge-ok {
color: #2e7d32;
}
.tvl-by-badge-warn {
color: #c62828;
}
/* Info Icon Tooltip */
.tvl-info-icon-trigger {
display: inline-block;
cursor: pointer;
color: #999;
margin-left: 5px;
font-size: 16px;
position: relative;
transition: color 0.2s;
}
.tvl-info-icon-trigger:hover {
color: #bbef00;
}
.tvl-info-icon-trigger[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
background: #fff;
color: #333;
padding: 6px 12px;
border-radius: 4px;
font-size: 13px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 1000;
border: 1px solid #eee;
}
.tvl-info-icon-trigger[data-tooltip]:hover::after {
opacity: 1;
visibility: visible;
}
/* Build Date Guide Modal */
.tvl-bd-modal-content {
max-width: 650px !important;
}
.tvl-bd-modal-body {
padding: 40px;
}
.tvl-bd-modal-title {
font-size: 24px;
font-weight: 500;
margin-bottom: 20px;
}
.tvl-bd-diagram-img {
max-width: 100%;
height: auto;
}
/* Dark Tooltip (for Suggested Price) */
.tvl-tooltip-dark[data-tooltip]::after {
background: #222 !important;
color: #fff !important;
width: 320px;
white-space: normal !important;
text-align: left;
padding: 20px;
line-height: 1.5;
left: 20px !important;
transform: none !important;
bottom: -150px !important;
}
/* Modal Lists & Tips */
.tvl-bd-list {
margin: 20px 0;
padding-left: 20px;
}
.tvl-bd-list li {
margin-bottom: 10px;
}
.tvl-tips-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 15px;
color: #333;
}
.tvl-tips-list {
list-style: disc;
padding-left: 20px;
}
.tvl-tips-list li {
margin-bottom: 8px;
}
/* Privacy Policy Section */
.tvl-privacy-policy-wrap {
padding-top: 25px;
border-top: 1px solid #eaeaea;
margin-bottom: 0px;
}
.tvl-privacy-text {
font-size: 13px;
color: #666;
line-height: 1.6;
margin: 0;
padding-bottom: 0;
}
.tvl-privacy-text a {
color: #000000;
text-decoration: underline;
}
.tvl-error-msg {
color: #e22e2e;
font-size: 14px;
margin-top: 10px;
margin-bottom: 0;
display: none;
font-weight: 400;
}
/* Trailer Specific Styles */
.tvl-feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px 30px;
margin-top: 20px;
}
.tvl-feature-item {
display: flex;
align-items: center;
font-size: 14px;
color: #333;
cursor: pointer;
}
.tvl-feature-item>span {
color: #333;
}
.tvl-feature-item input {
margin-right: 12px;
width: 18px;
height: 18px;
accent-color: #bbef00;
}
/* Odometer Input Styling */
.tvl-odo-input-wrap {
display: flex;
align-items: center;
border: 1px solid #ced4da !important;
border-radius: 8px !important;
overflow: hidden;
background: #fff;
height: 48px;
}
.tvl-odo-unit {
background: #e9ecef;
color: #495057;
padding: 0 15px;
height: 100%;
display: flex;
align-items: center;
border-right: 1px solid #ced4da;
font-size: 14px;
font-weight: 500;
pointer-events: none;
}
.tvl-odo-input-wrap input.tvl-wizard-input {
border: none !important;
border-radius: 0 !important;
flex: 1;
margin: 0 !important;
height: 100% !important;
padding-left: 10px !important;
}
#tvl-custom-full-form .tvl-form-group input:focus+span.tvl-input-group-addon {
border-color:#bbef00;
}
/* Filter Shortcode Styles - Modern Redesign */
.tvl-filter-container {
display: grid;
grid-template-columns: 320px 1fr;
gap: 40px;
margin-top: 30px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
align-items: start;
/* Required for sticky to work correctly */
}
.tvl-filter-sidebar {
position: sticky;
top: 20px;
height: auto;
max-height: calc(100vh - 40px);
overflow-y: auto;
padding-right: 10px;
}
/* Custom Scrollbar for Sidebar */
.tvl-filter-sidebar::-webkit-scrollbar {
width: 6px;
}
.tvl-filter-sidebar::-webkit-scrollbar-track {
background: #f1f1f1;
}
.tvl-filter-sidebar::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 10px;
}
/* Pagination Styling */
.tvl-pagination {
grid-column: 2;
/* Align with results column */
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
margin-top: 40px;
padding: 20px 0;
border-top: 1px solid #eee;
}
.tvl-page-btn {
background: none;
border: none;
color: #3182ce;
font-size: 16px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
transition: color 0.2s, opacity 0.2s;
padding: 10px;
}
.tvl-page-btn:hover:not(:disabled) {
color: #2b6cb0;
}
.tvl-page-btn:disabled {
color: #cbd5e0;
cursor: not-allowed;
opacity: 0.6;
}
.tvl-page-info {
font-size: 16px;
color: #4a5568;
font-weight: 500;
}
.tvl-filter-sidebar {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 4px;
padding: 0;
}
.tvl-filter-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 15px 10px;
border-bottom: 1px solid #e0e0e0;
}
.tvl-filter-header h3 {
margin: 0;
font-size: 20px;
font-weight: 500;
color: #1a202c;
}
#tvl-clear-filters {
background: none;
border: none;
color: #a0aec0;
cursor: pointer;
font-size: 14px;
transition: color 0.2s;
}
#tvl-clear-filters:hover {
color: #4a5568;
}
.tvl-filter-group {
border-bottom: 1px solid #e0e0e0;
}
.tvl-filter-group:last-child {
border-bottom: none;
}
.tvl-filter-group-title {
padding: 20px 15px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
font-size: 18px;
font-weight: 500;
color: #2d3748;
transition: background 0.2s;
}
.tvl-filter-group-title:hover {
background: #fcfcfc;
}
.tvl-filter-title-inner {
display: flex;
align-items: center;
gap: 12px;
}
/* Category Icons */
.tvl-icon-popular::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: url('data:image/svg+xml;utf8,') no-repeat center/contain;
}
.tvl-icon-weight::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: url('data:image/svg+xml;utf8,') no-repeat center/contain;
}
.tvl-icon-engine::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: url('data:image/svg+xml;utf8,') no-repeat center/contain;
}
.tvl-icon-other::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: url('data:image/svg+xml;utf8,') no-repeat center/contain;
}
.tvl-filter-group-title i {
transition: transform 0.3s;
font-size: 14px;
color: #4a5568;
}
.tvl-filter-group.active .tvl-filter-group-title i {
transform: rotate(180deg);
}
.tvl-filter-group-content {
display: none;
padding-bottom: 0;
}
.tvl-filter-group.active .tvl-filter-group-content {
display: block;
}
/* Sidebar List Items (Triggers for Modals) */
.tvl-filter-trigger {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 15px 12px 40px;
cursor: pointer;
font-size: 15px;
color: #4a5568;
transition: background 0.2s, color 0.2s;
}
.tvl-filter-trigger:hover {
background: #f7fafc;
color: #1a202c;
}
.tvl-filter-trigger i {
font-size: 12px;
color: #cbd5e0;
}
/* Modal Styles */
.tvl-filter-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 9999;
display: none;
justify-content: center;
align-items: center;
}
.tvl-filter-modal {
background: #fff;
width: 90%;
max-width: 500px;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
max-height: 85vh;
}
.tvl-fmodal-header {
padding: 20px;
text-align: center;
position: relative;
border-bottom: 1px solid #f0f0f0;
}
.tvl-fmodal-header h4 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #2d3748;
}
.tvl-fmodal-close {
position: absolute;
right: 20px;
top: 20px;
width: 32px;
height: 32px;
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s;
}
.tvl-fmodal-close::before,
.tvl-fmodal-close::after {
content: '';
position: absolute;
width: 20px;
height: 1px;
background-color: #4a4a4a;
transition: background-color 0.2s;
}
.tvl-fmodal-close::before {
transform: rotate(45deg);
}
.tvl-fmodal-close::after {
transform: rotate(-45deg);
}
.tvl-fmodal-close:hover::before,
.tvl-fmodal-close:hover::after {
background-color: #000;
}
.tvl-fmodal-close:hover {
transform: scale(1.1);
}
.tvl-fmodal-body {
padding: 20px;
overflow-y: auto;
flex: 1;
}
.tvl-fmodal-search-wrap {
position: relative;
margin-bottom: 25px;
}
.tvl-fmodal-search-wrap i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #718096;
}
.tvl-fmodal-search-input {
width: 100%;
padding: 12px 15px 12px 40px;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 15px;
outline: none;
transition: border-color 0.2s;
}
.tvl-fmodal-search-input:focus {
border-color: #3182ce;
}
.tvl-fmodal-section-title {
font-size: 14px;
font-weight: 600;
color: #4a5568;
margin-bottom: 15px;
}
.tvl-fmodal-list {
list-style: none;
padding: 0;
margin: 0;
}
.tvl-fmodal-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid #f7fafc;
cursor: pointer;
}
.tvl-fmodal-item:last-child {
border-bottom: none;
}
.tvl-fmodal-item-left {
display: flex;
align-items: center;
gap: 12px;
}
.tvl-fmodal-item label {
font-size: 16px;
color: #2d3748;
cursor: pointer;
margin: 0;
}
.tvl-fmodal-item input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
border: 1px solid #cbd5e0;
border-radius: 4px;
}
.tvl-fmodal-item-right {
display: flex;
align-items: center;
gap: 15px;
}
.tvl-fmodal-count {
font-size: 14px;
color: #3182ce;
font-weight: 500;
}
.tvl-fmodal-arrow-circle {
width: 24px;
height: 24px;
background: #3182ce;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
}
.tvl-fmodal-footer {
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #f0f0f0;
}
.tvl-fmodal-clear {
background: none;
border: none;
color: #3182ce;
font-size: 15px;
font-weight: 500;
cursor: pointer;
}
.tvl-fmodal-search-btn {
background: #3182ce;
color: #fff;
border: none;
padding: 12px 30px;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.tvl-fmodal-search-btn:hover {
background: #2b6cb0;
}
/* Filter Results Grid Layout - Premium 4-Column */
.tvl-filter-results-grid {
display: grid !important;
gap: 25px;
grid-template-columns: repeat(2, 1fr) !important;
width: 100%;
}
.tvl-filter-results-grid .tvl-vehicle-card {
width: 100% !important;
border: 1px solid #ddd;
overflow: hidden;
color: inherit;
display: flex;
flex-direction: column;
}
/* Card Internal Details Styling */
.tvl-filter-results-grid .tvl-vehicle-card .card-content {
margin-top: 0px !important;
padding: 20px;
min-height: 350px;
display: flex;
flex-direction: column;
}
.tvl-list-slide.card-image {
height: 300px;
}
.tvl-vehicle-card .content-top {
display: flex;
justify-content: space-between;
align-items: start;
}
.tvl-vehicle-card .card-title {
text-decoration: none;
font-family: 'Montserrat', sans-serif;
letter-spacing: 0;
font-size: 18px !important;
line-height: 26px;
font-weight: 500 !important;
margin-bottom: 0px;
}
.tvl-filter-results-grid .price-wrap {
margin-top: 10px;
}
.tvl-filter-results-grid .content-top+.price-wrap .card-price span.woocommerce-Price-amount.amount {
font-size: clamp(22px, 1.75vw, 30px);
font-weight: 500;
}
.tvl-filter-results-grid .tvl-vehicle-card .card-details {
border-block: 1px solid #ddd;
padding-block: 15px;
margin-block: 15px;
}
.tvl-filter-results-grid .tvl-vehicle-card .card-content ul {
margin: 0px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
gap: 8px;
list-style: none;
padding: 0;
}
.tvl-filter-results-grid .tvl-vehicle-card .card-details ul li {
width: calc(50% - 5px);
display: flex;
align-items: center;
font-size: 13px;
color: #555;
}
.tvl-filter-results-grid .tvl-vehicle-card .card-details ul li img {
width: 18px;
height: 18px;
margin-right: 8px;
}
.view-details-btn {
margin-top: auto;
}
.tvl-vehicle-card a.view-details-btn {
background: #bbef00;
display: block;
padding: 10px 20px;
text-align: center;
color: #000;
border-radius: 10px;
font-weight: 600;
margin-bottom: 0px !important;
font-size: 14px;
text-decoration: none;
transition: background 0.2s;
}
.tvl-vehicle-card a.view-details-btn:hover {
background: #a3d000;
}
.tvl-vehicle-card .card-image img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
#listGalleryCount {
position: absolute;
top: 10px;
left: 10px;
border-radius: 8px;
padding: 2px 8px 0px 8px;
background: #0000004f;
color: #fff;
font-size: 12px;
z-index: 10;
display: flex;
align-items: center;
gap: 5px;
}
.tvl-filter-results-grid .tvl-vehicle-card .slick-dots {
bottom: 5px !important;
}
.tvl-filter-results-grid .tvl-vehicle-card .slick-dots li {
margin: 0px !important;
}
/* Slick Gallery Arrows Styling */
.tvl-vehicle-card .slick-prev,
.tvl-vehicle-card .slick-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 30px;
height: 30px;
background: #bbef00 !important;
border-radius: 50%;
border: none;
color: #000 !important;
display: flex !important;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s, opacity 0.2s;
opacity: 0.8;
}
.tvl-vehicle-card .slick-prev:hover,
.tvl-vehicle-card .slick-next:hover {
background: #a3d000 !important;
opacity: 1;
}
.tvl-vehicle-card .slick-prev {
left: 10px;
}
.tvl-vehicle-card .slick-next {
right: 10px;
}
.tvl-vehicle-card .slick-prev i,
.tvl-vehicle-card .slick-next i {
font-size: 12px;
}
/* Hide default slick arrows text if any */
.tvl-vehicle-card .slick-prev::before,
.tvl-vehicle-card .slick-next::before {
display: none !important;
}
/* Slick Dots Styling - Unified Lime Green */
.tvl-vehicle-card .slick-dots li button:before {
color: #bbef00 !important;
opacity: 0.4 !important;
font-size: 8px;
}
.tvl-vehicle-card .slick-dots li.slick-active button:before {
color: #bbef00 !important;
opacity: 1 !important;
font-size: 10px;
}
/* Single Listing Styles */
.single-left-col a.btn-prev {
color: #000;
margin-bottom: 20px;
display: inline-block;
}
.list-single-slide .numbertext#listGalleryCount {
left: 20px;
}
#listing-single .new-s-style {
display: grid;
grid-template-columns: 65% 32%;
gap: 3%;
}
#listing-single .spec-item-n {
display: flex;
justify-content: space-between;
}
.tab-func .spec-item-wrap2 span {
width: 70%;
}
.specs2 .spec-item-n span {
width: 50%;
}
#listing-single .new-s-style .single-left-col h3,
#listing-single .new-s-style h3 {
font-size: clamp(15px, 1.2vw, 22px) !important;
}
#listing-single .new-s-style h2 {
font-size: clamp(18px, 1.2vw, 25px);
font-weight: 600;
font-family: "Montserrat";
}
#listing-single .new-s-style .frm_sbmt_seller .mt-row .field p {
padding-bottom: 2px !important;
}
#listing-single .new-s-style .frm_sbmt_seller {
background: #f2f5f7;
padding: 20px 30px;
margin: 25px 0px;
border-radius: 10px;
}
#list-single-banner>img {
width: 100%;
}
.listing_info_top.single {
gap: 5px;
display: flex;
align-items: center;
}
.listing_info_top.single ul {
display: flex;
align-items: center;
}
.listing_info_top.single img {
padding-right: 5px;
}
.listing_info_top.single i {
font-size: 12px;
color: #596169;
}
.card-details.single ul {
padding-top: 25px;
display: grid;
gap: 20px;
margin: 0px;
grid-template-columns: repeat(4, 1fr);
}
.card-details.single ul li {
list-style-type: none;
}
.card-details.single .info_value {
font-weight: 500;
font-size: 90%;
padding-bottom: 0px;
margin-bottom: 0px;
}
#listing-single {
max-width: 1400px !important;
padding: 50px 20px 30px !important;
margin: auto;
overflow: hidden;
}
#listing-single .header2 h1 {
font-size: 24px;
margin-bottom: 5px;
line-height: 1;
}
#listing-single .header2 p {
display: flex;
gap: 5px;
align-items: flex-start;
margin-top: 10px;
}
#listing-single .header2 p img {
padding-top: 5px;
}
#listing-single .price {
font-size: 24px !important;
font-weight: bold;
background: #bbef00;
padding: 30px;
border-radius: 10px;
}
#listing-single .content {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.listing-single-desc {
margin: 30px 0px;
}
#listing-single .car-image {
width: 100%;
height: auto;
border-radius: 8px;
background: #ddd;
display: flex;
align-items: center;
justify-content: center;
min-height: 300px;
margin-bottom: 10px;
}
#listing-single .details {
flex: 2;
min-width: 300px;
}
#listing-single .specs2 {
display: grid;
grid-template-columns: 3fr 1fr;
gap: 10px;
display: none;
}
.spec-item-wrap2 {
display: flex;
flex-direction: column;
gap: 10px;
}
#listing-single .spec-item {
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
border-left: 4px solid #bbef00;
}
#listing-single .spec-label {
font-weight: bold;
color: #7f8c8d;
font-size: 14px;
margin-bottom: 5px;
}
#listing-single .spec-value {
font-size: 18px;
color: #2c3e50;
}
#listing-single .listing-contact-info {
background: #f2f5f7 !important;
padding: 20px;
border-radius: 8px;
}
#listing-single .contact-item {
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
#listing-single .contact-item span {
width: 70%;
color: #000 !important;
}
#listing-single .contact-icon {
margin-right: 10px;
color: #3498db;
font-weight: bold;
min-width: 120px;
}
.list-single-slide {
display: none;
}
.list-single-slider-wrap img {
vertical-align: middle;
width: 100%;
height: auto;
object-fit: contain;
transition: transform 0.3s ease;
}
#listing-lightbox-modal,
#photosModal {
background-color: rgba(0, 0, 0, 0.9);
}
#listing-lightbox-modal .listing-modal-content,
#photosModal .listing-modal-content {
background: unset;
padding: 0;
border-radius: 0;
max-width: unset;
width: unset;
overflow-y: unset;
border: unset;
max-height: unset;
}
#photosModal .slideshow-container .next,
#photosModal .slideshow-container .prev {
background: #dddddd40;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
#photosModal .slideshow-container .next>i,
#photosModal .slideshow-container .prev>i {
color: #fff;
top: 0;
}
#photosModal .close-modal {
float: unset;
margin-top: unset;
}
div#tasImageGalleryBtnWrap {
width: 100%;
padding: 15px 15px 0px;
position: absolute;
top: 0;
color: #fff;
display: flex;
justify-content: space-between;
}
.list-single-slider-wrap {
max-width: 1000px;
position: relative;
margin: 20px auto;
}
.list-single-slider-wrap .list-prev,
.list-single-slider-wrap .list-next {
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -22px;
color: #000 !important;
font-weight: bold;
font-size: clamp(10px, 1.2vw, 18px) !important;
transition: 0.6s ease;
border-radius: 100px;
width: clamp(25px, 1.5vw, 40px) !important;
height: clamp(25px, 1.5vw, 40px) !important;
user-select: none;
display: flex;
justify-content: center;
align-items: center;
background-color: #bbef00;
opacity: 1;
}
.list-single-slider-wrap .list-prev {
left: 10px;
}
.list-single-slider-wrap .list-next {
right: 10px;
}
.list-single-slider-wrap .list-prev:hover,
.list-single-slider-wrap .list-next:hover {
opacity: .7;
}
.list-single-slider-wrap .numbertext {
color: #fff;
font-size: 12px;
padding: 0px 10px;
position: absolute;
top: 10px;
left: 10px;
background: #bbef00;
border-radius: 8px;
}
.list-single-slider-wrap .list-fade {
animation-name: listFade;
animation-duration: 1.5s;
}
@keyframes listFade {
from {
opacity: .4;
}
to {
opacity: 1;
}
}
#listing-single .header2 {
margin-bottom: 0px;
}
.mt-tabcontent {
display: none;
padding: 20px 0px;
}
a.mt-tablinks {
background-color: f5f5f5 !important;
float: left;
border: none;
border-radius: 0px !important;
outline: none;
cursor: pointer;
padding: 10px 15px;
transition: 0.3s;
font-size: 14px;
color: #000;
font-weight: 500;
}
.mt-tab {
overflow: hidden;
border-bottom: 2px solid #bbef00;
}
.mt-tab a.active {
background: #bbef00;
}
/* ==========================================================================
Responsive CSS
========================================================================== */
@media (max-width: 1400px) {
.tvl-filter-results-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 1100px) {
.tvl-filter-results-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 1024px) {
.tvl-vtype-card {
flex: 0 0 calc(25% - 15px);
}
img.tvl-redbook-graphic {
max-width: 85%;
display: block;
margin-left: auto;
margin-right: auto;
}
}
@media screen and (max-width: 992px) {
button.tvl-primary-btn {
width: 100% !important;
}
.tvl-car-card #tvl-confirm-form .tvl-pill-btn {
width: 100% !important;
}
}
@media (max-width: 900px) {
.tvl-filter-container {
grid-template-columns: 1fr;
}
.tvl-filter-sidebar {
margin-bottom: 30px;
}
}
@media (max-width: 768px) {
.tvl-feature-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.tvl-car-match-top {
flex-direction: column;
gap: 20px;
}
.tvl-bottom-graphics {
margin-top: 5px;
}
.tvl-filter-results-grid {
grid-template-columns: 1fr !important;
}
.tvl-vtype-grid {
margin-top: 0;
gap: 10px;
}
.tvl-hero-banner {
padding: 45px 20px 40px;
}
.tvl-vtype-card {
flex: 0 0 calc(25% - 10px);
padding: 15px 5px 10px;
border-radius: 8px;
}
.tvl-vtype-arrow svg {
width: 20px;
height: 20px;
}
.tvl-vtype-label {
margin: 0 0 5px !important;
}
.tvl-vtype-icon img {
max-width: 50px;
min-height: 35px;
}
.tvl-hero-content p {
font-size: clamp(14px, 1vw, 15px);
}
.tvl-vtype-label {
font-size: clamp(13px, 1vw, 14px);
}
img.tvl-redbook-graphic,
.main-content img.tvl-feature-graphic {
max-width: 100%;
}
}
@media (max-width: 480px) {
.tvl-feature-grid {
grid-template-columns: 1fr;
}
}
@media (min-width: 449px) and (max-width: 767px) {
.tvl-media-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 448px) {
.tvl-media-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) {
.tvl-custom-grid {
column-gap: 20px;
}
}
@media (min-width: 1000px) {
.tvl-hero-content {
padding: 0 85px;
}
}
@media (min-width: 1025px) {
.tvl-redbook-graphic {
display: block;
max-width: calc(100% - 33% * 2) !important;
margin: auto;
}
}
/* Single Listing Responsive Styles */
@media (min-width: 768px) {
#list-single-banner {
margin-top: 50px;
}
#list-single-banner>img:last-child {
display: none;
}
.header2.phone {
display: none;
}
#photosModal .slideshow-container .prev {
left: -50px;
}
#photosModal .slideshow-container .next {
right: -50px;
}
}
@media (max-width: 767px) {
#tvl-custom-price-form .tvl-price-input-wizard,
#tvl-custom-details-form,
#tvl-step-1-form {
max-width: 100% !important;
}
.tvl-odometer-grid,
.tvl-custom-grid,
.tvl-grid-2 {
grid-template-columns: 1fr !important;
gap: 15px !important;
}
.tvl-grid-2.caravan-price-section,
.tvl-grid-2.boat-price-section,
.tvl-grid-2.bike-location-section,
.tvl-grid-2.bike-price-section,
.tvl-grid-2.jetski-price-section,
.tvl-grid-2.car-location-section,
.tvl-grid-2.car-price-section,
.tvl-grid-2.common-location-section,
.tvl-grid-2.common-price-section,
.tvl-grid-2.buggy-price-section,
.tvl-grid-2.trailer-price-section {
grid-template-columns: 1fr;
gap: 15px;
}
.tvl-price-input-combined {
max-width: 100%;
}
#list-single-banner {
padding: 30px 20px 0px;
}
#list-single-banner>img:first-child {
display: none;
}
#listing-single .listing-contact-info {
font-size: 14px;
}
.header2.desktop {
display: none;
}
.top-pricing-wrapper.desktop {
display: none;
}
#listing-single .new-s-style {
grid-template-columns: auto;
gap: 20px;
}
.list-single-slider-wrap {
margin-top: 15px;
}
.card-details.single ul {
grid-template-columns: repeat(2, 1fr);
margin-top: 15px;
border-block: 1px solid #ddd;
padding: 15px 10px;
}
.mySlides img {
height: 350px;
}
#listing-single .content {
flex-direction: column;
}
#listing-single .header2 {
padding: 30px 0px 15px;
}
#listing-single .new-s-style .price {
margin-bottom: 0px;
display: inline-block;
width: 60%;
font-size: 17px !important;
padding: 15px;
}
#listing-single .specs2 {
grid-template-columns: 1fr;
}
#listing-single {
padding: 30px 0px !important;
}
#listing-single .single-right-col,
#listing-single .single-left-col .list-single-slider-wrap~div {
padding-left: 20px !important;
padding-right: 20px !important;
}
.list-single-slider-wrap .list-next,
.list-single-slider-wrap .list-prev {
display: none !important;
}
.single-left-col a.btn-prev {
margin-left: 20px;
}
#photosModal .slideshow-container .next,
#photosModal .slideshow-container .prev {
display: none;
}
}
@media (min-width: 480px) and (max-width: 767px) {
.card-details.single ul {
gap: 10px;
}
}
@media (max-width: 480px) {
.card-details.single ul li {
width: 100%;
}
.card-details.single .info_content p:not(.info_value) {
display: none;
}
#listing-single .header2 h1 {
font-size: 20px;
}
#listing-single .price {
font-size: 24px;
}
#listing-single .spec-value {
font-size: 16px;
}
}
@media only screen and (max-width: 300px) {
.list-single-slider-wrap .list-prev,
.list-single-slider-wrap .list-next {
font-size: 11px;
}
}
.mt_container.tasmania-listing select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url('https://memberstasmania.com.au/wp-content/uploads/2025/12/new-arrow.svg');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 20px;
padding-right: 40px;
}
.mt_container.tasmania-listing .mt_container_wrapper {
max-width: 1600px !important;
}
.mt_container.tasmania-listing .step_wrapper {
max-width: 1000px !important;
}
.tasmania-listing input,
.tasmania-listing select,
.tasmania-listing textarea {
border-radius: 4px !important;
padding: 10px 20px;
}
#reg-untill-wrap,
#reg-untill-wrap .form-group {
width: 100%;
overflow: hidden;
}
.tasmania-listing input#carRegUntil {
max-width: 100%;
width: 100%;
color: #000 !important;
}
/* Add this to your existing CSS */
.tasmania-listing input#carRegUntil {
max-width: 100%;
width: 100%;
color: #000 !important;
/* Add these properties */
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* Specifically target date inputs in Safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.tasmania-listing input[type="date"] {
max-width: 100%;
width: 100%;
min-height: 44px;
/* Better touch target on mobile */
}
/* Fix for iOS Safari specifically */
@supports (-webkit-touch-callout: none) {
.tasmania-listing input#carRegUntil {
width: 100% !important;
max-width: 100% !important;
}
}
}
/* Add this to ensure the wrapper contains the input properly */
#reg-untill-wrap {
width: 100%;
overflow: hidden;
position: relative;
}
#reg-untill-wrap .form-group {
width: 100%;
overflow: hidden;
position: relative;
}
/* Alternative: Use a more aggressive approach if needed */
.tasmania-listing input[type="date"]::-webkit-date-and-time-value {
text-align: left;
}
/* Prevent iOS zoom on focus */
.tasmania-listing input[type="date"] {
font-size: 16px;
/* Prevents iOS zoom */
}
.tasmania-listing button {
padding: 6px 22px !important;
font-size: 13px;
font-weight: 300 !important;
border-radius: 10px !important;
}
.tasmania-listing .buttons,
.tasmania-listing .progress-bar {
margin-top: 0px;
}
.tasmania-listing .form-group.cstm-btn input {
padding-left: 50px;
}
.success-page .terms i {
color: green;
margin-right: 5px;
}
.success-page.step_wrapper h4,
.tasmania-listing .terms>div>label.agreeTerms {
text-align: center;
}
.terms+.error+.btn-submit {
display: flex;
margin: 0 auto;
}
/*btm-part progress*/
.tasmania-listing .step_wrapper .form-group {
margin-block: 5px 25px;
}
.overview-listing .overview-wrap {
display: flex;
gap: 4%
}
.overview-listing .overview-listing {}
.overview-listing .left {
width: 50%;
}
.overview-listing .right {
width: 50%;
}
.overview-listing .overview-block-item {
padding: 20px;
border-bottom: 2px solid #ddd;
}
.list-overciew-title {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
}
.overview-block-item button.view-btn {
text-align: center;
margin-left: auto;
display: block;
}
.overview-listing .list-overciew-title i {
color: green;
margin-right: 5px;
}
.overview-listing p.overview-item {
margin-left: 30px;
}
.overview-block-one-item {
display: flex;
}
.overview-block-two-item {
margin-top: 40px;
}
.list-overciew-title h5 {
font-size: clamp(18px, 1.3vw, 22px) !important;
}
.list-overciew-title span {
color: #0f78ad;
font-weight: 500;
}
p.overview-item.location {
margin-top: 20px;
}
span#overview-vehicle-detail {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.mt_container.tasmania-listing div#step1 {
margin-top: 10px;
}
textarea#listingDescriptionUpdate {
line-height: 1.5;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450;
border: none;
background: transparent;
font-size: 14px;
margin-top: 0px;
}
.mail-wrap {
word-break: break-all;
}
.ui-loader {
display: none !important;
}
.query_form2 span.wpcf7-not-valid-tip {
background: transparent;
color: #000 !important;
box-shadow: none;
font-size: 85%;
font-weight: 500;
}
input.wpcf7-form-control.wpcf7-submit {
font-weight: 500 !important;
padding: 12px 20px;
display: block;
width: 100%;
}
.query_form2 label {
font-weight: 500;
}
.query_form2 .mt-row input,
.query_form2 textarea {
margin-block: 5px;
background: #fff;
max-height: 80px;
line-height: 1.4;
}
/* Style the tab */
.mt-tab {
overflow: hidden;
border-bottom: 2px solid #bbef00;
}
/* Style the buttons inside the tab */
body[data-button-style*="slightly_rounded"] .mt-tab a {
background-color: f5f5f5 !important;
float: left;
border: none;
border-radius: 0px !important;
outline: none;
cursor: pointer;
padding: 10px 15px;
transition: 0.3s;
font-size: 14px;
color: #000;
font-weight: 500;
}
/* Change background color of buttons on hover */
.mt-tab a:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.mt-tab a.active {
background: #bbef00;
}
/* Style the tab content */
.mt-tabcontent {
display: none;
padding: 20px 0px;
}
.vehicle-card-wrap .price-wrap {
margin-top: 10px;
}
/* sort overview css */
body[data-button-style="slightly_rounded_shadow"] .sort-listing-right a.nectar-button:hover,
body[data-button-style="slightly_rounded_shadow"] .sort-listing-right button.nectar-button:hover,
body[data-button-style="slightly_rounded_shadow"] .sort-listing-right a.nectar-button:focus,
body[data-button-style="slightly_rounded_shadow"] .sort-listing-right button.nectar-button:focus {
box-shadow: initial !important;
transform: translateX(0px) !important;
color: #000 !important;
}
.listing-active_sold_buttons a,
.listing-active_sold_buttons button {
margin-inline: 8px;
}
#listing-limit-notification-wrap>a,
#sortModal button.sort-submit {
border: 2px solid #bbef00 !important;
padding: 8px 20px !important;
margin-top: 10px !important;
border-radius: 12px !important;
font-weight: 500 !important;
font-size: 13px !important;
background: transparent !important;
color: #000;
}
/* overview pop edit css */
#overview-content .select-wrapper select {
margin-block: 7px;
}
#overview-content div#otherBodyGroupClone label,
#overview-content .form-group.cstm-btn {
margin-top: 10px !important;
}
div#updateBtnWrap {
margin-top: 50px;
}
.vehicle-card-wrap .listing-card .card-details ul li,
.vehicle-location ul li {
font-size: 14px;
}
/* sort css */
#mtmListingMakeSearch,
#mtmListingModelSearch {
opacity: .5;
}
/* Wrapper one: always 3 columns on desktop, 1 column on mobile */
.mtm-list-sort-submit-wrap {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.list_search_wrapper_one,
.list_search_wrapper_two {
margin: auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 20px;
}
.list_search_wrapper_one select,
.list_search_wrapper_two select {
appearance: none;
/* remove default arrow */
-webkit-appearance: none;
-moz-appearance: none;
padding: 0.5rem 5rem 0.5rem 0.5rem;
/* extra right padding for custom arrow */
background: url('https://memberstasmania.com.au/wp-content/uploads/2026/02/select-icon-down.svg') no-repeat right 0.6rem center;
background-size: .8rem;
}
.list-car-body-types.slick-initialized.slick-slider {
max-width: 800px;
margin: 30px auto;
}
.list-car-body-types.list-body-taxonomy-hide-show.slick-initialized.slick-slider {
visibility: hidden;
margin: 0px auto;
}
.list-car-body-types .body-type-item {
text-align: center;
}
.list-car-body-types .body-type-item img {
max-width: 90px !important;
height: auto !important;
display: block;
margin: 0 auto 5px !important;
}
.list-car-body-types .body-type-item p {
font-size: 13px;
color: #000;
}
.listing-card a.view-details-btn {
background: #bbef00;
display: block;
padding: 8px 20px;
text-align: center;
color: #000;
border-radius: 10px;
font-weight: 600;
margin-bottom: 0px !important;
font-size: 14px;
}
.listing-card .content-top {
flex-direction: column;
}
.listing-card .content-top>p {
margin-top: -3px;
margin-bottom: 5px !important;
}
#sortModal.listing-modal .close-modal {
float: right;
font-size: 40px;
cursor: pointer;
margin-top: -10px;
margin-right: -10px;
}
#sortModal .listing-modal-content {
border: none;
}
.listing-modal-content {
max-height: 450px;
}
#sortBtnWrap .dropdown {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
#sortBtnWrap .dropdown input {
width: 100%;
box-sizing: border-box;
padding: 8px;
}
#sortBtnWrap .dropdown .options {
position: absolute;
top: 100%;
left: 0;
right: 0;
max-height: 200px;
overflow-y: auto;
border: 1px solid #ccc;
background: #fff;
display: none;
z-index: 999;
}
#sortBtnWrap .dropdown .option {
padding: 8px;
cursor: pointer;
}
#sortBtnWrap .dropdown .option:hover {
background: #f0f0f0;
}
/* Chrome, Edge, Safari */
.listing-modal-content::-webkit-scrollbar {
width: 6px;
/* thin vertical scrollbar */
height: 6px;
/* thin horizontal scrollbar */
}
.listing-modal-content::-webkit-scrollbar-track {
background: transparent;
/* no track background */
}
.listing-modal-content::-webkit-scrollbar-thumb {
background: #ddd;
/* thumb color */
border-radius: 8px;
/* rounded corners */
border: none;
/* no border around thumb */
}
.listing-modal-content::-webkit-scrollbar-thumb:hover {
background: #ccc;
/* slightly darker on hover */
}
.listing-modal-content::-webkit-scrollbar-button {
display: none;
/* hide arrows/buttons */
width: 0;
height: 0;
}
/* Firefox */
.listing-modal-content {
scrollbar-width: thin;
/* thinner scrollbar */
scrollbar-color: #ddd transparent;
/* thumb | track */
}
#overviewModal .select-wrapper {
margin-bottom: 15px;
}
#overviewModal button#overview-update-btn {
margin-top: 20px;
}
div#sortBtnWrap button {
background-color: transparent !important;
border: 1px solid #bbef00;
border-radius: 10px !important;
margin-left: 10px;
}
div#sortBtnWrap button img {
width: 15px;
}
div#vehicleFormError {
background: #8b8b8b24;
border-radius: 5px;
padding: 5px;
font-size: 12px;
font-weight: 600;
text-align: center;
color: red;
margin-top: 10px;
}
#sortModal .listing-modal-content h3 {
text-align: left;
max-width: 400px;
margin: 0 auto;
font-size: clamp(18px, 1.2vw, 24px) !important;
}
#vehicleMake+span.select2 {
min-width: 250px;
}
div#sort-content {
max-width: 400px;
margin: 0 auto;
}
div#sortBtnWrap {
display: flex;
flex-wrap: nowrap;
align-items: center;
margin-block: 15px 25px;
}
#sortForm .sort-options.radio-group {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 20px;
margin-bottom: 20px;
}
#sortForm .sort-options.radio-group label {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-size: 15px;
color: #333;
}
#sortForm .radio-group input[type='radio'] {
accent-color: #bbef00 !important;
}
#overviewModal span.select2-selection.select2-selection--single {
padding: 0px !important;
}
/* new listing display page css */
.listing-active_sold_buttons button {
margin-bottom: 0px !important;
}
.listing-active_sold_button {
display: flex;
}
.listing-active_sold_buttons {
display: flex;
justify-content: space-between;
align-items: center;
}
.listing-active_sold_buttons .sort-listing-left a {
background: transparent !important;
padding: 0px !important;
border: none !important;
margin: 0px !important;
}
.wpb_wrapper>.listing-active_sold_buttons {
margin-bottom: 30px !important;
}
.view-details-btn {
margin-top: auto;
}
.vehicle-card-wrap .listing-card .slick-gallery {
margin-bottom: 0px;
}
.listing-card button.slick-next.slick-arrow {
right: 5px;
}
.vehicle-card-wrap .slick-prev:before,
.vehicle-card-wrap .slick-next:before {
font-family: 'slick';
opacity: 1;
color: #bbef00 !important;
}
.vehicle-card-wrap .slick-dots li.slick-active button:before {
opacity: 1;
color: #bbef00 !important;
}
.vehicle-card-wrap .slick-dots li button:before {
opacity: .25;
color: #ffffff;
}
.vehicle-card-wrap .slick-prev {
left: 5px;
z-index: 1;
}
.vehicle-card-wrap .listing-card .container {
min-height: 300px !important;
max-width: 100% !important;
}
.vehicle-card-wrap .slick-gallery.slick-slider {
height: 300px !important;
}
.vehicle-card-wrap .slick-list.draggable {
height: 300px !important;
}
button.tas-vehicle-sort {
cursor: pointer;
}
.vehicle-card-wrap .listing-card .card-content {
margin-top: 0px !important;
padding: 20px;
min-height: 350px;
display: flex;
flex-direction: column;
}
.vehicle-card-wrap a.list-front,
.vehicle-card-wrap .listing-card {
border: 1px solid #ddd;
}
.vehicle-card-wrap .listing-card .card-image {
height: 300px !important;
}
.vehicle-card-wrap .pld-like-dislike-wrap .pld-common-wrap {
margin-right: 0px;
}
div#listGalleryCount {
position: absolute;
top: 10px;
left: 10px;
border-radius: 8px;
padding: 2px 8px 0px 8px;
background: #0000004f;
color: #fff;
font-size: 12px;
}
.vehicle-card-wrap .content-top+.price-wrap .card-price span.woocommerce-Price-amount.amount {
font-size: clamp(22px, 1.75vw, 30px);
font-weight: 500
}
.vehicle-card-wrap .content-top+.price-wrap .card-price {
background: transparent !important;
padding: 0px;
}
.vehicle-card-wrap .listing-card .card-details {
border-block: 1px solid #ddd;
padding-block: 15px;
margin-block: 15px;
}
.vehicle-card-wrap .listing-card ul {
margin: 0px;
display: flex;
flex-wrap: nowrap;
justify-content: center;
width: 100%;
}
.vehicle-card-wrap .listing-card .card-content ul {
margin: 0px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
gap: 8px;
}
.vehicle-card-wrap .listing-card .card-details ul li {
width: calc(50% - 5px);
display: flex;
align-items: center;
}
.tasmania-listing ul li {
list-style: none !important;
font-size: 14px;
}
.tasmania-listing ul li {
list-style: none !important;
font-size: 16px;
margin-block: 15px;
}
.vehicle-card-wrap .card-details ul li i,
.vehicle-card-wrap .card-details img {
padding-right: 5px;
margin-bottom: 0px !important;
}
.vehicle-location ul li {
list-style: none;
}
.vehicle-card-wrap .slick-dots li button:before {
color: #666;
}
.mtm-list-sort-submit-wrap a.nectar-button.reset-button,
.sort-listing-right button,
.sort-listing-right a.nectar-button.reset-button {
border-color: #bbef00 !important;
padding: 12.7px 25px !important;
font-size: 16px !important;
margin-bottom: 0px;
}
/*Global CSS*/
.tas-none {
display: none
}
.tas-hide {
visibility: hidden;
}
.listing-btn {
background-color: #e74c3c;
/* Red tone */
color: #fff;
border: none;
padding: 10px 16px;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
}
#listingCancelDelete {
background-color: #bdc3c7;
color: #2c3e50;
}
.listing-card .card-content a.listing-btn {
padding: 2px 10px;
border-radius: 20px;
}
/* Listing CSS */
.listing-cards-container.vehicle-card-wrap {
display: grid !important;
gap: 25px;
grid-template-columns: auto auto auto auto;
}
.listing-cards-container {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: left;
margin: auto;
}
a.list-front,
.listing-card {
overflow: hidden;
width: calc(25% - 30px);
color: inherit;
}
.vehicle-card-wrap .listing-card {
width: 100% !important;
}
a.list-front>.listing-card {
width: unset;
}
.listing-card .content-top {
display: flex;
justify-content: space-between;
align-items: start;
}
.list-action-btns {
display: flex;
gap: 10px;
}
.list-action-btns>a:first-child {
background-color: #3498db;
}
.listing-card .card-image {
width: 100%;
height: 200px;
overflow: hidden;
}
.vehicle-card-wrap .listing-card .card-image img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
.vehicle-card-wrap .listing-card .slick-dots {
bottom: 5px !important;
}
.vehicle-card-wrap .listing-card .slick-dots li {
margin: 0px !important;
}
.listing-card .card-content {
margin-top: 10px;
}
.listing-card .card-title {
text-decoration: none;
font-family: Montserrat;
letter-spacing: 0;
font-size: 18px !important;
line-height: 26px;
font-weight: 500 !important;
margin-bottom: 0px;
}
.listing-card .card-details {
display: flex;
align-items: center;
gap: 10px;
justify-content: space-between;
margin-top: 10px;
}
.listing-card .card-price {
background-color: #bbef00;
padding: 2px 12px;
border-radius: 20px;
font-weight: 700;
font-size: 14px;
}
.listing-card input[type="checkbox"] {
accent-color: #bbef00;
}
.listing-card span.listing-meta-item {
padding: 0px 8px;
background: #f8f9fa;
border-radius: 6px;
border-left: 3px solid #bbef00;
}
/* Listing Pagination Container */
.listing-pagination {
text-align: center;
margin: 50px 0px 0px !important;
}
/* Pagination Links */
.listing-pagination .page-numbers {
display: inline-block;
margin: 0 5px;
padding: 4px 12px;
font-size: 16px;
color: #333;
background-color: #f2f2f2;
border: 1px solid #ddd;
border-radius: 4px;
text-decoration: none;
transition: all 0.3s ease;
}
/* Hover Effect */
.listing-pagination .page-numbers:hover {
background-color: #bbef00;
color: #fff;
border-color: #bbef00;
}
/* Current Page */
.listing-pagination .page-numbers.current {
background-color: #bbef00;
color: #fff;
border-color: #bbef00;
font-weight: bold;
}
/* Previous and Next Arrows */
.listing-pagination .page-numbers.prev,
.listing-pagination .page-numbers.next {
font-weight: bold;
}
/*Listing Form CSS*/
#overviewModal .select2-container {
width: 100% !important;
}
.mt_container.tasmania-listing .mt_container_wrapper {
max-width: 800px;
margin: 0 auto;
}
.tasmania-listing .progress-container {}
/* .tasmania-listing .progress-container .progress-wrapper {
padding: 7px !important;
} */
.tasmania-listing .progress-bar {
height: 12px;
background: #fff;
border-radius: 10px;
margin-top: 15px;
overflow: hidden;
border: 2px solid #bbef00;
}
.tasmania-listing .progress {
height: 100%;
background: #bbef00;
border-radius: 10px;
width: 0%;
transition: width 0.5s ease;
}
.tasmania-listing .step-info {
display: flex;
justify-content: space-between;
margin-top: 8px;
font-size: 14px;
justify-content: center;
gap: 5px;
line-height: 1;
}
.tasmania-listing .form-container {
padding: 30px;
}
.tasmania-listing .step {
display: none;
}
.step_wrapper {
max-width: 500px;
margin: 0 auto;
}
.step_wrapper.list-thank-you {
text-align: center;
}
.step_wrapper .form-group {
margin: 0 auto;
}
.mt_container.tasmania-listing #step5 .step_wrapper>.form-group {
display: flex;
gap: 5px;
align-items: center;
}
.mt_container.tasmania-listing #step5 .step_wrapper>.mt_container.tasmania-listing .form-group label {
font-weight: 500;
}
div#listing-limit-notification-wrap {
padding-left: 20px;
padding-right: 20px;
text-align: center;
}
div#listing-limit-notification-wrap>h2 {
margin-bottom: 0px;
}
.details-txt {
text-decoration-line: underline;
text-decoration-color: #bbef00;
}
.tasmania-listing .step.active {
display: block;
animation: fadeIn 0.5s ease;
}
div#listing-success-links {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
margin-top: 50px;
}
div#listing-success-links>a {
padding: 6px 25px;
font-size: 15px;
cursor: pointer;
background: #bbef00;
border-radius: 12px;
color: #000;
font-weight: 500 !important;
transition: opacity .45s cubic-bezier(0.25, 1, 0.33, 1), transform .45s cubic-bezier(0.25, 1, 0.33, 1), border-color .45s cubic-bezier(0.25, 1, 0.33, 1), color .45s cubic-bezier(0.25, 1, 0.33, 1), background-color .45s cubic-bezier(0.25, 1, 0.33, 1), box-shadow .45s cubic-bezier(0.25, 1, 0.33, 1);
}
div#listing-success-links>a:last-child {
background: #d82026;
color: #fff;
}
div#listing-success-links>a:hover {
opacity: .7;
}
.list-thank-you h4 {
position: relative;
/* ensure ::after is positioned relative to h4 */
padding-bottom: 8px;
/* space between text and divider */
margin-bottom: 16px;
/* space after heading */
}
.list-thank-you h4::after {
content: "";
/* required for ::after */
display: block;
/* make it a block element */
width: 350px;
/* length of divider */
height: 1px;
/* thickness of divider */
background-color: #ddd;
/* divider color */
margin: 6px auto 0;
/* space above divider */
border-radius: 2px;
/* rounded edges */
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.tasmania-listing h2 {
color: #000;
margin-bottom: 25px;
font-weight: 600;
font-size: clamp(22px, 1.2vw, 26px) !important;
text-align: center;
font-family: 'Montserrat' !important;
padding-inline: 3%;
}
.tasmania-listing .form-group {
margin-bottom: 20px;
text-align: center;
}
input#vehicleTrailerTypeOther {
margin-top: 20px;
}
.tasmania-listing input,
.tasmania-listing select,
.tasmania-listing textarea {
width: 100%;
padding: 12px 20px;
border: 1px solid #bbef00;
border-radius: 10px !important;
font-size: 16px;
transition: border 0.3s ease;
}
.tasmania-listing input:focus,
.tasmania-listing select:focus,
.tasmania-listing textarea:focus {
border-color: #4a6cf7;
outline: none;
}
.tasmania-listing input[type="checkbox"] {
accent-color: #bbef00;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 14px !important;
height: 14px;
border: 1px solid #000000;
border-radius: 4px !important;
display: inline-block;
position: relative;
cursor: pointer;
padding: 0px !important;
margin-right: 8px;
font-size: 14px;
}
/* checked state */
.tasmania-listing input[type="checkbox"]:checked {
background-color: #bbef00;
border-color: #bbef00;
}
/* add tick mark */
.tasmania-listing input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 3px;
top: -1px;
width: 5px;
height: 9px;
border: solid #000000;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.tasmania-listing .form-group:has(.ts-brand-dropdown),
.tasmania-listing .form-group:has(.ts-location-dropdown) {
position: relative;
}
div#priceFirmOption,
div#priceNegotiableOption {
display: flex;
align-items: center;
}
.ts-brand-dropdown,
.ts-location-dropdown {
position: absolute;
top: 100%;
/* directly below the input */
left: 0;
right: 0;
border: 1px solid #ccc;
background: #fff;
list-style: none;
margin: 0;
padding: 0;
max-height: 200px;
overflow-y: auto;
z-index: 9999;
}
.ts-brand-dropdown li,
.ts-location-dropdown li {
padding: 8px;
cursor: pointer;
margin-block: 0px !important;
text-align: left;
}
.ts-brand-dropdown li:hover,
.ts-location-dropdown li:hover {
background: #f0f0f0;
}
input#vehicleHullMaterialOther {
margin-top: 10px;
}
.form-group.cstm-btn {
position: relative;
}
.form-group.cstm-btn2 span {
display: flex;
justify-content: center;
align-items: center;
background: #DDD;
box-sizing: border-box;
padding: 8px;
width: 47px;
border: 1px solid #aaa;
text-align: center;
border-width: 1px 0px 1px 1px;
font-size: 14px;
border-radius: 4px 0px 0px 4px
}
.tasmania-listing .cstm-btn2 input {
width: calc(100% - 47px) !important;
border-radius: 0px 4px 4px 0px !important;
border: 1px solid #aaa;
border-left-width: 0px !important;
}
.tasmania-listing .form-group.cstm-btn2 {
width: 100%;
text-align: left;
border-radius: 4px;
overflow: hidden;
display: flex;
}
.tasmania-listing .checkbox-group {
display: flex;
align-items: center;
justify-content: center;
margin-block: 10px;
}
.tasmania-listing .overview-content .checkbox-group {
margin-bottom: 10px;
}
.overview-content .select-wrapper select {
margin-block: 7px !important;
}
.tasmania-listing .checkbox-group input {
width: auto;
margin-right: 10px;
}
.tasmania-listing #step3 .checkbox-group,
.tasmania-listing .trailer-clone-features {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
/* three equal columns */
gap: 10px;
/* spacing between items */
}
.tasmania-listing #step3 .checkbox-group>label,
.tasmania-listing .trailer-clone-features>label {
display: flex;
align-items: center;
}
.tasmania-listing .price-options {
display: flex;
gap: 20px;
margin-top: 15px;
}
.tasmania-listing .transmission-option,
.tasmania-listing .price-option {
flex: 1;
text-align: center;
padding: 15px 20px;
border: 1px solid #000;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.tasmania-listing .transmission-option.selected,
.tasmania-listing .price-option.selected {
background-color: #bbef00;
}
.tasmania-listing .price-option i {
font-size: 24px;
margin-bottom: 10px;
color: #4a6cf7;
}
.tasmania-listing .buttons {
display: flex;
justify-content: end;
margin-top: 30px;
height: auto;
}
.tasmania-listing button {
padding: 10px 35px;
border: none;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.tasmania-listing .buttons-one .btn-prev {
cursor: pointer;
color: #000000;
font-weight: 500;
font-size: 14px;
}
.tasmania-listing .buttons-one .btn-prev>i {
font-size: 20px;
margin-top: 1px;
}
.tasmania-listing .btn-next,
.tasmania-listing .btn-submit {
background: #bbef00 !important;
color: #000 !important;
font-weight: 500 !important;
font-family: "Montserrat" !important;
}
.tasmania-listing .error {
color: #e74c3c;
font-size: 14px;
margin-top: 5px;
display: none;
text-align: center;
}
.tasmania-listing .photo-upload {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 2px dashed #ccc;
border-radius: 10px;
padding: 20px;
text-align: center;
cursor: pointer;
transition: border-color 0.3s ease;
}
.tasmania-listing .photo-upload.dragover {
border-color: #3b82f6;
background: #f0f8ff;
}
.tasmania-listing .dropzone {
border: 2px dashed #ccc;
border-radius: 10px;
}
.tasmania-listing #listing-dropzone .dz-message {
display: block !important;
}
.tasmania-listing .dropzone .dz-message>div {
border: 1px solid #bbef00;
border-radius: 8px;
padding: 5px 14px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
gap: 8px;
}
.tasmania-listing .dropzone .dz-message>div>i {
top: unset;
}
.tasmania-listing .uploaded-photos {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
margin-top: 20px;
}
.tasmania-listing .photo-thumb {
position: relative;
height: 80px;
background: #f0f2f5;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #7a7a7a;
font-size: 12px;
}
.tasmania-listing .photo-thumb>img {
margin-bottom: 0 !important;
}
.tasmania-listing .photo-thumb .delete {
position: absolute;
top: -8px;
right: -8px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
border: 1px solid #dcdcde;
text-align: center;
line-height: 18px;
text-decoration: none;
font-weight: bold;
color: #000;
cursor: pointer;
}
.tasmania-listing .photo-thumb .delete:hover {
background: #f00;
color: #fff;
border-color: #f00;
}
.tasmania-listing .overview-item {
padding-bottom: 0;
display: flex;
gap: 5px;
font-size: 14px;
}
.tasmania-listing .overview-label {
font-weight: 600;
color: #2d3a4b;
}
.tasmania-listing .overview-listing .listing_details:last-child>.overview-item:last-child {
margin-top: 15px;
}
.tasmania-listing .view-btn {
background: #bbef00;
color: #000;
border: none;
padding: 2px 15px;
border-radius: 12px;
cursor: pointer;
font-size: 14px;
}
.tasmania-listing .terms>div>label {
text-align: left;
}
#modal-photos .mt_container {
padding: 20px 150px 10px;
background: #bbef00;
border-radius: 20px;
}
#modal-photos div#imageIndex {
text-align: center;
color: #fff;
}
div#modal-photos .mt_container h2 {
text-align: center;
margin-bottom: 10px;
}
.listing-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 100;
align-items: center;
justify-content: center;
}
.listing-modal-content {
background: white;
padding: 30px;
border-radius: 20px;
max-width: 800px;
width: 90%;
overflow-y: auto;
}
.listing-modal-content h2 {
text-align: center;
}
textarea#modal-description {
border: 1px solid #000;
min-height: 150px;
border-radius: 20px;
padding: 10px 20px;
}
.listing-modal .close-modal {
float: right;
font-size: 26px !important;
cursor: pointer;
margin-top: -20px;
font-weight: 700;
}
.tasmania-listing .terms {
margin: 20px auto 40px;
max-width: 550px;
}
.tasmania-listing .terms ul {
margin-left: 0px;
}
#listing-lightbox-modal .listing-modal-content>img {
width: 100%;
max-height: 400px;
height: auto;
}
/* Price checkbox styles */
.tasmania-listing .price-checkbox-group {
display: flex;
gap: 20px;
justify-content: center;
}
/* Listing image slider CSS*/
.slideshow-container {
position: relative;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.slideshow-container .mtSliderImg {
display: none;
width: 100%;
transition: opacity 0.8s ease;
min-height: 100px;
}
#listing-lightbox-modal .listing-modal-content>img,
#photosModal .slideshow-container .mtSliderImg img {
max-height: 600px;
vertical-align: middle;
width: 100% !important;
height: auto;
object-fit: contain;
}
.slideshow-container .nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: none;
color: #000;
border: none;
font-size: 20px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
#listing-lightbox-modal .close-modal {
color: #fff;
}
.slideshow-container .prev {
left: -20px;
}
.slideshow-container .next {
right: -20px;
}
.tasmania-listing div#preview-notification,
.tasmania-listing #listingNotification {
display: none;
padding: 12px 16px;
margin: 15px 0;
border-radius: 4px;
font-weight: 500;
text-align: center;
}
.tasmania-listing div#preview-notification.success,
.tasmania-listing #listingNotification.success {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.tasmania-listing div#preview-notification.error,
.tasmania-listing #listingNotification.error {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
/* Gallery Step */
.tasImageContainer .tasGalleryLoaderBig {
grid-column: span 2;
grid-row: span 2;
height: calc(320px + 15px);
}
#tasImageContainer .tas-file-input {
pointer-events: none;
}
.tasImageContainer {
display: grid;
gap: 15px;
max-width: 800px;
margin: 5px auto 40px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
div#coverImagetext {
max-width: 800px;
margin: 40px auto 0px;
}
div#coverImagetext>div {
max-width: 39%;
text-align: center;
font-size: clamp(10px, 1.1vw, 16px);
line-height: 1.2;
font-weight: 500;
}
.tas-gallery-load-wrap,
.tas-file-hidden-wrap {
position: relative;
/* width: auto; */
height: auto;
border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
cursor: pointer;
transition: background-color 0.2s ease;
border-radius: 10px;
height: 160px;
}
.list-gallery-notification {
background: #ffb7ba;
border-radius: 5px;
padding: 5px 20px;
font-size: 12px;
font-weight: 600;
text-align: center;
width: fit-content;
margin: auto;
}
.row .col .tas-image-box img {
width: 100%
}
.tas-image-box .tas-icon>img {
max-width: 20%;
}
.tasImageContainer .tas-file-hidden-wrap:first-child {
grid-column: span 2;
grid-row: span 2;
height: calc(320px + 15px);
}
.tas-image-box.tas-dragover {
background-color: #e0f7fa;
border-color: #00acc1;
}
.tas-image-box img {
width: 100%;
height: 100%;
margin-bottom: 0px;
object-fit: contain;
}
.tas-image-box .tas-icon {
text-align: center;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.tas-icon {
font-size: 12px;
color: #0476d9;
line-height: 1;
}
.tas-image-box .tas-icon>p {
margin-top: 5px;
}
.tas-gallery-btns {
position: absolute;
position: absolute;
bottom: 2px;
right: 0;
padding: 0 10px;
}
.tas-gallery-btns>span {
background: #8888883b;
color: #0476d9;
border: none;
border-radius: 2px;
cursor: pointer;
font-size: 12px;
padding: 2px 4px;
}
input[type="file"].tas-file-input {
display: none;
}
.overview-block-one-left,
.overview-block-one-right {
width: 50%;
}
#createBtnWrap .buttons-one,
div#updateBtnWrap .buttons-one {
width: 40% !important;
margin-top: auto;
margin-bottom: 8px;
}
#createBtnWrap,
div#updateBtnWrap {
display: flex;
justify-content: space-around;
}
#listing-single .header2 {
margin-bottom: 0px;
}
/* Responsive styles */
@media (max-width: 992px) {
.listing-cards-container {
justify-content: center;
}
.listing-card,
a.list-front {
width: calc(50% - 30px);
}
}
@media (min-width: 691px) {
div#listing-limit-notification-wrap {
padding-top: 30px;
}
}
@media (min-width: 768px) {
form#listSearchForm.filter-buggy-jetski {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
form#listSearchForm.filter-buggy-jetski .list_search_wrapper_one,
form#listSearchForm.filter-buggy-jetski .list_search_wrapper_two {
margin-left: unset;
margin-right: unset;
}
.list_search_wrapper_one>.form-group,
.list_search_wrapper_two>.form-group {
min-width: 310px;
max-width: 310px;
}
.list-car-body-types .body-type-item img {
max-width: 95px !important;
}
div#listing-limit-notification-wrap h2#listing-sign-in-heading {
margin-bottom: 15px !important;
}
.sort-listing-left p {
font-size: 20px;
}
.tasmania-listing div#progressBarWrap {
margin: 3% 3% 0%;
display: grid;
grid-template-columns: 25% auto 25%;
grid-row-gap: 30px;
align-items: center;
}
.mt_container.tasmania-listing .form-container .step:not(#step1) {
margin-bottom: 2%;
}
.overview-block-item:last-child {
border-bottom: none;
}
}
@media only screen and (min-width: 768px) and (max-width: 950px) {
.list_search_wrapper_one>.form-group,
.list_search_wrapper_two>.form-group {
min-width: 210px;
max-width: 210px;
}
#listSearchForm.filter-buggy-jetski .list_search_wrapper_one>.form-group,
#listSearchForm.filter-buggy-jetski .list_search_wrapper_two>.form-group {
min-width: 150px;
max-width: 150px;
}
}
@media only screen and (min-width: 951px) and (max-width: 1110px) {
.list_search_wrapper_one>.form-group,
.list_search_wrapper_two>.form-group {
min-width: 260px;
max-width: 260px;
}
#listSearchForm.filter-buggy-jetski .list_search_wrapper_one>.form-group,
#listSearchForm.filter-buggy-jetski .list_search_wrapper_two>.form-group {
min-width: 190px;
max-width: 190px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1350px) {
.tasmania-listing .tas-image-box:not(first-child) {
height: 10vw;
}
.tasmania-listing .form-container {
max-width: 600px;
margin: 0 auto;
}
}
@media only screen and (min-width: 1111px) and (max-width: 1450px) {
#listSearchForm.filter-buggy-jetski .list_search_wrapper_one>.form-group,
#listSearchForm.filter-buggy-jetski .list_search_wrapper_two>.form-group {
min-width: 220px;
max-width: 220px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1120px) {
.listing-active_sold_buttons a,
.listing-active_sold_buttons button {
margin-inline: 8px;
margin-bottom: 0px !important;
font-size: 14px !important;
}
.listing-cards-container.vehicle-card-wrap {
grid-template-columns: auto auto;
}
div#coverImagetext>div {
font-size: 12px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
.listing-cards-container.vehicle-card-wrap {
grid-template-columns: auto auto auto;
}
}
@media (min-width: 768px) {
.step_wrapper .form-group {
max-width: 100% !important;
}
a.nectar-button.jumbo.see-through-2.btn.active_listing.active {
font-size: 20px;
}
}
@media (max-width: 767px) {
#sortModal.listing-modal .close-modal {
margin-top: 0px;
}
#sortModal button.sort-submit {
margin-top: 20px !important;
}
div#sort-content {
margin: 20px auto 0;
}
.list_search_wrapper_one .form-group,
.list_search_wrapper_two .form-group {
width: 100%;
}
.list_search_wrapper_two .form-group:nth-child(2),
.list_search_wrapper_two .form-group:nth-child(3) {
width: 46%;
}
.mtm-list-sort-submit-wrap button.mtm-list-sort-submit {
font-size: 14px !important;
}
.mtm-list-sort-submit-wrap {
flex-direction: column;
}
.mtm-list-sort-submit-wrap .mtm-list-sort-submit,
.mtm-list-sort-submit-wrap a.reset-button {
width: 100%;
text-align: center;
}
.list-car-body-types .slick-list {
padding: 0 25% 0 0 !important;
}
div#listing-limit-notification-wrap h2#listing-sign-in-heading {
margin-bottom: 25px !important;
}
#listing-limit-notification-wrap {
padding-top: 10px;
}
#listing-limit-notification-wrap>h2 {
line-height: 25px;
font-size: 20px !important;
}
#listing-limit-notification-wrap>p {
margin-top: 10px;
line-height: 22px;
}
#createBtnWrap .buttons-one,
div#updateBtnWrap .buttons-one {
margin-bottom: 3px;
}
.overview-block-item button.view-btn {
margin-top: 12px;
}
.overview-block-item span#overview-vehicle-detail {
margin-bottom: 6px;
}
.mt_container.tasmania-listing #step5 .step_wrapper>.price-checkbox-group.form-group {
gap: 15px;
}
.overview-listing .overview-block-item {
padding: 25px 15px;
}
body.page-id-93289 .nectar-global-section.before-footer,
body.page-id-93817 .nectar-global-section.before-footer,
body.page-id-93820 .nectar-global-section.before-footer {
display: none;
}
.tasmania-listing div#progressBarWrap {
margin: 0%;
padding: 15px 0px 15px;
display: grid;
grid-template-columns: auto auto;
grid-row-gap: 15px;
align-items: center;
}
.mt_container.tasmania-listing .form-container .step:not(#step1) {
padding-bottom: 80px;
}
.mt_container.tasmania-listing .form-container .step#step8 {
padding-bottom: 0px;
}
.tasmania-listing .step-info {
font-size: 12px;
}
.tasmania-listing .progress-container {
order: 1;
grid-area: 1 / 1 / span 1 / span 2;
}
.tasmania-listing .progress-container {
width: 100%;
margin: 0 auto;
border-bottom: 2px solid #C6C6C6;
}
.tasmania-listing .progress-container .progress-wrapper {
width: 75%;
margin: 0px auto 15px;
}
.overview-listing .overview-wrap {
display: flex;
flex-direction: column;
}
.overview-listing .left {
width: 100%;
}
div#coverImagetext>div {
font-size: clamp(11px, 2.2vw, 15px);
}
.vehicle-card-wrap .listing-card {
max-width: 100%;
}
.tasmania-listing .checkbox-group {
flex-wrap: wrap;
}
.tasmania-listing #step3 .trailer-features .checkbox-group {
justify-content: flex-start;
}
.slideshow-container .nav-btn {
width: 40px;
height: 40px;
font-size: 16px;
}
.tasmania-listing .overview-listing {
flex-direction: column;
}
.tasmania-listing .price-option {
padding: 5px 10px;
}
.tasmania-listing .uploaded-photos {
grid-template-columns: repeat(3, 1fr);
}
.tasmania-listing .form-container {
padding: 20px;
}
.tas-icon img {
margin-bottom: 5px !important;
}
.tasmania-listing .progress-bar {
height: 9px;
}
.tasmania-listing #progressBarWrap .buttons {
margin-right: 20px;
}
.tasmania-listing #progressBarWrap .buttons-one {
margin-left: 20px;
margin-top: 30px;
}
.tasImageContainer {
gap: 5px;
}
.sort-listing-right button,
.sort-listing-right a.nectar-button.reset-button {
padding: 6px 16px !important;
font-size: 12px !important;
}
.listing-cards-container.vehicle-card-wrap {
grid-template-columns: auto;
}
.overview-listing>div>div {
width: 100% !important;
}
.overview-listing>div {
display: flex;
flex-direction: column;
gap: 15px;
}
.listing-pagination {
margin: 30px 0px 60px !important;
}
#photosModal .container {
max-width: 100%;
}
div#coverImagetext>div {
max-width: 66%;
}
.tasmania-listing #step3 .checkbox-group,
.tasmania-listing .trailer-clone-features {
grid-template-columns: 1fr;
/* single column */
}
.tvl-max-width-350,
.tvl-detail-common,
.tvl-reg-details {
max-width: 100%;
}
.tvl-section.tvl-no-border-bottom .tvl-grid-2 {
grid-template-columns: 1fr;
gap: 15px;
}
.tvl-overview-trailer .tvl-grid-2 {
grid-template-columns: 1fr;
gap: 15px;
}
}
@media (max-width: 576px) {
a.list-front {
width: 100%;
max-width: 350px;
}
}
@media (min-width: 480px) and (max-width: 767px) {
.listing-pagination {
margin: 30px 0px 0px !important;
}
}
@media (max-width: 480px) {
#listing-limit-notification-wrap>a {
width: fit-content;
display: block;
margin: auto;
}
.new_listing_display .vc_col-sm-12.wpb_column.column_container.vc_column_container {
padding: 0px !important;
transform: scale(1.01);
}
.listing-active_sold_buttons {
margin-inline: 6%;
}
.wpb_wrapper>.listing-active_sold_buttons.has_data {
margin-bottom: 25px !important;
margin-top: 40px !important;
}
.wpb_wrapper>.listing-active_sold_buttons.has_not_data {
margin-bottom: 0px !important;
margin-top: -20px !important;
}
.vehicle-card-wrap .listing-card {
border-radius: 0px;
}
.tasmania-listing .uploaded-photos {
grid-template-columns: repeat(2, 1fr);
}
/* .tas-image-box {
min-height: 80px;
} */
.tas-icon {
font-size: 10px;
}
.listing-modal {
top: auto;
}
#vehicleMake+span.select2 {
min-width: auto;
}
#sortModal .listing-modal-content {
width: 100%;
padding: 60px 40px;
margin-top: auto;
min-height: 85vh;
}
#sortModal.listing-modal {
top: auto;
}
.overview-block-one-item {
display: flex;
flex-direction: column;
}
.listing-pagination .page-numbers {
margin: 0px !important;
}
div#coverImagetext>div {
text-align: center;
font-size: 12px;
line-height: 1;
}
.listing-active_sold_buttons a,
.listing-active_sold_buttons button {
margin-inline: 2px;
}
.listing-active_sold_buttons {
margin-inline: 4%;
}
}
@media only screen and (max-width: 360px) {
body[data-button-style*="slightly_rounded"] .mt-tab a {
padding: 7px 10px;
transition: 0.3s;
font-size: 12px;
}
}
/* Responsive text */
@media only screen and (max-width: 300px) {}
.slick-gallery:not(.slick-initialized)>.mtSlide:not(:first-child) {
display: none !important;
}
.slick-gallery:not(.slick-initialized) {
display: flex;
height: 300px;
overflow: hidden;
}
.tvl-model-na,
.tvl-variant-na {
display: block;
margin-top: 5px;
font-size: 13px;
cursor: pointer;
}
/* Custom Split Input Group Addon styling */
.tvl-input-group-combined {
display: flex;
align-items: stretch;
width: 100%;
}
.tvl-input-group-combined input {
flex: 1;
border-right: none !important;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
margin: 0 !important;
}
.tvl-input-group-addon {
display: flex;
align-items: center;
justify-content: center;
background: #f9f9f9;
border: 1px solid #aaaaaa;
color: #666;
padding: 0 15px;
font-size: 16px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
font-family: 'Gilroy', sans-serif;
font-weight: 500;
}
/* =============================================
jQuery UI Datepicker - Scoped TVL Theme
Scoped to: #ui-datepicker-div (the jQuery UI
calendar widget DOM ID) and #tvl-custom-full-form
(the plugin form wrapper) to prevent conflicts.
============================================= */
/* --- Calendar Widget (appended to by jQuery UI) --- */
#ui-datepicker-div {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.14);
font-family: 'Gilroy', sans-serif;
font-size: 14px;
padding: 12px;
width: 280px;
z-index: 9999 !important;
}
#ui-datepicker-div .ui-datepicker-header {
border-bottom: 1px solid #e2e8f0;
padding: 4px 0 10px;
}
#ui-datepicker-div .ui-datepicker-title {
text-align: center;
font-size: 14px;
color: #1a202c;
line-height: 32px;
}
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
background: none;
border: none;
cursor: pointer;
height: 32px;
position: absolute;
top: 4px;
width: 32px;
}
#ui-datepicker-div .ui-datepicker-prev { left: 0; }
#ui-datepicker-div .ui-datepicker-next { right: 0; }
#ui-datepicker-div .ui-datepicker-prev span,
#ui-datepicker-div .ui-datepicker-next span {
display: none;
}
#ui-datepicker-div .ui-datepicker-prev:hover::after,
#ui-datepicker-div .ui-datepicker-next:hover::after {
color: #2563eb;
}
#ui-datepicker-div table {
border-collapse: collapse;
font-size: 13px;
margin: 8px 0 0;
width: 100%;
}
#ui-datepicker-div th {
color: #718096;
font-weight: 600;
padding: 4px 2px;
text-align: center;
}
#ui-datepicker-div td {
padding: 2px;
text-align: center;
}
#ui-datepicker-div td a,
#ui-datepicker-div td span {
border-radius: 6px;
color: #2d3748;
display: block;
padding: 5px 4px;
text-align: center;
text-decoration: none;
}
#ui-datepicker-div td a:hover {
background: #ebf4ff;
color: #2563eb;
}
#ui-datepicker-div td.ui-datepicker-today a {
background: #ebf4ff;
color: #2563eb;
font-weight: 700;
}
#ui-datepicker-div td.ui-state-active a,
#ui-datepicker-div td .ui-state-active {
background: #2563eb !important;
color: #fff !important;
font-weight: 700;
}
#ui-datepicker-div td.ui-datepicker-unselectable span {
color: #cbd5e0;
}
/* Month/Year dropdowns in the header */
#ui-datepicker-div .ui-datepicker-month,
#ui-datepicker-div .ui-datepicker-year {
background: #f7fafc;
border: 1px solid #e2e8f0;
border-radius: 5px;
color: #1a202c;
font-family: 'Gilroy', sans-serif;
font-size: 13px;
margin: 0 2px;
padding: 2px 4px;
}
/* --- Input wrapper (inside the plugin form) --- */
#tvl-custom-full-form .tvl-datepicker-wrap {
position: relative;
}
#tvl-custom-full-form .tvl-datepicker-wrap .tvl-cal-icon {
color: #9ca3af;
cursor: pointer;
pointer-events: none;
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
}
#tvl-custom-full-form .tvl-datepicker-wrap input[type="text"] {
padding-right: 38px;
}