/* .reserved-area section.content {
    min-height: calc(100vh - var(--page-height));
} */

.reserved-area section.content {
    min-height: 100%;
}

.reserved-area.app section.content {
    min-height: calc(170vh - var(--page-height));
}

/* .reserved-area.reserved-area:not(.app) .content.hidden {
    opacity: 0;
    
} */

.reserved-area.reserved-area:not(.app) .content {
    opacity: 1;
    transition: var(--transition);
}

.reserved-area footer {
    padding: 0 0 60px;
    margin-top: 100px;
}

.form {
    padding-top: 60px;
}

.form.login-form {
    padding-top: 70px;
}

.container-login {
    max-width: 490px;
}

.container-login.container-account {
    max-width: 620px;
}

.login-form .container-login .h1,
.login-form .container-login h2,
.login-form .container-login .simulator-results {
    font-size: 24px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.42;
    letter-spacing: normal;
    text-align: center;
    color: #1a1a1a;
    margin-bottom: 32px;
}



.login-form .container-login .h1 {
    margin-top: 0;
}

.reserved-area.login .login-form .container-login h2 {
    margin-bottom: 40px;
}

.login-form .container-login h2 b,
.login-form .container-login .simulator-results b {
    color: var(--primary);
}

.login-form .container-login>p {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.63;
    letter-spacing: normal;
    text-align: center;
    color: #1a1a1a;
    margin-top: 32px;
}

.login-form .container-login .row {
    margin-top: 25px;
}

.login-form .container-login .row:has(#new_password) {
    margin-top: 40px;
}

.login-form .container-login .row.row-thirty {
    --gap-h: 30px;
    --gap-v: 30px;
}

.login-form .container-login .row>a {
    font-size: 13px;
    font-weight: 300;
    line-height: 2;
    letter-spacing: normal;
    text-align: left;
    color: #959595;
}

.login-form .container-login .row>a:hover {
    font-size: 13px;
    font-weight: 300;
    line-height: 2;
    letter-spacing: normal;
    text-align: left;
    color: var(--black);
}

.row .input-wrapper {
    padding: 12.5px 30px;
    border: 1px solid #dddddd;
    border-radius: 20px;
    position: relative;
    transition: var(--transition);
}

.row .input-wrapper.filled {
    border: 1px solid #989898;
}

.row .input-wrapper.disabled {
    border: 0px solid #989898;
    background-color: rgb(221, 221, 221, 0.2);
}

.row .input-wrapper.disabled input {
    background-color: rgb(221, 221, 221, 0);
    color: #b2b1b1;
}

.row .input-wrapper.disabled.filled input:not(:focus)+label,
.row .input-wrapper.disabled.filled label {
    top: -5px !important;
    line-height: 1;
    opacity: 0.5;
}

.row .input-wrapper input {
    font-family: var(--font-family);
    transition: var(--transition);
    font-size: 16px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.63;
    width: 100%;
}

.input-wrapper input#matricula {
    text-transform: uppercase;
}

.row .input-wrapper label {
    position: absolute;
    left: 31px;
    top: 14px;
    transition: var(--transition);
    z-index: 2;
    font-size: 16px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.63;
    letter-spacing: normal;
    text-align: left;
    color: #959595;
    opacity: 1;
    pointer-events: none;
    display: flex;
}

.row .select-wrapper:has(.isSelected) label,
.row .filter-wrapper:has(.isSelected)+label,
.row input:focus+label,
.input-wrapper.filled label,
.row .hidden-wrapper.filled label,
.row .input-wrapper.filled input:focus+label,
.row .input-wrapper.filled input:not(:focus)+label {
    top: -9px !important;
    left: 27px !important;
    font-size: 11px;
    color: #959595;
    font-weight: normal;
    border-radius: 20px;
    background-color: white;
    padding: 0px 2px;
    z-index: 2;
    font-size: 11px;
    opacity: 1;
}


.row span.peek {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 30px;
    width: 25px;
    height: 25px;
    cursor: pointer;
    /* background-color: #000000; */
    z-index: 1;
}

.row span.peek.active::before {
    -webkit-mask-image: url(../assets/img/global/eye-login-closed.svg);
    -mask-image: url(../assets/img/global/eye-login-closed.svg);
    width: 24px;
    height: 15px;
}

