@font-face {
    font-family: 'ToyotaType';
    src: url(../fonts/ToyotaType-Light.woff2) format('woff2'), url(../fonts/ToyotaType-Light.woff) format('woff');
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: 'ToyotaType';
    src: url(../fonts/ToyotaType-LightIt.woff2) format('woff2'), url(../fonts/ToyotaType-LightIt.woff) format('woff');
    font-weight: 300;
    font-style: italic
}

@font-face {
    font-family: 'ToyotaType';
    src: url(../fonts/ToyotaType-Regular.woff2) format('woff2'), url(../fonts/ToyotaType-Regular.woff) format('woff');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'ToyotaType';
    src: url(../fonts/ToyotaType-RegularIt.woff2) format('woff2'), url(../fonts/ToyotaType-RegularIt.woff) format('woff');
    font-weight: 400;
    font-style: italic
}

@font-face {
    font-family: 'ToyotaType';
    src: url(../fonts/ToyotaType-Semibold.woff2) format('woff2'), url(../fonts/ToyotaType-Semibold.woff) format('woff');
    font-weight: 600;
    font-style: normal
}

@font-face {
    font-family: 'ToyotaType';
    src: url(../fonts/ToyotaType-SemiboldIt.woff2) format('woff2'), url(../fonts/ToyotaType-SemiboldIt.woff) format('woff');
    font-weight: 600;
    font-style: italic
}

@font-face {
    font-family: 'ToyotaType';
    src: url(../fonts/ToyotaType-Bold.woff2) format('woff2'), url(../fonts/ToyotaType-Bold.woff) format('woff');
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: 'ToyotaType';
    src: url(../fonts/ToyotaType-BoldIt.woff2) format('woff2'), url(../fonts/ToyotaType-BoldIt.woff) format('woff');
    font-weight: 700;
    font-style: italic
}

:root {
    --danger: #EB0A1E;
    --dark: #101010;
    --darker-white: #EEE;
    --bg-color: #F5F5F5;
    --dark-danger: #a80411;
    --darker-danger: #550F10;
    --grey: #505050;
    --black: #050505;
    --nav-height: 100px;
    --caro-indicator-h: 10px;
    --caro-height: calc(var(--nav-height) + var(--caro-indicator-h));
    --radio-size: 15px
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'ToyotaType', system-ui
}

html {
    overflow-x: hidden;
}

body {
    background: var(--bg-color) !important;
    min-height: 100vh;
    overflow-x: hidden
}

main {
    background-color: var(--darker-white);
    padding-top: var(--nav-height)
}

.home-caro-parts,
.vd-caro-explore-start,
.vd-caro-explore-end,
.electrified-img-container span,
.discover-img-container span,
.vd-caro-btn {
    z-index: 1
}

.offcanvas-wrap>.modal-backdrop {
    z-index: 1010
}

.nav-offcanvas {
    z-index: 1020
}

.custom-nav {
    z-index: 1030
}

.img-viewer-container {
    z-index: 1070
}

.nav-offcanvas {
    margin-top: var(--nav-height);
    transition: 0.8s ease;
    height: fit-content
}

.custom-nav {
    border-bottom: 5px solid var(--danger);
    position: fixed;
    width: 100vw;
    height: var(--nav-height);
    background-color: var(--bg-color);
    transition: 0.3s ease
}

.nav-logo {
    width: var(--nav-height)
}

.top-nav {
    font-size: 18px;
    color: var(--dark);
    --line-color: #000;
    --line-dist: 1px
}

.bot-nav {
    font-size: 20px;
    border-top: 1px solid var(--danger)
}

.bot-nav>*:hover {
    color: var(--danger)
}

.bot-nav>*,
.top-nav>* {
    padding: 0 5px;
    text-decoration: none;
    color: var(--dark)
}

.up-down {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 44px;
    aspect-ratio: 1/1;
    background-color: var(--danger);
    border-radius: 50%;
    margin: 20px;
    display: grid;
    place-items: center;
}

.dropdown-toggle::after {
    color: red;
    border: none !important
}

#lang-icon,
.dropdown-icon {
    color: var(--danger);
    transition: 0.2s ease
}

.electrified-img-container {
    width: 25%;
    overflow: hidden;
    position: relative
}

.electrified-img-container img,
.discover-img-container img,
.blog-img-container img {
    transition: 0.3s ease
}

.electrified-img-container span {
    position: absolute;
    bottom: 0;
    color: var(--bg-color);
    font-weight: 700;
    width: 100%;
    height: 40%;
    bottom: 0px;
    background: linear-gradient(to top, black, transparent);
    display: grid;
    place-content: center;
}

.electrified-img-container:hover img,
.discover-img-container:hover img .blog-img-container img:hover {
    scale: 1.1
}

.nav-dropdown {
    cursor: pointer
}

.discover-img-container {
    overflow: hidden;
    position: relative
}

.discover-img-container span {
    position: absolute;
    bottom: 0;
    color: var(--bg-color);
    width: 100%;
    height: 40%;
    text-align: center;
    background: linear-gradient(to top, black, transparent);
    display: grid;
    place-items: center
}

