/* brand-clearance-event */ /* .tao-fullwidth .result-item .item-detail .highlight-text { color: #E74C3C; background-color: #000; } */ .my-account-content .reservations-grid { display: flex; flex-direction: column; gap: 16px; } .my-account-content .reservation-item { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; } .my-account-content .reservation-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; } .my-account-content .reservation-vehicle { font-weight: 600; font-size: 0.95em; line-height: 1.2em; } .my-account-content .reservation-body { display: flex; flex-direction: column; gap: 6px; font-size: 0.9em; } .my-account-content .reservation-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; gap: 10px; border-top: 1px solid #ddd; margin: 0; font-size: 0.85em; padding-top: 4px; margin-bottom: -4px; } .my-account-content .reservation-label { display: flex; align-items: center; justify-content: flex-start; white-space: nowrap; font-size: 14px; color: #333; flex: 1; margin-left: 0; font-weight: bold; } .my-account-content .reservation-value { justify-content: flex-end; margin-right: 0; text-align: right; font-weight: normal; } .my-account-content .reservation-ref { font-family: monospace; font-size: 0.95em; color: #2b2b2b; margin-top: -1px; user-select: text; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; } .my-account-content .reservation-actions { margin-top: 12px; } .my-account-content .reservation-image img { max-width: 215px; } .my-account-content .reservation-info a { font-size: 0.85em; color: #3578f6; } .my-account-content .reservation-status-badge { background: #28a745; color: #fff; padding: 4px 8px 1px 8px; border-radius: 12px; font-size: 0.8em; text-transform: capitalize; } .honeypot-wrapper { position: absolute; left: -9999px; top: -9999px; height: 1px; overflow: hidden; } html.modernizr-js.modernizr-flexbox.modernizr-canvas.modernizr-canvastext.modernizr-webgl.modernizr-no-touch.modernizr-geolocation.modernizr-postmessage.modernizr-no-websqldatabase.modernizr-indexeddb.modernizr-hashchange.modernizr-history.modernizr-draganddrop.modernizr-websockets.modernizr-rgba.modernizr-hsla.modernizr-multiplebgs.modernizr-backgroundsize.modernizr-borderimage.modernizr-borderradius.modernizr-boxshadow.modernizr-textshadow.modernizr-opacity.modernizr-cssanimations.modernizr-csscolumns.modernizr-cssgradients.modernizr-no-cssreflections.modernizr-csstransforms.modernizr-csstransforms3d.modernizr-csstransitions.modernizr-fontface.modernizr-generatedcontent.modernizr-video.modernizr-audio.modernizr-localstorage.modernizr-sessionstorage.modernizr-webworkers.modernizr-no-applicationcache.modernizr-svg.modernizr-inlinesvg.modernizr-smil.modernizr- .data-row .feData, .data-row .feData-detail { font-size: 0.7em; color: #0000008c; font-family: Fabriga Medium; cursor: text; text-align: right; padding-right: 5px; padding-top: 5px !important; } .data-row::selection, .data-row .feData-detail::selection { background: #000000; color: #FFFFFF; } .page .data-row .feData-detail { font-size: 0.9em; user-select: text; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; } #myAccountLightbox.lightbox .result-item.ownership .vehicle-details .vehicle-row .vehicle-cell .optionsval { text-align: center; } #myAccountLightbox.lightbox .lightbox-content .auth-sections .my-account-section .my-account-flex .my-account-main .my-account-content form#addVehicleForm .errortxt.red { font-size: 13px; color: #e83434; } .my-account-content .result-items-grid .result-item .item-detail .item-detail-content .item-detail-bottom.acc, .my-account-content .result-items-grid .result-item .item-detail .item-detail-content .item-detail-bottom.acc .vehicle-details .vehicle-row { margin-bottom: 0px; } .my-account-content .result-items-grid .result-item .item-detail .item-detail-content .item-detail-bottom.acc { margin-top: -5px; } #results-section .result-item .item-detail .item-detail-content .item-detail-top p.monthlypayment.top.new .monthlyblue { padding-left: 0; } #results-section .result-item .item-detail .item-detail-content .item-detail-top p.monthlypayment.top.new { margin-top: -10px !important; } .result-item .item-detail .monthlypayment.top.new { padding-left: 10px; } #results-section .result-item .item-detail .item-detail-content .item-detail-top p.monthlypayment.bottom.new { margin-left: 5px; margin-top: -10px; margin-bottom: 10px; } #results-section .result-item .item-detail .item-detail-content .item-detail-bottom p.retailprice { margin-top: 3px !important; } #results-section .result-item .item-detail .item-detail-content .item-detail-bottom p.retailprice .priceblue.strike-center { font-size: 20px; } #results-section .hidden { display:none !important; } #search-wrapper .result-container #results .results-grid-wrapper #results-section button.save-overlay { margin-right: -10px; } #search-wrapper .result-container #results .results-grid-wrapper #results-section .save-overlay.saved { padding-right: 30px !important; } .welcome-header.welcome h1 { font-size: 16px; color: #222; margin-bottom: 0.5rem; margin-top: 11px; } .welcome-header.welcome p { font-size: 1rem; color: #666; } .account-summary.welcome { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; } .account-summary.welcome .summary-card { background: #f7f7f7; padding: 1.2rem; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); text-align: center; /*transition: all 0.2s ease-in-out;*/ cursor: pointer; } .account-summary.welcome .summary-card:hover { background: #ececec; /*transform: translateY(-3px);*/ } .account-summary.welcome .summary-card i { font-size: 1.5rem; color: #000000; margin-bottom: 0.5rem; } .account-summary.welcome .summary-card h3 { font-size: 1rem; margin-bottom: 0.4rem; color: #333; } .account-summary.welcome .summary-card p { color: #555; font-size: 0.9rem; } /* .main-navigation-mobile-open, .main-navigation-mobile.is-enabled.is-active { position: fixed; } */ #myAccountLightbox.lightbox .lightbox-content .auth-sections .my-account-section .vehicle-details .vehicle-row .vehicle-cell .branches { font-size:0.95em; } #myAccountLightbox.lightbox .lightbox-content .auth-sections .my-account-section .cond { color: #fff; font-family: Fabriga regular, Lato, sans-serif; font-size: 0.8em; background-color: #3498db80; padding: 3px 6px 1px 5px; border-radius: 5px; } #myAccountLightbox.lightbox .my-account-main .my-account-content .result-item .image-preview.new .blurred-background { opacity: 0; } #alertSavedVehicles { margin-bottom: 3px; margin-top: 1px; } /* Tooltip/Overlay Styling for .info-icon in #settings only */ #myAccountLightbox.lightbox .alert-options .info-icon[data-tooltip]:hover::after { content: attr(data-tooltip); /* Default to data-tooltip value if specific content isn’t set */ position: absolute; background-color: rgba(97, 97, 97, 0.9); /* Semi-transparent gray background, matching your reference screenshot */ color: white; padding: 12px 35px; /* Increased padding for a larger, wider rectangular box */ border-radius: 4px; /* Remove rounded corners for a rectangular box */ font-size: 12px; z-index: 9999; /* Higher than .lightbox z-index (5000) to ensure visibility */ white-space: normal; /* Allow text wrapping */ max-width: 800px; /* Increased width for a very wide, rectangular box, matching your reference */ min-width: 390px; /* Ensure minimum width to prevent collapse */ width: auto; /* Allow dynamic width based on content and max-width */ word-wrap: break-word; /* Allow long words to break */ overflow-wrap: break-word; /* Fallback for older browsers */ line-height: 1.4; /* Slightly increased line spacing for readability */ transform: translateX(-50%); /* Center horizontally relative to the icon */ left: 400%; /* Center horizontally */ top: calc(80% + -180px); /* Position below the icon with more extra space, matching your reference’s lower placement */ margin: 0; /* Remove margin to ensure consistent positioning */ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Enhanced shadow for depth, matching your reference */ pointer-events: none; /* Prevent tooltip from blocking mouse events */ opacity: 0; /* Start hidden for transition */ transition: opacity 0.3s ease; /* Smooth fade-in */ font-weight: normal; } /* Show tooltip on hover - remove debug marker for final display */ #myAccountLightbox.lightbox .alert-options .info-icon[data-tooltip]:hover::after { opacity: 1; /* Make visible on hover */ content: attr(data-tooltip); /* Remove debug marker for final display */ } /* Custom messages for each tooltip using ::after content in #settings with line breaks */ #myAccountLightbox.lightbox .alert-options .info-icon[data-tooltip="saved-vehicles"]:hover::after { content: "By opting into this alert, you will receive a weekly email highlighting any new vehicles that have come into stock that match your saved vehicle. If you don’t want to receive an alert for a specific saved vehicle, then please untick this alert. You can opt in/out of these alerts whenever you choose by simply selecting or deselecting this option."; } #myAccountLightbox.lightbox .alert-options .info-icon[data-tooltip="saved-searches"]:hover::after { content: "By opting into this alert, you will receive a weekly email highlighting any new vehicles that have come into stock that match your saved search. If you don’t want to receive an alert for a specific saved search, then please untick this alert. You can opt in/out of these alerts whenever you choose by simply selecting or deselecting this option."; } #myAccountLightbox.lightbox .alert-options .info-icon[data-tooltip="mot-reminders"]:hover::after { content: "By opting into this alert, you will receive reminders for upcoming MOT expirations for your vehicles. If you don’t want to receive MOT reminders for a specific vehicle, then please untick this alert. You can opt in/out of these alerts whenever you choose by simply selecting or deselecting this option."; } #myAccountLightbox.lightbox .alert-options .info-icon[data-tooltip="service-reminders"]:hover::after { content: "By opting into this alert, you will receive reminders for upcoming service due dates for your vehicles. If you don’t want to receive service reminders for a specific vehicle, then please untick this alert. You can opt in/out of these alerts whenever you choose by simply selecting or deselecting this option."; } /* Ensure tooltips are positioned correctly relative to the icon and don’t get cut off */ #myAccountLightbox.lightbox .alert-options .info-icon[data-tooltip] { position: relative; /* Ensure positioning context for ::after */ } /* Debugging: Ensure parent doesn’t constrain width */ #myAccountLightbox.lightbox .alert-options { position: relative; /* Ensure positioning context for absolute tooltips */ overflow: visible; /* Prevent parent from clipping tooltips */ margin-top: 5px; } #myAccountLightbox.lightbox .checkbox-group { padding: 2px 0px 0px 0px; border-top: 1px solid #ddd; padding-bottom: 5px; padding-top: 5px; } #myAccountLightbox.lightbox .my-account-content .result-items-grid.usersettings .btn.delete-account-btn, #myAccountLightbox.lightbox .my-account-content .result-items-grid.usersettings .btn.change-pass-btn, #myAccountLightbox.lightbox .my-account-content .result-items-grid.usersettings .btn.change-alerts-btn { max-width: 165px; margin-top:5px; } #myAccountLightbox.lightbox .lightbox-content .result-items-grid.usersettings .alerts-item-settings p { margin-top: 10px; margin-bottom: 0; } #myAccountLightbox.lightbox .lightbox-content .result-items-grid.usersettings .alerts-item-settings .alert-options p { margin-top: 5px; font-size: 11px; color: #848484; } #myAccountLightbox.lightbox .my-account-content .result-items-grid.usersettings .password-item-settings, #myAccountLightbox.lightbox .my-account-content .result-items-grid.usersettings .alerts-item-settings { font-size: 14px; padding: 15px 20px 15px 20px; width: 100%; max-width: 500px; flex: 1 1 100%; max-width: 100%; min-width: 0; box-sizing: border-box; background: #ffffff; opacity: 1; animation: fadeIn 0.5s forwards; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 5px 0px; overflow: hidden; border-radius: 16px; min-width: 300px; max-width: 500px; display: flex; flex-direction: column; transition: background-color 0.3s ease; margin-top: -15px; margin-left: auto; margin-right: auto; min-width: 90%; } #myAccountLightbox.lightbox .my-account-content .result-items-grid.usersettings .alerts-item-settings { overflow: unset; } #myAccountLightbox.lightbox .my-account-content .result-items-grid.usersettings .result-item.settings .search-row button.edit-person-btn { background-color: #fff0 !important; background: none; background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0); border: none; cursor: pointer; padding: 0px; margin-top: -5px; color: #3578f6; width: 30px; height: 30px; transform: scale(1.2, 1.2); padding-top: 0px; } #myAccountLightbox.lightbox .my-account-content .result-items-grid.usersettings .result-item.settings .search-row button.edit-person-btn:hover { color: #6cbd3d; } #searchModalOptions.lightbox.search-modal .lightbox-content .modal-body select#searchModalInputTitle.modal-input, #searchModalOptions.lightbox.search-modal .lightbox-content .modal-body select#searchModalInputCounty.modal-input { max-width: unset; } .tao-fullwidth #myAccountLightbox.lightbox .my-account-content .result-items-grid.usersettings { grid-template-columns: unset; } #myAccountLightbox.lightbox .my-account-content .result-items-grid.usersettings .result-item.settings { font-size: 14px; padding: 25px 20px 15px 20px; width: 100%; max-width: 500px !important; } #myAccountLightbox.lightbox .my-account-content .result-items-grid.usersettings .search-cell.persdet { justify-content: flex-start; margin-right: 0; text-align: left; font-weight: normal; } #myAccountLightbox.lightbox .lightbox-content .item-detail-content .optionsdes { /*font-weight: bold;*/ } #myAccountLightbox.lightbox .lightbox-content .item-detail-content .optionsval { width: 100%; text-align: right; margin-right: 5px; } #myAccountLightbox.lightbox .result-item.ownership .vehicle-cell.bottomline { border-top: 1px solid #ddd; padding-top: 10px; } #dateModal.lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding-top: 20px; background-color: transparent; display: none; z-index: 1000; } #dateModal.lightbox .modal-backdrop-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); cursor: pointer; } #dateModal.lightbox .lightbox-content { background-color: #fefefe; margin: 5% auto; padding: 15px; padding-right: 15px; padding-left: 15px; padding-right: 30px; padding-left: 30px; border: 1px solid #888; width: 80%; max-width: 300px; border-radius: 8px; position: relative; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); max-height: 80vh; overflow-y: auto; box-sizing: border-box; padding-left: 5px; padding-right: 5px; } #dateModal.lightbox .modal-header { padding: 0; padding-right: 0px; padding-right: 0px; border-bottom: none; margin: 0; text-align: right; padding-right: 10px; } #dateModal.lightbox .modal-close-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #666; margin: 0; padding: 0; } #dateModal.lightbox .modal-close-btn:hover { color: #000; } #dateModal.lightbox .modal-body { padding: 16px; padding-top: 16px; padding-top: 0; } #dateModal.lightbox .modal-body .modal-input:hover { box-shadow: 0px 0px 0px 1px inset; } #dateModal.lightbox .modal-body .modal-input:focus-visible { outline: none; } #dateModal.lightbox .modal-input { width: 100%; padding: 8px; font-size: 1rem; border: 1px solid #000; border-radius: 4px; margin-bottom: 16px; } #dateModal.lightbox .modal-body h3 { margin: 0 0 16px; font-size: 1rem; color: #333; } #dateModal.lightbox .modal-body p { margin: 0 0 16px; font-size: 1rem; color: #333; } #dateModal.lightbox .modal-actions { display: flex; justify-content: space-between; gap: 8px; } #emailVerificationLightbox.lightbox .vacancy-application .modal-actions .btn.modal-login-btn, #dateModal.lightbox .btn.modal-cancel-btn, #dateModal.lightbox .btn.modal-submit-btn { background-color: #000; color: #fff; border: none; padding: 10px 20px; margin: 0 10px; border-radius: 4px; cursor: pointer; font-size: 14px; font-family: Fabriga regular, Lato, sans-serif; transition: background-color 0.3s ease, transform 0.2s ease; display: inline-block; text-shadow: none; text-transform: initial; max-height: 40px; } #emailVerificationLightbox.lightbox .vacancy-application .modal-actions .btn.modal-login-btn:hover, #dateModal.lightbox .btn.modal-cancel-btn:hover, #dateModal.lightbox .btn.modal-submit-btn:hover { background-color: #34495e; } #myAccountLightbox.lightbox .result-item.ownership { background-color: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); min-width: 250px; max-width: 250px; } #myAccountLightbox.lightbox .result-item.ownership .item-detail-top h3 { margin-top: 0; margin-bottom: 0; font-weight: normal; color: #2c3e50; font-size: 1em; line-height: 1.2em; } #myAccountLightbox.lightbox .result-item.ownership .item-detail-top small { font-size: 14px; padding-top: 5px; white-space: normal; border-bottom: 1px solid #ddd; margin-bottom: 10px; padding-bottom: 5px; } #myAccountLightbox.lightbox .result-item.ownership .vehicle-cell.data { justify-content: flex-end; margin-right: 0; } #myAccountLightbox.lightbox #lbcontentmain { font-size: 14px; padding-bottom: 10px; } #myAccountLightbox.lightbox .result-item.ownership .add-service-btn, #myAccountLightbox.lightbox .result-item.ownership .add-mot-btn { background-color: #fff !important; background: none; background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0); border: none; cursor: pointer; padding: 0px; margin-top: -5px; color: #3578f6; width: 30px; height: 30px; transform: scale(1.2, 1.2); } #myAccountLightbox.lightbox .result-item.ownership .ownership-options { width: 110%; } #myAccountLightbox.lightbox .result-item.ownership .vehicle-details .vehicle-row .vehicle-cell { margin-left: 0px; } .loaderblackout { z-index: 9999; } .loaderpopup { z-index: 99999; } #searchModalOptions.lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding-top: 20px; background-color: transparent; display: none; z-index: 1000; } #addmanvehLightbox.lightbox, #regguideLightbox.lightbox { display: none; position: fixed; z-index: 1001; padding-top: 20px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); transition: opacity 0.3s ease; } #addmanvehLightbox.lightbox .lightbox-content, #regguideLightbox.lightbox .lightbox-content { background-color: #fefefe; margin: 5% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 500px; border-radius: 8px; position: relative; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); max-height: 80vh; overflow-y: auto; min-height: 150px; box-sizing: border-box; } #addmanvehLightbox.lightbox .lightbox-content .close, #regguideLightbox.lightbox .lightbox-content .close { color: #333; position: absolute; right: 15px; top: 10px; font-size: 25px; font-weight: bold; cursor: pointer; transition: color 0.3s ease; } #addmanvehLightbox.lightbox .lightbox-content .text-section h3, #regguideLightbox.lightbox .lightbox-content .text-section h3 { font-size: 16px; font-weight:bold; } #addmanvehLightbox.lightbox .lightbox-content .text-section, #regguideLightbox.lightbox .lightbox-content .text-section { padding: 10px; box-sizing: border-box; font-family: Fabriga regular, Lato, sans-serif; font-size: 14px; } #addmanvehLightbox.lightbox .lightbox-content #addManVehicleForm, #myAccountLightbox.lightbox .my-account-content #addVehicleForm { max-width: 500px; margin: 0; padding: 20px; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 8px; } #myAccountLightbox.lightbox .my-account-content p { font-size: 14px; } #myAccountLightbox.lightbox .my-account-content #addVehicleForm p, #myAccountLightbox.lightbox .my-account-content #addvehiclejsonresult { font-size: 14px; color: #555; margin: 0; } #myAccountLightbox.lightbox .my-account-content #addVehicleForm div.form-group p { margin-bottom: 0; } #myAccountLightbox.lightbox .my-account-content #addvehiclejsonresult .addvehicle-actions div.subtxt span#addvehicle-changedetails, #myAccountLightbox.lightbox .my-account-content #addVehicleForm p a { color: #3578f6; cursor: pointer; } #addmanvehLightbox.lightbox .lightbox-content #addManVehicleForm label, #myAccountLightbox.lightbox .my-account-content #addVehicleForm label { display: block; margin: 10px 0 5px; font-weight: bold; font-size: 14px; color: #202124; } #addmanvehLightbox.lightbox .lightbox-content #addManVehicleForm .form-group input, #addmanvehLightbox.lightbox .lightbox-content #addManVehicleForm .form-group select, #myAccountLightbox.lightbox .my-account-content #addVehicleForm .form-group input#regVehicleNumber { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; max-width: 200px; margin-top: 10px; margin-bottom: 10px; } #addmanvehLightbox.lightbox .lightbox-content #addManVehicleForm .form-group input, #addmanvehLightbox.lightbox .lightbox-content #addManVehicleForm .form-group select { margin-top: 5px; margin-bottom: 5px; } #addmanvehLightbox.lightbox .lightbox-content #addManVehicleForm .form-group, #myAccountLightbox.lightbox .my-account-content #addVehicleForm .form-group { display: flex; gap: 0px; margin-bottom: 15px; flex-direction: column; } #saveConfirmationLightbox.lightbox .lightbox-content.save-confirmation { text-align: center; min-height: auto; max-width: 480px !important; } #resetPasswordLightbox.lightbox .lightbox-content #reset-close button.close-button, #myAccountLightbox.lightbox .my-account-content #addvehiclejsonresult button#addvehicle-confirm.persbut, #addmanvehLightbox.lightbox .lightbox-content #addManVehicleForm .form-group button, #myAccountLightbox.lightbox .my-account-content #addVehicleForm .form-group button, #saveConfirmationLightbox.lightbox .lightbox-content.save-confirmation button.save-confirm-button.primary, #saveConfirmationLightbox.lightbox .lightbox-content.save-confirmation button.save-confirm-button.secondary { background-color: #000; color: white; border: none; border-radius: 4px; padding: 9px 0; font-size: 14px; cursor: pointer; width: 100%; height: 36px; line-height: 20px; transition: background-color 0.3s ease; text-shadow: none; text-transform: initial; margin-top:0; max-width: 200px; } #saveConfirmationLightbox.lightbox .lightbox-content.save-confirmation button.save-confirm-button.primary { margin-bottom: 10px; } #resetPasswordLightbox.lightbox .lightbox-content #reset-close button.close-button:hover, #myAccountLightbox.lightbox .my-account-content #addvehiclejsonresult button#addvehicle-confirm.persbut:hover, #addmanvehLightbox.lightbox .lightbox-content #addManVehicleForm .form-group button:hover, #myAccountLightbox.lightbox .my-account-content #addVehicleForm .form-group button:hover, #saveConfirmationLightbox.lightbox .lightbox-content.save-confirmation button.save-confirm-button.primary:hover, #saveConfirmationLightbox.lightbox .lightbox-content.save-confirmation button.save-confirm-button.secondary:hover { background-color: #333; } #optinsms, #optinphone, #optinpost, #optinemail, #alertSavedVehicles, #alertSavedSearches, #alertMOTReminders, #alertServiceReminders, #addmanvehLightbox.lightbox .lightbox-content #addManVehicleForm #addVehicle, #myAccountLightbox.lightbox .my-account-content #addVehicleForm #addVehicle { width: 20px !important; height: 20px !important; margin-right: 5px; cursor: pointer; } #myAccountLightbox.lightbox .my-account-content #addvehiclejsonresult table { border: 0; } #myAccountLightbox.lightbox .my-account-content #addvehiclejsonresult .partexresult { max-width: 625px; margin-top: 0; padding: 20px 0px 10px 10px; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 8px; } #myAccountLightbox.lightbox .my-account-content #addvehiclejsonresult .resultheader { color: #555; font-size: 15px; line-height: 1.3em; font-weight: bold; } #myAccountLightbox.lightbox .my-account-content #addvehiclejsonresult .addvehicle-actions .subtxt, #myAccountLightbox.lightbox .my-account-content #addvehiclejsonresult .addvehicle-action { margin: 10px 10px 5px 10px; min-width: 200px; } #myAccountLightbox.lightbox .my-account-content #addvehiclejsonresult .addvehicle-actions .subtxt { margin-top: 20px; } #myAccountLightbox.lightbox .my-account-content #addvehiclejsonresult .partexresult .addvehicle-item-key { font-weight: bold; } #myAccountLightbox.lightbox .my-account-content #addvehiclejsonresult #resultheaderderiv { margin-top: 5px; } #myAccountLightbox.lightbox .my-account-content #addvehiclejsonresult .addvehicle-actions { display: flex; gap: 8px; margin-top: auto; justify-content: space-between; flex-direction: row; } #myAccountLightbox.lightbox .my-account-content form#addVehicleForm .btn.link-btn { background-color: #fff; color: #3578f6; border: none; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border-radius: 4px; cursor: pointer; font-size: 14px; font-family: Fabriga regular, Lato, sans-serif; transition: background-color 0.3s ease, transform 0.2s ease; display: inline-block; text-shadow: none; text-transform: initial; max-height: 20px; width: initial; } #myAccountLightbox.lightbox .lightbox-content .auth-sections .my-account-section .saved-quotes-grid .saved-quote-actions button.btn.run-quote-btn { display:none; } .lightbox-content.open { transform: translate(-50%, -50%); opacity: 1; } #confirmationLightbox.lightbox .lightbox-content .confirmation-section .confirmation-buttons { justify-content: space-between; display: flex; max-width: 410px; margin-left: auto; margin-right: auto; } .item-detail-content .vehicle-details .vehicle-row .save-overlay, #search-wrapper #carssearch .filter-section .totalresults-section button.save-search { background-color: #ffffff; padding: 5px 10px; border-radius: 5px; display: flex; align-items: center; gap: 8px; font-size: 14px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); z-index: 900; cursor: pointer; width: fit-content; } #search-wrapper #carssearch .filter-section .totalresults-section button.save-search { margin-top: 10px; } .save-overlay .save-text { color: #000; font-size: 14px; text-transform: initial; margin-top: 4px; line-height: 0; } .save-overlay img.save-icon { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; } .save-overlay span.save-text { color: #000; font-size: 14px; text-transform: initial; margin-top: 4px; line-height: 0; text-shadow: none; } #results-section .result-item .item-detail .item-detail-content .item-detail-bottom .vehicle-details .vehicle-row .vehicle-cell.heart button.save-overlay { margin-top: -6px; } #carssearch .filter-section .filter-controls button.nav-account-button, #car-detail.container .header button.nav-account-button { /*background-color: #007bff;*/ background-color: #000; color: #fff; border: none; padding: 7px 20px; margin: 0 10px; border-radius: 4px; cursor: pointer; font-size: 14px; font-family: Fabriga regular, Lato, sans-serif; transition: background-color 0.3s ease, transform 0.2s ease; display: inline-block; text-shadow: none; text-transform: initial; max-height: 40px; max-width: 140px; } #carssearch .filter-section .filter-controls button.nav-account-button:hover, #car-detail.container .header button.nav-account-button:hover { /*background-color: #0056b3;*/ background-color: #34495e; text-transform: initial; } #carssearch .filter-section .filter-controls button.nav-account-button .fa-solid.fa-warehouse, #car-detail.container .header button.nav-account-button .fa-solid.fa-warehouse { margin-right: 7px; } #myAccountLightbox.lightbox .image-preview { position: relative; width: 100%; flex-shrink: 0; height: 200px; overflow: hidden; margin-bottom: 10px; border-top-left-radius: 16px; border-top-right-radius: 16px; } /* Confirmation Lightbox */ #confirmationLightbox.lightbox { display: none; position: fixed; z-index: 1001; /* Above myAccountLightbox (z-index: 1000) */ padding-top: 20px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); transition: opacity 0.3s ease; } #confirmationLightbox.lightbox .lightbox-content { background-color: #fefefe; margin: 5% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 500px; border-radius: 8px; position: relative; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); max-height: 80vh; overflow-y: auto; min-height: 150px; box-sizing: border-box; } #confirmationLightbox.lightbox .lightbox-content .close { color: #333; position: absolute; right: 15px; top: 10px; font-size: 25px; font-weight: bold; cursor: pointer; transition: color 0.3s ease; } #confirmationLightbox.lightbox .lightbox-content .close:hover, #confirmationLightbox.lightbox .lightbox-content .close:focus { color: #007bff; } #confirmationLightbox.lightbox .lightbox-content .confirmation-section { padding: 10px; box-sizing: border-box; font-family: Fabriga regular, Lato, sans-serif; text-align: center; } #saveConfirmationLightbox.lightbox .lightbox-content.save-confirmation h2, #confirmationLightbox.lightbox .lightbox-content .confirmation-section h2 { font-size: 18px; color: #202124; margin: 0 0 10px 0; } #confirmationLightbox.lightbox .lightbox-content .confirmation-section p { font-size: 14px; color: #333; margin: 0px 0px 10px 0; padding-top: 20px; } .lightbox-content .my-account-content .vehicle-actions .btn.view-details-btn, .lightbox-content .my-account-content .vehicle-actions .btn.delete-btn { margin: 0 !important; } .lightbox-content .my-account-section .vehicle-actions .btn.view-details-btn.sold-btn { cursor:default; background-color: #d11930; } .lightbox-content .my-account-section .vehicle-actions .btn.view-details-btn.sold-btn:hover{ background-color: #d11930; } .lightbox-content .my-account-content .vehicle-actions .btn.view-details-btn, /*.lightbox-content .my-account-content .vehicle-actions .btn.delete-btn,*/ #confirmationLightbox.lightbox .lightbox-content .confirmation-section .btn { /*background-color: #007bff;*/ background-color: #000; color: #fff; border: none; padding: 10px 20px; /*margin: 0 10px;*/ border-radius: 4px; cursor: pointer; font-size: 14px; font-family: Fabriga regular, Lato, sans-serif; transition: background-color 0.3s ease, transform 0.2s ease; display: inline-block; text-shadow: none; text-transform: initial; max-height: 40px; } .lightbox-content .my-account-content .vehicle-actions .btn.delete-btn { background-color: #fff; color: #3578f6; border: none; padding: 10px 20px; /*margin: 0 10px;*/ border-radius: 4px; cursor: pointer; font-size: 14px; font-family: Fabriga regular, Lato, sans-serif; transition: background-color 0.3s ease, transform 0.2s ease; display: inline-block; text-shadow: none; text-transform: initial; max-height: 40px; } .lightbox-content .my-account-content .vehicle-actions .btn.delete-btn:hover { background-color: #fff; color: #d50711; } .lightbox-content .my-account-content .vehicle-actions .btn.view-details-btn:hover, /*.lightbox-content .my-account-content .vehicle-actions .btn.delete-btn:hover,*/ #confirmationLightbox.lightbox .lightbox-content .confirmation-section .btn:hover { /* background-color: #0056b3;*/ background-color: #34495e; /*transform: translateY(-1px);*/ } #confirmationLightbox.lightbox .lightbox-content .confirmation-section .btn:focus { outline: 2px solid #3579f6; outline-offset: 2px; } /* Mobile Adjustments (max-width: 768px) */ @media (max-width: 768px) { #confirmationLightbox.lightbox .lightbox-content { width: 90%; padding: 15px; min-height: 120px; } #confirmationLightbox.lightbox .lightbox-content .confirmation-section .btn { display: block; width: 100%; margin: 10px 0; } } /* Tablet Adjustments (769px–1024px) */ @media (min-width: 769px) and (max-width: 1024px) { #confirmationLightbox.lightbox .lightbox-content { width: 90%; max-width: 600px; } } /* Large Screens (1025px and up) */ @media (min-width: 1025px) { #confirmationLightbox.lightbox .lightbox-content { max-width: 500px; } } .vehicle-actions { display: flex; /*gap: 10px;*/ margin-top: 10px; margin-left: auto; margin-right: auto; /*max-width: fit-content;*/ padding-bottom: 17px; flex-direction: column; } .view-details-btn, .delete-btn { padding: 8px 16px; font-size: 14px; } .my-account-sidebar .sidebar-item { /* Existing styles */ cursor: pointer; } .my-account-sidebar .sidebar-item:hover { background-color: #dee2e6; } .my-account-sidebar .sidebar-item.active { background-color: #dee2e6; } /* My Account Lightbox Container */ #myAccountLightbox.lightbox { display: none; position: fixed; z-index: 1000; padding-top: 20px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); transition: opacity 0.3s ease; } #myAccountLightbox.lightbox .lightbox-content { background-color: #fefefe; margin: 5% auto; padding: 30px; border: 1px solid #888; width: 80%; /*max-width: 800px;*/ border-radius: 8px; position: relative; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); max-height: 80vh; overflow-y: hidden; min-height: 700px; box-sizing: border-box; padding-left: 5px; padding-right: 5px; } #myAccountLightbox.lightbox .lightbox-content .close { color: #333; position: absolute; right: 10px; top: 0px; font-size: 25px; font-weight: bold; cursor: pointer; transition: color 0.3s ease; } #myAccountLightbox.lightbox .lightbox-content .close:hover, #myAccountLightbox.lightbox .lightbox-content .close:focus { color: #007bff; } /* My Account Section */ .my-account-section { display: flex; flex-direction: column; padding: 5px; font-family: Fabriga regular, Lato, sans-serif; text-align: left; width: 100%; } /* Account Header */ .my-account-section .account-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .my-account-section .account-header h2 { font-size: 18px; color: #202124; margin: 0; text-align: left; } .my-account-section .logged-in-text { font-size: 13px; color: #959595; margin: 0; text-align: right; padding-right: 19px; } /* My Account Flex Container */ .my-account-section .my-account-flex { display: flex; flex-direction: row; gap: 10px; width: 100%; box-sizing: border-box; } /* Sidebar */ .my-account-section .my-account-sidebar { width: 170px; background-color: #f8f9fa; padding-top: 5px; padding-bottom: 0; padding-right: 0; border-right: 1px solid #dee2e6; flex-shrink: 0; padding-left: 5px; flex: 0 0 170px; } .my-account-section .my-account-sidebar h2 { font-size: 18px; color: #202124; margin: 0 0 15px 0; } .my-account-section .my-account-sidebar .sidebar-section { font-size: 16px; color: #000; margin: 10px 0 5px 0; font-weight: bold; } .my-account-section .my-account-sidebar .sidebar-item { text-align: left; padding: 8px 0; color: #333; font-size: 14px; padding-left: 5px; cursor: pointer; } .my-account-section .my-account-sidebar .sidebar-item:hover { background-color: #dee2e6; } .my-account-section .my-account-sidebar .section-separator { border: 0; height: 1px; background-color: #dee2e6; margin: 10px 0; } .my-account-section .my-account-sidebar .heart-icon, .my-account-section .my-account-sidebar .car-icon, .my-account-section .my-account-sidebar .settings-icon, .my-account-section .my-account-sidebar .logout-icon { vertical-align: text-bottom; margin-right: 5px; } .my-account-section .my-account-sidebar .add-icon { margin-right: 3px; } /* Main Content Area */ .my-account-section .my-account-main { flex: 1; display: flex; flex-direction: column; gap: 15px; width: 100%; box-sizing: border-box; } .my-account-section .my-account-main .lbcontentheader h3 { margin-bottom: 0; font-size: 16px; color: black; margin-top: 15px; margin-left: 5px; font-weight: 800; } /* Content Grid Wrapper */ .my-account-section .my-account-content { padding: 3px; box-sizing: border-box; min-width: 0; margin-left: auto; margin-right: auto; min-width: 90%; } .my-account-section .my-account-content .result-items-grid { display: grid; /*grid-template-columns: repeat(2, 1fr);*/ grid-template-columns: repeat(auto-fit, minmax(250px, 250px)); gap: 20px; } /* Result Item */ .my-account-section .result-item { flex: 1 1 100%; max-width: 100%; min-width: 0; box-sizing: border-box; background: #ffffff; opacity: 1; animation: fadeIn 0.5s forwards; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 5px 0px; overflow: hidden; border-radius: 16px; min-width: 250px; max-width: 250px; display: flex; flex-direction: column; transition: background-color 0.3s ease; margin-left: auto; margin-right: auto; min-width: 90%; } /* .my-account-section .result-item:hover { background-color: #f5f5f5; } */ /* Item Detail */ .result-item .item-detail { padding-left: 8px; padding-right: 8px; padding-top: 0; padding-bottom: 0; flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; width: 100%; } .result-item h3 { margin-top: 0; margin-bottom: 0; font-weight: normal; color: #2c3e50; font-size: 1.2em; } #myAccountLightbox.lightbox .info-icon { background-color: #b9b9b9; color: white; border-radius: 50%; width: 15px; height: 15px; display: inline-flex; justify-content: center; align-items: center; margin-right: 5px; font-size: 10px; padding-right: 1px; padding-top: 2px; margin-left: 5px; text-align: center; line-height: 16px; font-style: normal; font-weight: normal; margin-left: 5px; cursor: pointer; transition: background-color 0.3s ease; } #myAccountLightbox.lightbox .info-icon:hover { background-color: #0056b3; } .result-item .item-detail small, .result-item .item-detail colr { font-size: 75%; color: rgb(102, 102, 102); font-weight: 400; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; } .result-item .item-detail colr { color: rgb(68, 68, 68); } .result-item .item-detail .highlight-text { display: block; margin-top: 4px; color: #2c3e50; font-size: 0.75em; background-color: #eee; width: fit-content; font-size: 0.75em !important; font-family: Fabriga Medium; padding-left: 4px; font-weight: normal; padding-right: 4px; margin-bottom: 5px; } .result-item .item-detail p { margin-top: 8px; font-size: 0.9em; color: #333; font-weight: normal; } .result-item .item-detail .totalprice .vat-rfl { color: #e74c3c; font-family: Fabriga Medium; font-weight: normal; font-size: 1.15em; } #myAccountLightbox.lightbox .my-account-section .my-account-content .totalprice .vat-note { color: #e74c3c; } #car-detail .car-header .car-price h2 .vat-rfl { font-size: 0.7em; } #car-detail .car-info .car-details .purchase-options #cash-option.purchase-option .vat-rfl { font-size: 0.8em; } .car-details .purchase-option #pcp-monthly-payment .vat-rfl, .car-details .purchase-option #hp-monthly-payment .vat-rfl, .car-details .purchase-option #cs-monthly-payment .vat-rfl { font-size: 0.8em; float: left; } #myLightboxHP.lightbox .lightbox-content .vat-rfl, #myLightboxCS.lightbox .lightbox-content .vat-rfl, #myLightbox.lightbox .lightbox-content .quote-title .vat-rfl { font-size: 0.8em; } .result-item .item-detail .monthlypayment { margin-bottom: 0px; margin-top: 0px; padding-left: 4px; } .result-item .item-detail .monthlypayment.top { margin-top: 10px; margin-bottom: 0; } .result-item .item-detail .monthlypayment.bottom { margin-top: -5px; } .result-item .item-detail .totalprice { padding-left: 4px; margin-bottom: 0px; margin-top: 0px; } .monthlyblue { color: #3579f6; font-size: 1.25em; } .pricered { font-size: 1.5em; color: #e74c3c; font-family: Fabriga Medium; } /* Vehicle Details */ /* .vehicle-details { width: 100%; margin-top: 8px; float: left; } */ .car-header .car-price { text-align: right; } .car-header .car-price .retailprice, .results-grid-wrapper .retailprice { margin-top: 0 !important; float: left; padding-right: 10px; margin-bottom: 0; } .car-header .car-price .retailprice { margin-top: 2px !important; } .car-header .car-price .retailprice .rrp, .results-grid-wrapper .retailprice .rrp { color: #444444; font-family: Fabriga Medium; } .vehicle-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 5px; gap: 10px; } .vehicle-row:last-child { margin-bottom: 15px; } .vehicle-cell { display: flex; align-items: flex-start; justify-content: flex-start; white-space: nowrap; font-size: 14px; color: #333; flex: 1; margin-left: 10px; } .detail-icon { font-size: 16px; color: #666; margin-right: 4px; } .detail-icon.calendar i, .detail-icon.gear i, .detail-icon.odometer i, .detail-icon.fuel i, .detail-icon.location i { margin-right: 4px; } .vehicle-cell.heart { justify-content: flex-end; margin-right: 25px; line-height: initial; } .vehicle-cell.heart .detail-icon img { cursor: pointer; } .vehicle-cell.trans, .vehicle-cell.fuel { justify-content: flex-end; margin-right: 25px; } /* Notification Section */ .my-account-section .my-account-notification { width: 100%; border-radius: 4px; margin: 0; padding-left: 5px; margin-top: -16px; margin-bottom: -10px; } .my-account-section .notifSec { color: #007bff; font-size: 13px; } /* Image Preview */ .my-account-section .result-item .image-preview { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; } #myAccountLightbox.lightbox .lightbox-content .auth-sections .my-account-section .my-account-flex .my-account-main .my-account-content .result-items-grid .result-item .image-preview .blurred-background { z-index: 0; } #myAccountLightbox.lightbox .lightbox-content .auth-sections .my-account-section .my-account-flex .my-account-main .my-account-content .result-items-grid .result-item .image-preview .image-container img { z-index: 1; } .my-account-section .result-item .image-preview .blurred-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; filter: blur(10px); z-index: -1; opacity: 1; pointer-events: none; } .my-account-section .result-item .image-preview .image-container { display: flex; height: 100%; transition: transform 0.3s ease-in-out; z-index: 10; } .my-account-section .result-item .image-preview .image-container img { width: 100%; height: 100%; object-fit: contain; flex-shrink: 0; } /* Carousel Controls */ .my-account-section .result-item .prev-arrow, .my-account-section .result-item .next-arrow { position: absolute; top: 40%; transform: translateY(-50%); background: transparent; color: transparent; border: none; padding: 10px 15px; cursor: pointer; font-size: 18px; z-index: 10; opacity: 0; transition: opacity 0.3s ease, background 0.3s ease, color 0.3s ease; } .my-account-section .result-item .image-preview:hover .prev-arrow, .my-account-section .result-item .image-preview:hover .next-arrow, .my-account-section .result-item .image-container:hover .prev-arrow, .my-account-section .result-item .image-container:hover .next-arrow, .my-account-section .result-item .image-container img:hover ~ .prev-arrow, .my-account-section .result-item .image-container img:hover ~ .next-arrow { background: rgba(0, 0, 0, 1); color: white; opacity: 0.5; } .my-account-section .result-item .prev-arrow:hover, .my-account-section .result-item .next-arrow:hover { background: rgba(255, 0, 0, 1); color: white; opacity: 1; } .my-account-section .result-item .prev-arrow { left: 10px; } .my-account-section .result-item .next-arrow { right: 10px; } .my-account-section .result-item .carousel-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; z-index: 15; } .my-account-section .result-item .carousel-dot { width: 8px; height: 8px; background: rgba(255, 255, 255, 0.5); border-radius: 50%; cursor: pointer; transition: background 0.3s ease; } .my-account-section .result-item .carousel-dot.active { background: white; } /* Mobile Adjustments */ @media (max-width: 767px) { .my-account-section .my-account-flex { flex-direction: column; } .my-account-section .my-account-sidebar { width: 100%; border-right: none; border-bottom: 1px solid #dee2e6; } .my-account-section .my-account-content { min-width: 100%; padding: 10px; } .my-account-section .my-account-content .result-items-grid { grid-template-columns: 1fr; gap: 15px; } .my-account-section .result-item { margin-bottom: 0; } .vehicle-row { flex-direction: row; align-items: flex-start; gap: 5px; margin-bottom: 5px; } .vehicle-row:last-child { margin-bottom: 0; } .vehicle-cell { font-size: 12px; justify-content: flex-start; } .vehicle-cell.heart { justify-content: flex-start; margin-right: 0; } .vehicle-cell.trans, .vehicle-cell.fuel { justify-content: flex-start; margin-right: 0; } .detail-icon { font-size: 14px; margin-right: 2px; } } /* Tablet Adjustments (769px–1024px) */ @media (min-width: 769px) and (max-width: 1024px) { #myAccountLightbox.lightbox .lightbox-content { /*width: 90%;*/ width: 100%; max-width: 900px; } .my-account-section .my-account-content .result-items-grid { /*grid-template-columns: repeat(2, 1fr);*/ grid-template-columns: repeat(auto-fit, minmax(250px, 250px)); gap: 20px; } } /* Large Screens (1025px and up) */ @media (min-width: 1025px) { #myAccountLightbox.lightbox .lightbox-content { /* max-width: 845px;*/ } } @media screen and (max-width: 900px) { .tao-fullwidth.carsearch .main-navigation-mobile-open, .tao-fullwidth.carsearch .main-navigation-mobile.is-enabled.is-active { position: sticky; } .tao-fullwidth.carsearch .main-navigation-mobile-open {left: 88%;top: 10px;} } @media screen and (max-width: 900px) and (orientation: landscape) { .tao-fullwidth.carsearch .main-navigation-mobile-open {left: 89%;top: 10px;} } @media screen and (max-width: 767px) and (orientation: portrait) { /* lister */ .item-detail-bottom .vehicle-details .vehicle-row .vehicle-cell p.totalprice .pricered.new {font-size: 2em;} .lightbox-container.open { font-size: 0.9em;} .my-account-section {padding: 0;} .my-account-section .account-header {margin-bottom: 0px;} .my-account-section .my-account-sidebar .sidebar-item {padding: 1px 0;} .my-account-section .my-account-main .lbcontentheader h3 {margin-top: 1px;} #myAccountLightbox.lightbox .lightbox-content .auth-sections .my-account-section .my-account-flex .my-account-main {max-height: 50vh;padding-bottom: 70px;} .my-account-section .my-account-content {padding: 5px;} .my-account-section .result-item {border-radius: 0;min-width: 300px;} #myAccountLightbox.lightbox .my-account-content .result-items-grid.usersettings .result-item.settings {padding: 0px 2px 2px 0px; max-width: 285px;} .my-account-section .search-cell, .my-account-section .quote-cell, #myAccountLightbox.lightbox .my-account-content p {font-size: 12px;} #myAccountLightbox.lightbox .my-account-content .result-items-grid.usersettings .result-item.settings .search-row button.edit-person-btn {transform: scale(1, 1);} #myAccountLightbox.lightbox .my-account-content .result-items-grid.usersettings .search-cell.persdet {min-width: 125px;} .my-account-section .logged-in-text {font-size: 11px;} .my-account-section .account-header h2 {font-size: 17px;white-space: nowrap;} #myAccountLightbox.lightbox .my-account-content .result-items-grid.usersettings .password-item-settings, #myAccountLightbox.lightbox .my-account-content .result-items-grid.usersettings .alerts-item-settings {font-size: 12px;padding: 5px 0px 0px 5px;border-radius: 0;min-width: 260px;max-width: 260px;} #myAccountLightbox.lightbox .saved-search-card, #myAccountLightbox.lightbox .saved-quote-card {border-radius: 5px;padding: 5px;min-width: 300px;max-width: 300px;} #confirmationLightbox.lightbox .lightbox-content .confirmation-section .confirmation-buttons {flex-direction: column-reverse;display: flex; max-width: 150px;} #myAccountLightbox.lightbox #lbcontentmain {font-size: 12px;} #myAccountLightbox.lightbox .result-item.ownership {min-width: 300px;max-width: 300px;border-radius: 5px;padding: 5px;padding-top: 10px;} #myAccountLightbox.lightbox .my-account-content #addVehicleForm p { #myAccountLightbox.lightbox .my-account-content #addvehiclejsonresult font-size: 12px; } #myAccountLightbox.lightbox .my-account-content .checkbox-label.nostar.required, #myAccountLightbox.lightbox .my-account-content form#addVehicleForm .btn.link-btn, #emailVerificationLightbox .lightbox-content p, #resetPasswordLightbox.lightbox .lightbox-content p, #welcomeLightbox .lightbox-content p, #resetPasswordLightbox.lightbox .lightbox-content #setPasswordForm label, #welcomeLightbox .lightbox-content label, #welcomeLightbox .lightbox-content a.data-use, #addmanvehLightbox.lightbox .lightbox-content #addManVehicleForm .form-group input, #addmanvehLightbox.lightbox .lightbox-content #addManVehicleForm .form-group select, #myAccountLightbox.lightbox .my-account-content #addVehicleForm .form-group input#regVehicleNumber { font-size: 12px !important; } #myAccountLightbox.lightbox .my-account-content #addvehiclejsonresult .partexresult {max-width: 480px;border-radius: 5px;padding: 10px 0px 0px 0px;font-size: 12px;} #myAccountLightbox.lightbox .my-account-content #addvehiclejsonresult .resultheader {font-size: 13px;} #myAccountLightbox.lightbox .my-account-content #addVehicleForm p, #myAccountLightbox.lightbox .my-account-content #addvehiclejsonresult {font-size: 12px;} #myAccountLightbox.lightbox .my-account-content #addvehiclejsonresult .addvehicle-actions {flex-direction: column;gap: 0px;} #myAccountLightbox.lightbox .result-item.ownership .add-service-btn, #myAccountLightbox.lightbox .result-item.ownership .add-mot-btn, #myAccountLightbox.lightbox .rename-btn {transform: scale(1, 1); } #searchModalOptions .modal-body p, #searchModalOptions .modal-input {font-size: .9rem !important;} #results-section .result-item .item-detail .item-detail-content .item-detail-bottom .vehicle-details .vehicle-row .vehicle-cell.heart button.save-overlay { margin-top: -3px;} .save-overlay img.save-icon, .totalresults-section .save-search img.save-icon {width: 15px;} .save-overlay span.save-text, .item-detail-content .vehicle-details .vehicle-row .save-overlay, #search-wrapper #carssearch .filter-section .totalresults-section button.save-search {font-size: 12px;} .main-content #search-wrapper #carssearch.disable-select .filter-section .totalresults-section .my-account-notification {line-height: 0.9em;} /* detail */ #car-detail.container .car-specs .spec-label, #car-detail.container .car-specs .spec-value, #car-detail.container .car-icons .icon-text-pair .icon-text, #car-detail.container .car-image .save-text {font-size: 13px;} #car-detail.container .car-title p, #car-detail.container .car-price p, .header > a:nth-child(1) {font-size:13px;} #car-detail.container .car-image .save-icon {width: 15px;} #car-detail.container .car-description .full-specification h3, #car-detail.container .car-description .optional-extras h3, #car-detail.container .car-description .running-costs h3 {font-size: 17px;} #car-detail.container .view-spec-link .info-icon, #car-detail.container .view-running-costs-link .info-icon {width: 15px; height: 15px;font-size: 11px;} #myAccountLightbox.lightbox .lightbox-content .auth-sections .my-account-section .my-account-flex div.my-account-sidebar { max-height: 17vh; padding-bottom: 20px; overflow-y: auto; overflow-x: hidden; } #myAccountLightbox.lightbox .lightbox-content .auth-sections .my-account-section .my-account-flex .my-account-main .my-account-content { background-color: white; } #myAccountLightbox.lightbox .lightbox-content .auth-sections .my-account-section .my-account-content .item-detail-content .item-detail-bottom.acc .vehicle-details .vehicle-row .vehicle-cell p.totalprice {margin-top: 10px;} #myAccountLightbox.lightbox .lightbox-content .auth-sections .my-account-section .my-account-flex .my-account-main .my-account-content .result-items-grid .result-item .item-detail .item-detail-content .item-detail-bottom.acc p.totalprice {margin-top: 25px;margin-left: 10px;} } #welcomeLightbox { display: none; position: fixed; z-index: 1000; padding-top: 20px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); transition: opacity 0.3s ease; } #welcomeLightbox .lightbox-content .close { color: #333; position: absolute; right: 10px; top: 0px; font-size: 25px; font-weight: bold; cursor: pointer; transition: color 0.3s ease; } #welcomeLightbox .lightbox-content { background-color: #fefefe; margin: 5% auto; padding: 30px !important; border: 1px solid #888; width: 80% !important; max-width: 800px !important; border-radius: 8px; position: relative; box-shadow: 0 4px 15px rgba(0,0,0,0.2); max-height: 80vh; overflow-y: auto; min-height: 300px; box-sizing: border-box; } #welcomeLightbox .lightbox-content .welcome-content { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 20px; width: 100%; box-sizing: border-box; } #welcomeLightbox .lightbox-content .welcome-content .welcome-section, #welcomeLightbox .lightbox-content .welcome-content .guest-section { flex: 1 1 50%; min-width: 0; padding: 10px; box-sizing: border-box; background-color: #f9f9f9; } #welcomeLightbox .lightbox-content .welcome-content .guest-section { border-left: 1px solid #ddd; display:none !important; } #welcomeLightbox .lightbox-content .welcome-content .auth-sections .my-account-section .my-account-flex .my-account-main .lbcontentheader h3 { margin-bottom: 0; font-size: 16px !important; color: black; margin-top: 15px; margin-left: 5px; } #welcomeLightbox .lightbox-content .welcome-content .auth-sections p.monthlypayment.top { margin-bottom: 0; } #welcomeLightbox .lightbox-content .welcome-content .auth-sections .item-detail .monthlypayment.bottom { margin-top: -5px; } /* Mobile breakpoint (including iPad portrait, max-width: 768px) */ @media (max-width: 768px) { #car-detail.container #welcomeLightbox .lightbox-content .welcome-content { flex-direction: column; } #welcomeLightbox .lightbox-content .welcome-content .welcome-section, #welcomeLightbox .lightbox-content .welcome-content .guest-section { flex: 1 1 100%; width: 100%; background-color: #f9f9f9; } #welcomeLightbox .lightbox-content .welcome-content .guest-section { border-left: none; border-top: 1px solid #ddd; } #welcomeLightbox .lightbox-content .welcome-content .auth-sections #sgparts.vacancy-application #regForm #vacancy-application-title select, #welcomeLightbox .lightbox-content .welcome-content .auth-sections #loginsec.vacancy-application #loginForm input, #welcomeLightbox .lightbox-content .welcome-content .auth-sections #sgparts.vacancy-application #regForm input { max-width: initial; margin-right: 10px; } } /* Save Confirmation Lightbox */ #saveConfirmationLightbox.lightbox { display: none; position: fixed !important; z-index: 1000; padding-top: 20px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); transition: opacity 0.3s ease; } #saveConfirmationLightbox.lightbox .lightbox-content { background-color: #fefefe; margin: 5% auto; padding: 30px; border: 1px solid #888; width: 80%; max-width: 800px; border-radius: 8px; position: relative; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); max-height: 80vh; overflow-y: auto; min-height: 200px; box-sizing: border-box; } #saveConfirmationLightbox.lightbox .lightbox-content .close { color: #333; position: absolute; right: 15px; top: 10px; font-size: 25px; font-weight: bold; cursor: pointer; transition: color 0.3s ease; } #saveConfirmationLightbox.lightbox .lightbox-content .close:hover, #saveConfirmationLightbox.lightbox .lightbox-content .close:focus { color: #007bff; } #saveConfirmationLightbox.lightbox .lightbox-content .welcome-section { padding: 10px; box-sizing: border-box; font-family: Fabriga regular, Lato, sans-serif; text-align: center; } #saveConfirmationLightbox.lightbox .lightbox-content .welcome-section h2 { font-size: 18px; color: #202124; margin: 0 0 10px 0; } #saveConfirmationLightbox.lightbox .lightbox-content .welcome-section p { font-size: 14px; color: #333; margin: 0 0 20px 0; } #saveConfirmationLightbox.lightbox .lightbox-content .welcome-section .btn { background-color: #000; color: #fff; border: none; padding: 10px 20px; margin: 0 10px; border-radius: 4px; cursor: pointer; font-size: 14px; font-family: Fabriga regular, Lato, sans-serif; transition: background-color 0.3s ease, transform 0.2s ease; display: inline-block; text-shadow: none; text-transform: initial; } #saveConfirmationLightbox.lightbox .lightbox-content .welcome-section .btn:hover { background-color: #34495e; transform: translateY(-1px); } #saveConfirmationLightbox.lightbox .lightbox-content .welcome-section .btn:focus { outline: 2px solid #34495e; outline-offset: 2px; } /* Mobile Adjustments (max-width: 768px) */ @media (max-width: 768px) { #saveConfirmationLightbox.lightbox .lightbox-content { width: 90%; padding: 20px; min-height: 150px; } #saveConfirmationLightbox.lightbox .lightbox-content .welcome-section .btn { display: block; width: 100%; margin: 10px 0; } } /* Tablet Adjustments (769px–1024px) */ @media (min-width: 769px) and (max-width: 1024px) { #saveConfirmationLightbox.lightbox .lightbox-content { width: 90%; max-width: 900px; } } /* Large Screens (1025px and up) */ @media (min-width: 1025px) { #saveConfirmationLightbox.lightbox .lightbox-content { max-width: 800px; } } .my-account-content .saved-search-item { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid #e0e0e0; } .my-account-content .saved-search-item .search-link { flex: 1; color: #0534f5; text-decoration: none; font-weight: 500; } .my-account-content .saved-search-item .search-link:hover { text-decoration: underline; } .my-account-content .saved-search-item .rename-search-btn, .my-account-content .saved-search-item .remove-search-btn { margin-left: 10px; padding: 5px 10px; border: 1px solid #ccc; background: #fff; cursor: pointer; border-radius: 4px; font-size: 0.9em; } .my-account-content .saved-search-item .rename-search-btn:hover, .my-account-content .saved-search-item .remove-search-btn:hover { background: #f0f0f0; } .my-account-sidebar .sidebar-item.search-active { background-color: #f5f5f5; font-weight: bold; } #modalLightbox .modal-container { max-width: 400px; margin: 50px auto; background: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); } #modalLightbox .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; border-bottom: 1px solid #e0e0e0; } #modalLightbox .modal-content { padding: 15px; } #modalLightbox .modal-content input { width: 100%; padding: 8px; margin: 10px 0; border: 1px solid #ccc; border-radius: 4px; } #modalLightbox .action-buttons { display: flex; justify-content: flex-end; gap: 10px; } #modalLightbox .cancel-btn, #modalLightbox .submit-btn { padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; } #modalLightbox .cancel-btn { background: #ccc; } #modalLightbox .submit-btn { background: #0534f5; color: #fff; } .notif-sec { border-radius: 4px; margin: 0px; font-size: 13px; } #searchModalOptions .modal-backdrop-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); cursor: pointer; } #searchModalOptions .lightbox-content { background-color: #fefefe; margin: 5% auto; padding: 15px; padding-right: 30px; padding-left: 30px; border: 1px solid #888; width: 80%; max-width: 300px; border-radius: 8px; position: relative; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); max-height: 80vh; overflow-y: auto; box-sizing: border-box; padding-left: 5px; padding-right: 5px; } #searchModalOptions .modal-header { padding: 0; padding-right: 0px; border-bottom: none; margin: 0; text-align: right; padding-right: 10px; } #searchModalOptions .modal-header h3 { margin: 0; font-size: 1.5rem; color: #333; } #searchModalOptions .modal-close-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #666; margin: 0; padding: 0; } #searchModalOptions .modal-close-btn:hover { color: #000; } #searchModalOptions .modal-body { padding: 16px; padding-top: 0; } #searchModalOptions .modal-body p { margin: 0 0 16px; font-size: 1rem; color: #333; } #searchModalOptions .modal-input { width: 100%; padding: 8px; font-size: 1rem; border: 1px solid #000; border-radius: 4px; margin-bottom: 16px; } #searchModalOptions.lightbox.search-modal .lightbox-content .modal-body input#searchInput.modal-input:hover { box-shadow: 0px 0px 0px 1px inset; } #searchModalOptions .modal-actions { display: flex; justify-content: space-between; gap: 8px; } #searchModalOptions .btn.modal-cancel-btn, #searchModalOptions .btn.modal-submit-btn { /*background-color: #007bff;*/ background-color: #000; color: #fff; border: none; padding: 10px 20px; margin: 0 10px; border-radius: 4px; cursor: pointer; font-size: 14px; font-family: Fabriga regular, Lato, sans-serif; transition: background-color 0.3s ease, transform 0.2s ease; display: inline-block; text-shadow: none; text-transform: initial; max-height: 40px; } #searchModalOptions .btn.modal-cancel-btn:hover, #searchModalOptions .btn.modal-submit-btn:hover { /* background-color: #0056b3;*/ background-color: #34495e; } .saved-search-details, .saved-quote-details { width: 100%; margin-top: 8px; } .search-row, .quote-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; gap: 10px; border-top: 1px solid #ddd; margin: 0; padding-top: 3px; font-size: 0.85em; } .search-cell, .quote-cell { display: flex; align-items: center; justify-content: flex-start; /*white-space: nowrap;*/ font-size: 14px; color: #333; flex: 1; margin-left: 0; font-weight: bold; } .search-cell.trans, .quote-cell.trans { justify-content: flex-end; margin-right: 0; text-align: right; font-weight: normal; } .saved-search-details p, .saved-quote-details p { border-top: 1px solid #ddd; margin-top: 0; margin-bottom: 0; padding-top: 2px; } .saved-searches-grid { padding: 0px; display: grid; /* grid-template-columns: repeat(2, 1fr);*/ grid-template-columns: repeat(auto-fit, minmax(250px, 250px)); gap: 20px; } .saved-quotes-grid { padding: 0px; display: grid; /*grid-template-columns: repeat(2, 1fr);*/ grid-template-columns: repeat(auto-fit, minmax(250px, 250px)); gap: 20px; } .saved-search-card, .saved-quote-card { background-color: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); min-width: 250px; max-width: 250px; } .saved-search-header, .saved-quote-header { display: flex; justify-content: space-between; align-items: center; } .saved-search-name { margin-top: 4px; margin-bottom: 0; font-weight: bold; color: #2c3e50; font-size: 1em; line-height: 1.2em; margin-left: 5px; margin-right: 5px; line-height: 1em; } .saved-quote-name { margin-top: 0; margin-bottom: 0; font-weight: bold; color: #2c3e50; font-size: 1em; line-height: 1.2em; } .saved-quote-name { font-size: 0.95em; line-height: 1.2em; } .rename-btn { background: none; border: none; cursor: pointer; padding: 0px; margin-top: 0; color: #3578f6; width: 30px; height: 30px; transform: scale(1.2, 1.2); } .rename-btn { background-color: #fff !important; } .rename-btn:hover { color: #6cbd3d; /*background-color: #ddd !important;*/ } .pencil-icon { vertical-align: middle; } .saved-search-details p { margin: 4px 0; font-size: 0.95rem; color: #555; } .saved-search-details p strong { color: #333; } .created-date { font-size: 0.85rem; color: #777; } .saved-search-actions, .saved-quote-actions { display: flex; /*gap: 8px;**/ margin-top: auto; justify-content: space-between; flex-direction: column; } .btn.delete-account-btn, .btn.change-alerts-btn, .btn.change-pass-btn, .btn.run-search-btn, .btn.delete-search-btn, .btn.run-quote-btn, .btn.delete-quote-btn { /*background-color: #007bff;*/ background-color: #000; color: #fff; border: none; padding: 10px 20px; /*margin: 0 10px;*/ border-radius: 4px; cursor: pointer; font-size: 14px; font-family: Fabriga regular, Lato, sans-serif; transition: background-color 0.3s ease, transform 0.2s ease; display: inline-block; text-shadow: none; text-transform: initial; max-height: 40px; margin-top: 0; } .btn.delete-account-btn { background-color: #d50e1a; } .btn.delete-account-btn:hover { background-color: #e80c1a; } .btn.change-alerts-btn:hover, .btn.change-pass-btn:hover, .btn.run-search-btn:hover, .btn.delete-search-btn:hover, .btn.run-quote-btn:hover, .btn.delete-quote-btn:hover { /* background-color: #0056b3;*/ background-color: #34495e; } .btn.delete-search-btn, .btn.delete-quote-btn { background-color: #fff; color: #3578f6; } .btn.delete-search-btn:hover, .btn.delete-quote-btn:hover { background-color: #fff; color: #d50711; } /* .saved-search-card:hover { background-color: #f5f5f5; } */ #welcomeLightbox.lightbox .lightbox-content .welcome-section button.continue-btn:hover:enabled, #car-detail.container #testdriveLightbox.lightbox .lightbox-content.reserve-form .reserve-container .reserve-right #testdriveForm button.proceed-button:hover:enabled, #car-detail.container #tradeInLightbox.trade-in-lightbox.lightbox .trade-in-lightbox-content .trade-in-right form#tradeInForm button:hover:enabled, #car-detail.container #reserveLightbox.lightbox .lightbox-content.reserve-form .reserve-container .reserve-right #reserveForm button.proceed-button:hover:enabled, #enquiryLightbox.lightbox .lightbox-content.reserve-form .reserve-container #enquiryForm button.proceed-button:hover:enabled { background-color: #34495e !important; } .my-account-main { max-height: 70vh; /* Adjust this value based on your desired height */ overflow-y: auto; /* Enables vertical scrolling */ overflow-x: hidden; /* Prevents horizontal scrolling */ padding-right: 10px; /* Optional: Adds padding to avoid content touching the scrollbar */ } /* Optional: Ensure the parent containers don't interfere */ .lightbox-content { overflow: hidden; /* Prevent the outer lightbox from scrolling */ } /* Optional: Style the scrollbar for better appearance (works in WebKit browsers) */ .my-account-main::-webkit-scrollbar { width: 8px; } .my-account-main::-webkit-scrollbar-track { background: #f1f1f1; } .my-account-main::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; } .my-account-main::-webkit-scrollbar-thumb:hover { background: #555; } @media only screen and (max-width: 896px) and (max-height: 414px) and (orientation: landscape), @media only screen and (max-width: 812px) and (max-height: 375px) and (orientation: landscape) { #myAccountLightbox.lightbox .lightbox-content {max-width: 600px !important;} .my-account-section .my-account-sidebar {max-height: 50vh;overflow-y: auto;overflow-x: hidden;} .my-account-section .saved-search-card, .my-account-section .saved-quote-card {min-width: 350px; max-width: 350px;} #myAccountLightbox.lightbox .lightbox-content .auth-sections .my-account-section .my-account-content .item-detail-content .item-detail-bottom.acc .vehicle-details .vehicle-row .vehicle-cell p.totalprice {margin-top: 15px;} #myAccountLightbox.lightbox .lightbox-content .auth-sections .my-account-section .my-account-flex .my-account-main .my-account-content .result-items-grid .result-item .item-detail .item-detail-content .item-detail-bottom.acc p.totalprice {margin-top:20px;margin-left: 5px;} }