.row .peek::before {
    content: "";
    position: absolute;
    -webkit-mask-image: url(../assets/img/global/eye-login.svg);
    -mask-image: url(../assets/img/global/eye-login.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    top: 0;
    right: 0px;
    left: 0;
    bottom: 0;
    width: 23px;
    height: 13px;
    background-color: #959595;
    margin: auto;
}


.row a.button {
    width: 100%;
}



.login .create-account {
    margin-top: 55px;
}

.login .create-account h2 {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.42;
    letter-spacing: normal;
    text-align: center;
    color: #1a1a1a;
}

.login .create-account .button {
    width: 100%;
    margin-top: 40px;
    display: flex;
}

.login .create-account .vantagens {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.63;
    letter-spacing: normal;
    text-align: left;
    color: #1a1a1a;
    margin-top: 32px;
}

.login .create-account .vantagens ul {
    list-style-type: none;
    text-align: left;
    margin: 0;
    margin-top: 25px;
    counter-reset: item;
    padding-inline-start: 30px;
}

.login .create-account .vantagens ul li::before {
    content: "";
    display: inline-block;
    height: 10px;
    width: 12px;
    margin-left: -30px;
    margin-right: 12px;
    -webkit-mask-image: url(../assets/img/global/login-check.svg);
    mask-image: url(../assets/img/global/login-check.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: var(--primary);
}

.row>small {
    font-size: 13px;
    font-weight: 300;
    line-height: 1.38;
    letter-spacing: normal;
    text-align: center;
    color: #959595;
    margin-top: 5px;
}


@media(max-width: 992px) {
    .reserved-area header>div.header-right-container>div {
        gap: 10px;
    } 
}


@media(max-width: 767px) {


    .login-form .container-login h2,
    .login-form .container-login .simulator-results {
        font-size: 18px;
        line-height: 1.58;
        margin-bottom: 20px;
    }

    .form.login-form {
        padding-top: 25px;
    }

    .login-form .container-login .simulator-results {
        font-size: 18px;
        line-height: 1.56;
    }

    .login-form .container-login>p {
        margin-top: 15px;
    }

    .login .create-account .vantagens,
    .row .input-wrapper label,
    .row .input-wrapper input,
    .login-form .container-login>p {
        font-size: 14px;
        font-weight: 300;
        line-height: 1.71;
    }

    .row .input-wrapper {
        border-radius: 10px;
        padding: 8.5px 21px;
        max-height: 45px;
    }


    .row .input-wrapper label {
        left: 21px;
        top: 10px;
    }

    .row input:focus+label,
    .row .input-wrapper.filled label,
    .row .input-wrapper.filled input:focus+label,
    .row .input-wrapper.filled input:not(:focus)+label {
        left: 21px !important;
    }

    .row span.peek {
        right: 21px;
    }

    .row>a {
        font-size: 11px;
        line-height: 1;
    }

    .login .create-account .button,
    .login .create-account .vantagens,
    .login .create-account {
        margin-top: 25px;
    }

    .login .create-account h2 {
        font-size: 18px;
        line-height: 1.56;
    }

    .reserved-area footer {
        margin-top: 40px;
        padding: 0 0 100px;
    }


}



.reserved-area .back-button {
    font-size: 16px;
    font-weight: normal;
    line-height: 1.2;
    letter-spacing: normal;
    text-align: left;
    color: #1a1a1a;
    opacity: 0.3;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    transition: var(--transition);
    justify-content: center;
    margin-top: 45px;
}

.reserved-area .back-button::before {
    content: "";
    -webkit-mask-image: url(../assets/img/marcacao/caret.svg);
    mask-image: url(../assets/img/marcacao/caret.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: var(--black);
    width: 7px;
    height: 11px;
    margin-bottom: 4px;
    display: block;
    transition: var(--transition);
    transform: rotate(180deg);
}

.reserved-area .back-button:hover {
    opacity: 0.8;
}

.reserved-area .back-button:hover::before {
    transform: rotate(180deg) translateX(5px);
}

.reserved-area .row .col-12 span.invalid,
.reserved-area .login-form .col-12:has(#confirm_new_password)>small,
.reserved-area .login-form .col-12:has(#new_password)>small {
    transition: var(--transition);
    opacity: 0;
    height: 0;
    display: block;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.38;
    letter-spacing: normal;
    text-align: left;
    color: #959595;

}

.reserved-area .login-form .col-12:has(#confirm_new_password)>small.visible,
.reserved-area .login-form .col-12:has(#new_password)>small.visible {
    opacity: 1;
    height: 20px;
    margin-top: 9px;
}
.reserved-area .row .col-12 span.invalid,
.reserved-area .login-form .col-12:has(#confirm_new_password)>small.invalid,
.reserved-area .login-form .col-12:has(#new_password)>small.invalid {
    opacity: 1;
    height: 20px;
    margin-top: 9px;
    color: red;
}

.reserved-area .login-form .container-login .col-12:has(#confirm_new_password)>small.visible,
.reserved-area .login-form .container-login .col-12:has(#new_password)>small.visible {
    height: 35px;
}

.reserved-area .login-form .container-login .col-12:has(#new_password)>small.invalid {
    height: 35px;
}

.reserved-area .login-form .col-12:has(#confirm_new_password)>small.invalid {
    height: 20px;
}


.reserved-area .login-form .row>.privacy-policy {
    margin-top: 10px;
    margin-bottom: 5px;
}

.reserved-area .login-form .row>.privacy-policy input[type='checkbox']+label::before {
    font-size: 14px;
}



@media(max-width: 767px) {

    .login-form .container-login .row:has(#new_password) {
        margin-top: 20px;
    }

    .reserved-area .login-form .col-12:has(#confirm_new_password)>small,
    .reserved-area .login-form .col-12:has(#new_password)>small {
        font-size: 11px;
        line-height: 1.45;

    }

    .reserved-area .login-form .col-12:has(#confirm_new_password)>small.invalid,
    .reserved-area .login-form .col-12:has(#new_password)>small.invalid {
        height: 33px;
    }

    .reserved-area .login-form .col-12:has(#confirm_new_password)>small.invalid {
        height: 16px;
    }

    .login-form .container-login .row.row-thirty {
        --gap-h: 20px;
        --gap-v: 18px;
    }

}



/************************/
/****** MAIN APP ********/
/************************/

body.reserved-area.app {
    padding: 0;
}

.reserved-area.app header {
    padding: 31px 40px;
    min-height: 121px;
}

.reserved-area.app header .site a span::after,
.reserved-area.app header .site a span::before {
    min-width: 28px;
    height: 28px;
}

.reserved-area.app header .login a span::after,
.reserved-area.app header .login a span::before,
.reserved-area.app header .oficina-proxima a span::after,
.reserved-area.app header .oficina-proxima a span::before {
    min-width: 26px;
    height: 28px;
}
body.reserved-area.app header > div.header-left-container > a,
body.reserved-area.app header>div.header-left-container .search-form {
    display: none;
}

.reserved-area.app header {
    box-shadow: none;
    background: transparent;
    z-index: 1;
    position: fixed;
    pointer-events: none;
    transition: none;
}

.reserved-area.app header.fixed {
    /* box-shadow: 0px 6px 9px 0 rgba(0, 0, 0, 0.04); */
    background: #ffffff;
}

body.reserved-area.app header.fixed > div.header-left-container > a{
    display: block;
}

header .header-right-container,
header .site a, header .login a {
    pointer-events: all;
}

body.reserved-area footer {
    opacity: 0;
    transition: var(--transition);
}

body.reserved-area.app footer {
    /* margin-top: 0; */
    position: relative;
    padding-top: 16px;
}

body.reserved-area.app footer .container {
    max-width: unset;
    padding: 0 100px;
}

body.reserved-area.app footer .container .top-footer {
    margin-top: 0;
}


body.reserved-area.app section.content {
    display: flex;
}

.reserved-area.app .logo-spacer {
    padding: 35px 20px 40px;
    width: 100%;
    border-bottom: 2px solid #f0f0f0;
    margin-bottom: 45px;
}

.reserved-area.app:has(header.fixed) .logo-spacer {
    background-color: white;
    max-width: 250px;
    z-index: 23;
    position: fixed;
    top: 0;
}

.reserved-area.app .logo-spacer img {
    max-width: 204px;
    min-width: 204px;

}

.reserved-area.app .client-name {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.63;
    letter-spacing: normal;
    text-align: left;
    color: #1a1a1a;
    margin-left: 20px;
    max-width: 220px;
    /* text-transform: capitalize; */
}

.reserved-area.app:has(header.fixed) .client-name {
    margin-top: 168px;
}


.reserved-area.app .sidemenu {
    max-width: 284px;
    min-width: 284px;
    position: relative;
    isolation: isolate;
    padding: 0 20px;
    transition: var(--transition);
}

body.reserved-area.app:has(.barra-superior.active) .sidemenu {
    padding-top: 55px;
}

body.reserved-area.app:has(.barra-superior.active.fixed) .sidemenu {
    padding-top: 0;
}

body.reserved-area.app:has(header.fixed) .sidemenu {
    z-index: 2;
}

.reserved-area.app .sidemenu .sidemenu-wrapper {
    position: fixed;
}

.reserved-area.app .sidemenu .sidemenu-wrapper .sidemenu-inner {
    transition: transform 0.1s ease-out;
    will-change: transform;
}

.reserved-area.app .sidemenu::before {
    box-shadow: 6px -2px 9px 0 rgba(0, 0, 0, 0.04);
    content: "";
    background-color: white;
    z-index: 0;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.reserved-area.app .sidemenu ul {
    margin-top: 25px;
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 9px;
}


.reserved-area.app .sidemenu ul li {
    position: relative;
}

.reserved-area.app .sidemenu ul li a {
    display: flex;
    gap: 15px;
    align-items: center;
    padding: 9px 20px 12px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.63;
    letter-spacing: normal;
    position: relative;
    z-index: 2;
    text-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0px rgba(0, 0, 0, 0);
    user-select: none;
}

/* .reserved-area.app .sidemenu ul li a:hover,
.reserved-area.app .sidemenu ul li a.selected:hover, */
.reserved-area.app .sidemenu ul li a.selected {
    color: var(--primary);
    text-shadow: 0.1px 0 0 rgb(255, 13, 0, 1), 0.1px 0 0 rgb(255, 13, 0, 1);
}
/* 
.reserved-area.app .sidemenu ul:has(a:hover) li a.selected {
    color: #000;
    text-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0px rgba(0, 0, 0, 0);
} */

.reserved-area.app .sidemenu ul:has(a:hover) li a.selected:hover {
    color: var(--primary);
}

.reserved-area.app .highlight {
    position: absolute;
    width: 100%;
    height: 49px;
    /* Adjust based on your design */
    background-color: #fef9f9;
    border-radius: 10px;
    transition: top 0.2s ease-in-out, opacity 0.2s ease-in-out;
    z-index: 1;
    opacity: 0;
}

.reserved-area.app .sidemenu ul li a span {
    content: "";
    width: 28px;
    height: 28px;
    background-color: black;
    -webkit-mask-image: url(../assets/img/area-reservada/dashboard.svg);
    mask-image: url(../assets/img/area-reservada/dashboard.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: var(--transition);
    pointer-events: none;
}
/* 
.reserved-area.app .sidemenu ul li a:hover span {
    background-color: var(--primary);
} */

.reserved-area.app .sidemenu ul li a.selected span {
    background-color: var(--primary);
}
/* 
.reserved-area.app .sidemenu ul:has(a:hover) li a.selected span {
    background-color: #000;
} */

/* .reserved-area.app .sidemenu ul:has(a:hover) li a.selected:hover span {
    background-color: var(--primary);
} */

.reserved-area.app .sidemenu ul li a.viatura span {
    -webkit-mask-image: url(../assets/img/area-reservada/viaturas.svg);
    mask-image: url(../assets/img/area-reservada/viaturas.svg);
}

.reserved-area.app .sidemenu ul li a.clube span {
    -webkit-mask-image: url(../assets/img/area-reservada/clube-myforce.svg);
    mask-image: url(../assets/img/area-reservada/clube-myforce.svg);
}

.reserved-area.app .sidemenu ul li a.dados span {
    -webkit-mask-image: url(../assets/img/area-reservada/editar-dados.svg);
    mask-image: url(../assets/img/area-reservada/editar-dados.svg);
}

.reserved-area.app .sidemenu ul li a.ajuda span {
    -webkit-mask-image: url(../assets/img/area-reservada/ajuda.svg);
    mask-image: url(../assets/img/area-reservada/ajuda.svg);
}

.reserved-area.app .sidemenu ul li a.sair span {
    -webkit-mask-image: url(../assets/img/area-reservada/sair.svg);
    mask-image: url(../assets/img/area-reservada/sair.svg);
}

.reserved-area.app .app-wrapper {
    display: block;
    padding: 145px 40px 100px;
    /* padding: 195px 40px 100px; */
    width: calc(100% - 284px);
    position: relative;
    transition: var(--transition);
}

.reserved-area.app:has(.barra-superior.active) .app-wrapper {
    padding: 195px 40px 100px;
}

.reserved-area.app .app-wrapper > .template {
    padding-top: 60px;
    margin: 0;
}

.reserved-area.app.submenu .app-wrapper {
    padding: 160px 40px 100px;
    max-width: 756px;
    margin: 0 auto;
}

.reserved-area.app.submenu .app-wrapper:has(.simulacoes),
.reserved-area.app.submenu .app-wrapper:has(.marcacoes) {
    max-width: unset;
    margin: 0;
}

.reserved-area.app .app-wrapper .top-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.reserved-area.app.clube .app-wrapper .top-wrapper,
.reserved-area.app .app-wrapper:has(.privacy-policy) .top-wrapper {
    justify-content: center;
}

.reserved-area.app .app-wrapper .top-wrapper h1 {
    font-size: 32px;
    font-weight: bold;
    line-height: 0.94;
    letter-spacing: normal;
    text-align: left;
    color: #1a1a1a;
    margin: 0;
}

.reserved-area.app .app-wrapper .add-vehicle-mobile,
.reserved-area.app .app-wrapper .top-wrapper .add-vehicle {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 14px;
    font-weight: normal;
    line-height: 1;
    letter-spacing: normal;
    text-align: left;
    color: #1a1a1a;
    padding: 13px 19px;
    position: relative;
}

.reserved-area.app .app-wrapper .add-vehicle-mobile {
    display: none;
}

.reserved-area.app .app-wrapper .top-wrapper .add-vehicle:hover {
    color: var(--primary);

}

.reserved-area.app .app-wrapper .add-vehicle-mobile::before,
.reserved-area.app .app-wrapper .top-wrapper .add-vehicle::before {
    content: "";
    position: absolute;
    margin: auto;
    inset: 0;
    border: solid 2px #f0f0f0;
    border-radius: 20px;
    transition: var(--transition);
}

.reserved-area.app .app-wrapper .add-vehicle-mobile span,
.reserved-area.app .app-wrapper .top-wrapper .add-vehicle span {
    background-color: var(--primary);
    border-radius: 100%;
    width: 26px;
    height: 26px;
    position: relative;
}

.reserved-area.app .app-wrapper .add-vehicle-mobile span::after,
.reserved-area.app .app-wrapper .add-vehicle-mobile span::before,
.reserved-area.app .app-wrapper .top-wrapper .add-vehicle span::after,
.reserved-area.app .app-wrapper .top-wrapper .add-vehicle span::before {
    content: "";
    position: absolute;
    margin: auto;
    inset: 0;
    background-color: white;
    width: 12px;
    height: 2px;
    border-radius: 5px;
    transition: var(--transition);
}

.reserved-area.app .app-wrapper .top-wrapper .add-vehicle:hover::before {
    transform: scale(1.05);
}

.reserved-area.app .app-wrapper .add-vehicle-mobile span::after,
.reserved-area.app .app-wrapper .top-wrapper .add-vehicle span::after {
    transform: rotate(90deg);
}


.reserved-area.app .app-wrapper .top-wrapper .add-vehicle:hover span::after {
    transform: rotate(90deg) scale(1.15);
}

.reserved-area.app .app-wrapper .top-wrapper .add-vehicle:hover span::before {
    transform: scale(1.15);
}

.reserved-area.app .app-wrapper .top-wrapper>div {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.reserved-area.app .app-wrapper .top-wrapper>div>span {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.63;
    letter-spacing: normal;
    color: #1c1c1c;
}

.reserved-area.app .app-wrapper .top-wrapper>div>span span {
    padding: 0 7px;
}

.reserved-area.app .app-wrapper .top-wrapper .back-button {
    margin-top: 0;
    justify-content: flex-end;
    height: 30px;
    align-items: center;
}

.reserved-area.app .app-wrapper .top-wrapper .back-button::before {
    margin-bottom: 0;
}

body:has(.side-submenu.open) header,
body:has(.sidemenu.open) header,
body:has(.add-vehicle-form.open) header {
    z-index: 12;
}

body:has(.side-submenu.open) header::before,
body:has(.sidemenu.open) header::before,
body:has(.add-vehicle-form.open) header::before {
    opacity: .8;
    pointer-events: auto;
}


.reserved-area.app .view-switch {
    display: flex;
    width: 100%;
    margin: 45px auto 0;
    max-width: 1000px;
}

.reserved-area.app .view-switch a {
    width: 50%;
    padding: 22px 20px 23px;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.56;
    letter-spacing: normal;
    text-align: center;
    color: var(--black);
    transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
    justify-content: center;
}

.reserved-area.app .view-switch a:last-of-type {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top: solid 1px #ddd;
    border-bottom: solid 1px #ddd;
    border-right: solid 1px #ddd;
    border-left: 0;
}

.reserved-area.app .view-switch a:first-of-type {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-top: solid 1px #ddd;
    border-bottom: solid 1px #ddd;
    border-left: solid 1px #ddd;
    border-right: solid 1px #fbc8c8;
}

.reserved-area.app .view-switch a.selected {
    color: var(--primary);
    background-color: #fef9f9;
}

.reserved-area.app .view-switch a.selected {
    border: solid 1px #fbc8c8;
}

.reserved-area.app .view-switch a:last-of-type.selected {
    border-left: solid 0px #fbc8c8;
}

.reserved-area.app .app-wrapper .add-vehicle-form {
    position: fixed;
    height: 100vh;
    max-width: 100%;
    background-color: white;
    top: 0;
    right: 0;
    flex-direction: column;
    transform: translateX(100%);
    transition: opacity 0.5s ease-in-out, transform 0.2s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out, transform 0.2s ease-in-out;
    z-index: 12;
    width: 420px;
    display: flex;
    opacity: 0;
}

.reserved-area.app .app-wrapper .add-vehicle-form.open {
    transform: translateX(0%);
    opacity: 1;
}

.reserved-area.app .app-wrapper .side-submenu a.close,
.reserved-area.app .sidemenu a.close,
.reserved-area.app .app-wrapper .add-vehicle-form a.close {
    width: 15px;
    height: 15px;
    transition: var(--transition);
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 1;
}

.reserved-area.app .sidemenu a.close {
    display: none;
}

.reserved-area.app .app-wrapper .side-submenu a.close::before,
.reserved-area.app .sidemenu a.close::before,
.reserved-area.app .app-wrapper .add-vehicle-form a.close::before {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    right: 0px;
    top: 0px;
    -webkit-mask-image: url(../assets/img/global/close-header.svg);
    mask-image: url(../assets/img/global/close-header.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: var(--black);
    cursor: pointer;
    transition: var(--transition);
}

.reserved-area.app .app-wrapper .add-vehicle-form>.container {
    display: block;
    padding: 30px;
}

.reserved-area.app .app-wrapper .add-vehicle-form>.container .title {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.42;
    letter-spacing: normal;
    text-align: center;
    color: #1a1a1a;
}

.reserved-area.app .app-wrapper .add-vehicle-form .filter-wrapper {
    margin-top: 42px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    align-items: center;
}

.reserved-area.app .app-wrapper .add-vehicle-form .filter-wrapper .input-wrapper {
    padding: 13.5px 31px;
    width: 100%;
    border: 1px solid #dddddd;
    border-radius: 20px;
    position: relative;
    transition: var(--transition);
}

.reserved-area.app .app-wrapper .add-vehicle-form .filter-wrapper .input-wrapper.filled {
    border: 1px solid #989898;
}

.reserved-area.app .app-wrapper .add-vehicle-form .filter-wrapper input {
    padding: 0;
    font-weight: 300;
    line-height: 1.63;
    letter-spacing: normal;
    text-align: left;
    color: #1c1c1c;
    width: 100%;
    font-size: 16px;
    font-family: var(--font-family);
}

.reserved-area.app .app-wrapper .add-vehicle-form .button-wrapper,
.reserved-area.app .app-wrapper .add-vehicle-form .button-wrapper .button {
    width: 100%;

}

.reserved-area.app .app-wrapper .slider-wrapper {
    position: relative;
    /* max-width: 1000px; */
    max-width: 1020px;
    margin: auto;
    display: block;
}

.reserved-area.app .app-wrapper .slider-wrapper .button-wrapper {
    display: flex;
    justify-content: center;
}

.reserved-area.app .app-wrapper .slider-wrapper .slider {
    display: flex;
    padding-block: 45px;
}

.reserved-area.app .app-wrapper .slider-wrapper .tns-nav {
    background: transparent;
    position: absolute;
    display: flex;
    bottom: 0;
    padding: 20px 20px 0 20px;
    gap: 0;
    align-items: center;
    z-index: 2;
    margin: auto;
    justify-content: center;
    right: 0;
    left: 0;
}

.reserved-area.app .app-wrapper .slider-wrapper .tns-nav button {
    display: flex;
    height: 25px;
    width: 25px;
    position: relative;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    background-color: unset;
    align-items: end;
    justify-content: center;
}

.reserved-area.app .app-wrapper .slider-wrapper .tns-nav button::before {
    content: "";
    inset: 0;
    border-radius: 100%;
    background-color: #b2b1b1;
    height: 9px;
    width: 9px;
    z-index: 1;
    transition: var(--transition);
    opacity: 0.45;
    display: block;
}

.reserved-area.app .app-wrapper .slider-wrapper .tns-nav button.tns-nav-active::before {
    background-color: #ff0d00;
    opacity: 1;
}

.reserved-area.app .app-wrapper .vehicle-wrapper {
    border-radius: 20px;
    border: solid 2px #f0f0f0;
    background-color: var(--white);
    width: 100%;
    /* min-width: 320px; */
    display: flex;
    flex-direction: column;
    height: 100%;
    user-select: none;
}

.reserved-area.app .app-wrapper .vehicle-wrapper .vehicle-top-wrapper {
    padding: 13px 20px 18px;
    /* flex: 1; */
    position: relative;
}

.reserved-area.app .app-wrapper .vehicle-wrapper .vehicle-title {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.63;
    letter-spacing: normal;
    text-align: left;
    color: #1a1a1a;
    max-width: 210px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    position: relative;
}


.reserved-area.app .app-wrapper .vehicle-wrapper .vehicle-top-wrapper::before{
    content: attr(data-full-text);
    /* Use the full text from data attribute */
    font-family: var(--font-family);
    position: absolute;
    left: 20px;
    top: 13px;
    width: max-content;
    max-width: 210px;
    background: white;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.63;
    letter-spacing: normal;
    text-align: left;
    color: #1a1a1a;
    padding: 0;
    border-radius: 5px;
    white-space: normal;
    z-index: 1;
    opacity: 0;
    transition: var(--transition);
    pointer-events: none;
}

/* Show tooltip on hover */

.reserved-area.app .app-wrapper .vehicle-wrapper .vehicle-top-wrapper:hover::before {
    opacity: 1;
    pointer-events: all;
}

.reserved-area.app .app-wrapper .vehicle-wrapper .vehicle-top-wrapper:has(.has-tooltip:hover)::before {
    opacity: 0;
    pointer-events: none;
}

.reserved-area.app .app-wrapper .vehicle-wrapper .vehicle-info {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.reserved-area.app .app-wrapper .vehicle-wrapper .vehicle-info .has-tooltip {
    display: flex;
    gap: 9px;
    align-items: center;
    position: relative;
}

.reserved-area.app .app-wrapper .vehicle-wrapper .vehicle-info p {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.71;
    letter-spacing: normal;
    text-align: left;
    color: #1c1c1c;
    margin: 0;
}

.reserved-area.app .app-wrapper .vehicle-wrapper .vehicle-info p span {
    padding: 0 7px;
}

.reserved-area.app .app-wrapper .switch {
    position: relative;
    display: inline-block;
    width: 29px;
    height: 19px;
    margin-top: 3px;
}

.reserved-area.app .app-wrapper .switch.disabled {
    pointer-events: none;
}

.reserved-area.app .app-wrapper .switch.disabled input:checked+.slider,
.reserved-area.app .app-wrapper .switch.disabled input:focus+.slider,
.reserved-area.app .app-wrapper .switch.disabled input:checked+.slider:before {
    pointer-events: none;
    opacity: 0.5;
}

.reserved-area.app .app-wrapper .switch input {
    display: none;
}

.reserved-area.app .app-wrapper .switch span {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #dcdcdc;
    -webkit-transition: .2s;
    transition: .2s;
    border-radius: 34px;
    cursor: pointer;
}

.reserved-area.app .app-wrapper .switch span::before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .2s;
    transition: .2s;
    border-radius: 100%;
}

.reserved-area.app .app-wrapper .switch input:checked+.switch-slider {
    background-color: #449C46;
}

.reserved-area.app .app-wrapper .switch input:focus+.switch-slider {
    box-shadow: 0 0 1px #449C46;
}

.reserved-area.app .app-wrapper .switch input:checked+.switch-slider:before {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
}

.reserved-area.app .app-wrapper .switch input:checked+span {
    cursor: default;
}

.reserved-area.app .app-wrapper .lixo {
    width: 16px;
    height: 19px;
    display: block;
    position: relative;
}

.reserved-area.app .app-wrapper .lixo::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 16px;
    height: 19px;
    background-color: #dcdcdc;
    -webkit-mask-image: url(../assets/img/area-reservada/lixo.svg);
    mask-image: url(../assets/img/area-reservada/lixo.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: var(--transition);
}

.reserved-area.app .app-wrapper .lixo:hover::before {
    background-color: #a1a1a1;
}

.reserved-area.app .app-wrapper .vehicle-status {
    background-color: #50a130;
    border-radius: 100%;
    width: 15px;
    height: 15px;
    display: flex;
    margin-top: 3px;
    position: relative;
}

.reserved-area.app .app-wrapper .vehicle-status.pending {
    background-color: #f8c30d;
}

.reserved-area.app .app-wrapper .vehicle-status.cancelled {
    background-color: var(--primary);
}

.reserved-area.app .app-wrapper .vehicle-status.confirmed {
    background-color: #50a130;
}

.reserved-area.app .app-wrapper .has-tooltip .tooltip {
    position: absolute;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    transform: translateX(-46%) translateY(-60px);
    background-color: var(--black);
    color: white;
    padding: 6px 12px 7px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 300;
    pointer-events: none;
    z-index: 1;
    min-width: 214px;
    text-align: center;
    line-height: 1.38;
    white-space: nowrap;
}

.reserved-area.app .app-wrapper .has-tooltip .pin-icon,
.reserved-area.app .app-wrapper .has-tooltip .lixo,
.reserved-area.app .app-wrapper .has-tooltip .vehicle-status,
.reserved-area.app .app-wrapper .has-tooltip .listing-edit,
.reserved-area.app .app-wrapper .has-tooltip .listing-delete {
    position: relative; /* new */
}


.pin-icon + .tooltip,
.lixo + .tooltip,
.vehicle-status + .tooltip,
.listing-edit + .tooltip,
.listing-delete + .tooltip {
    left: 50%;
    transform: translateX(-50%) translateY(-60px);
}

.reserved-area.app .app-wrapper .slider .has-tooltip .tooltip {
    transform: translateX(-46%) translateY(-35px);
}


/* .reserved-area.app .app-wrapper .has-tooltip:has(.vehicle-status:hover):hover .vehicle-status + .tooltip,
.reserved-area.app .app-wrapper .has-tooltip:has(.vehicle-status:hover, .lixo:hover, .listing-edit:hover, .listing-delete:hover, .switch input:checked):hover a + .tooltip,
.reserved-area.app .app-wrapper .has-tooltip:has(.switch input:checked):hover .tooltip {
    opacity: 1;
} */

.reserved-area.app .app-wrapper .vehicle-wrapper .vehicle-services {
    border-block: 1px solid #f0f0f0;
    margin-bottom: auto;
}

.reserved-area.app .app-wrapper .vehicle-wrapper .vehicle-services ul li {
    border-top: 1px solid #f0f0f0;
}
.reserved-area.app .app-wrapper .vehicle-wrapper .vehicle-services ul li:not(:has(.count)) span,
.reserved-area.app .app-wrapper .vehicle-wrapper .vehicle-services ul li:not(:has(.count)) a,
.reserved-area.app .app-wrapper .vehicle-wrapper:has(.vehicle-status.pending) .vehicle-services ul li:nth-child(5) a,
.reserved-area.app .app-wrapper .vehicle-wrapper:has(.vehicle-status.pending) .vehicle-services ul li:nth-child(4) a,
.reserved-area.app .app-wrapper .vehicle-wrapper:has(.vehicle-status.pending) .vehicle-services ul li:nth-child(3) a {
    opacity: 0.3;
    pointer-events: none;
}

.reserved-area.app .app-wrapper .vehicle-wrapper:has(.vehicle-status.pending) .vehicle-services li:nth-child(5) a .count,
.reserved-area.app .app-wrapper .vehicle-wrapper:has(.vehicle-status.pending) .vehicle-services li:nth-child(4) a .count,
.reserved-area.app .app-wrapper .vehicle-wrapper:has(.vehicle-status.pending) .vehicle-services li:nth-child(3) a .count {
    display: none;
}

.reserved-area.app .app-wrapper .vehicle-wrapper:has(.vehicle-status.pending) .vehicle-services li:nth-child(2) {
    border-bottom: 1px solid #f0f0f0;
}

.reserved-area.app .app-wrapper .vehicle-wrapper:has(.vehicle-status.pending) .vehicle-services li:nth-child(3) {
    border-top: 0px solid #f0f0f0;
}

.reserved-area.app .app-wrapper .vehicle-wrapper .vehicle-services ul li a {
    font-size: 14px;
    font-style: normal;
    line-height: 2;
    letter-spacing: normal;
    text-align: left;
    color: #1a1a1a;
    padding: 5px 20px 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.reserved-area.app .app-wrapper .vehicle-wrapper .vehicle-services ul li a.disabled {
    opacity: 0.5;
}

.reserved-area.app .app-wrapper .vehicle-wrapper .vehicle-services ul li a .count {
    font-size: 13px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: normal;
    text-align: left;
    color: #bbbaba;
    pointer-events: none;
}

.reserved-area.app .app-wrapper .vehicle-wrapper .vehicle-services ul li:first-of-type {
    border-top: 0px solid #f0f0f0;
}


.reserved-area.app .app-wrapper .vehicle-wrapper .vehicle-services ul li a .arrow {
    margin-left: auto;
    pointer-events: none;
}

.reserved-area.app .app-wrapper .vehicle-wrapper .vehicle-services ul li a .arrow::after {
    content: "";
    display: block;
    -webkit-mask-image: url(../assets/img/global/menu-caret.svg);
    mask-image: url(../assets/img/global/menu-caret.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: #1a1a1a;
    height: 10px;
    width: 6px;
    transition: var(--transition);
}

.reserved-area.app .app-wrapper .vehicle-wrapper .vehicle-services ul li a:hover {
    color: var(--primary);
}

.reserved-area.app .app-wrapper .vehicle-wrapper .vehicle-services ul li a:hover .arrow::after {
    background-color: var(--primary);
}

.reserved-area.app .app-wrapper .vehicle-wrapper .button-wrapper {
    padding: 20px 20px 22px;
    display: flex;
    gap: 6px;
}

.reserved-area.app .app-wrapper .vehicle-wrapper .button-wrapper .button {
    font-size: 14px;
    line-height: 1.71;
    padding: 4px 13px 5px;
    width: 100%;
}

.reserved-area.app .app-wrapper .app-menu-mobile-button {
    padding: 5.5px 13px;
    font-size: 13px;
    font-weight: normal;
    line-height: 2;
    letter-spacing: normal;
    text-align: left;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 6px 9px 0 #0000000a;
    display: none;
    background-color: white;
    z-index: 1;
}

.reserved-area.app .app-wrapper .app-menu-mobile-button>span {
    font-size: 13px;
    font-weight: normal;
    line-height: 2;
    letter-spacing: normal;
    text-align: left;
    color: #1a1a1a;
    pointer-events: none;
}

.reserved-area.app .app-wrapper .app-menu-mobile-button>span::after {
    content: "";
    display: block;
    -webkit-mask-image: url(../assets/img/global/menu-caret.svg);
    mask-image: url(../assets/img/global/menu-caret.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: #1a1a1a;
    height: 11px;
    width: 7px;
    transition: var(--transition);
}

.reserved-area.app .app-wrapper .app-listing {
    margin-top: 40px;
}

.reserved-area.app.submenu .app-wrapper .app-listing {
    margin: 45px auto 0;
    border-top: 2px solid #f0f0f0;
    max-width: 1000px;
}

.reserved-area.app .app-wrapper .app-listing.marcacoes.list {
    max-width: 1040px;
}

.reserved-area.app.submenu .app-wrapper .app-listing.simulacoes {
    margin: 60px auto 0;
}

.reserved-area.app .app-wrapper .app-listing .no_results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    gap: 22px;
    margin-top: 65px;
    /* padding: 0 20px; */
}

.reserved-area.app .app-wrapper .no_results p {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.63;
    letter-spacing: normal;
    text-align: center;
    color: #1a1a1a;
    margin: 0;
    max-width: 600px;
}

.reserved-area.app .app-wrapper .no_results .button-wrapper {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.reserved-area.app .app-wrapper .app-listing table {
    border-bottom: 2px solid #f0f0f0;
    border-collapse: collapse;
    display: flex;
}


.reserved-area.app .app-wrapper .app-listing.listing.simulacoes.list{
    transition: var(--transition);
    opacity: 0;
}

.reserved-area.app .app-wrapper .app-listing.listing.simulacoes.list:has(.no_results){
    opacity:1;
}

.reserved-area.app .app-wrapper .view-switch:has(a[data-type="revisao"].selected) + .app-listing.listing.simulacoes.list:has(table#revisao),
.reserved-area.app .app-wrapper .view-switch:has(a[data-type="pneus"].selected) + .app-listing.listing.simulacoes.list:has(table#pneus) {
    opacity:1;
}

.reserved-area.app .app-wrapper .app-listing table tbody {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.reserved-area.app .app-wrapper .app-listing table tr {
    border-top: 2px solid #f0f0f0;
    display: flex;
    gap: 10px;
    align-items: center;
}

.reserved-area.app .app-wrapper .app-listing.marcacoes.list table tr {
    padding: 0 20px;
}

.reserved-area.app .app-wrapper .app-listing:not(.marcacoes) table tr {
    justify-content: space-between;
}

.reserved-area.app .app-wrapper .app-listing table tr:first-of-type {
    border-top: 0px solid #f0f0f0;
}

.reserved-area.app .app-wrapper .app-listing table tr.listing-header td {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.63;
    letter-spacing: normal;
    text-align: left;
    color: #cbcbcb;

}

/* 
.reserved-area.app .app-wrapper .app-listing table tr td:not(:last-child) {
    padding-right: 5%; 
} */


.reserved-area.app .app-wrapper .app-listing table tr td {
    font-size: 16px;
    font-weight: normal;
    line-height: 1.63;
    letter-spacing: normal;
    text-align: left;
    color: #1a1a1a;
    padding: 21px 0 21px 0;
    display: flex;
}

.reserved-area.app .app-wrapper .app-listing:not(.marcacoes) table#pneus tr td,
.reserved-area.app .app-wrapper .app-listing:not(.marcacoes) table#revisao tr td {
    flex-direction: column;
    align-items: baseline;
    flex: unset;
}

.reserved-area.app .app-wrapper .app-listing:not(.marcacoes) table tr td {
    flex: 1;
    align-items: center;
}

.reserved-area.app .app-wrapper .app-listing table#pneus tr.mobile .listing-description,
.reserved-area.app .app-wrapper .app-listing table#revisao tr.mobile .listing-description,
.reserved-area.app .app-wrapper .app-listing table#pneus tr td.listing-description .desc-wrapper,
.reserved-area.app .app-wrapper .app-listing table#revisao tr td.listing-description .desc-wrapper {
    width: 100%;
}

.reserved-area.app .app-wrapper .app-listing table tr .listing-description,
.reserved-area.app .app-wrapper .app-listing table#pneus tr.mobile .listing-description,
.reserved-area.app .app-wrapper .app-listing table#revisao tr.mobile .listing-description {
    display: flex;
    justify-content: space-between;
}

.reserved-area.app .app-wrapper .app-listing table tr .listing-description .desc-wrapper,
.reserved-area.app .app-wrapper .app-listing table tr .listing-description {
    display: flex;
    gap: 10px;
}

.reserved-area.app .app-wrapper .app-listing:not(.marcacoes) table tr td:nth-child(1) {
    justify-content: flex-start;
}

.reserved-area.app .app-wrapper .app-listing:not(.marcacoes) table tr td:nth-child(2) {
    justify-content: center;
}

.reserved-area.app .app-wrapper .app-listing:not(.marcacoes) table tr td:nth-child(3) {
    justify-content: flex-end;
}

.reserved-area.app .app-wrapper .app-listing.marcacoes table tr td:nth-child(1) {
    width: 12%;
}

.reserved-area.app .app-wrapper .app-listing.marcacoes table tr td:nth-child(2) {
    width: 8%;
}

.reserved-area.app .app-wrapper .app-listing.marcacoes table tr td:nth-child(3) {
    width: 21%;
}

.reserved-area.app .app-wrapper .app-listing.marcacoes table tr td:nth-child(4) {
    width: 31%;
}

.reserved-area.app .app-wrapper .app-listing.marcacoes table tr td:nth-child(5) {
    width: 13%;
    justify-content: center;
}

.reserved-area.app .app-wrapper .app-listing.marcacoes table tr td:nth-child(6) {
    width: 10%;
    justify-content: flex-end;
}

.reserved-area.app .app-wrapper .app-listing table#revisao tr td:nth-child(1) {
    width: 12%;
    min-width: 71px;
}

.reserved-area.app .app-wrapper .app-listing table#revisao tr td:nth-child(2) {
    width: 15%;
    min-width: 115px;
}

.reserved-area.app .app-wrapper .app-listing table#revisao tr td:nth-child(3) {
    width: 50%;
}

.reserved-area.app .app-wrapper .app-listing table#revisao tr td:nth-child(4) {
    width: 10%;
}

.reserved-area.app .app-wrapper .app-listing table#revisao tr td .price-wrapper {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
}

.reserved-area.app .app-wrapper .app-listing table#revisao tr td.listing-description:has(.desc-wrapper) {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
}

.reserved-area.app .app-wrapper .app-listing table#revisao tr td:has(.price-wrapper),
.reserved-area.app .app-wrapper .app-listing table#revisao tr td.listing-description:has(.desc-wrapper) {
    padding: 20px 0;
}

.reserved-area.app .app-wrapper .app-listing table#revisao tr td:nth-child(5) {
    width: 9%;
}

.reserved-area.app .app-wrapper .app-listing table#pneus tr td:nth-child(1) {
    width: 8.5%;
    min-width: 71px;
}

.reserved-area.app .app-wrapper .app-listing table#pneus tr td:nth-child(2) {
    width: 25.5%;
    min-width: 115px;
    display: inline;
}

.reserved-area.app .app-wrapper .app-listing table#pneus tr td:nth-child(2) span {
    font-size: 14px;
    color: #b5b5b5;
}

.reserved-area.app .app-wrapper .app-listing table#pneus tr td:nth-child(3) {
    width: 2.8%;
    align-items: center;
}

.reserved-area.app .app-wrapper .app-listing table#pneus tr td:nth-child(4) {
    width: 24.4%;
}

.reserved-area.app .app-wrapper .app-listing table#pneus tr td:nth-child(5) {
    width: 6.1%;
}

.reserved-area.app .app-wrapper .app-listing table#pneus tr td:nth-child(6) {
    width: 7.6%;
}