.small-nav {
    background: #fff5;
    backdrop-filter: blur(17.5px);
    -webkit-backdrop-filter: blur(17.5px);
    border-bottom: 5px solid #000;
    min-height: 200px;
    height: 50vh;
}

#navAccordion * {
    background-color: #0000;
    color: #fff;
    border-color: #0000;
    transition: 0.5s ease;
}

#navAccordion .accordion-button::after {
    content: '\f107';
    font-family: "Font Awesome 6 Free";
    background-image: none;
    color: var(--bg-color);
    font-weight: 900;
}

#navAccordion .accordion-button:not(.collapsed) {
    background: #eb0a1d7f;
}

#navAccordion .accordion-body {
    padding: 0.2em 1.25em;
}

#navAccordion .accordion-button:not(.collapsed) {
    padding: 0.5em 1.25em;
}

footer {
    background-color: var(--dark);
    width: 100%;
    border-top: 10px solid var(--danger)
}

.footer-list {
    list-style: none;
    padding: 0
}

.footer-list-item * {
    color: var(--darker-white)
}

a {
    background-image: none !important
}

.animated-link,
.animated-link-reverse {
    text-decoration: none;
    position: relative;
    padding: var(--line-dist, 5px) 0;
    color: inherit
}

.animated-link:hover,
.animated-link-reverse:hover {
    color: var(--line-color, #fff)
}

.animated-link::after,
.animated-link-reverse::after {
    content: '';
    position: absolute;
    height: 1px;
    width: 100%;
    background-color: var(--line-color, #fff);
    bottom: 0;
    left: 0;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s ease
}

.animated-link-reverse::after {
    transform: scaleX(1);
    transform-origin: left
}

.animated-link-reverse:hover::after {
    transform: scaleX(0);
    transform-origin: right
}

.animated-link:hover::after {
    transform: scaleX(1);
    transform-origin: left
}

.icon-link {
    font-size: 2em;
    color: var(--darker-white);
    transition: 0.3s ease !important
}

.icon-link:hover {
    scale: 1.2;
    color: var(--bg-color)
}

.toyota-text-12 {
    font-size: 12px
}

.toyota-text-14 {
    font-size: 14px
}

.toyota-text-16 {
    font-size: 16px
}

.bottom-footer {
    border-top: 1px solid var(--danger)
}

.breadcrumb-link {
    text-decoration: none;
    color: var(--danger)
}

.breadcrumb-link:hover {
    color: var(--dark)
}

.nav-tabs.used-nav-tabs {
    border: none !important
}

.used-search {
    width: 100%;
    height: 100%;
    max-height: 60px;
    min-height: 50px;
    border: none;
    border-radius: 10px;
    padding: 0 20px 0 60px
}

.used-search:focus,
.used-search:hover {
    outline: none
}

.search-icon {
    color: var(--danger);
    font-size: 1.5em;
    border: none;
    position: absolute;
    top: 50%;
    left: -5px;
    background-color: #0000;
    translate: 100% -50%
}

.nav-link.used-car-tab {
    color: var(--dark) !important;
    border: none;
    border-bottom: 5px solid #0000;
    box-shadow: 0 1px 0 0 #0005;
    transition: 0.3s ease
}

.nav-link.used-car-tab.active {
    color: var(--danger) !important;
    background-color: #0000;
    border: none;
    border-bottom: 5px solid var(--danger)
}

.nav-link.used-car-tab:hover:not(.active) {
    border-bottom: 1px solid #000
}

.used-card {
    background-color: var(--dark)
}

.used-card-btn::after {
    content: 'View Detail'
}

.used-card-list {
    list-style: none;
    padding: 0
}

.used-list-item {
    --icon-width: 25px;
    padding-left: calc(var(--icon-width) + 10px);
    position: relative;
    margin: 5px 0
}

.used-list-item::before {
    content: var(--list-icon);
    width: var(--icon-width);
    aspect-ratio: 1/1;
    position: absolute;
    top: 0;
    left: 0
}

.coin-danger::before {
    translate: 0 15%
}

.engine-light {
    --list-icon: url(../img/list-icons/engin.svg)
}

.gear-light {
    --list-icon: url(../img/list-icons/gear.svg)
}

.fuel-light {
    --list-icon: url(../img/list-icons/fuel.svg)
}

.coin-light {
    --list-icon: url(../img/list-icons/coin.svg)
}

.coin-danger {
    --list-icon: url(../img/list-icons/money_mmk.svg);
    --icon-width: 44px
}

.engine-dark {
    --list-icon: url(../img/list-icons/dark_engine.svg)
}

.gear-dark {
    --list-icon: url(../img/list-icons/dark_gear.svg)
}

.fuel-dark {
    --list-icon: url(../img/list-icons/dark_fuel.svg)
}

.color-dark {
    --list-icon: url(../img/list-icons/color.svg)
}

.license-dark {
    --list-icon: url(../img/list-icons/license.svg)
}

.steering-dark {
    --list-icon: url(../img/list-icons/steering.svg)
}

.star-dark {
    --list-icon: url(../img/list-icons/star.svg)
}

.dashboard-dark {
    --list-icon: url(../img/list-icons/dashboard.svg)
}

.phone-dark {
    --list-icon: url(../img/list-icons/phone.svg)
}

.calender-dark {
    --list-icon: url(../img/list-icons/calender.svg)
}

.engine-dark,
.gear-dark,
.fuel-dark,
.color-dark,
.license-dark,
.steering-dark,
.star-dark,
.dashboard-dark,
.wheel-dark,
.calender-dark {
    --icon-width: 40px;
    margin: 20px 0
}

.btn-toyota-danger {
    color: var(--darker-white);
    background-color: var(--danger);
    border-radius: 0
}

.btn-toyota-danger:hover {
    color: var(--darker-white);
    background-color: var(--dark-danger)
}

.text-toyota-danger {
    color: var(--danger)
}

.text-toyota-secondary {
    color: var(--grey)
}

.text-toyota-dark {
    color: var(--black)
}

.used-carousel .owl-prev,
.used-carousel .owl-next,
.blog-carousel .owl-prev,
.blog-carousel .owl-next {
    position: absolute;
    top: 50%;
    width: 30px;
    height: 30px;
    color: #fff !important;
    background: var(--danger) !important
}

.used-carousel .owl-prev span,
.used-carousel .owl-next span {
    position: absolute;
    font-size: 2em;
    top: 0;
    translate: -50% -25%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

.used-carousel .owl-prev {
    translate: 50% -50%;
    left: 0
}

.used-carousel .owl-next {
    translate: -50% -50%;
    right: 0
}

.used-carousel .owl-nav {
    margin: 0 !important
}

.used-carousel .used-owl-item {
    aspect-ratio: 1/1;
    cursor: pointer
}

#detail_view {
    max-height: 75vh;
    border-radius: 5px
}

.page-link {
    border: none;
    color: var(--danger)
}

.page-item.active .page-link {
    background-color: var(--danger)
}

.used-home-caro .owl-prev {
    position: absolute;
    left: 40%;
    color: white !important;
    background: var(--danger) !important;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    font-size: 2em !important
}

.used-home-caro .owl-prev>*,
.used-home-caro .owl-next>* {
    translate: 0 -30%
}

.used-home-caro .owl-next {
    position: absolute;
    right: 35%;
    font-size: 2em !important;
    color: white !important;
    background: var(--danger) !important;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    z-index: 1
}

.used-home-caro .owl-dots {
    counter-reset: slides-num;
    position: absolute;
    top: 100%;
    left: 50%;
    width: fit-content !important
}

.used-home-caro .owl-dots:after {
    content: counter(slides-num);
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    vertical-align: middle;
    padding-left: 20px
}

.used-home-caro .owl-dot {
    display: inline-block;
    counter-increment: slides-num;
    margin-right: 5px
}

.used-home-caro .owl-dot span {
    display: none
}

.used-home-caro .owl-dot.active:before {
    content: counter(slides-num) " of ";
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
    position: absolute;
    left: 0;
    top: 0
}

.used-home-caro .owl-stage-outer {
    padding: 0
}

.home-caro {
    width: 100%
}

.carousel-inner {
    transition: 0.3s ease
}

.home-caro-img {
    height: calc(var(--base-caro-h, 75vh) - var(--caro-indicator-h));
    transition: 0.3s ease;
    padding-top: 0;
}

.home-caro-img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0000;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px)
}

