@import url("https://p.typekit.net/p.css?s=1&k=yya2xxe&ht=tk&f=24349.24350.24351.24352.24354.24355.43307.43309.43311.43313&a=83099672&app=typekit&e=css");

@font-face {
    font-family: "canada-type-gibson";
    src: url("https://use.typekit.net/af/da581f/00000000000000007735a540/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n2&v=3") format("woff2"),url("https://use.typekit.net/af/da581f/00000000000000007735a540/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n2&v=3") format("woff"),url("https://use.typekit.net/af/da581f/00000000000000007735a540/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n2&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 200;
    font-stretch: normal;
    font-display: swap;
}

@font-face {
    font-family: "canada-type-gibson";
    src: url("https://use.typekit.net/af/987a60/00000000000000007735a543/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/987a60/00000000000000007735a543/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/987a60/00000000000000007735a543/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
    font-display: swap;
}

@font-face {
    font-family: "canada-type-gibson";
    src: url("https://use.typekit.net/af/6c50f4/00000000000000007735a544/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/6c50f4/00000000000000007735a544/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/6c50f4/00000000000000007735a544/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 600;
    font-stretch: normal;
    font-display: swap;
}

@font-face {
    font-family: "canada-type-gibson";
    src: url("https://use.typekit.net/af/37e7f5/00000000000000007735a548/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2"),url("https://use.typekit.net/af/37e7f5/00000000000000007735a548/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff"),url("https://use.typekit.net/af/37e7f5/00000000000000007735a548/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 300;
    font-stretch: normal;
    font-display: swap;
}

@font-face {
    font-family: "canada-type-gibson";
    src: url("https://use.typekit.net/af/be28cc/00000000000000007735a54a/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/be28cc/00000000000000007735a54a/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/be28cc/00000000000000007735a54a/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 500;
    font-stretch: normal;
    font-display: swap;
}

:root {
    --windowWidth: 100%;
    --color-autox-green: #7FF669;
    --color-autox-blue: #67CEF6;
    --color-autox-dark-blue: #0074b2;
    --color-autox-blue-bg: #00263c;
    --bs-btn-active-bg: var(--color-autox-green) !important;
    --bs-btn-active-border-color: var(--color-autox-green) !important;
}

body {
    background-color: transparent !important;
    font-family: canada-type-gibson, sans-serif !important;
    font-weight: 500;
    color: #00263c !important;
    overflow-x: hidden !important;
}
/*
@media screen and (orientation:portrait) {
    
}

@media screen and (orientation:landscape) {
    
}*/

@media screen and (max-width:1024px) {
    /*    mobile
    ..This is basic media query for respective device.In to this media query CSS code cover the both view landscape and portrait view.
*/

}

/*@media all and (orientation:portrait) {*/
/* Style adjustments for portrait mode goes here */
/*}

@media all and (orientation:landscape) {*/
/* Style adjustments for landscape mode goes here */
/*}*/

@media screen and (min-width:320px) and (orientation:portrait) {

    .img-detail-principal {
        height: 60vh
    }

    .img-detail-others {
        height: 30vh
    }

    .div-img-modal-top {
        height: 15.7vh !important;
    }

        .div-img-modal-top.primary {
            height: 32vh !important;
        }
}

@media screen and (min-width:320px) and (orientation:landscape) {

    .img-detail-principal {
        height: 64vh
    }

    .img-detail-others {
        height: 32vh
    }

    .div-img-modal-top {
        height: 32vh !important;
        /*background-color: #ced4da;*/
    }

        .div-img-modal-top.primary {
            height: 100% !important;
        }
}

@media (orientation: portrait) {
    .container-image-desktop {
        /*grid-template-rows: minmax(10vh, 16vh) minmax(10vh, 16vh) !important;*/ /* Ajuste conforme necessário */
        grid-template-rows: none !important;
    }
}

@media (min-width:320px) {

    .grid-list-vehicle-component-share {
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        text-align: center;
        gap: 20px;
        width: 100%;
    }

    .grid-list-vehicle-component {
        display: grid;
        grid-template-columns: auto 1fr 24%;
        gap: 10px;
    }

    .btn-new-light {
        background-color: #E4E6EB;
        border-radius: 10px;
        border: 1px solid #E4E6EB;
        color: #00263C;
    }

        .btn-new-light:hover {
            background-color: #D8DADF;
        }

    .dashed {
        border-top: 1px dashed #00263C; /* Set the top border as dashed */
        border-bottom: 0; /* Remove the default bottom border */
        width: 100%; /* Set the width to occupy the entire width of the container */
        color: #00263C; /* Set the border color */
        background-color: #00263C; /* Set the background color */
    }

    .input-group input {
        border: 1px solid #FFF !important;
        border-left: 1px solid !important;
    }

    /*.placeholder {
        width: 100%;
        position: relative;
        overflow: hidden;
    }

        .placeholder:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            width: 80px;
            opacity:0.6;
            background: linear-gradient(90deg, #eee, #f4f4f4, #eee);
            background: linear-gradient(90deg, #00263c, #01131e, #00263c);
            animation: gradient 1.5s infinite ease-in-out;
        }*/

/*    .image-placeholder {
        aspect-ratio: 16 / 12;
        margin-bottom: 1rem;
    }

    .title-placeholder {
        aspect-ratio: 16 / 1.5;
        margin-bottom: 2rem;
    }

    .text-placeholder {
        aspect-ratio: 16 / 1;
        margin-top: 1rem;
        margin-bottom: 0;
    }

    @keyframes gradient {
        from {
            left: 0%;
        }

        to {
            left: 100%;
        }
    }
*/
    @keyframes placeHolderShimmer {
        0% {
            background-position: -468px 0
        }

        100% {
            background-position: 468px 0
        }
    }


    .animated-background {
        animation-duration: 1.25s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-name: placeHolderShimmer;
        animation-timing-function: linear;
        background: darkgray;
        background: linear-gradient(to right, #80939E 10%, #00263c 18%, #80939E 33%);
        background-size: 800px 104px;
        height: 100px;
        position: relative;
    }

    .favorite {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: end;
        align-items: center;
        cursor: pointer;
    }

    .favorite-icon img {
        max-width: 100%;
        height: 40px;
    }

    /*    .favorite .favorite-icon img.selected {
        display: none;
    }

    .favorite:hover .favorite-icon img.original {
        display: none;
    }*/

    .favorite:hover .favorite-icon img.selected {
        display: inline-block;
    }

    .favorite-text {
        padding-right: 7px;
        white-space: nowrap;
    }

    .btn-new.tertiary.checked, .btn-new.tertiary.select {
        background-color: var(--color-autox-blue-bg) !important;
        color: #ffffff !important;
        font-weight: 400;
    }

    .col-image-desktop-slide:first-child {
        grid-row: span 2; /* A primeira div ocupará 2 linhas */
    }

    .container-image-desktop-slide-three {
        display: grid;
        grid-template-columns: 66% 34%;
        grid-template-rows: repeat(2, auto); /* 2 linhas */
        grid-template-rows: 50vh 50vh;
        gap: 10px; /* Espaçamento entre as divs */
    }

    .container-image-desktop-slide {
        display: grid;
        grid-template-columns: 50% 25% 25%; /* Larguras conforme especificado */
        grid-template-rows: repeat(2, auto); /* 2 linhas */
        grid-template-rows: 50vh 50vh;
        gap: 10px; /* Espaçamento entre as divs */
    }

    .grid-create-vehicle-image-slide {
        display: grid;
        grid-template-columns: repeat(2, minmax(100px, 250px));
        grid-template-rows: repeat(2, minmax(0, 161px)); /* Define um tamanho máximo de 250px para as linhas */
        gap: 40px;
        grid-auto-flow: row;
        justify-content: center;
        justify-items: center;
    }
        /* Esta regra garante que os divs filhos diretos do .create-vehicle-image ocupem toda a altura e largura de suas células grid. */
        .grid-create-vehicle-image-slide > div {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            /* Certificando-se de que a imagem ocupe todo o espaço do seu div pai. */
            .grid-create-vehicle-image-slide > div > img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

    .image-container {
        width: 100%;
        position: relative;
        display: inline-block; /* Mantém o tamanho da div de acordo com o conteúdo */
    }

    .overlay-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .fade-out {
        opacity: 0 !important;
        transition: opacity 0.5s;
    }

    .fade-in {
        opacity: 1 !important;
        transition: opacity 0.5s;
    }

    .fade-in-1sec {
        opacity: 1 !important;
        transition: opacity 1.5s;
        transition: transform 1.5s, opacity 1.5s;
    }

    .fade-out-1sec {
        opacity: 0 !important;
        transition: opacity 1.5s;
        transition: transform 1.5s, opacity 1.5s;
    }

    .fade-from {
        opacity: 0.2;
    }

    .fade-to {
        opacity: 1;
        transition: opacity 0.5s;
    }

    .transparent {
        opacity: 0;
    }

    .visible {
        opacity: 1;
    }

    .img-vehicle-slider {
        height: 50vh;
        width: 100%;
        object-fit: cover;
        object-position: center;
    }
        
    .layout-class {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .grid-create-vehicle-image {
        display: grid;
        grid-template-columns: repeat(2, minmax(100px, 250px));
        grid-template-rows: repeat(2, minmax(0, 161px)); /* Define um tamanho máximo de 250px para as linhas */
        gap: 40px;
        grid-auto-flow: row;
        justify-content: center;
        justify-items: center;
    }
        /* Esta regra garante que os divs filhos diretos do .create-vehicle-image ocupem toda a altura e largura de suas células grid. */
        .grid-create-vehicle-image > div {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            /* Certificando-se de que a imagem ocupe todo o espaço do seu div pai. */
            .grid-create-vehicle-image > div > img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }


    .name-model {
        font-size: 1.7rem;
        font-weight: bold;
    }

    .name-make {
        font-weight: 400;
        font-size: 1.2rem;
        margin-bottom: -6px;
    }

    .container-vehicle {
        display: grid;
        grid-template-columns: 1fr; /* Faz com que cada coluna ocupe 100% da largura */
        grid-column-gap: 10px; /* Espaçamento entre as colunas. Ajuste conforme necessário. */
        /*grid-row-gap: 10px;*/ /* Espaçamento entre as linhas */
        grid-row-gap: 0px;
        padding-right: 10px;
    }

    .col-vehicle {
        padding: 10px;
    }

    .container-image-desktop {
        display: grid;
        grid-template-columns: 50% 25% 25%; /* Larguras conforme especificado */
        grid-template-rows: repeat(2, auto); /* 2 linhas */
        grid-template-rows: 32vh 32vh;
        /*grid-template-rows: minmax(20vh, 32vh) minmax(20vh, 32vh);*/ /* 2 linhas com min-height de 20vh e altura normal de 32vh */
        gap: 10px; /* Espaçamento entre as divs */
        padding-right: 20px;
    }


    .col-image-desktop:first-child {
        grid-row: span 2; /* A primeira div ocupará 2 linhas */
    }

    .container-more-vehicle {
        display: grid;
        grid-template-columns: 66% 34%; /* Larguras conforme especificado */
        grid-template-rows: 90px 90px;
        gap: 5px; /* Espaçamento entre as divs */
    }

    .col-more-vehicle:first-child {
        grid-row: span 2; /* A primeira imagem (div) ocupará 2 linhas */
    }

    .row-split {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: 0px;
    }

    .text-left {
        max-width: calc(100% - 10px);
    }

    .text-right {
        flex-shrink: 0;
        font-size: 1rem;
        padding-right: 5px;
        margin-top: -6px;
    }

        .text-right:only-child {
            width: 100%;
        }

    .img-vehicle {
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: center;
        -webkit-transition: 0.8s ease-in-out;
        transition: 0.8s ease-in-out;
    }

        /* Quando .img-vehicle é "hovered" e .brightness não está presente */
        .img-vehicle:hover:not(.brightness) {
            -webkit-transform: scale(1.3);
            transform: scale(1.3);
        }

        /* Quando .img-vehicle é "hovered" e .brightness está presente */
        .img-vehicle:hover + .brightness {
            -webkit-filter: brightness(110%);
            /* Removemos a transformação de escala para .brightness */
        }

    a:hover {
        color: white;
    }

    .img-principal {
        height: 60vw;
        max-width: 75vw;
        width: 75vw;
        object-fit: cover;
    }

    .img-other {
        height: 29.7vw;
        max-width: 40vw;
        object-fit: cover;
    }

    .favorite::before {
        /*content: "\f004";*/ /* Este é o código unicode para o ícone coração no Font Awesome */
        /*font-family: "Font Awesome 6 Free";
        font-weight: 900;*/ /* Para ícones sólidos */
        font-size: 1.7rem;
        color: white;
        /*text-shadow: 1px 1px 7px var(--color-autox-blue-bg), -1px -1px 9px var(--color-autox-blue-bg), 0 2px 7px var(--color-autox-blue-bg), 0 -2px 7px var(--color-autox-blue-bg);*/
        text-shadow: 1px 1px 5px var(--color-autox-blue-bg), -1px -1px 7px var(--color-autox-blue-bg), 0 2px 5px var(--color-autox-blue-bg), 0 -2px 5px var(--color-autox-blue-bg);
    }

    .favorite:hover::before {
        /*color: var(--color-autox-green) !important;*/
        color: var(--color-autox-green);
        /*text-shadow: 1px 1px 7px var(--color-autox-blue-bg), -1px -1px 9px var(--color-autox-blue-bg), 0 2px 7px var(--color-autox-blue-bg), 0 -2px 7px var(--color-autox-blue-bg);*/
        text-shadow: 1px 1px 5px var(--color-autox-blue-bg), -1px -1px 7px var(--color-autox-blue-bg), 0 2px 5px var(--color-autox-blue-bg), 0 -2px 5px var(--color-autox-blue-bg);
    }

    .input-search-make {
        cursor: pointer;
        color: black;
        font-size: 14px !important;
        height: 30px;
        border: 1px solid #00263c4f;
        outline: none;
        box-shadow: none;
        margin-bottom: 2px;
        width: 97% !important;
        margin-top: 1px;
        margin-left: 2px;
        width: auto;
        margin-left: 6px;
    }

        .input-search-make:focus {
            border: 1px solid #00263c4f;
            outline: none;
            box-shadow: none;
        }

    .input-make-create-vehicle {
        cursor: pointer;
        color: black;
        font-size: 14px !important;
        height: 30px;
        border: 1px solid #00263c4f;
        outline: none;
        box-shadow: none;
        margin-bottom: 2px;
        width: 99% !important;
        margin-top: 1px;
        margin-left: 2px;
        width: auto;
    }

        .input-make-create-vehicle:focus {
            border: 1px solid #00263c4f;
            outline: none;
            box-shadow: none;
        }

    .input-with-icon {
        position: relative;
        display: inline-block;
        width: 100%;
    }

        .input-with-icon input {
            padding-left: 30px; /* Adicione um espaço à esquerda para o ícone */
            outline: none !important; /* Remova o contorno ao focar */
        }

        .input-with-icon i {
            position: absolute;
            top: 49%;
            left: 9px; /* Posicione o ícone à esquerda com uma margem de 5px */
            transform: translateY(-50%);
            color: #ccc;
            pointer-events: none; /* Evita que o ícone intercepte os eventos de clique */
        }

    .list-make {
        max-height: 307px !important;
        overflow-y: auto;
        padding-top: 2px;
    }

        .list-make li {
            /*padding-left: 6px;
        padding-top: 2px;*/
            padding-left: 6px;
            margin-bottom: 2px;
            border-bottom: 1px solid #00263c26;
            padding-bottom: 2px;
            /*max-height: 307px !important;*/
            overflow-y: auto;
        }

    .custom-select {
        display: inline-block;
        width: 100%;
        position: absolute;
        top: 1px;
    }
        /*.custom-select:after {
            content: '\2716';
        }

        .custom-select:not(.selected):after {
            content: '\25BC';
        }*/

        .custom-select:after {
            content: '\2716'; /* Código unicode para a seta para baixo */
            transition: transform 0.3s ease;
        }

        .custom-select:not(.selected):after {
            content: '\25B2'; /* Código unicode para a seta para cima */
            transform: rotate(180deg);
        }

        .custom-select:after {
            position: absolute;
            top: 50%;
            right: 10px;
        }

    /*.custom-select.selected:after {
            content: '\25B2';*/ /* Código unicode para a seta para cima */
    /*animation: arrowAnimation 1s infinite;*/
    /*content: '\2716';*/ /* Código unicode para o símbolo "X" */
    /*}
        .custom-select:after {
            content: '\25BC';*/ /* Código unicode para a seta para baixo */
    /*position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
        }*/
    .icon-menu-mobile {
        aspect-ratio: auto;
        max-width: 60px;
    }

    .div-search-make-relative {
        overflow-x: scroll;
        overflow: auto;
        background-color: white;
        position: relative;
        top: -4px;
        padding-top: 4px;
    }

    .div-search-make-absolute {
        background-color: #ffffff;
        color: black;
        z-index: 1001;
        width: 99%;
        position: absolute;
        border: 1px solid #000;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }

    .div-search-make {
        background-color: #FFFFFF;
        padding-bottom: 5px;
        min-height: 37px;
        border-radius: 4px;
        width: auto;
        border: 1px solid #000;
        padding-top: 5px;
        cursor: pointer;
        color: black;
        position: relative;
        width: 99%;
    }

        .div-search-make .selected {
            border-bottom-right-radius: 0px;
            border-bottom-left-radius: 0px;
        }


    /*.img-detail-principal {
        width: 70%;
        float:left;
    }

    .img-detail-others {
        width: 30%;
        float:left;
    }*/

    .vehicle-position-alert {
        z-index: 99;
        bottom: 4px !important;
        right: 6px;
        position: absolute !important;
        transition: .4s ease-in-out;
    }

    .txt-model {
        color: var(--color-autox-blue-bg) !important;
        font-size: 0.8rem;
        text-shadow: 2px 2px 9px #fff, -2px -2px 9px #fff, 0 4px 9px #fff, 0 -4px 9px #fff;
    }

    .txt-model-km {
        display: none;
    }

    .menu-left-size {
        margin-left: 20px;
        width: 184px;
    }

    .bg-autox-blue {
        background-color: var(--color-autox-blue-bg) !important;
    }

    .ribbon-new {
        color: #9df37b;
    }

    .alert-primary {
        background-color: #9df37b !important;
        color: #0b253a !important;
        border: 1px solid #00000000 !important;
        padding-bottom: 2px !important;
        font-size: 0.9rem;
    }

    .ph-row .big, .ph-row.big div {
        height: 29px !important;
    }

    .lightboxOverlay {
        width: 100vw !important;
        height: 100vh !important;
    }

    .mobile-alert {
        padding: 1px 7px 0px 7px !important;
        margin: 0px;
        font-size: 0.8rem !important;
    }

    .ordering {
    }

    .txt-menu-left {
        text-decoration: none !important;
        color: #ffffff !important;
    }

        .txt-menu-left :hover {
            color: var(--color-autox-green);
        }

    #menuTopDesktop {
        display: none !important;
    }

    .modal-xxl {
        --bs-modal-width: 80vw;
    }

    .typewriter h1 {
        font-size: 1.4rem;
        overflow: hidden; /* Ensures the content is not revealed until the animation */
        border-right: .15em solid orange; /* The typwriter cursor */
        white-space: nowrap; /* Keeps the content on a single line */
        letter-spacing: .15em; /* Adjust as needed */
        animation: typing 3.5s steps(30, end), blink-caret .5s step-end infinite;
    }

    /* The typing effect */

    @keyframes typing {
        from {
            width: 0
        }

        to {
            width: 100%
        }
    }

    /* The typewriter cursor effect */
    @keyframes blink-caret {
        from, to {
            border-color: transparent
        }

        50% {
            border-color: orange
        }
    }

    .grow-up {
        animation: growup 1s ease-in-out;
        animation-delay: 1s;
        animation-fill-mode: both;
        color: #7FF669 !important;
    }

    .shrink {
        animation-delay: 2s;
        animation: shrink 1s ease-in;
        animation-fill-mode: both;
        transition: color 2s ease;
    }



    @keyframes growup {
        from {
            transform: scale(1);
            visibility: visible;
        }

        to {
            transform: scale(1.5);
            visibility: visible;
        }
    }

    @keyframes shrink {
        from {
            transform: scale(1.5);
            visibility: visible;
        }

        to {
            transform: scale(1);
            visibility: visible;
        }
    }

    .lose span {
        background: linear-gradient(#e91e63 0%, #e91e63 100%) !important;
        color: #00263c !important;
    }

    .ribbon-new {
        position: absolute;
        left: 6px;
        top: -5px;
        z-index: 1;
        overflow: hidden;
        width: 263px;
        height: 218px;
        text-align: right;
    }

        .ribbon-new span {
            font-weight: bold;
            color: #00263c;
            text-transform: uppercase;
            text-align: center;
            transform: rotate(333deg);
            -webkit-transform: rotate(320deg);
            display: block;
            background: #79A70A;
            background: linear-gradient(#7ff669 0%, #7ff669 100%);
            box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
            position: absolute;
            font-size: 16px;
            line-height: 34px;
            width: 209px;
            top: 38px;
            left: -34px;
        }

            .ribbon-new span::before {
                content: "";
                position: absolute;
                left: 0px;
                top: 100%;
                z-index: -1;
                border-left: 3px solid #008C23;
                border-right: 3px solid transparent;
                border-bottom: 3px solid transparent;
                border-top: 3px solid #008C23;
            }

            .ribbon-new span::after {
                content: "";
                position: absolute;
                right: 0px;
                top: 100%;
                z-index: -1;
                border-left: 3px solid transparent;
                border-right: 3px solid #008C23;
                border-bottom: 3px solid transparent;
                border-top: 3px solid #008C23;
            }

    .object-cover {
        object-fit: cover;
    }

    .btn-manage {
        font-size: 0.9rem !important;
        padding: 4px;
    }

    .container-fluid {
        padding-left: 0.3rem !important;
        padding-right: 0.3rem !important;
    }

    .fslightbox-container {
        background: rgb(0,38,60) !important;
        background: linear-gradient(90deg, rgba(0,38,60,1) 4%, rgba(23,36,44,1) 49%, rgba(0,38,60,1) 91%) !important;
    }

    .modal-content {
        /*background: rgb(0,38,60) !important;
        background: linear-gradient(90deg, rgba(0,38,60,1) 4%, rgba(23,36,44,1) 49%, rgba(0,38,60,1) 91%) !important;*/
    }

    .ordering {
        font-weight: 600;
    }

        .ordering:hover {
            background-color: white;
            cursor: pointer;
        }

    .vehicke-info-relative {
        position: relative !important;
        /*opacity: 0 !important;*/
        -webkit-transition: 0.4s ease-in-out;
        transition: 0.4s ease-in-out;
        z-index: 99;
    }

        .vehicke-info-relative:hover {
            opacity: 1 !important;
        }

    .vehicke-info-relative-price {
        position: relative !important;
        /*opacity: 0.2 !important;*/
        z-index: 1000;
    }

    .vehicke-info-km {
        /*bottom: 21px;
        position: absolute !important;
        padding: 0px 11px;
        font-weight: 500;
        font-size: 1rem;
        right:0px;*/
        position: absolute !important;
        padding: 0px 11px;
        font-weight: 500;
        font-size: 1rem;
        left: 0px;
        top: 3px;
    }

    .vehicke-info {
        bottom: 4px;
        position: absolute !important;
        left: 4px;
    }

    @keyframes pulse {
        0% {
            transform: scale(1);
        }



        100% {
            transform: scale(1.3);
        }
    }


    .modal-img {
        opacity: 1 !important;
        z-index: 100;
        height: 100%;
        -webkit-transition: 0.8s ease-in-out;
        transition: 0.8s ease-in-out;
    }

        .modal-img:hover {
            /*animation: pulse 1.5s infinite;*/
            -webkit-transform: scale(1.3) !important;
            transform: scale(1.3) !important;
            opacity: 1 !important;
        }

            .modal-img:hover + .vehicke-info-relative {
                opacity: 1 !important;
            }

    /*.modal-img {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
        height: 100%;*/
    /*opacity: 0.5 !important;*/
    /*}

        .modal-img:hover {
            -webkit-transform: scale(1.2) !important;
            transform: scale(1.2);
            opacity: 1 !important;
        }*/

    .hover-img {
        background-color: #00263c;
        margin-bottom: 0px;
        color: #fff;
        overflow: hidden;
        cursor: pointer;
    }

        .hover-img * {
            box-sizing: border-box;
            transition: all 0.45s ease;
        }

        .hover-img img {
            vertical-align: top;
            backface-visibility: hidden;
        }


        .hover-img:hover > img {
            /*opacity: 0.7;*/
            -webkit-filter: brightness(110%);
            /*-webkit-transform: scale(1.05);*/
        }

    .alert {
        padding: 0.4rem !important;
        padding-bottom: 0.2rem !important;
        font-size: 0.9rem !important;
        font-weight: 600;
    }

    .div-img-modal {
        overflow: hidden;
        height: 100%;
    }

    .div-trend-left {
        width: 100vw;
    }

    .div-trend-right {
        visibility: hidden;
    }

    .box-add-img-vehicle {
        height: 125px !important;
        width: 140px !important;
    }

    .text-autox-green {
        color: var(--color-autox-green) !important;
    }

    .text-autox-blue {
        color: var(--color-autox-blue) !important;
    }

    .text-autox-blue-bg {
        color: var(--color-autox-blue-bg) !important;
    }

    .menu {
        opacity: 0;
        display: none;
        background-color: #00263c;
        height: 100%;
        width: calc(var(--windowWidth) - 12px); /*calc(100vw - var(--scroolbarSize));*/
        position: absolute;
        z-index: 99999;
        top: 0;
        left: 0;
        transition: opacity 0.5s, visibility 0s 0.5s;
        padding-left: 6px;
    }

        .menu.active {
            opacity: 1;
            display: block !important;
            transition: opacity 0.5s;
        }

    /* smartphones, iPhone, portrait 480x320 phones */
    .nav-mobile {
        /*border-bottom: 1px dotted #67CEF6;*/
        padding-top: 4px;
        padding-bottom: 8px;
        display: flex;
        background-color: #00263c;
        /*display: inline-flex;*/
    }

    .logo {
        padding-left: 8px;
        padding-top: 2px;
    }

    /*#region icons*/

    .icon-x-remove {
        height: 11px;
        margin-left: 3px;
    }

    .icon-search {
        font-size: 24px;
        padding-right: 4px;
        color: #a6b0cf;
    }

    .div-icon-menu {
        margin-top: 3vh;
        width: 100%;
        text-align: center;
    }

    .div-icon-text {
        text-align: center;
        width: 100%;
        padding-top: 1vh;
    }

    .icon-menu {
        font-size: 25px;
        padding-right: 10px;
        /*padding-top: 3px;*/
        padding-left: 10px;
        color: #a6b0cf;
        border: 0px;
        background-color: #00263c;
    }

        .icon-menu.mobile {
            font-size: 14px;
            display: inline-flex;
            align-items: center;
        }

    .logo-autox {
        height: 20vh !important;
        max-height: 150px;
        margin: auto;
    }

    .icon-left {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-height: 90px;
    }

        .icon-left.mobile {
            height: 46px;
            width: 46px;
        }
    /*#endregion icons*/

    .div-menu-mobile {
        margin-top: 10px;
    }

    .txt-menu {
        font-size: 14px;
    }

        .txt-menu.mobile {
            padding-left: 0.5rem;
            color: white;
            font-size: 1.05rem;
        }

    .close-menu {
        position: absolute;
        bottom: 10px;
        right: 10px;
    }

    /*#region buttons*/
    .btn-new {
        text-decoration: none;
        float: left;
        font-size: 16px;
        padding: 5px 14px 3px 13px;
        border-radius: 10px;
        cursor: pointer;
        -webkit-appearance: button;
        letter-spacing: 1px;
        font-weight: 600;
        white-space: nowrap;
    }

        .btn-new.btn-menu {
            margin: 0px 2px 5px 2px;
            font-weight: 500;
            font-size: 13px;
        }

        .btn-new.primary {
            background-color: #67CEF6;
            color: #00263C !important;
            border: 1px solid #67CEF6;
        }

            /*.btn-new.primary:hover {
                background-color: #0074B2;
                border: 1px solid #0074B2;
            }*/

            .btn-new.primary.select {
                background-color: #0074B2;
                border: 1px solid #0074B2;
                color: var(--color-autox-blue-bg) !important;
            }

            .btn-new.primary.checked {
                background-color: #0074B2;
                color: var(--color-autox-blue-bg) !important;
            }
        /*.btn-new.primary.select:hover {
                    background-color: #67CEF6;
                    color: #00263C !important;
                }*/

        .btn-new.secondary {
            border: 1px solid #7FF669;
            background-color: var(--color-autox-blue-bg);
            color: var(--color-autox-green) !important;
            /*--bs-btn-color: #7FF669 !important;
            --bs-btn-bg: var(--color-autox-green);
            --bs-btn-border-color: var(--color-autox-green);*/
        }

            .btn-new.secondary.select {
                background-color: #7FF669;
                color: var(--color-autox-blue-bg) !important;
            }

            .btn-new.secondary.checked {
                background-color: #7FF669;
                color: var(--color-autox-blue-bg) !important;
            }

        /*.btn-new.secondary:hover {
                background-color: #7ff669;
                color: var(--color-autox-blue-bg) !important;
            }

            .btn-new.secondary.select:hover {
                background-color: white;
                border: 1px solid white;
            }*/
        .btn-new.quaternary {
            background-color: var(--color-autox-green);
            color: var(--color-autox-blue-bg) !important;
        }

            .btn-new.quaternary:hover {
                color: var(--color-autox-blue-bg) !important;
            }

        .btn-new.tertiary {
            background-color: white;
            border: 1px solid white;
            color: var(--color-autox-blue-bg) !important;
        }

            .btn-new.tertiary:hover {
                background-color: var(--color-autox-blue-bg) !important;
                color: var(--color-autox-green) !important;
            }

    .btn-filter-make {
        border-radius: 8px;
        /*padding: 3px 8px 0px 8px;*/
        padding: 1px 7px 0px 6px;
        font-size: 14px;
        white-space: nowrap;
        font-weight: 600;
        color: var(--color-autox-blue-bg) !important;
        display: inline-flex;
        align-items: center;
        -webkit-appearance: button;
        margin-right: 6px;
    }

        .btn-filter-make.secondary {
            background-color: #7FF669;
        }

            .btn-filter-make.secondary.select {
                border: 1px solid var(--color-autox-dark-blue);
            }

    .btn-filter {
        border-radius: 8px;
        /*padding: 3px 8px 0px 8px;*/
        padding: 1px 7px 0px 6px;
        font-size: 14px;
        white-space: nowrap;
        font-weight: 600;
        color: var(--color-autox-blue-bg) !important;
        display: inline-flex;
        align-items: center;
        -webkit-appearance: button;
        margin-right: 6px;
        text-transform: lowercase;
        border: 1px solid var(--color-autox-blue-bg);
    }

        .btn-filter.primary {
            background-color: #67cef6;
            font-size: 14px !important;
        }

        .btn-filter.secondary {
            background-color: #7FF669;
        }


    /*#endregion buttons*/

    .div-filter-selected {
        padding-left: 5px;
        display: flex;
    }

    .menu-left {
        display: none;
    }

    .menu-right {
        width: var(--windowWidth);
        overflow: hidden;
        z-index: 100;
    }

    .div-filter {
        width: calc(var(--windowWidth) - 6px);
        display: flex;
        flex-wrap: nowrap;
        overflow: auto;
        -ms-overflow-style: none; /* for Internet Explorer, Edge */
        scrollbar-width: none; /* for Firefox */
        overflow-y: scroll;
    }

        .div-filter::-webkit-scrollbar {
            display: none; /* for Chrome, Safari, and Opera */
        }


    .div-title {
        margin: 5px 0px 0px 5px;
        font-size: 12px;
        font-weight: 300;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    /*.card-vehicle-main {
        float: left;
        margin: 5px;
        cursor: pointer;
        overflow: hidden;
    }*/

    .card-vehicle-classifieds {
        /*width: calc(50vw - 12px);*/
        /*width: calc(50vw - calc(var(--bs-gutter-x) * .5) - 10px);*/
        width: calc(calc(var(--windowWidth) / 2) - 15px);
        height: 13vh;
        border-radius: 9px;
        overflow: hidden;
        float: left;
        margin: 5px;
        cursor: pointer;
        overflow: hidden;
        position: relative;
        transform-origin: 100% 50%;
    }

        .card-vehicle-classifieds.highlight-classifieds {
            /*width: calc(100vw - 12px);*/
            width: calc(var(--windowWidth) - 18px);
            /*width: calc(100vw - calc(var(--bs-gutter-x) * .5) - 20px);*/
            height: 27vh;
        }

    .card-vehicle-back-relative-opacity {
        position: relative;
        top: -43px;
        font-size: 20px;
    }

        .card-vehicle-back-relative-opacity.highlight-classifieds {
            top: -43px;
        }

    .card-vehicle-back-absolute-opacity {
        position: absolute;
        opacity: 0.5;
        background-color: black;
        /*width: 47.5vw;*/
        width: calc(50vw - calc(var(--bs-gutter-x) * .5) - 10px);
        height: 43px;
        border-bottom-left-radius: 9px;
        border-bottom-right-radius: 9px;
    }

        .card-vehicle-back-absolute-opacity.highlight-classifieds {
            /*width: 96vw;*/
            /*width: calc(100vw - 14px);*/
            width: calc(100vw - calc(var(--bs-gutter-x) * .5) - 20px);
            height: 43px;
        }

    .card-vehicle-relative-info {
        position: relative;
        top: -36px;
        left: 14px;
        color: #ffffff;
        font-size: 18px;
    }

        .card-vehicle-relative-info.highlight-classifieds {
            top: -35px;
        }

    .card-vehicle-absolute-info {
        position: absolute;
        overflow: hidden;
    }

    .flex {
        display: flex;
    }

    .justify-between {
        justify-content: space-between;
    }

    .carousel-vehicle-details {
        /*412 × 309 px*/
        /*width: 412px;
        height:309px;*/
        width: 100vh;
    }

    .carousel-item {
        max-height: 60vh;
    }
}

@media (min-width:481px) {
    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
    .card-vehicle-classifieds {
        height: 49vh;
    }
}

@media (min-width:590px) {
    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
    .card-vehicle-classifieds {
        height: 36vh;
    }
}

@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */

    .container-vehicle {
        grid-template-columns: repeat(2, 1fr);
        grid-row-gap: 0px; /* Espaçamento entre as linhas */
    }

    .img-principal {
        height: 50vw;
    }

    .img-other {
        height: 24.73vw;
    }

    .card-vehicle-classifieds {
        /*width: calc(50vw - 19px);*/
        height: 22vh;
    }

        .card-vehicle-classifieds.highlight-classifieds {
            /*width: calc(100vw - 14px);*/
            /*width: calc(100vw - calc(var(--bs-gutter-x) * .5) - 20px);*/
            /*width: calc(var(--windowWidth) - 30px);*/
            height: 40vh;
        }

    /*.card-vehicle-back-absolute-opacity {*/
    /*width: 48.5vw;*/
    /*width: calc(50vw - calc(var(--bs-gutter-x) * .5) - 10px);*/
    /*width: calc(50vw - var(--windowWidth));*/
    /*}*/
    .div-trend-left {
        width: 66vw;
    }

    .card-vehicle-classifieds {
        /*variavel*/
        width: calc((var(--windowWidth) / 4) - 10px);
        height: 128px;
    }

        .card-vehicle-classifieds.highlight-classifieds {
            width: calc((var(--windowWidth) / 2) - 10px);
            height: 266px;
        }

            .card-vehicle-classifieds.highlight-classifieds figure img {
                width: 100%;
            }
}

@media (min-width:800px) {
    .container-vehicle {
        grid-template-columns: repeat(2, 1fr);
        grid-row-gap: 0px; /* Espaçamento entre as linhas */
    }

    .container-more-vehicle {
        grid-template-rows: 120px 120px;
    }
}

@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */

    .name-model {
        font-size: 2rem;
    }

    .alert {
        font-size: 1.1rem;
        /*padding: 0.5rem !important;*/
        /*padding-bottom: 0.2rem !important;*/
    }

    .div-trend-left {
        width: 50vw;
    }

    .card-vehicle-classifieds {
        /*variavel*/
        height: 196px;
    }

        .card-vehicle-classifieds.highlight-classifieds {
            height: 402px;
        }

            .card-vehicle-classifieds.highlight-classifieds figure img {
                width: 100%;
            }
}

@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */
    .text-right {
        font-size: 1.1rem;
    }
}

@media (min-width:1281px) {

    .grid-create-vehicle-image {
        grid-template-columns: repeat(4,minmax(100px,305px));
        grid-template-rows: repeat(2, minmax(0, 260px)); /* Define um tamanho máximo de 250px para as linhas */
    }

    .container-vehicle {
        grid-template-columns: repeat(2, 1fr);
    }

    .icon-menu-mobile {
        aspect-ratio: auto;
        max-width: 200px;
    }

    /*.img-detail-others {
        height: 21vh;
    }*/

    .vehicle-position-alert {
        bottom: -10px !important;
    }

    .txt-model {
        font-size: 1.3rem;
    }

    .btn-new.primary:hover {
        background-color: #0074B2;
        border: 1px solid #0074B2;
    }

    .btn-new.secondary:hover {
        background-color: #7ff669;
        color: var(--color-autox-blue-bg) !important;
    }

    .btn-new.secondary.select:hover {
        background-color: white;
        border: 1px solid white;
        color: var(--color-autox-blue-bg) !important;
    }

    .btn-new.btn-menu {
        font-weight: 500;
        font-size: 14px;
    }

    .card-vehicle-classifieds {
        /*variavel*/
        width: calc((var(--windowWidth) / 4) - 10px);
        height: 221px;
    }

        .card-vehicle-classifieds.highlight-classifieds {
            width: calc((var(--windowWidth) / 2) - 10px);
            height: 452px;
        }

            .card-vehicle-classifieds.highlight-classifieds figure img {
                width: 100%;
            }

    /*.card-vehicle-classifieds {*/
    /*variavel*/
    /*width: 294px;
        height: 196px;
    }

        .card-vehicle-classifieds.highlight-classifieds {
            width: 598px;
            height: 402px;
        }

            .card-vehicle-classifieds.highlight-classifieds figure img {
                width: 100%;
            }

    .card-vehicle-back-absolute-opacity {
        width: 299px;
        height: 43px;
    }

        .card-vehicle-back-absolute-opacity.highlight-classifieds {
            width: 608px;
            height: 43px;
        }*/

    .ribbon span {
        font-size: 17px;
        line-height: 43px;
        width: 310px;
        top: 62px;
        left: -48px;
    }


    .modal-right {
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0px !important;
        height: auto !important;
    }

    .modal-right-height {
        height: 100vh;
    }

    .div-trend-right {
        visibility: visible;
    }

    .box-add-img-vehicle {
        height: 200px !important;
        width: 224px !important;
    }

    .icon-left {
        height: 10vh !important;
    }



    .btn-new {
        font-size: 16px;
    }


    .div-filter {
        flex-wrap: wrap !important;
        width: 100% !important;
    }

    .div-title {
        font-weight: 400;
    }

    .carousel-vehicle-details {
        width: 75vh;
    }
}

@media (min-width:1560px) {
    .container-vehicle {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width:1921px) {


    .grid-list-vehicle-component-share {
        grid-template-columns: auto 1fr;
    }

    .padding-top-xxl {
        margin-top: 30px;
    }

    .container-vehicle {
        grid-template-columns: repeat(3, 1fr);
    }

    .div-search-make-absolute {
        width: 100%;
    }

    .input-search-make {
        width: 99% !important;
    }

    .div-search-make {
        width: 100%;
    }

    .img-detail-principal {
        height: 64vh;
    }

    .img-detail-others {
        height: 32vh;
    }

    .menu-left {
        float: left;
        margin-top: 1vh;
        /*margin-left: 40px;*/
        width: 134px;
        display: block;
    }

    .menu-right {
        float: left;
        margin-top: 20px;
        margin-left: 45px;
        /*margin-left: 255px;*/
        width: calc(100vw - 200px);
    }

    .nav-mobile {
        display: none !important;
    }

    #menuTopDesktop {
        display: block !important;
    }

    .menu-left-size {
        margin-left: 20px;
        width: 148px;
    }

    .txt-model-km {
        display: inline-block;
    }

    .logo-autox {
        max-height: 152px;
    }

    .icon-left {
        max-height: 80px;
    }

    .card-vehicle-classifieds {
        /*variavel*/
        width: calc((var(--windowWidth) / 5) - 10px);
        height: 204px;
    }

        .card-vehicle-classifieds.highlight-classifieds {
            width: calc((var(--windowWidth) / 2.5) - 10px);
            height: 418px;
        }

            .card-vehicle-classifieds.highlight-classifieds figure img {
                width: 100%;
            }

    /*.card-vehicle-classifieds.highlight-classifieds {
        width: 689px;
        height: 450px;
    }

    .card-vehicle-classifieds {
        width: 340px;
        height: 220px;
    }*/
}

@media (min-width:2200px) {
    .container-vehicle {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-create-vehicle-image {
        grid-template-columns: repeat(4,minmax(100px,100%));
        grid-template-rows: repeat(2, minmax(0, 305px)); /* Define um tamanho máximo de 250px para as linhas */
    }
}

@media (min-width:2561px) {
    /*.container-fluid{
        max-width: 2560px;
    }*/

    .card-vehicle-classifieds {
        /*variavel*/
        width: calc((var(--windowWidth) / 6) - 10px);
        height: 251px;
    }

        .card-vehicle-classifieds.highlight-classifieds {
            width: calc((var(--windowWidth) / 3) - 10px);
            height: 512px;
        }

            .card-vehicle-classifieds.highlight-classifieds figure img {
                width: 100%;
            }
}

@media (min-width:3000px) {
    .container-vehicle {
        grid-template-columns: repeat(5, 1fr);
    }

    /*.container-vehicle > :nth-child(8n + 6) {
            grid-column-start: 1;*/ /* O 6º item (e a cada 8 itens a partir daí) começa na 1ª coluna. */
    /*}

        .container-vehicle > :nth-child(8n + 7) {
            grid-column-start: 2;*/ /* O 7º item (e a cada 8 itens a partir daí) começa na 2ª coluna. */
    /*}

        .container-vehicle > :nth-child(8n + 8) {
            grid-column-start: 3;*/ /* O 8º item (e a cada 8 itens a partir daí) começa na 3ª coluna. */
    /*}*/

    /*.container-vehicle > :nth-child(9n) {
            grid-column-start: 1;*/ /*O 9º item começa na 1ª coluna. */
    /*grid-column-end: span 1;
            grid-template-columns: repeat(3, 1fr);
        }*/

    /*.container-vehicle > :nth-child(10n + 15) {
            grid-column-start: 2;*/ /* O 7º item começa na 2ª coluna. */
    /*}

        .container-vehicle > :nth-child(10n + 16) {
            grid-column-start: 3;*/ /* O 8º item começa na 3ª coluna. */
    /*}*/

    /*.container-vehicle > :nth-child(10n + 9) {
            grid-column-start: 1;*/ /* O 9º item começa na 1ª coluna da próxima linha. */
    /*}

        .container-vehicle > :nth-child(10n + 10) {
            grid-column-start: 2;*/ /* O 10º item começa na 2ª coluna da próxima linha. */
    /*}
        .container-vehicle > :nth-child(10n + 11) {
            grid-column-start: 3;*/ /* O 11º item começa na 2ª coluna da próxima linha. */
    /*}
        .container-vehicle > :nth-child(10n + 12) {
            grid-column-start: 4;*/ /* O 12º item começa na 2ª coluna da próxima linha. */
    /*}
        .container-vehicle > :nth-child(10n + 13) {
            grid-column-start: 5;*/ /* O 13º item começa na 2ª coluna da próxima linha. */
    /*}*/


}