.reserved-area.app .app-wrapper .app-listing table tr td a.listing-maps {
    display: flex;
    gap: 20px;
    align-items: center;
}

.reserved-area.app .app-wrapper .app-listing table#pneus tr td.listing-description .desc-wrapper{
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
}

.reserved-area.app .app-wrapper .app-listing table tr td a.listing-maps p {
    margin: 0;
    width: 131px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
}

.reserved-area.app .app-wrapper .dashboard-table .app-listing table tr td a.listing-maps p {
    width: 120px;
}

.reserved-area.app .app-wrapper .app-listing table tr td a.listing-maps span {
    min-width: 17px;
    height: 22px;
    position: relative;
    display: block;
}

.reserved-area.app .app-wrapper .app-listing table tr .listing-description p {
    margin: 0;
    max-width: 85%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
}


.reserved-area.app .app-wrapper .app-listing table tr .listing-description a {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    display: none;
    position: relative;
    vertical-align: middle;
}

.reserved-area.app .app-wrapper .app-listing table tr .listing-description a.show-button {
    display: inline-block;
}

.reserved-area.app .app-wrapper .app-listing table tr td a.listing-pdf,
.reserved-area.app .app-wrapper .app-listing table tr td a.listing-delete,
.reserved-area.app .app-wrapper .app-listing table tr td a.listing-edit,
.reserved-area.app .app-wrapper .app-listing table tr td a.listing-documents {
    width: 20px;
    height: 25px;
    display: block;
    position: relative;
    margin: auto;
}