.home-caro-img img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.home-caro .carousel-indicators {
    background: #000;
    margin: 0;
    bottom: calc(var(--caro-indicator-h) * -1)
}

.home-caro .carousel-indicators [data-bs-target] {
    width: 100%;
    margin: 0;
    border: 0;
    height: var(--caro-indicator-h);
    background: var(--danger);
    opacity: 0
}

.home-caro .carousel-indicators [data-bs-target].active,
.home-caro-control,
.home-caro-control:hover {
    opacity: 1
}

.home-caro-control {
    top: 80%
}

.home-caro-control,
.vd-caro-control {
    width: 10%
}

.home-caro-control:hover .home-caro-control-i {
    background: #f005
}

.home-caro-control-i {
    background: #fff2;
    font-size: 2em;
    padding: 10px 10px;
    border-radius: 5px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px)
}

.btn-toyota-dark {
    color: #fff;
    background: #1c1c1c;
    font-size: 14px;
    border-radius: 0
}

.btn-toyota-dark:hover {
    color: #fff
}

.home-caro-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.home-caro-parts {
    position: absolute;
    background: #0005;
    bottom: 15%;
    right: 5%;
    padding: 15px 10px;
    margin: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 5px;
    height: calc(70% - var(--nav-height));
    flex-direction: column;
    justify-content: space-between;
    max-width: 150px
}

.home-caro-parts-sm {
    position: absolute;
    background: #0005;
    z-index: 1;
    padding: 15px 10px;
    margin: 5px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 5px;
    bottom: 0;
    left: 50%;
    translate: -50%;
    width: 100%
}

.home-caro-parts label,
.home-caro-parts-sm label {
    font-size: 12px;
    text-align: center;
    display: block;
    text-align: center
}

.caro-img-container {
    aspect-ratio: 4/2;
    overflow: hidden;
    border-radius: 3px !important;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.caro-img-container img {
    width: 100%;
    transition: 0.5s ease;
}

.car-display-nav {
    background-color: #fff
}

.car-display-nav .nav-link {
    border: none;
    color: #0005
}

.car-display-nav .nav-link:not(.active):hover {
    border: none;
    color: var(--danger)
}

.car-display-nav .nav-link.active {
    border: none;
    border-bottom: 2px solid #000;
    color: #000
}

.car-display-link {
    text-decoration: none;
    color: var(--dark);
    text-align: center;
    display: block;
    font-size: 14px
}

.car-display {
    transition: 0.3s ease
}

.car-display:hover {
    scale: 1.1
}

#videoCarousel .carousel-inner {
    transition: 0.3s ease
}

#videoCarousel .vd-caro-item {
    height: calc(var(--base-caro-h, 100vh) - var(--nav-height));
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center
}

.vd-caro-control-i {
    background: var(--danger);
    font-size: 1.5em;
    padding: 5px 10px;
    border-radius: 2px
}

.bg-toyota-light {
    background-color: #fff
}

.bg-darker-danger {
    background-color: var(--darker-danger)
}

.bg-darker-white {
    background-color: var(--darker-white) !important
}

.bg-more-darker-white {
    background-color: #D9D9D9
}

.vd-caro-indicator {
    width: 10% !important;
    height: var(--caro-indicator-h) !important;
    border: none !important;
    margin: 0 var(--caro-indicator-h) !important
}

.vd-caro-indicator.active {
    background-color: var(--danger) !important
}

.vd-caro-explore-start,
.vd-caro-explore-end {
    width: 50%;
    top: 10%
}

.vd-caro-explore-start {
    left: 5%
}

.vd-caro-explore-end {
    right: 5%
}

.vd-caro-text {
    width: 50%;
    top: 5%
}

.vd-caro-btn {
    position: absolute;
    bottom: 20%
}

.icon-xxl {
    font-size: xx-large
}

.mid-nav a:hover {
    color: var(--danger)
}

.mid-nav-border.border-end {
    border-right: 1px solid #6E6E6E !important
}

.blog-owl-item {
    height: 70vh !important
}

.blog-img-container {
    height: 55%;
    /* min-height: 250px; */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #0003;
    border-radius: 5px !important;
}

.blog-img-container img {
    object-fit: cover
}

.blog-text-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: var(--text-height, 50%);
    min-height: 200px;
    background-color: #050505;
    border-radius: 0 0 5px 5px
}

.blog-carousel .owl-prev {
    translate: 50% -150%;
    left: 0
}

.blog-carousel .owl-next {
    translate: -50% -150%;
    right: 0
}

.blog-carousel .owl-prev span,
.blog-carousel .owl-next span {
    position: absolute;
    font-size: 3em;
    top: 0;
    translate: -50% -33%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

.blog-title {
    line-height: 1.7em;
    font-weight: bolder;
    font-size: 16px
}

.blog-description {
    font-size: 12px;
    line-height: 1.75em
}

.blog-text-container button {
    font-size: 12px
}

.blog-title,
.blog-description {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical
}

.line-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical
}

.btn-toyota-outline-danger {
    color: var(--danger);
    border: 2px solid var(--danger);
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
    transition: 0.3s ease-in-out
}

.btn-toyota-outline-danger:hover {
    border-color: #0000;
    background: var(--danger);
    color: var(--darker-white)
}

.btn-toyota-outline-light {
    color: var(--darker-white);
    border: 2px solid var(--darker-white);
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
    font-weight: 700;
    background: #0001;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px)
}

.btn-toyota-outline-light:hover {
    border-color: #0000;
    background: var(--darker-white);
    color: var(--danger)
}

.btn-toyota-outline-dark {
    color: var(--dark);
    border: 2px solid var(--dark);
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
    transition: 0.3s ease-in-out
}

.btn-toyota-outline-dark:hover {
    border-color: #0000;
    background: var(--dark);
    color: var(--darker-white)
}

.title-font-size {
    font-size: var(--title-font-size, 2.2em)
}

.video-width {
    width: 95%;
}

.toyota-table {
    max-width: 750px;
    border-color: #0005
}

.toyota-table * {
    vertical-align: middle;
    text-align: center
}

.toyota-plant-banner {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center
}

.toyota-plant-banner .plant-title {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff;
    width: 50%;
    min-width: 450px
}

.toyota-plant-text p {
    text-indent: 10%
}

.ls-1 {
    letter-spacing: 1px
}

.emblem-img {
    float: none;
    width: 100%;
    display: flex;
    justify-content: center
}

.emblem-img img {
    width: 50%
}

.toyota-paragraph {
    font-size: 1em
}

.mh-100-nav {
    max-height: calc(100vh - var(--nav-height));
    width: 100%
}

.customize-color::before,
.customize-color::after {
    content: '-------'
}

.filter-secondary {
    filter: brightness(1.1) saturate(120%) hue-rotate(40deg)
}