.reserved-area.app .app-wrapper .app-listing table tr td a.listing-pdf {
    width: 27px;
    height: 30px;
    margin: 0;
}

.reserved-area.app .app-wrapper .app-listing table tr td a.listing-pdf {
    transition: var(--transition);
}

.reserved-area.app .app-wrapper .app-listing table tr td a.listing-pdf:hover {
    /* opacity: 0.7; */
    transform: scale(0.8);
}


.reserved-area.app .app-wrapper .app-listing table tr td a.listing-delete,
.reserved-area.app .app-wrapper .app-listing table tr td a.listing-edit {
    width: 15px;
    height: 15px;
    margin: 0;
}

.reserved-area.app .app-wrapper .app-listing table tr td .vehicle-status {
    margin: 0;
}

.reserved-area.app .app-wrapper .app-listing table tr td a.listing-maps span::before,
.reserved-area.app .app-wrapper .app-listing table tr .listing-description a::before,
.reserved-area.app .app-wrapper .app-listing table tr td a.listing-documents::before,
.reserved-area.app .app-wrapper .app-listing table tr td a.listing-delete::before,
.reserved-area.app .app-wrapper .app-listing table tr td a.listing-edit::before {
    content: "";
    position: absolute;
    background-color: #908f8f;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    opacity: 1;
    transition: var(--transition);
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    -webkit-mask-size: contain;
    mask-size: contain;

}



.reserved-area.app .app-wrapper .app-listing table tr td a.listing-delete.disabled::before,
.reserved-area.app .app-wrapper .app-listing table tr td a.listing-edit.disabled::before {
    background-color: #ebebeb;
}

.reserved-area.app .app-wrapper .app-listing table tr td a.listing-documents.disabled{
    /* pointer-events: all; */
    pointer-events: none;
}

.reserved-area.app .app-wrapper .app-listing table tr td a.listing-documents.disabled::before{
    content: " - ";
    -webkit-mask-image: unset;
    mask-image: unset;
    background-color: unset;
    color: #908f8f;
    text-align: center;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.63;
    letter-spacing: normal;
}

.reserved-area.app .app-wrapper .app-listing table tr td a.listing-documents.disabled:hover::before{
    background-color: transparent;

}

.reserved-area.app .app-wrapper .app-listing table tr td a.listing-edit::before {
    -webkit-mask-image: url(../assets/img/area-reservada/listing-edit.svg);
    mask-image: url(../assets/img/area-reservada/listing-edit.svg);
}

.reserved-area.app .app-wrapper .app-listing table tr td a.listing-delete::before {
    -webkit-mask-image: url(../assets/img/area-reservada/listing-delete.svg);
    mask-image: url(../assets/img/area-reservada/listing-delete.svg);
}

.reserved-area.app .app-wrapper .app-listing table tr td a.listing-documents::before {
    -webkit-mask-image: url(../assets/img/area-reservada/listing-documents.svg);
    mask-image: url(../assets/img/area-reservada/listing-documents.svg);
}

.reserved-area.app .app-wrapper .app-listing table tr .listing-description a::before {
    -webkit-mask-image: url(../assets/img/area-reservada/listing-eye.svg);
    mask-image: url(../assets/img/area-reservada/listing-eye.svg);
    height: 16px;
    width: 24px;
    margin: auto;
}

.reserved-area.app .app-wrapper .app-listing table tr td a.listing-maps span::before {
    -webkit-mask-image: url(../assets/img/area-reservada/listing-pin.svg);
    mask-image: url(../assets/img/area-reservada/listing-pin.svg);
}

.reserved-area.app .app-wrapper .app-listing table tr td a.listing-edit:hover::before,
.reserved-area.app .app-wrapper .app-listing table tr td a.listing-delete:hover::before,
.reserved-area.app .app-wrapper .app-listing table tr td a.listing-documents:hover::before,
.reserved-area.app .app-wrapper .app-listing table tr .listing-description a:hover::before,
.reserved-area.app .app-wrapper .app-listing table tr td a.listing-maps:hover span::before {
    background-color: var(--primary);
}

.reserved-area.app .app-wrapper .app-listing table tr td .listing-buttons {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
}


.reserved-area.app.submenu .app-wrapper .has-tooltip .tooltip {
    padding: 6px 9px 7px;
    transform: translateX(-46%) translateY(-60px);
}

.reserved-area.app .app-wrapper .side-submenu {
    position: fixed;
    height: 100vh;
    max-width: 100%;
    background-color: white;
    top: 0;
    right: 0;
    flex-direction: column;
    transform: translateX(100%);
    transition: opacity 0.5s ease-in-out, transform 0.2s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out, transform 0.2s ease-in-out;
    z-index: 12;
    width: 440px;
    display: flex;
    padding: 90px 10px;
}