.color-caro-btn {
    position: relative;
    width: var(--color-picker-btn-size, 55px) !important;
    height: var(--color-picker-btn-size, 55px) !important;
    aspect-ratio: 1/1;
    border-radius: 50%;
    margin: 0 15px !important;
    background-color: var(--color-picker-bg) !important;
    opacity: 1 !important;
    text-indent: 0 !important;
    outline: none;
    box-shadow: 0 0 10px 0 #0003 inset
}

.color-caro-btn::before {
    content: '\2713';
    position: absolute;
    width: calc(100% + var(--color-picker-pad) * 2);
    height: calc(100% + var(--color-picker-pad) * 2);
    color: #fff;
    background-color: #0005;
    top: calc(-1 * var(--color-picker-pad));
    left: calc(-1 * var(--color-picker-pad));
    font-size: var(--mark-size, 2em);
    border-radius: 50%;
    opacity: 0;
    border: var(--color-picker-pad) solid #fff;
    outline: 2px solid #0005
}

.color-caro-btn.active::before {
    opacity: 1
}

#colorCaroFade .carousel-inner {
    width: 100%
}

.toyota-input {
    background-color: #0000;
    border: 0;
    outline: 0;
    border-bottom: 1px solid #0003;
    padding: 10px;
    margin: 10px 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0
}

.toyota-input:hover {
    border-bottom: 1px solid #000
}

.toyota-textarea {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0
}

.toyota-textarea:hover {
    border: 1px solid #000
}

#stay_informed {
    max-width: 720px
}

#spec_accordion .accordion-button:not(.collapsed),
#blog_accordion .accordion-button:not(.collapsed) {
    color: var(--danger);
    background-color: #0000
}

#spec_accordion .accordion-button::after {
    content: '\f107';
    font-family: "FontAwesome";
    font-size: 1.2em;
    background-image: none;
    color: #0009;
    transform-origin: center
}

#spec_accordion .accordion-button:not(.collapsed)::after {
    color: var(--danger)
}

.interior-img-container {
    position: relative;
    height: 50vh
}

.interior-img-container::before {
    content: attr(data-text);
    color: #fff;
    position: absolute;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, #000, #0000);
    bottom: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    font-size: 1.5em;
    opacity: 0;
    transition: 0.3s ease-in-out
}

.interior-img-container:hover::before {
    opacity: 1
}

.web-banner {
    height: calc(var(--base-caro-h, 100vh) - (var(--icon-nav-height, 125px) + var(--nav-height)));
    overflow: hidden;
    display: flex;
    justify-content: center
}

.web-banner::before {
    content: '';
    position: absolute;
    width: 100%;
    background: #0005;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    height: calc(100vh - var(--icon-nav-height, 125px))
}

.web-banner img {
    height: 100%
}

.view-spec-btn {
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50% -100%;
    z-index: 1
}

.dealer-name input[type=radio] {
    border: 1px solid #000;
    padding: .7em;
    -webkit-appearance: none
}

.dealer-name input[type=radio]:hover {
    transform: scale(1.2)
}

.dealer-name input[type=radio]:checked {
    background-color: #EB0A1E;
    box-shadow: 0 0 0 2px #fff inset
}

.dealer-name input[type=radio]:focus {
    outline-color: transparent
}

.inventory-model span {
    border-top: 3px solid #000;
    border-right: 3px solid #000;
    padding: 10px
}

.inventory-list.collapsed::after {
    content: "\2b";
    font-family: "Font Awesome 5 Free";
    color: var(--dark);
    background-image: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s ease;
    rotate: 0deg
}

.inventory-list::after {
    content: "\2212";
    font-weight: 700;
    font-family: "Font Awesome 5 Free";
    transition: 0.3s ease;
    rotate: 180deg
}

.toyota-check {
    position: relative;
    padding-left: 35px;
    cursor: pointer
}

.toyota-check .toyota-checkmark,
.toyota-check .toyota-checkbox {
    position: absolute;
    top: 5px;
    left: 0;
    height: 20px;
    width: 20px
}

.toyota-check .toyota-checkbox {
    opacity: 0;
    cursor: pointer;
    z-index: 1
}

.toyota-check .toyota-checkmark {
    background-color: #fff;
    border: 3px solid #fff;
    outline: 1px solid #000
}

.toyota-check:hover .toyota-checkbox~.toyota-checkmark {
    background-color: #ccc
}

.toyota-check .toyota-checkbox:checked~.toyota-checkmark {
    background-color: var(--danger)
}

.toyota-color-check {
    position: relative;
    width: 50px;
    height: 50px
}

.toyota-color-check input,
.toyota-color-check .circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.toyota-color-check input {
    z-index: 1;
    opacity: 0;
    cursor: pointer
}

.toyota-color-check .circle {
    background-color: var(--circle-color, #000);
    border-radius: 50%
}

.toyota-color-check input:checked~.circle {
    border: 5px solid var(--bg-color);
    outline: 1px solid #000
}

.dealer-info-end {
    border-top: 1px solid #0005;
    display: flex;
    flex-direction: column;
    align-items: center
}

.vs {
    position: absolute;
    background-color: #0003;
    width: 2px;
    height: 100%;
    top: 0;
    left: 100%
}

.car-placeholder {
    scale: .9;
    transition: 0.3s ease
}

.car-placeholder:hover {
    scale: 1
}

.form-offcanvas {
    margin-top: 5%;
    width: 100%;
    border-radius: 0 5px 0 0
}

.dir-rtl {
    direction: rtl
}

.dir-ltr {
    direction: ltr
}

.wpx-200 {
    width: 200px !important
}

#blog_accordion .accordion-item {
    border: 0
}

#blog_accordion .accordion-button::after {
    content: "\2b";
    font-family: "Font Awesome 5 Free";
    color: var(--danger);
    background-image: none;
    display: flex;
    justify-content: center;
    align-items: center
}

#blog_accordion .accordion-button:not(.collapsed)::after {
    content: "\2212";
    font-weight: 700;
    font-family: "Font Awesome 5 Free"
}

.btn-img-viewer {
    outline: 0;
    border: 0;
    width: 100%
}

.btn-img-viewer img {
    transition: 0.5s ease
}

.btn-img-viewer img:hover {
    scale: 1.02
}

#imgViewerModal {
    background: #0005;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px)
}

.img-viewer-container {
    position: fixed;
    background: #0005;
    display: flex;
    justify-content: center;
    align-items: center
}

.img-viewer-icon {
    margin: 25px;
    padding: 10px;
    cursor: pointer;
    transition: 0.3s ease
}

.img-viewer-icon:hover {
    scale: 1.2
}

.blog-img {
    transition: 0.5s ease
}

.blog-img:hover {
    scale: 1.05
}

.share-links-container i {
    color: #000;
    font-size: x-large
}

.share-links-container {
    gap: 1rem
}

#social-links ul {
    padding: 0
}

#social-links ul li {
    display: inline-block
}

#social-links ul li a {
    padding-right: 1rem;
    font-size: var(--icon-size, 2em)
}

#social-links ul li a span {
    transition: 0.3s ease
}

#social-links ul li a span:hover {
    scale: 1.1
}

#social-links .fa-facebook-square,
#social-links .fa-linkedin {
    color: var(--icon-color, #000) !important
}

.social-btn-sp.blog-accordion-item #social-links .fa-facebook-square,
.social-btn-sp.blog-accordion-item #social-links .fa-linkedin {
    color: #FFFFFF !important
}

.blog-card-icon i {
    color: #fff
}

.pagination-danger {
    color: var(--danger);
    text-decoration: none
}

.pagination-danger:hover {
    color: var(--dark)
}

.dealer-accordion .accordion-button:hover {
    background-color: #0001
}

.accordion-button:focus {
    box-shadow: none
}

.dealer-accordion>* {
    border-color: #0005 !important
}

.dealer-accordion .accordion-item {
    border: 1px solid #0005 !important
}

.accordion-button:not(.collapsed) {
    color: inherit;
    background: transparent
}

.accordion-body {
    border-top: 1px solid #0001
}

.dealer-accordion .accordion-button.collapsed::after {
    content: "";
    border: 1px solid #0009;
    background-color: #fff;
    border-radius: 50%;
    width: var(--radio-size);
    height: var(--radio-size);
    background-image: none !important
}

.dealer-accordion .accordion-button:not(.collapsed)::after {
    content: "";
    width: var(--radio-size);
    height: var(--radio-size);
    border: 2px solid #fff;
    background-color: var(--danger);
    border-radius: 50%;
    outline: 1px solid var(--danger);
    background-image: none !important;
    animation: 0.3s ease zoomIn
}

@keyframes zoomIn {
    from {
        scale: 0
    }

    to {
        scale: 1
    }
}

.marker-cluster {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    background-color: #EB0A1E;
    border-radius: 20px
}

.marker-cluster div {
    border-radius: 15px;
    background-color: #EB0A1E;
    margin-top: 10px;
    text-align: center
}

.leaflet-bottom {
    display: none
}

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
    border-radius: 5px !important;
    position: absolute;
    margin: 10px
}

.leaflet-control-zoom-out {
    translate: 0 100%
}

.map-container {
    position: relative;
    overflow: hidden;
    margin-top: 0;
    padding: 0;
    min-height: 50vh
}

#map {
    background: var(--bg-color)
}

.star-list {
    --star-width: 25px;
    position: relative;
    padding-left: calc(var(--star-width) + 5px);
    padding-bottom: 15px
}

.star-list::before {
    content: '';
    background: #f2c94c;
    clip-path: polygon(50% 0%, 64% 29%, 98% 35%, 73% 58%, 79% 91%, 50% 75%, 21% 91%, 26% 58%, 2% 35%, 35% 29%);
    width: var(--star-width);
    aspect-ratio: 1/1;
    position: absolute;
    top: 0;
    left: 0
}

.brochure-tab {
    display: flex;
    flex-direction: column
}

.brochure-tab button {
    border: none
}

.brochure-tab button.active {
    color: var(--danger)
}

.car-lazy {
    background-image: url(../img/lazy/car-lazy.png);
    background-repeat: no-repeat;
    background-size: contain;
    animation: fade 2.5s infinite;
    width: 100%;
    height: 100%;
    min-width: 100px;
    min-height: 100px;
}

.car-lazy img {
    opacity: 0;
}

@keyframes fade {
    0% {
        opacity: 0.1;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.1;
    }
}