.reserved-area.app .app-wrapper .side-submenu>.container {
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.reserved-area.app .app-wrapper .side-submenu.open-edit {
    width: 800px;
}

.reserved-area.app .app-wrapper .side-submenu.open-simulation-edit {
    width: 486px;
    padding: 103px 10px;
}

.reserved-area.app .app-wrapper .side-submenu.open {
    transform: translateX(0%);
    overflow: auto;
}

.reserved-area.app .app-wrapper .side-submenu.open>.container {
    opacity: 1;
}

.reserved-area.app .app-wrapper .side-submenu .title-submenu {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.42;
    letter-spacing: normal;
    text-align: left;
    color: #1a1a1a;
}

.reserved-area.app .app-wrapper .side-submenu ul.services-sidemenu {
    margin-top: 35px;
}

.reserved-area.app .app-wrapper .side-submenu ul li,
.reserved-area.app .app-wrapper .side-submenu p {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.63;
    letter-spacing: normal;
    text-align: left;
    color: #1a1a1a;
}

.reserved-area.app .app-wrapper .side-submenu ul.rof-sidemenu {
    padding-left: 27px;
    margin-top: 37px;
}

.reserved-area.app .app-wrapper .side-submenu ul.rof-sidemenu li {
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 11px;
}

.reserved-area.app .app-wrapper .side-submenu ul.rof-sidemenu li.pack-info {
    margin-bottom: 20px;
}

.reserved-area.app .app-wrapper .side-submenu ul.rof-sidemenu li + li {
    margin-top: 10px;
}

.reserved-area.app .app-wrapper .side-submenu ul.rof-sidemenu li p {
    margin: 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.29;
    letter-spacing: normal;
    text-align: left;
    color: #1c1c1c;
}

.reserved-area.app .app-wrapper .side-submenu ul.rof-sidemenu li.pack-info p.pack-title {
    font-weight: bold;
    color: #ff0d00;
}

.reserved-area.app .app-wrapper .side-submenu ul.rof-sidemenu li.pack-info .pack-feature {
    display: flex;
    flex-direction: column;
}

.reserved-area.app .app-wrapper .side-submenu ul.rof-sidemenu li.pack-info .pack-feature p {
    font-size: 12px;
    font-weight: 300;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: left;
    color: #1c1c1c;
}

.reserved-area.app .app-wrapper .side-submenu ul.rof-sidemenu li.pack-info .pack-feature p strong {
    font-weight: bold;
}

.reserved-area.app .app-wrapper .side-submenu ul.rof-sidemenu li.pack-info .pack-feature p span {
    color: #959595;
    display: inline;
}

.reserved-area.app .app-wrapper .side-submenu ul.services-sidemenu li {
    display: flex;
    gap: 30px;
    justify-content: space-between;
    min-height: 40px;
}

.reserved-area.app .app-wrapper .side-submenu ul.services-sidemenu li div .price {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.38;
    letter-spacing: normal;
    text-align: right;
    color: #1a1a1a;
}

.reserved-area.app .app-wrapper .side-submenu ul.services-sidemenu li div span {
    font-size: 11px;
    font-weight: 300;
    line-height: 1.71;
    letter-spacing: normal;
    text-align: right;
    color: #959595;
}

.reserved-area.app .app-wrapper .side-submenu ul li + li {
    margin-top: 2px;
}

.reserved-area.app .app-wrapper .side-submenu p {
    font-weight: 600;
    margin-bottom: 10px;
}

.reserved-area.app .app-wrapper .side-submenu ul.services-sidemenu p {
    margin: 0;
    font-size: 16px;
    font-weight: 300;
}

.reserved-area.app .app-wrapper .side-submenu ul {
    list-style-type: none;
    margin: 0;
    padding-block: 0px;
    margin-block: 10px;
    counter-reset: item;
    padding-left: 19px;
}

.reserved-area.app .app-wrapper .side-submenu ul.services-sidemenu {
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.reserved-area.app .app-wrapper .side-submenu ul:not(.services-sidemenu) li::before {
    content: "";
    height: 5px;
    display: inline-flex;
    width: 5px;
    border-radius: 100%;
    margin-left: -20px;
    margin-right: 15px;
    background-color: var(--primary);
    vertical-align: super;
    align-items: center;
}

.reserved-area.app .app-wrapper .side-submenu ul.rof-sidemenu li::before {
    content: "";
    height: 9px;
    display: table-cell;
    width: 13px;
    -webkit-mask-image: url(../assets/img/area-reservada/rof-check.svg);
    mask-image: url(../assets/img/area-reservada/rof-check.svg);
    border-radius: 0;
    margin-left: 0;
    margin-right: 14px;
    background-color: #50a130;
    vertical-align: unset;
    align-items: center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    position: absolute;
    left: -27px;
    top: 4px;
}


.reserved-area.app .app-wrapper .side-submenu ul li span {
    display: block;
    color: #959595;
}

.reserved-area.app .app-wrapper .side-submenu .edit .title,
.reserved-area.app .app-wrapper .side-submenu .documents .title {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.42;
    letter-spacing: normal;
    text-align: center;
    color: #1a1a1a;
    margin-top: 15px;
}

.reserved-area.app .app-wrapper .side-submenu .documents .documents-wrapper {
    border-bottom: 2px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    margin-top: 40px;
}

.reserved-area.app .app-wrapper .side-submenu .documents .documents-wrapper a {
    border-top: 2px solid #f0f0f0;
    padding-block: 21px;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.63;
    letter-spacing: normal;
    text-align: left;
    color: #1a1a1a;
    position: relative;
}

.reserved-area.app .app-wrapper .side-submenu .documents .documents-wrapper a:hover {
    color: var(--primary);
}

.reserved-area.app .app-wrapper .app-listing table tr td a.listing-pdf span,
.reserved-area.app .app-wrapper .side-submenu .documents .documents-wrapper a span {
    pointer-events: none;
    width: 27px;
    height: 30px;
    right: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

.reserved-area.app .app-wrapper .app-listing table tr td a.listing-pdf span::before,
.reserved-area.app .app-wrapper .side-submenu .documents .documents-wrapper a span::before {
    content: "";
    position: absolute;
    transition: var(--transition);
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-image: url(../assets/img/area-reservada/pdf.svg);
    background-repeat: no-repeat;
}

.reserved-area.app .app-wrapper .side-submenu #calendario-edit {
    border-radius: 20px;
    border: solid 1px #ddd;
    padding: 10px 0;
    transition: var(--transition);
    opacity: 1;
    margin-top: 40px;
}

.reserved-area.app .app-wrapper .side-submenu .edit {
    transition: all 1s ease-in-out;
    min-height: 440px;
    display: flex;
    flex-direction: column;
}

.reserved-area.app .app-wrapper .side-submenu .edit .button-wrapper {
    display: flex;
    justify-content: center;
    margin-top: auto;
}

.reserved-area.app .app-wrapper .side-submenu .edit,
.reserved-area.app .app-wrapper .side-submenu #calendario-edit.fade-out {
    opacity: 0;
}


.reserved-area.app .app-wrapper .side-submenu.open .edit {
    opacity: 1;
}

.reserved-area.app .pagination {
    margin: 60px auto 0;
}

.reserved-area.app .pagination ul {
    margin: auto;
    width: 100%;
    padding: 0;
    display: flex;
    gap: 5px;
}

.reserved-area.app .pagination ul li {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    color: #b9b8b8;;
    font-size: 16px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    text-transform: uppercase;
    line-height: 1;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 9px;
}

.reserved-area.app .pagination ul li a {
    font-size: 16px;
    font-weight: 300;
    gap: 9px;
    display: flex;
    align-items: center;
}


.reserved-area.app .listing .pagination ul li a {
    -webkit-mask-image: none;
    mask-image: none;
    background-color: unset;
    transform: unset;
    display: flex;
    align-items: center;
    justify-content: center;
}



.reserved-area.app .pagination ul li.prev a::before {
    content: "";
    display: block;
    -webkit-mask-image: url(../assets/img/global/pagination-caret.svg);
    mask-image: url(../assets/img/global/pagination-caret.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: var(--primary);
    height: 12px;
    width: 7px;
    min-width: 7px;
    transform: rotate(180deg);
    transition: var(--transition);
}

.reserved-area.app .listing .pagination ul li.next.disabled a,
.reserved-area.app .listing .pagination ul li.prev.disabled a {
    background-color: unset;
    opacity: 1;
}

.reserved-area.app .listing .pagination ul li.next.disabled a::after,
.reserved-area.app .listing .pagination ul li.prev.disabled a::before {
    background-color: #d7d6d6;
}

.reserved-area.app .pagination ul li.next a::after {
    content: "";
    display: block;
    -webkit-mask-image: url(../assets/img/global/pagination-caret.svg);
    mask-image: url(../assets/img/global/pagination-caret.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: var(--primary);
    height: 12px;
    width: 7px;
    min-width: 7px;
    transition: var(--transition);
}

.reserved-area.app .pagination ul li.disabled {
    opacity: 0.6;
}

.reserved-area.app .pagination ul li.next:hover a::after {
    transform: translateX(5px);
}


.reserved-area.app .pagination ul li.prev:hover a::before {
    transform: rotate(180deg) translateX(5px);
}

.reserved-area.app .pagination ul li.disabled {
    cursor: default;
    pointer-events: none;
}

.reserved-area.app.submenu .app-wrapper table tr.mobile {
    display: none;
}



@media (min-width: 767px) {

    .reserved-area.app .pagination ul li:not(.prev, .next):hover a {
        color: var(--primary);
    }
    
}


@media (min-width: 991px) {
    .reserved-area.app .app-wrapper .app-listing table#pneus tr .listing-description p {
        margin: 0;
        max-width: 85%;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
    }

    .reserved-area.app .app-wrapper .slider-wrapper .slider {
        flex-wrap: wrap;
        gap: 30px;
        justify-content: center;
    }

}


@media (max-width: 1200px) {
    .reserved-area.app.submenu .app-wrapper {
        padding: 160px 50px 100px;
    }

    .reserved-area.app .app-wrapper .app-listing table tr.listing-header td,
    .reserved-area.app .app-wrapper .app-listing table tr td,
    .reserved-area.app .app-wrapper .app-listing.marcacoes table tr td,
    .reserved-area.app .app-wrapper .app-listing.marcacoes table tr.listing-header td {
        font-size: 14px;
        padding: 17px 0;
    }

    .reserved-area.app .app-wrapper .app-listing table tr .listing-description p {
        max-width: 80%;
    }

    .reserved-area.app .app-wrapper .app-listing table tr td a.listing-maps p {
        margin: 0;
        width: 90px;
    }

    .reserved-area.app .app-wrapper .app-listing table tr td.listing-description a {
        min-width: 20px;
        width: 20px;
        height: 20px;
        min-height: 20px;
        margin-left: 5px;
    }


    .reserved-area.app .app-wrapper .app-listing.simulacoes table#revisao tr td:nth-child(3),
    .reserved-area.app .app-wrapper .app-listing.marcacoes table tr td:nth-child(4) {
        width: 25%;
    }

    .reserved-area.app .app-wrapper .app-listing table tr td a.listing-maps {
        gap: 5px;
    }

    .reserved-area.app .app-wrapper .app-listing table tr td a.listing-maps span {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 1025px) {
    .reserved-area.app.submenu .app-wrapper:has(.marcacoes) {
        padding: 160px 20px 100px;
    }

    .reserved-area.app .app-wrapper .app-listing table tr td a.listing-maps p {
        width: 80px;
    }
}



@media (max-width: 992px) {

    
    .reserved-area.app .sidemenu ul li a {
        gap: 12px;
        padding: 6px 20px 6px;
        font-size: 14px;
    }

    .reserved-area.app .highlight {
        height: 40px;
    }

    .reserved-area.app .app-wrapper {
        display: block;
        padding: 120px 20px 50px;
        position: relative;
        width: calc(100% - 250px);
    }
    

    .reserved-area.app .app-wrapper:has(.slider-wrapper.cars) {
        padding: 120px 0px 50px;
    }

    .reserved-area.app .app-wrapper:has( > .template){
        padding: 120px 40px 50px;
    }

    .reserved-area.app:has(.slider-wrapper.cars) .sidemenu {
        z-index: 1;
    }

    .reserved-area.app.submenu .app-wrapper {
        padding: 122px 20px 50px;
    }

    .reserved-area.app:has(.barra-superior.active) .app-wrapper:has( > .template) {
        padding: 158px 20px 50px;
    }

    .reserved-area.app:has(.barra-superior.active) .app-wrapper:has(.slider-wrapper.cars) {
          padding: 158px 0px 50px;
    }
    
    .reserved-area.app.clube .app-wrapper .app-listing {
        margin-top: 20px;
    }


    .reserved-area.app .app-wrapper:has(.marcacoes, .simulacoes) .top-wrapper {
        padding: 0 20px;
    }


    .reserved-area.app.submenu .app-wrapper table tr.mobile {
        display: block;
        padding: 0 !important;
    }

    .reserved-area.app.submenu .app-wrapper .app-listing:has(tr.mobile) {
        border-top: 0;
    }


    .reserved-area.app.submenu .app-wrapper .simulacoes table tr:not(.mobile),
    .reserved-area.app.submenu .app-wrapper .marcacoes table tr:not(.mobile) {
        display: none;
    }
    
    .reserved-area.app.submenu .app-wrapper:has(.simulacoes),
    .reserved-area.app.submenu .app-wrapper:has(.marcacoes) {
        padding: 122px 0px 50px;
    }

    .reserved-area.app .app-wrapper .app-listing.simulacoes table tr.listing-header,
    .reserved-area.app .app-wrapper .app-listing.marcacoes table tr.listing-header {
        display: none;
    }
    
    .reserved-area.app .app-wrapper .app-listing.simulacoes table tr.listing-header+tr,
    .reserved-area.app .app-wrapper .app-listing.marcacoes table tr.listing-header+tr {
        border-top: 0px solid #f0f0f0;
    }

    .reserved-area.app .app-wrapper .app-listing table#pneus tr td:nth-child(1),
    .reserved-area.app .app-wrapper .app-listing table#revisao tr td:nth-child(1),
    .reserved-area.app .app-wrapper .app-listing.marcacoes table tr.mobile td:nth-child(1) {
        width: 100%;
        padding: 20px 40px;
        gap: 8px;
    }

    .reserved-area.app .app-wrapper .app-listing.marcacoes table tr.mobile td {
        flex-direction: column;
    }

    .reserved-area.app .app-wrapper .app-listing.marcacoes table tr.mobile td div {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .reserved-area.app .app-wrapper .app-listing.simulacoes table#pneus tr.mobile td div.tire-mobile >p span,
    .reserved-area.app .app-wrapper .app-listing.simulacoes table#pneus tr.mobile td div.listing-description>p,
    .reserved-area.app .app-wrapper .app-listing.simulacoes table tr.mobile td div>a>p,
    .reserved-area.app .app-wrapper .app-listing.simulacoes table tr.mobile td div>p ,
    .reserved-area.app .app-wrapper .app-listing.marcacoes table tr.mobile td div>a>p,
    .reserved-area.app .app-wrapper .app-listing.marcacoes table tr.mobile td div>p {
        margin: 0;
        font-size: 14px;
        font-weight: normal;
        line-height: 1.71;
        letter-spacing: normal;
        text-align: left;
        color: #959595;
    }

    .reserved-area.app .app-wrapper .app-listing.simulacoes table tr.mobile td div:not(.listing-description)>a>p,
    .reserved-area.app .app-wrapper .app-listing.simulacoes table tr.mobile td div:not(.listing-description)>p{
        line-height: 1.3;
    }

    .reserved-area.app .app-wrapper .app-listing.simulacoes table#pneus tr.mobile td div.tire-mobile {
        margin-top: 5px;
    }

    .reserved-area.app .app-wrapper .app-listing.simulacoes table#pneus tr.mobile td div.tire-mobile >p span {
        display: block;
        font-size: 12px;
        line-height: 1.71;
    }


    .reserved-area.app .app-wrapper .app-listing.marcacoes table tr.mobile td div.listing-description {
        width: 100%;
    }
    .reserved-area.app .app-wrapper .app-listing.simulacoes table#pneus tr.mobile td div.tire-mobile > p,
    .reserved-area.app .app-wrapper .app-listing.simulacoes table tr.mobile td div.listing-description>p,
    .reserved-area.app .app-wrapper .app-listing.marcacoes table tr.mobile td div.listing-description>p {
        font-size: 15px;
        color: #1a1a1a;
    }

    .reserved-area.app .app-wrapper .app-listing table tr td .listing-description p {
        max-width: 90%;
    }

    .reserved-area.app .app-wrapper .app-listing.simulacoes table tr.mobile td div .date,
    .reserved-area.app .app-wrapper .app-listing.marcacoes table tr.mobile td div .date {
        font-size: 13px;
        font-weight: normal;
        line-height: 1.38;
        letter-spacing: normal;
        text-align: left;
        color: #c6c5c5;
    }

    .reserved-area.app .app-wrapper .app-listing table tr td a.listing-maps {
        width: 100%;
        justify-content: space-between;
    }

    .reserved-area.app .app-wrapper .app-listing table tr td a.listing-maps p {
        width: 100%;
    }

    .reserved-area.app .app-wrapper .app-listing table tr td a.listing-documents {
        margin: 0;
        width: 20px;
        height: 20px;
    }

    .reserved-area.app .app-wrapper .app-listing table tr .listing-description a {
        min-width: 20px;
        width: 20px;
        height: 20px;
        min-height: 20px;
        margin-left: 0px;
    }
    
    .reserved-area.app.submenu .app-wrapper .app-listing.simulacoes {
        margin-top: 10px;
    }
    
    .reserved-area.app.submenu .app-wrapper .view-switch + .app-listing.simulacoes {
        margin-top: 30px;
    }

    .reserved-area.app.submenu .app-wrapper:has(.simulacoes) .view-switch {
        padding: 0 40px;
    }

    .reserved-area.app.submenu .app-wrapper:has(.simulacoes) .view-switch{
        margin-top: 20px;
    }

    
    .reserved-area.app .app-wrapper .top-wrapper .add-vehicle {
        display: none;
    }

    .reserved-area.app .app-wrapper .add-vehicle-mobile {
        display: flex;
        justify-content: center;
        padding: 15px 19px;
    }

    .reserved-area.app .app-wrapper .top-wrapper {
        justify-content: center;
    }

    .reserved-area.app.submenu .app-wrapper .top-wrapper {
        flex-direction: column;
        gap: 12px;
    }

    .reserved-area.app.submenu .app-wrapper:has(.simulacoes) .top-wrapper,
    .reserved-area.app.submenu .app-wrapper:has(.marcacoes) .top-wrapper {
        padding: 0 40px;
    }

    .reserved-area.app.submenu .app-wrapper .top-wrapper>div {
        align-items: center;
        text-align: center;
    }

    .reserved-area.app.submenu .app-wrapper .top-wrapper>div:last-of-type {
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
    }

    .reserved-area.app.submenu .app-wrapper .app-listing {
        margin-top: 10px;
    }

    .reserved-area.app .app-wrapper .top-wrapper h1 {
        font-size: 20px;
        line-height: 1.5;
    }

    .reserved-area.app .app-wrapper .side-submenu,
    .reserved-area.app .sidemenu,
    .reserved-area.app .app-wrapper .add-vehicle-form {
        max-width: 92%;
    }

    .reserved-area.app .sidemenu {
        max-width: 250px;
        min-width: 250px;
    }

    .reserved-area.app .sidemenu .sidemenu-wrapper {
        max-width: 210px;
    }

    .reserved-area.app .logo-spacer img {
        max-width: 170px;
        min-width: 170px;
    }

    .reserved-area.app .client-name {
        font-size: 14px;
    }

    .reserved-area.app .app-wrapper .vehicle-wrapper {
        border-radius: 0px;
        border: solid 0px #f0f0f0;
        width: 100%;
    }

    .reserved-area.app .app-wrapper .slider-wrapper .tns-nav {
        position: relative;
        padding: 13px 20px 0 20px;
    }

    .reserved-area.app .app-wrapper .slider-wrapper .tns-nav button {
        align-items: center;
    }

    .reserved-area.app .app-wrapper .slider-wrapper .slider {
        padding-block: 0px 8px;
    }

    .reserved-area.app .app-wrapper .app-listing .no_results {
        margin-top: 25px;
        width: 100%;
        flex-direction: column;
        padding: 0 20px;
    }

    .reserved-area.app .app-wrapper .no_results p {
        font-size: 14px;
        line-height: 1.71;
        max-width: 600px;
    }

    .reserved-area.app .app-wrapper .no_results .button-wrapper {
        width: 100%;
        flex-direction: column;
    }

    .reserved-area.app .view-switch a:first-of-type {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    
    .reserved-area.app .view-switch a:last-of-type {
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .reserved-area.app .view-switch a {
        padding: 11px;
        font-size: 16px;
        line-height: 1.38;
    }

}


@media (max-width: 767px) {

    body.reserved-area.app footer {
        padding: 0 0 100px;
    }
    
    body.reserved-area.app footer .container {
        padding: 0 20px;
    }
        
    body.reserved-area.app header > div.header-left-container > a {
        display: block;
    }
    
    .reserved-area.app .app-wrapper {
        width: 100%;
    }

    .reserved-area.app .app-wrapper:has( > .template){
        padding: 120px 20px 50px;
    }


    .reserved-area.app .logo-spacer {
        display: none;
    }

    .reserved-area.app header {
        padding: 6px 15px;
        min-height: 58px;
        box-shadow: 0px 2px 0px 0 rgba(0, 0, 0, 0.04);
        background-color: white;
        justify-content: space-between;
        z-index: 12;
        position: fixed;
        pointer-events: all;
    }

    .reserved-area.app .sidemenu .sidemenu-wrapper {
        position: unset;
    }

    body.reserved-area.app header>div.header-left-container {
        display: flex;
    }

    .reserved-area.app .app-wrapper .side-submenu.open {
        padding: 80px 20px;
    }

    .reserved-area.app .app-wrapper .side-submenu.open>.container {
        padding: 0;
    }

    .reserved-area.app header .login a span::after,
    .reserved-area.app header .login a span::before,
    .reserved-area.app header .oficina-proxima a span::after,
    .reserved-area.app header .oficina-proxima a span::before {
        min-width: 16px;
        height: 18px;
    }


    .reserved-area.app header .site a span::after,
    .reserved-area.app header .site a span::before {
        min-width: 20px;
        height: 20px;
    }

    .reserved-area.app .sidemenu a.close,
    .reserved-area.app .app-wrapper .add-vehicle-form a.close {
        width: 30px;
        height: 30px;
        right: 0px;
        top: 20px;
        display: block;
    }

    .reserved-area.app .app-wrapper .app-menu-mobile-button {
        display: flex;
        top: 58px;
        position: fixed;
        width: 100%;
        left: 0;
        z-index: 3;
    }

    .reserved-area.app .app-wrapper .add-vehicle-form>.container {
        padding: 80px 20px;
    }

    .reserved-area.app .app-wrapper .add-vehicle-form>.container .title {
        font-size: 18px;
        line-height: 1.56;
    }

    .reserved-area.app .app-wrapper .add-vehicle-form .filter-wrapper {
        margin-top: 20px;
        gap: 20px;
    }

    .reserved-area.app .app-wrapper .add-vehicle-form .filter-wrapper .input-wrapper {
        padding: 8.5px 16px;
        width: 100%;
        border-radius: 10px;
    }

    .reserved-area.app .app-wrapper .add-vehicle-form .filter-wrapper .input-wrapper label {
        left: 16px !important;
        top: 9px;
        font-size: 14px;
    }

    .reserved-area.app .app-wrapper .add-vehicle-form .filter-wrapper .select-wrapper:has(.isSelected) label,
    .reserved-area.app .app-wrapper .add-vehicle-form .filter-wrapper .filter-wrapper:has(.isSelected)+label,
    .reserved-area.app .app-wrapper .add-vehicle-form .filter-wrapper input:focus+label,
    .reserved-area.app .app-wrapper .add-vehicle-form .filter-wrapper .input-wrapper.filled label,
    .reserved-area.app .app-wrapper .add-vehicle-form .filter-wrapper .hidden-wrapper.filled label,
    .reserved-area.app .app-wrapper .add-vehicle-form .filter-wrapper .input-wrapper.filled input:focus+label,
    .reserved-area.app .app-wrapper .add-vehicle-form .filter-wrapper .input-wrapper.filled input:not(:focus)+label {
        font-size: 11px;
    }


    .reserved-area.app .app-wrapper .app-listing table tr td,
    .reserved-area.app .app-wrapper .app-listing table tr.listing-header td,
    .reserved-area.app .app-wrapper .top-wrapper .back-button,
    .reserved-area.app .app-wrapper .top-wrapper>div>span {
        font-size: 14px;
        line-height: 1.71;
    }

    .reserved-area.app .sidemenu {
        position: fixed;
        height: 100vh;
        max-width: 100%;
        background-color: white;
        top: 0;
        right: 0;
        flex-direction: column;
        transform: translateX(100%);
        transition: var(--transition);
        -webkit-transition: var(--transition);
        z-index: 12;
        width: 420px;
        display: flex;
        padding: 90px 20px;
    }

    .reserved-area.app .sidemenu.open {
        transform: translateX(0%);
        max-width: 294px;
    }

    .reserved-area.app:has(.slider-wrapper.cars) .sidemenu {
        z-index: 12;
    }

    .reserved-area.app .client-name {
        font-size: 14px;
        line-height: 1.71;
    }

    .reserved-area.app .app-wrapper .side-submenu .documents .documents-wrapper {
        margin-top: 20px;
    }

    .reserved-area.app .app-wrapper .side-submenu .documents .documents-wrapper a,
    .reserved-area.app .sidemenu ul li a {
        font-size: 14px;
        line-height: 1.71;
    }

    .reserved-area.app .app-wrapper .side-submenu .documents .documents-wrapper a {
        padding: 9px 0 8px;
    }

    .reserved-area.app .sidemenu ul li a.selected {
        background-color: #fef9f9;
        border-radius: 10px;
        text-shadow: none;
        font-weight: 500;
    }


    .reserved-area.app.submenu .app-wrapper .has-tooltip .tooltip {
        transform: translateX(-57%) translateY(-35px);
        font-size: 11px;
        line-height: 1.64;
        /* min-width: 184px; */
        padding: 5px 9px;
        justify-content: center !important;
        min-width: fit-content;
        white-space: nowrap;
    }

    .reserved-area.app .app-wrapper .slider .has-tooltip .tooltip {
        transform: translateY(-35px);
        left: auto;
        right: 0;
   
    }

    .reserved-area.app .app-wrapper .app-listing table tr td a.listing-maps span::before {
        width: 15px;
        margin: auto;
    }

    .reserved-area.app .app-wrapper .app-listing table tr .listing-description a::before {
        height: 13px;
        width: 20px;
    }

    .reserved-area.app .app-wrapper .app-listing table tr td a.listing-documents::before {
        width: 16px;
        margin: auto;
    }
  
   

    .reserved-area.app .app-wrapper .side-submenu a.close,
    .reserved-area.app .app-wrapper .add-vehicle-form a.close {
        width: 30px;
        height: 30px;
        right: 0px;
        top: 20px;
        display: block;
    }


    .reserved-area.app .sidemenu a.close{
        width: 30px;
        height: 30px;
        right: 10px;
        top: 20px;
        display: block;
    }

    .reserved-area.app .app-wrapper .side-submenu a.close::before,
    .reserved-area.app .sidemenu a.close::before,
    .reserved-area.app .app-wrapper .add-vehicle-form a.close::before {
        width: 12px;
        height: 12px;
        right: 10px;
        top: 10px;
    }

    .reserved-area.app .app-wrapper .side-submenu ul li {
        font-size: 13px;
    }
    .reserved-area.app .app-wrapper .side-submenu ul.services-sidemenu li div .price,
    .reserved-area.app .app-wrapper .side-submenu ul.services-sidemenu p,
    .reserved-area.app .app-wrapper .side-submenu ul li span,
    .reserved-area.app .app-wrapper .side-submenu p {
        font-size: 14px;
    }

    .reserved-area.app .app-wrapper .side-submenu ul.services-sidemenu p {
        line-height: 1.29;
    }

    .reserved-area.app .app-wrapper .side-submenu ul.services-sidemenu {
        margin-top: 17px;
    }

    .reserved-area.app .app-wrapper .side-submenu .edit .title,
    .reserved-area.app .app-wrapper .side-submenu .documents .title {
        font-size: 18px;
        line-height: 1.56;
    }

    .reserved-area.app .app-wrapper .side-submenu .documents .documents-wrapper a span {
        width: 18px;
        height: 20px;
    }

    .reserved-area.app .app-wrapper .side-submenu .edit {
        min-height: 390px;
    }

    .reserved-area.app .app-wrapper .side-submenu #calendario-edit {
        margin-top: 20px;
    }

    .reserved-area.app .app-wrapper .app-listing:not(.marcacoes) table tr td {
        padding: 9px 0 8px;
    }
    
    .reserved-area.app .app-wrapper .app-listing table tr td a.listing-pdf span,
    .reserved-area.app .app-wrapper .app-listing table tr td a.listing-pdf {
        width: 18px;
        height: 20px;
    }

    .reserved-area.app .pagination {
        margin: 45px auto 0;
    }
    
    .reserved-area.app .app-wrapper .side-submenu .title-submenu {
        font-size: 18px;
        line-height: 1.56;
    }

    .reserved-area.app .app-wrapper .side-submenu ul.rof-sidemenu {
        margin-top: 19px;
    }

    .reserved-area.app.submenu .app-wrapper:has(.simulacoes) .top-wrapper,
    .reserved-area.app.submenu .app-wrapper:has(.marcacoes) .top-wrapper,
    .reserved-area.app.submenu .app-wrapper:has(.simulacoes) .view-switch {
        padding: 0 20px;
    }

    .reserved-area.app .app-wrapper .app-listing table#pneus tr td:nth-child(1),
    .reserved-area.app .app-wrapper .app-listing table#revisao tr td:nth-child(1),
    .reserved-area.app .app-wrapper .app-listing.marcacoes table tr.mobile td:nth-child(1) {
        padding: 20px;
    }



}




/**************************************/
/********** EDITAR DADOS **************/
/**************************************/

.reserved-area.app.submenu .app-wrapper:has(.privacy-policy) {
    padding: 160px 20px 100px;
    max-width: unset;
}

.app .form>.container {
    padding: 0;
    max-width: 580px;
}

.app .form .row>.privacy-policy {
    margin-top: 0;
}

.app .form .row>.privacy-policy > span {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.63;
    letter-spacing: normal;
    text-align: left;
    color: #959595;
}

.app .form .row>.privacy-policy > span > a {
    border-bottom: 1px solid rgba(255, 13, 0, 0);
    color: var(--primary);
}

.app .form .row>.privacy-policy > span > a:hover {
    border-bottom: 1px solid rgba(255, 13, 0, 1);
}

.app .form .row>.privacy-policy .privacy-flex-wrapper {
    display: flex;
    gap: 20px;
    margin-top: 15px;
}

.app .form .row>.privacy-policy .privacy-flex-wrapper input[type=radio]+label {
    width: 24px;
    height: 24px;
}

.app .form .row>.privacy-policy .privacy-flex-wrapper input[type=radio]:checked+label {
    border: 7px solid var(--primary);
}

.app .form .row>.privacy-policy .privacy-flex-wrapper input[type=radio]+label+label {
    font-size: 16px;
    color: #959595;
    font-weight: 300;
}


.app .form .row>.privacy-policy .privacy-flex-wrapper input[type=radio]:checked+label+label {
    color: #1a1a1a;
}

.app .form .row a.button {
    margin-top: 10px;
}



@media (max-width: 992px) {
    .app .form {
        padding-top: 23px;
    }

    .app .row .input-wrapper label,
    .app .row .input-wrapper input,
    .app .form .row>.privacy-policy .privacy-flex-wrapper input[type=radio]+label+label,
    .app .form .row>.privacy-policy>span {
        font-size: 14px;
        line-height: 1.71;
        font-weight: 300;
    }

    .reserved-area.app .app-wrapper:has(.privacy-policy) {
        padding: 122px 40px 50px;
    }

    .app .form .row a.button {
        margin-top: 0;
    }

    .app .row .input-wrapper {
        border-radius: 10px;
        padding: 8.5px 21px;
        max-height: 45px;
    }

    .app .row .input-wrapper label {
        left: 21px;
        top: 10px;
    }

    .app .row .select-wrapper:has(.isSelected) label, 
    .app .row .filter-wrapper:has(.isSelected)+label, 
    .app .row input:focus+label, 
    .app .input-wrapper.filled label, 
    .app .row .hidden-wrapper.filled label, 
    .app .row .input-wrapper.filled input:focus+label, 
    .app .row .input-wrapper.filled input:not(:focus)+label {
        top: -9px !important;
        left: 27px !important;
        font-size: 11px;
        color: #959595;
        font-weight: normal;
        border-radius: 20px;
        background-color: white;
        padding: 0px 2px;
        z-index: 2;
        font-size: 11px;
        opacity: 1;
    }

    .app .row input:focus+label, 
    .app .row .input-wrapper.filled label, 
    .app .row .input-wrapper.filled input:focus+label, 
    .app .row .input-wrapper.filled input:not(:focus)+label {
        left: 21px !important;
    }
    
}



@media (max-width: 767px) {
    .reserved-area.app .app-wrapper:has(.privacy-policy) {
        padding: 122px 20px 50px;
    }

    .reserved-area.app:has(.barra-superior.active) .app-wrapper:has(.privacy-policy) {
        padding: 160px 20px 50px;
    }
}


/**************************************/
/********** Clube Myforce *************/
/**************************************/

.myforce-card-wrapper {
    display: flex;
    padding: 0 15px;
    /* max-height: 178px; */
    /* height: 100%; */
    margin-top: 15px;
}

.myforce-card {
    position: relative;
    width: 100%;
    max-width: 305px;
    isolation: isolate;
    border-radius: 20px;
    overflow: hidden;
    padding: 32px 11px 17px 20px;
    box-shadow: 11px 11px 16px 0px rgba(0, 0, 0, 0.07);
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    aspect-ratio: 305 / 178;
}

.myforce-card>img {
    position: absolute;
    z-index: -1;
    inset: 0;
}

.myforce-card>div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.myforce-card>div:last-of-type {
    width: 42%;
    align-items: center;
}

.myforce-card div .clube-myforce {
    max-width: 140px;
    width: 100%;
    display: block;
    object-fit: contain;
    height: unset;
}

.myforce-card div .member-id {
    font-size: 16px;
    color: white;
    line-height: 1;
    padding: 14px;
    position: relative;
    margin-top: 18px;
    font-weight: 600;
}

.myforce-card div .member-id::before {
    content: "";
    inset: 0;
    opacity: 0.4;
    position: absolute;
    background-color: white;
    border-radius: 50px;
}

.myforce-card div>a {
    color: white;
    font-size: 10px;
    margin-top: auto;
}

.myforce-card div>.coins {
    font-size: 30px;
    color: var(--primary);
    font-weight: 900;
    line-height: 1;
}

.myforce-card div>.coins-text {
    font-size: 14px;
    color: var(--black);
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 11px;
}

.myforce-card div>.coins-text span {
    color: var(--primary);
    font-weight: 500;
    font-size: 12px;
}

.myforce-card div>span {
    font-size: 10px;
    color: #bab9b9;
    font-weight: 300;
    margin-top: auto;
    text-align: center;
}


.clube .tab-wrapper {
    padding-top: 53px;
    max-width: 1000px;
    margin: 0 auto;
}

.clube .tab-picker {
    position: relative;
    display: flex;
    gap: 30px;
    border-bottom: 3px solid transparent;
    justify-content: center;
}

.clube .tab-picker a {
    position: relative;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.63;
    letter-spacing: normal;
    text-align: center;
    color: #1a1a1a;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.clube .tab-picker a.active {
    color: var(--primary);
}

/* Underline Effect */
.clube .tab-underline {
    position: absolute;
    bottom: -20px;
    height: 2px;
    background: var(--primary);
    width: 40px;
    left: 0;
    transition: transform 0.3s ease, width 0.3s ease;
    z-index: 1;
}

.clube .tab-container {
    position: relative;
    margin-top: 15px;
    border-top: 2px solid #f0f0f0;
}

.clube .tab {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.clube .tab.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.clube .tab:not(:has(.template)) table {
    width: 100%;
    border-collapse: collapse;
}

.clube .tab:not(:has(.template)) table tr {
    border-bottom: 2px solid #f0f0f0;
    display: flex;
    gap: 10px;
}

.clube .tab:not(:has(.template)) table tr td {
    font-size: 16px;
    font-weight: normal;
    line-height: 1.63;
    letter-spacing: normal;
    text-align: left;
    color: #1a1a1a;
    padding: 21px 0 23px 0;
    display: flex;
}

.clube .tab:not(:has(.template)) table tr td:nth-child(1) {
    width: 36%;
}

.clube .tab:not(:has(.template)) table tr td:nth-child(2) {
    width: 24%;
    justify-content: center;
    color: #acacac;
}

.clube .tab:not(:has(.template)) table tr td:nth-child(3) {
    width: 26%;
    justify-content: center;
    color: #acacac;
}

.clube .tab:not(:has(.template)) table tr td:nth-child(4) {
    width: 11%;
    justify-content: flex-end;
}

.clube .tab .historico-mobile {
    display: none;
    width: 100%;
    padding: 0 20px;
}

.clube .tab .historico-mobile>div {
    display: flex;
    margin-top: 25px;
    justify-content: space-between;
}

.clube .tab .historico-mobile>div>div {
    display: flex;
    flex-direction: column;
}

.clube .tab .historico-mobile span,
.clube .tab .historico-mobile p {
    font-size: 14px;
    font-weight: normal;
    line-height: 1.71;
    letter-spacing: normal;
    text-align: left;
    color: #1a1a1a;
    margin: 0;
}

.clube .tab .historico-mobile span {
    color: #acacac;
}



.clube .partner-card-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 70px 40px;
    margin-top: 50px;
    justify-content: center;
}

.clube .partner-card-wrapper .partner-card {
    width: 100%;
    max-width: 305px;
    display: flex;
    flex-direction: column;
}

.clube .partner-card-wrapper .partner-card .img-wrapper {
    box-shadow: 11px 11px 16px 0px rgba(0, 0, 0, 0.07);
    overflow: hidden;
    border-radius: 20px;
}

.clube .partner-card-wrapper .partner-card .advantage-text {
    margin-block: 27px;
    font-size: 20px;
    color: #000000;
    text-align: center;
}

.clube .partner-card-wrapper .partner-card .advantage-text span {
    font-size: 13px;
    margin-top: 9px;
    color: #979696;
    display: block;
}

.clube .partner-card-wrapper .partner-card .button-wrapper {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.clube .partner-card-wrapper .partner-card .button-wrapper .copy-clipboard {
    font-size: 13px;
    color: var(--primary);
    width: 100%;
    padding: 12px 20px;
    position: relative;
    isolation: isolate;
    text-align: center;
    /* margin-bottom: 40px; */
}

.clube .partner-card-wrapper .partner-card .button-wrapper .copy-clipboard:last-of-type {
margin-bottom: 50px;
}

.clube .partner-card-wrapper .partner-card .button-wrapper .copy-clipboard::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 30px;
    z-index: -1;
    transition: var(--transition);
    background-color: #ffeeed;
}




.clube .confirm_copy {
    position: fixed;
    bottom: -80px;
    right: 80px;
    /* width: 250px; */
    background-color: #ffeeed;
    border: 0px solid var(--primary);
    padding: 15px 20px;
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--primary);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    transition: all 0.5s ease-in-out;
    z-index: 10;
    white-space: nowrap;
}

.clube .confirm_copy p {
    pointer-events: none;
    margin: 0;
}



@media (max-width: 992px) {

    .reserved-area.app.clube .app-wrapper {
        padding: 125px 0px 50px;
    }

    .reserved-area.app.clube:has(.barra-superior.active) .app-wrapper {
        padding: 163px 0px 50px;
    }

    .myforce-card-wrapper {
        /* height: 170px; */
        margin-top: 0;
        padding: 0 40px;
    }

    .myforce-card {
        padding: 33px 12px 14px 17px;
        aspect-ratio: 290 / 170;
    }

    .clube .tab .historico-mobile {
        display: block;
        padding: 0 40px;
    }

    .clube .tab:not(:has(.template)) table {
        display: none;
    }

    .clube .tab-picker {
        justify-content: center;
        padding: 0 40px 20px;
        gap: 20px;
        overflow: auto;
        /* Enables scrolling */
        scrollbar-width: none;
        /* Hides scrollbar in Firefox */
    }
    
    .clube .tab-picker.has-scroll {
        justify-content: flex-start;
    }

    .clube .tab-picker::-webkit-scrollbar {
        display: none;
        /* Hides scrollbar in WebKit browsers */
    }

    .clube .tab-picker a.active::before {
        content: "";
        position: absolute;
        bottom: -20px;
        height: 2px;
        background: var(--primary);
        width: 40px;
        left: 0;
        right: 0;
        transition: transform 0.3s ease, width 0.3s ease;
        z-index: 1;
        margin: auto;
    }

    .clube .tab-underline {
        display: none;
    }

    .clube .tab-container {
        margin-top: -5px;
    }

    .myforce-card div>.coins {
        font-size: 26px;
    }

    .myforce-card div .member-id {
        font-size: 14px;
        padding: 13px 17px 12px;
    }

    .myforce-card div>.coins-text {
        font-size: 12px;
        gap: 9px;
        margin-top: 13px;
    }

    .myforce-card div>.coins-text span {
        font-size: 11px;
    }

    .clube .tab-wrapper {
        padding-top: 32px;
    }

    .clube .tab .historico-mobile>div.table-row+.table-row {
        margin-top: 19px;

    }

    .clube .tab table tr td,
    .clube .tab-picker a {
        font-size: 14px;
        line-height: 1.71;
    }

    .clube .partner-card-wrapper {
        justify-content: unset;
        gap: 0;
        flex-wrap: nowrap;
        margin-top: 30px;
    }

    .clube .partner-card-wrapper .partner-card {
        max-width: unset;
    }

    .clube .partner-card-wrapper .partner-card .advantage-text {
        margin-block: 15px;
        font-size: 14px;
    }

    .clube .partner-card-wrapper .partner-card .advantage-text span {
        font-size: 11px;
        margin-top: 5px;
    }

    .clube .partner-card-wrapper .partner-card .button-wrapper {
        gap: 5px;
    }


    .clube .partner-card-wrapper .partner-card .button-wrapper .copy-clipboard {
        font-size: 10px;
        padding: 8px 20px;
    }

    .clube .partner-card-wrapper .partner-card .button-wrapper .button, 
    .clube .partner-card-wrapper .partner-card .button-wrapper .button:hover, 
    .clube .partner-card-wrapper .partner-card .button-wrapper .button:focus {
        padding: 3px 20px 4px;
        font-size: 12px;
    }

    .clube .confirm_copy {
        left: 0;
        right: 0;
        font-size: 10px;
        padding: 10px 20px;
        margin: auto;
        max-width: 250px;
    }

    .clube .partner-card-wrapper .partner-card .button-wrapper {
        opacity: 0;
        transition: var(--transition);
    }

    .clube .partner-card-wrapper .partner-card.tns-slide-active.active-slide .button-wrapper {
        opacity: 1;
    }

}


@media (max-width: 767px) {

    .clube .tab-picker {
        padding: 0 20px 20px;
    }

    .myforce-card-wrapper,
    .clube .tab .historico-mobile {
        padding: 0 20px;
    }
}



/**************************************/
/************ DASHBOARD ***************/
/**************************************/


.dashboard .dashboard-coins {
    display: flex;
    padding: 29px 40px;
    border-radius: 20px;
    box-shadow: 0px 11px 24px 0 #00000017;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin: 12px auto 0;
    max-width: 1000px;
}

.dashboard .dashboard-coins:hover {
    box-shadow: 0px 11px 24px 0 rgba(0, 0, 0, 0.2);
}

.dashboard .dashboard-coins > div {
    display: flex;
    gap: 15px;
    align-items: center;
}

.dashboard .dashboard-coins > div .coins {
    font-size: 32px;
    font-weight: 900;
    color: var(--primary);
    line-height: 1;
}

.dashboard .dashboard-coins > div .coins-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: normal;
    text-align: left;
    color: #1c1c1c;
}

.dashboard .dashboard-coins > div .coins-text span {
    font-size: 12px;
    color: #f65953;
    margin-left: 5px;
}

.dashboard .dashboard-coins > span {
    font-size: 11px;
    font-weight: 300;
    line-height: 2;
    letter-spacing: normal;
    text-align: right;
    color: #bab9b9;
}

.dashboard .dashboard-vehicle {
    margin: 53px auto 0;
    max-width: 1000px;
}

.dashboard .dashboard-table {
    max-width: 1000px;
    margin: 20px auto 0;
}

.dashboard .dashboard-vehicle .dashboard-vehicle-info {
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.dashboard .dashboard-vehicle .dashboard-vehicle-info > div {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.71;
    letter-spacing: normal;
    color: #1c1c1c;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}


.dashboard .dashboard-vehicle .dashboard-vehicle-info > div:last-of-type {
    flex-wrap: nowrap;
    white-space: nowrap;
}

.dashboard .dashboard-vehicle .dashboard-vehicle-info > div span {
    padding: 0 7px;
}

.dashboard .dashboard-vehicle .dashboard-vehicle-info > div .title {
    font-size: 16px;
    font-weight: bold;
    letter-spacing: normal;
    text-align: left;
    color: #1a1a1a;
    margin-right: 15px;
}

.dashboard .dashboard-vehicle .dashboard-vehicle-info > div .status {
    font-size: 11px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #50a130;
    padding: 2px 5px 3px;
    background-color: rgb(80, 161, 48,0.1);
    border-radius: 5px;
    white-space: nowrap;
}

.dashboard .dashboard-vehicle .dashboard-vehicle-info > div .status.pending {
    color: #eab603;
    background-color: rgb(234, 182, 3, 0.1);
}

.dashboard .dashboard-vehicle .row {
    margin-top: 20px;
}

.dashboard .dashboard-vehicle .row .ac-card {
    padding: 32px 15px 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    box-shadow: 0px 11px 24px 0 rgba(0, 0, 0, 0.09);
    overflow: hidden;
    --gap-h: 88px;
    transition: var(--transition);
}
.dashboard .dashboard-vehicle .row .ac-card:nth-child(7):not([href]),
.dashboard .dashboard-vehicle .row .ac-card:nth-child(4):not([href]),
.dashboard .dashboard-vehicle .row .ac-card:nth-child(5):not([href]),
.dashboard .dashboard-vehicle .row .ac-card:nth-child(6):not([href]) {
    cursor: default;
}
.dashboard .dashboard-vehicle .row .ac-card:nth-child(7):not([href]):hover,
.dashboard .dashboard-vehicle .row .ac-card:nth-child(4):not([href]):hover,
.dashboard .dashboard-vehicle .row .ac-card:nth-child(5):not([href]):hover,
.dashboard .dashboard-vehicle .row .ac-card:nth-child(6):not([href]):hover {
    box-shadow: 0px 11px 24px 0 rgba(0, 0, 0, 0.09);
}

.dashboard .dashboard-vehicle .row .ac-card:hover {
    box-shadow: 0px 11px 24px 0 rgba(0, 0, 0, 0.2);
}

.dashboard .dashboard-vehicle:has(.pending) .row .ac-card {
    min-height: 200px;
    
}

.dashboard .dashboard-vehicle .row .ac-card:nth-child(7):not([href]) p,
.dashboard .dashboard-vehicle .row .ac-card:nth-child(7):not([href]) img,
.dashboard .dashboard-vehicle:has(.pending) .row .ac-card:nth-child(6) p,
.dashboard .dashboard-vehicle:has(.pending) .row .ac-card:nth-child(6) img,
.dashboard .dashboard-vehicle:has(.pending) .row .ac-card:nth-child(5) p,
.dashboard .dashboard-vehicle:has(.pending) .row .ac-card:nth-child(5) img,
.dashboard .dashboard-vehicle:has(.pending) .row .ac-card:nth-child(4) p,
.dashboard .dashboard-vehicle:has(.pending) .row .ac-card:nth-child(4) img {
    opacity: 0.25;
}

.dashboard .dashboard-vehicle:has(.pending) .row .ac-card:nth-child(6) span,
.dashboard .dashboard-vehicle:has(.pending) .row .ac-card:nth-child(6) a,
.dashboard .dashboard-vehicle:has(.pending) .row .ac-card:nth-child(5) span,
.dashboard .dashboard-vehicle:has(.pending) .row .ac-card:nth-child(5) a,
.dashboard .dashboard-vehicle:has(.pending) .row .ac-card:nth-child(4) span,
.dashboard .dashboard-vehicle:has(.pending) .row .ac-card:nth-child(4) a {
    display: none;
}

.dashboard .dashboard-vehicle .row .ac-card img {
    object-fit: contain;
    height: unset;
    max-width: 70px;
    margin: 0 auto;
}

.dashboard .dashboard-vehicle .row .ac-card p {
    font-size: 13px;
    font-weight: 300;
    line-height: 1.42;
    letter-spacing: normal;
    text-align: center;
    color: #1c1c1c;
    margin-bottom: 0;
    margin-bottom: 5px;
}

.dashboard .dashboard-vehicle .row .ac-card span {
    font-size: 31.5px;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: normal;
    text-align: center;
    color: #1c1c1c;
    margin-bottom: 12px;
    margin-top: auto;
    line-height: 1;
}

.dashboard .dashboard-vehicle .row .ac-card > * {
    pointer-events: none;
}

/* SERVIÇOS A DECORRER */
.service_container {
    margin-bottom: 40px;
    background: #fff;
    border-radius: 20px;
    padding: 40px 0px 0px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    max-width: 1000px;
    margin: 20px auto 0;
}

.service_header_title {
    color: #ff0d00;
    font-size:16px;
    font-weight: bold;
    margin-bottom: 27px;
    text-align: left;
    padding: 0 40px;
}

.service_header_labels {
    display: grid;
    grid-template-columns: 33% 19% 49%;
    padding: 0 40px;
    margin:  0;
    padding-block: 26px 28px;
    line-height: 1;
    position: relative;
}

.service_header_labels .label_item {
    font-size: 16px;
    font-weight: bold;
    color: #cbcbcb;
}

.service_header_labels .label_item:nth-child(2) {
    padding-left: 17%;
}

.service_header_labels::before,
.service_item::before {
    content: "";
    border-top: 2px solid #f0f0f0;
    height: 2px;
    width: calc(100% - 80px);
    position: absolute;
    top: 0;
    left: 40px;
}

.service_item {
    padding: 20px 40px;
    margin-bottom: 0;
    transition: all 0.3s ease;
    display: grid;
    grid-template-columns: 33% 19% 49%;
    align-items: center;
    position: relative;
}

.service_vehicle_info {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.service_vehicle_info .brand_plate {
    font-size: 14px;
    font-weight: bold;
    color: #1a1a1a;
}

.service_vehicle_info .date_info,
.service_vehicle_info .oficina_info {
    font-size: 14px;
    color: #1a1a1a;
}

.service_progress {
    width: 103px;
    height: 80px;
}

.service_progress img {
    object-fit: contain;    
}

.progress_circle_wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.progress_circle_wrapper svg {
    width: 100%;
    height: 100%;
}
.progress_circle_wrapper .segment {
    fill: #f0f0f0;
    stroke: #fff;
    stroke-width: 2.5;
    transition: fill 0.3s ease;
}

/* Color overrides based on state */
.step-received .s1 { fill: #86acdc; }

.step-processing .s1 { fill: #86acdc; }
.step-processing .s2 { fill: #ffcc08; }

.step-ready .s1 { fill: #86acdc; }
.step-ready .s2 { fill: #ffcc08; }
.step-ready .s3 { fill: #d68ff4; }

.step-finished .s1 { fill: #86acdc; }
.step-finished .s2 { fill: #ffcc08; }
.step-finished .s3 { fill: #d68ff4; }
.step-finished .s4 { fill: #9bd325; }
.progress_circle_wrapper .percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.progress_circle_wrapper .percentage::after {
    font-size: 18px;
    font-weight: bold;
    color: #1a1a1a;
}

/* Backgrounds from mockup */
.service_item.step-received {
    --status-color: #ccfc86;
    --status-offset: 212; /* 25% */
}
.service_item.step-received .percentage::after { content: "25%"; }

.service_item.step-processing {
    --status-color: #92d669;
    --status-offset: 141.35; /* 50% */
}
.service_item.step-processing .percentage::after { content: "50%"; }

.service_item.step-ready {
    --status-color: #52b96a;
    --status-offset: 70.67; /* 75% */
}
.service_item.step-ready .percentage::after { content: "75%"; }

.service_item.step-finished {
    --status-color: #527a25;
    --status-offset: 0; /* 100% */
}
.service_item.step-finished .percentage::after { content: "100%"; }

.service_timeline {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.timeline_step {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
}

.timeline_step.received {
    display: none;
}

.timeline_step .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: #e0e4e5;
}

.timeline_step .label_content {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap; /* This allows the btn_group_wrap to wrap as a whole unit */
}

.timeline_step .label {
    font-size: 14px;
    font-weight: 300;
    color: #1c1c1c66;
}

.btn_action {
    display: inline-block;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
    color: #e0e4e5;
    white-space: nowrap;
    pointer-events: none;
}

.btn_action:hover {
    opacity: 0.8;
}


.btn_group_wrap {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap; /* THE BUTTONS GO TOGETHER */
}


/* TIMELINE STATE VISIBILITY */
.step-received .timeline_step.received,
.step-processing .timeline_step.received,
.step-processing .timeline_step.processing,
.step-ready .timeline_step.received,
.step-ready .timeline_step.processing,
.step-ready .timeline_step.ready,
.step-finished .timeline_step {
    opacity: 1;
}

.step-processing .timeline_step.received .dot,
.step-ready .timeline_step.received .dot,
.step-finished .timeline_step.received .dot,
.step-received .timeline_step.received .dot { background: #ccfc86; }

.step-processing .timeline_step.processing .dot,
.step-ready .timeline_step.processing .dot,
.step-finished .timeline_step.processing .dot { background: #92d669; }

.step-finished .timeline_step.ready .dot,
.step-ready .timeline_step.ready .dot { background: #52b96a; }

.step-finished .timeline_step.finished .dot { background: #527a25; }



.step-received .timeline_step.received .label,
.step-processing .timeline_step.received .label,
.step-processing .timeline_step.processing .label,
.step-ready .timeline_step.received .label,
.step-ready .timeline_step.processing .label,
.step-ready .timeline_step.ready .label,
.step-finished .timeline_step.received .label,
.step-finished .timeline_step.processing .label,
.step-finished .timeline_step.ready .label,
.step-finished .timeline_step.finished .label { color: #1c1c1c; }



.timeline_step .btn_action.active,
.timeline_step .btn_action.download-pdf { color: #75af22; pointer-events: auto; }


.timeline_step .btn_action.download-pdf.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.5;
}

.timeline_step .btn_action.download-pdf.loading::after {
    content: "";
    width: 3px;
    aspect-ratio: 1;
    border-radius: 50%;
    clip-path: inset(-23px);
    box-shadow: -60px 15px, -60px 15px, -60px 15px;
    transform: translateY(0px);
    animation: l19 1s infinite linear;
    position: absolute;
    right: -31px;
    top: -7px;
    /* bottom: 0; */
    margin: auto;
}
.timeline_step .btn_action.download-pdf.loading {
    animation: pulse 1.2s infinite ease-in-out;
    pointer-events: none;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

/* MOBILE ADJUSTMENTS */
@media (max-width: 992px) {
    .service_header_labels {
        display: none;
    }

    .service_timeline {
        margin-top: 18px;
        gap: 12px;
    }

    .service_header_title {
        text-align: center;
        margin: auto;
        font-size: 14px;
        margin-bottom: 17px;
    }

    .service_item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
        gap: 20px;
    }
    .service_item::before {
        display: none;
    }
    .service_progress {
        width: 130px;
        margin: auto;
        margin-top: 23px;
    }

    .service_vehicle_info {
        align-items: center;
        gap: 4px;
    }

    .timeline_step .label_content {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .tns-nav {
        display: flex;
        justify-content: center;
        gap: 14px;
        bottom: -30px;
        line-height: 1;
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
    }

    .tns-nav button {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #e0e4e5;
        border: none;
        padding: 0;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .tns-nav button.tns-nav-active {
        background-color: #ff0d00;
    }

    .timeline_step .label {
        font-size: 13px;
    }

    .timeline_step {
        align-items: flex-start;
        gap: 8px;
    }

    .timeline_step .dot {
        margin-top: 3px;    
    }

    .service_container {
        border-radius: 0px;
        padding: 20px 0px 20px;
        margin: 30px auto 70px;
        background-color: rgba(147, 214, 105, 0.07);
        position: relative;
    }

    .service_vehicle_info .brand_plate,
    .service_vehicle_info .date_info,
    .service_vehicle_info .oficina_info {
        font-size: 13px;
    }

}


/* Area Viaturas - Specific Styles Match Mobile Dashboard */
.vehicle-wrapper .service_header_labels {
    display: none;
}

.vehicle-wrapper .service_timeline {
    margin-top: 0;
    gap: 12px;
}

.vehicle-wrapper .service_header_title {
    text-align: center;
    margin: auto;
    font-size: 14px;
    margin-bottom: 17px;
}

.vehicle-wrapper .service_item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 20px;
}
.vehicle-wrapper .service_item::before {
    display: none;
}
.vehicle-wrapper .service_progress {
    width: 130px;
    margin: auto;
    margin-top: 0;
}

.vehicle-wrapper .service_vehicle_info {
    align-items: center;
    gap: 4px;
    margin:auto;
}

.vehicle-wrapper .timeline_step .label_content {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.vehicle-wrapper .timeline_step .label {
    font-size: 13px;
}

.vehicle-wrapper .timeline_step {
    align-items: flex-start;
    gap: 8px;
}

.vehicle-wrapper .timeline_step .dot {
    margin-top: 3px;    
}

.vehicle-wrapper .service_container {
    border-radius: 0px;
    padding: 30px 20px;
    margin: 0;
    background-color: rgba(147, 214, 105, 0.07);
    position: relative;
    box-shadow: none;
}

.vehicle-wrapper .service_vehicle_info .brand_plate,
.vehicle-wrapper .service_vehicle_info .date_info,
.vehicle-wrapper .service_vehicle_info .oficina_info {
    font-size: 13px;
}

@media (min-width: 993px) {
    .tns-nav {
        display: none;
    }
}

.dashboard .dashboard-vehicle .row .ac-card:not(:has(a, span.link_name)) span {
    margin-bottom: 30px;
}

.dashboard .dashboard-vehicle .row .ac-card a,
.dashboard .dashboard-vehicle .row .ac-card span.link_name {
    font-size: 13px;
    font-weight: 300;
    line-height: 1.42;
    letter-spacing: normal;
    text-align: center;
    color: #ff0d00;
    margin: 0;
}

.dashboard .dashboard-vehicle .row .ac-card a:hover {
    color: #1c1c1c;
}

.dashboard .dashboard-table {
    border-radius: 20px;
    box-shadow: 0px 11px 24px 0 rgba(0, 0, 0, 0.09);
    padding: 40px;
    margin-top: 20px;
}

.reserved-area.app .app-wrapper .dashboard-table .app-listing {
    margin: 0;
}

.reserved-area.app .app-wrapper .dashboard-table .app-listing .dashboard-listing-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
}

.reserved-area.app .app-wrapper .dashboard-table .app-listing .dashboard-listing-header .title {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.63;
    letter-spacing: normal;
    text-align: left;
    color: #1a1a1a;
}

.reserved-area.app .app-wrapper .dashboard-table .app-listing .dashboard-listing-header a {
    font-size: 13px;
    font-weight: 300;
    line-height: 1.42;
    letter-spacing: normal;
    text-align: right;
    color: #ff0d00;
}

.reserved-area.app .app-wrapper .dashboard-table .app-listing .dashboard-listing-header a:hover {
    color: #1a1a1a;
}

.reserved-area.app .app-wrapper .dashboard-table .app-listing table {
    margin-top: 25px;
    border-bottom: 0;
}

.reserved-area.app .app-wrapper .dashboard-table .app-listing table tr:first-of-type {
    border-top: 2px solid #f0f0f0;
}

.reserved-area.app .app-wrapper .app-listing table tr.next-confirmed {
    position: relative;
}

.reserved-area.app .app-wrapper .dashboard-table:has(table tr:last-of-type:is(.next-confirmed)) {
    padding-bottom: 0;
}

.reserved-area.app .app-wrapper .app-listing table tr.next-confirmed::before {
    background-color: rgb(255, 0, 0, 0.02);
    content: "";
    inset: 0;
    left: 0;
    right: 0;
    display: block;
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.reserved-area.app .app-wrapper .dashboard-table .app-listing.marcacoes table tr.next-confirmed::before {
    left: -40px;
    right: -40px;
}

.reserved-area.app .app-wrapper .app-listing table tr.next-confirmed td:nth-child(1) {
    flex-direction: column;
}

.reserved-area.app .app-wrapper .app-listing table tr.next-confirmed td:nth-child(1) span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: normal;
    text-align: left;
    color: #ff0d00;
}

.reserved-area.app .app-wrapper .app-listing table tr.next-confirmed.mobile td:nth-child(1) .date > span,
.reserved-area.app .app-wrapper .app-listing table tr.next-confirmed td:nth-child(1) span,
.reserved-area.app .app-wrapper .dashboard-table .app-listing table tr.next-confirmed td:nth-child(1) span {
    position: absolute;
    top: 10px;
}

.reserved-area.app .app-wrapper .app-listing table tr.next-confirmed.mobile td:nth-child(1) span,
.reserved-area.app .app-wrapper .dashboard-table .app-listing table tr.mobile td:nth-child(1) span {
    position: relative;
    top: unset;
}

.reserved-area.app .app-wrapper .dashboard-table .app-listing.marcacoes table td {
    padding: 21px 0 22px 0;
}

.reserved-area.app .app-wrapper .app-listing table tr.next-confirmed td ,
.reserved-area.app .app-wrapper .dashboard-table .app-listing.marcacoes table tr.next-confirmed td {
    padding: 31px 0;
}

.reserved-area.app .app-wrapper .dashboard-table .app-listing.marcacoes table td:nth-child(1) {
    width: 13%;
}

.reserved-area.app .app-wrapper .dashboard-table .app-listing.marcacoes table td:nth-child(2) {
    width: 9%;
}

.reserved-area.app .app-wrapper .dashboard-table .app-listing.marcacoes table td:nth-child(3) {
    width: 22%;
}

.reserved-area.app .app-wrapper .dashboard-table .app-listing.marcacoes table td:nth-child(4) {
    width: 22%;
}

.reserved-area.app .app-wrapper .dashboard-table .app-listing.marcacoes table td:nth-child(5) {
    width: 20%;
}

.reserved-area.app .app-wrapper .dashboard-table .app-listing.marcacoes table td:nth-child(6) {
    width: 9%;
}

@media (min-width: 991px) {
 
    .clube .partner-card-wrapper .partner-card .button-wrapper .copy-clipboard:hover:before {
        transform: scale(1.05);
    }
}


@media (max-width: 992px) {

    .dashboard .dashboard-vehicle {
        margin-top: 0;
    }

    .dashboard .dashboard-vehicle .dashboard-vehicle-info,
    .dashboard .dashboard-coins > div, 
    .dashboard .dashboard-coins > div .coins-text,
    .dashboard .dashboard-coins {
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .dashboard .dashboard-vehicle .dashboard-vehicle-info {
        gap: 0;
    }

    .dashboard .dashboard-vehicle .dashboard-vehicle-info > div:first-of-type {
        flex-direction: column-reverse;
    }

    .dashboard .dashboard-vehicle .dashboard-vehicle-info > div:last-of-type{
        justify-content: center;
    }

    .dashboard .dashboard-coins > div .coins-text{
        gap: 7px;
    }

    .dashboard .dashboard-coins > div .coins-text span {
        margin: 0;
        text-align: center;
    }
        
    .dashboard .dashboard-vehicle .row .ac-card {
        --gap-h: 20px;
    }

    .dashboard .dashboard-vehicle .dashboard-vehicle-info > div .title {
        margin: 6px 0 0 0;
    }
    
    .dashboard .dashboard-table {
        display: none;
    }

    
    .dashboard .dashboard-vehicle {
        margin-top: 32px;
    }


    .reserved-area.app.submenu .app-wrapper .app-listing.marcacoes table tr.next-confirmed td {
        padding: 31px 20px 22px;
    }

    .dashboard .dashboard-coins {
        margin-top: 5px;
        gap: 13px;
        padding: 31px 38px 25px;
    }

    .dashboard .dashboard-coins > div {
        gap: 13px;
    }

    .reserved-area.app.dashboard .app-wrapper {
        padding: 120px 40px 50px;
    }

    .reserved-area.app.dashboard:has(.barra-superior.active) .app-wrapper {
          padding: 158px 40px 50px;
    }

    .dashboard .dashboard-coins > div .coins {
        font-size: 20px;
        line-height: 1;
    }

    .dashboard .dashboard-coins > div .coins-text span {
        font-size: 11px;
        line-height: 1;
    }

    .dashboard .dashboard-coins > span {
        font-size: 10px;
        white-space: nowrap;
        text-align: center;
    }

    .dashboard .dashboard-vehicle .row {
        --gap-h: 10px;
        --gap-v: 10px;
        margin-top: 22px;/
    }

    .dashboard .dashboard-vehicle .row .ac-card {
        --gap-h: 10px;
        padding: 19px 15px 15px;
        background-color: white;
    }

    .dashboard .dashboard-vehicle:has(.pending) .row .ac-card {
        min-height: 160px;
    }

    .dashboard .dashboard-vehicle .row .ac-card img {
        max-width: 50px;
    }

    .dashboard .dashboard-vehicle .row .ac-card a,
    .dashboard .dashboard-vehicle .row .ac-card p {
        font-size: 11px;
        line-height: normal;
        margin-bottom: 9px;
    }

    .dashboard .dashboard-vehicle .row .ac-card span {
        font-size: 20px;
        margin-bottom: 8px;
    }


    .dashboard .dashboard-vehicle .row .ac-card:not(:has(a, span.link_name)) span {
        margin-bottom: 23px;
    }

    .dashboard .dashboard-vehicle .row .ac-card span.link_name {
        font-size: 11px;
    }

}

@media (max-width: 767px) {

    .reserved-area.app.dashboard .app-wrapper {
        padding: 120px 15px 50px;
    }

    .reserved-area.app.dashboard:has(.barra-superior.active) .app-wrapper {
        padding: 158px 15px 50px;
    }

}


.listing-pdf {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    text-decoration: none;
    color: #000;
    border-radius: 50%;
}

.listing-pdf span {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.progress-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 1px solid transparent;
    border-top-color: var(--primary);
    transform: translate(-50%, -50%) rotate(0deg);
    animation: progressAnimation 5s linear infinite;
    display: none;
}

.documents-wrapper .progress-circle {
    left: unset;
    right: -40px;
}

.downloading .progress-circle {
    display: block;
    pointer-events: none;
}

.downloading.finished .progress-circle {
    animation: finishAnimation 0.5s ease-in-out forwards;
}

@keyframes progressAnimation {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes finishAnimation {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.3); opacity: 0; }
}


@media (max-width: 767px) {
    .progress-circle {
        width: 35px;
        height: 35px;
    }
}



.reserved-area.app .template .template-module .container,
.reserved-area.app .template .listing .container.container-tmp,
.reserved-area.app .template .template-module .container.container-tmp {
    max-width: 1000px !important;
    padding: 0;
}

.reserved-area.app .tab-container .template .template-module .container,
.reserved-area.app .tab-container .template .listing .container.container-tmp,
.reserved-area.app .tab-container .template .template-module .container.container-tmp {
    padding: 0 20px;
}

@media (max-width: 767px) {
    .reserved-area.app .template .template-module .container {
        padding: 0 20px;
    }
}

header .login.logged a::before {
    content: "";
    display: block;
    -webkit-mask-image: url(/assets/img/area-reservada/login-check.svg);
    mask-image: url(/assets/img/area-reservada/login-check.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: 8px;
    height: 7px;
    background-color: var(--primary);
    position: absolute;
    top: 47px;
    transform: translate(25px, 0px);
}

header .login.logged a, header .login.selected a {
    color: var(--primary);
}

.reserved-area.app.ajuda .template > .video-wrapper-fullscreen + .template-module > .container > *:first-child,
.reserved-area.app.ajuda .template > .video-wrapper-fullscreen + .template-module {
    margin-top: 0;
}


.dashboard .dashboard-vehicle .row{
    justify-content: center;
    }

.dashboard .dashboard-vehicle .row .ac-card{
  flex: 1 1 calc((100% - (var(--gap-h) * 4)) / 5);
  max-width: calc((100% - (var(--gap-h) * 4)) / 5);
  --gap-h: 20px;
  --gap-v: 20px;
}

@media (max-width: 1200px) {
    .dashboard .dashboard-vehicle .row .ac-card{
        flex: 1 1 calc((100% - (var(--gap-h) * 3)) / 4);
        max-width: calc((100% - (var(--gap-h) * 3)) / 4);
    }
}

@media (max-width: 992px) {
    .dashboard .dashboard-vehicle .row .ac-card{
        flex: 1 1 calc((100% - (var(--gap-h) * 2)) / 3);
        max-width: calc((100% - (var(--gap-h) * 2)) / 3);
    }
}

@media (max-width: 767px) {
    .dashboard .dashboard-vehicle .row .ac-card{
        flex: 1 1 calc((100% - (var(--gap-h) * 1)) / 2);
        max-width: calc((100% - (var(--gap-h) * 1)) / 2);
    }
}

.new-notification {
    position: relative;
    padding-left: 20px;
  font-size: 9px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-align: left;
  color: #ff0d00;
text-transform: uppercase;
padding-bottom: 2px;
}
.reserved-area.app .app-wrapper .vehicle-wrapper .vehicle-services ul li:has(.new-notification){
    padding-block: 4px;
}

.reserved-area.app .app-wrapper .vehicle-wrapper .vehicle-services ul li .new-notification +  a{
    line-height: 1.2;
    padding-top: 0px;
}