.car-lazy.loaded {
    background-image: none;
    animation: none;
}

.car-lazy.loaded img {
    opacity: 1;
}

.gradient-lazy {
    background: linear-gradient(45deg, var(--lazy-color, #EB0A1E), #fff0);
    background-size: contain;
    animation: fade 2.5s infinite;
    border-radius: 5px;
}

.gradient-lazy img {
    opacity: 0;
}

.gradient-lazy.loaded {
    background: none;
    animation: none;
    border-radius: 0;
}

.gradient-lazy.loaded img {
    opacity: 1;
}


::-webkit-scrollbar {
    width: .6rem
}

::-webkit-scrollbar-track {
    background: #f1f1f1
}

::-webkit-scrollbar-thumb {
    background: var(--danger)
}

::-webkit-scrollbar-thumb:hover {
    background: var(--danger)
}

.manual-banner {
    background: url("/images/toyota.jpeg") center/cover no-repeat;
    position: relative;
    display: grid;
    place-items: center;
    height: calc(var(--base-caro-h, 100vh) - (var(--nav-height)*3));
}

.manual-banner h1 {
    position: absolute;
    background: #19191920;
    backdrop-filter: blur(25px);
    text-align: center;
    transform: translateY(-50%);
}

.manual-form {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    /* background: white; */
    transform: translateX(-50%) translateY(50%);
}
.manual-form form{
    background-color: white;
}
/* .car-image {
    background-image: url("/images/toyota.jpeg");
    background-color: black;
    height: 500px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.car-text {
    width: 863px!important;
    height: 120px;
    top: 350px;
    left: 50%;
    border-radius: 2px;
    background-color: #19191933;
    position: absolute;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    text-align: center;
}

.form {
    width: 1000px!important;
    height: 130px;
    top: 500px;
    left: 50%;
    border-radius: 10px;
    background-color: #fff;
    position: absolute;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
} */
.manual-result {
    min-height: 50vh;

}

@media (max-width:576px) {
    :root {
        --nav-height: 75px;
        --color-picker-btn-size: 25px;
        --mark-size: 1.2em;
        --color-picker-pad: 3px;
        --icon-nav-height: 125px;
        --base-caro-h: 75vh;
    }

    main,
    footer {
        font-size: .8em
    }

    .nav-link.used-car-tab {
        border-bottom: 1px solid #0005;
        box-shadow: none
    }

    .used-card-img>img {
        width: 100%
    }

    .home-caro-control-i {
        font-size: 1em
    }

    .car-display-title {
        font-size: .8em
    }

    .car-display-link {
        font-size: .6em
    }

    .car-display-nav .nav-link {
        font-size: .8em
    }

    .vd-caro-indicator {
        --caro-indicator-h: 5px
    }

    .blog-carousel .owl-prev {
        translate: -15% -100%;
        height: 50px
    }

    .blog-carousel .owl-next {
        translate: 15% -100%;
        height: 50px
    }

    .blog-carousel .owl-prev span,
    .blog-carousel .owl-next span {
        translate: -50% -20%
    }

    .mid-nav-border.border-xs-top {
        border-top: 1px solid #6E6E6E !important
    }

    .electrified-img-container span {
        font-size: 10px
    }

    .breadcrumb-link {
        font-size: .9em
    }

    .toyota-paragraph {
        font-size: .9em
    }

    /* .paragraph {
        position: absolute;
        top: 90px;
    }
    .image {
        position: relative;
        top: 250px;
    }
    .label {
        margin-top: 200px;
    }

    .brake {
        position: absolute;
        bottom: 100px;
    } */
    .xs-icon {
        font-size: 1.3em
    }

    .used-home-caro .owl-prev,
    .used-home-caro .owl-next {
        display: none
    }

    .used-home-caro .owl-dots {
        left: 1%
    }

    .car-text {
        width: 350px !important;
        height: 50px;
        top: 300px;
        left: 50%;
        font-size: 5px !important;

    }

    .form {
        width: 350px !important;
        height: 230px;
        top: 500px;
        left: 50%;
    }

    .form select {
        width: 180px !important;
        height: 30px;
        margin: 0;
        font-size: 12px;
    }

    #manual_date {
        margin-left: 100px;
    }

    .form .btn {
        margin-left: 120 !important;
        width: 120px !important;
        height: 30px;
        font-size: 12px;
    }

    .card img {
        width: 200px !important;
        height: 20px;
        font-size: 12px;
    }
}

@media (min-width:576px) {
    :root {
        --color-picker-pad: 5px;
        --title-font-size: 3.1em;
        --icon-nav-height: 250px
    }

    .home-caro-img {
        --base-caro-h: 100vh;
    }

    .mid-nav-border.border-sm-end {
        border-right: 1px solid #6E6E6E !important
    }

    .toyota-paragraph {
        font-size: 1.1em;
        text-align: justify
    }

    .not-justify {
        text-align: left
    }

    .breadcrumb-link {
        font-size: 1em
    }

    .customize-color::before,
    .customize-color::after {
        content: '---------------------'
    }

    #colorCaroFade .carousel-inner {
        width: 75%
    }

    .toyota-h1 {
        font-size: 3em
    }

    .form-offcanvas {
        width: 95%
    }

    .used-home-caro .owl-prev {
        left: 40%
    }

    .used-home-caro .owl-next {
        right: 30%
    }

    .used-home-caro .owl-item img {
        width: auto !important
    }

    .video-width {
        width: 75%
    }

}

@media (min-width:768px) {
    .used-card-img {
        aspect-ratio: 1/1
    }

    #colorCaroFade .carousel-inner {
        width: 50%
    }

    .leaflet-control-zoom-in,
    .leaflet-control-zoom-out {
        position: fixed
    }

    .dealer-info-end {
        border-color: #0000;
        align-items: start
    }

    .form-offcanvas {
        width: 90%
    }

    .car-text {
        width: 700px !important;
        height: 50px;
        top: 300px;
        left: 50%;
        font-size: 10px !important;

    }

    .form {
        width: 900px !important;
        /* height: 100px;
        top: 500px;
        left: 50%; */
    }

    .form .btn {
        width: 100px !important;
        height: 30px;
        margin-top: 5px;
        font-size: 12px;
    }

    .card img {
        width: 200px !important;
        height: 100px !important;
        padding: 4px !important;
        font-size: 12px;
    }
    .manual-banner h1{
        position: absolute;
        transform: translateY(0);
    }

}

@media (max-width:760px) {
    .car-text {
        width: 300px !important;
        height: 50px;
        top: 200px;
        left: 50%;
        font-size: 10px !important;

    }

    .form {
        width: 320px !important;
        height: 240px;
        top: 500px;
        left: 50%;
    }

    .form select {
        width: 150px !important;
        height: 30px;
        margin: 0;
        font-size: 12px;
    }

    .form .btn {
        margin-left: 110 !important;
        width: 120px !important;
        height: 30px;
        font-size: 12px;
    }
}

@media (min-width:240px) {
    .car-text {
        font-size: 9px !important;

    }

    .card img {
        width: 120px !important;
        /* height: 100px!important;
        padding: 4px!important;
        font-size: 12px; */
    }

}

@media (min-width:992px) {
    :root {
        --icon-nav-height: 125px
    }

    .top-nav {
        font-size: 11px
    }

    .bot-nav {
        font-size: 13px
    }

    .blog-title {
        font-size: 1.4em
    }

    .blog-description {
        font-size: 1em
    }

    .blog-text-container button {
        font-size: 1em
    }

    .emblem-img {
        float: right;
        width: 25%
    }

    .emblem-img img {
        width: 100%
    }

    .toyota-paragraph {
        font-size: 1.1em
    }

    .customize-color::before,
    .customize-color::after {
        content: '-------------------------'
    }

    .form-offcanvas {
        width: 85%
    }

    .used-home-caro .owl-prev {
        left: 40%
    }

    .used-home-caro .owl-next {
        right: 35%
    }

    .video-width {
        width: 50%
    }


}

@media screen and (min-width:1134px) {
    .top-nav {
        font-size: 14px
    }

    .bot-nav {
        font-size: 16px
    }

    .toyota-h1 {
        font-size: 4em
    }

    .form-offcanvas {
        width: 80%
    }
}

@media (orientation:portrait) {
    .img-viewer-container {
        bottom: 0;
        height: 70px;
        width: 100vw;
        flex-direction: row
    }

    .rv-50 {
        --right-val: 5%
    }

    .home-caro-img img {
        translate: 0 -7%;

    }

}

@media (orientation:landscape) {
    .img-viewer-container {
        right: 0;
        width: 70px;
        height: 100vh;
        flex-direction: column
    }

    .rv-50 {
        --right-val: 50%
    }

    .home-caro-img {
        padding-top: var(--nav-height)
    }

    /* youtube link */
    .new-feature {
        margin-left: 300px;
        color: white;
        margin-top: 3rem;
        font-size: 2rem;
    }

    .youtube{
        height: 75vh;
    }

    @media (max-width: 1200px) {
        .new-feature {
            margin-left: 90px;
            font-size: 1.8rem;
            margin-top: 2rem;
            margin-bottom: 1rem;
        }

        .youtube{
            height: 100vh;
        }
    }

    @media (max-width: 992px) {
        .new-feature {
            margin-left: 150px;
            font-size: 1.6rem;
            margin-top: 2rem;
            margin-bottom: 1rem;
        }
        .youtube{
            height: 100vh;
        }
    }

    @media (max-width: 768px) {
        .new-feature {
            margin-left: 100px;
            font-size: 1.4rem;
            margin-top: 2rem;
            margin-bottom: 3rem;
        }
        .youtube{
            height: 100vh;
        }
    }

    @media (max-width: 576px) {
        .new-feature {
            margin-left: 50px;
            font-size: 1.2rem;
            margin-top: 1.5rem;
            margin-bottom: 1rem;
        }
        .youtube{
            height: 100vh ;
        }
    }

    @media (max-width: 400px) {
        .new-feature {
            margin-left: 25px;
            font-size: 1rem;
            margin-top: 1rem;
            margin-bottom: 1rem;
        }
        .youtube{
            height: 100vh;
        }
    }
}