:root {

    /* variables para colores */

    --Primary-Base: #3B4DA0;

    --Neutral-00: #FFF;

    --Neutral-Base: #222;

    --Neutral-40: #675D57;

    --Neutral-05: #FBFBFB;

    --primary-base-10: rgba(59, 77, 160, 0.10);

    --shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.06);

    --Semantic-Error: #bd2807;

    --Neutral-10: #EDECEC;



    /* otras variables */

    --font-general: "Verdana", Sans-serif;

    --font-login: "Verdana", Sans-serif;

    /* --font-login: 'Titillium Web'; */

}

/* botones flotantes arreglar porque se meten debajo de los elementos */
@media (min-width: 768px) {
    .elementor-location-floating_buttons #btn-te-llamamos {
       z-index: 10;
   }
   body:not(.rtl) .elementor-69480 .elementor-element.elementor-element-5d892b4e {
       z-index: 9;
   }
}

/* ocultar secciones necesarias */

#_detailsSectionBox, 

#_driverBox, 

#_paymentLoadingBox,

#_loginBox,

#displayFormDriver,

#formBoxRegister,

#formBoxRecoveryPassword,

#boxMessageGray,

#_resumePaymentBox,

#_LoadingBox,

#formBoxNewPasswordRecovery

{

    display: none;

}



#_reservationBox{

    padding-bottom: 2rem;

}



/* estilos para el formulario de busqueda */

.booksVehicles ._formHeader {

    padding: 15px 0px 15px 0px;

    background: var(--Primary-Base);

}



.booksVehicles ._formHeader .previewMobile {

    display: flex;

    /* padding: 12px 56px; */

    justify-content: center;

    align-items: center;

    gap: 32px;

    align-self: stretch;

}



.booksVehicles ._formHeader .previewMobile .nameMenuMobile {

    color: var(--Neutral-00);

    font-family: var(--font-general);

    font-size: 16px;

    font-style: normal;

    font-weight: 700;

    line-height: 26px;

    width: 70%;

}





.booksVehicles ._formHeader .previewMobile .iconDeployMenu {

    display: flex;

    padding: 6px;

    justify-content: center;

    align-items: center;

    gap: 8px;

    border-radius: 100px;

    background: var(--Neutral-00);

    box-shadow: var(--shadow);

}



.booksVehicles ._formHeader ._formSearchBox {

    display: flex;

    justify-content: center;

    align-items: flex-end;

    gap: 23px;

    padding-bottom: 1rem;

    flex-wrap: wrap;

}



.booksVehicles ._formElement {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 6px;

}



.booksVehicles .contentBookSection ._formElement {

    flex: 1 0 0;

}



.booksVehicles ._formElement label {

    color: var(--Neutral-00);

    font-family: var(--font-general);

    font-size: 14px;

    font-style: normal;

    /* font-weight: 700; */

    line-height: 20px;

}



.booksVehicles ._formElement ._inputs {

    display: flex;

    padding: 8px 16px;

    align-items: center;

    gap: 8px;

    align-self: stretch;

    border-radius: 100px;

    background: var(--Neutral-00);

}



.booksVehicles .boxRegister ._formElement ._inputs {

    padding: 0;

    padding-right: 16px;

}



.booksVehicles ._formElement ._inputs input {

    color: var(--Neutral-Base);

    font-family: var(--font-general);

    font-size: 14px;

    font-style: italic;

    font-weight: 400;

    line-height: 24px; 

    border: none;

    outline: none;

}



.booksVehicles ._formHeader input {

    padding: 0;

}



.booksVehicles ._formElement ._inputs input::placeholder {

    color: var(--Primary-Base);

    opacity: 0.5;

}



.booksVehicles ._formElement ._inputs select {

    color: var(--Primary-Base);

    font-family: var(--font-general);

    font-size: 14px;

    font-style: italic;

    font-weight: 400;

    line-height: 24px;

    min-width: 15rem;

    padding: 4px;

    border: 1px solid white;

    outline: none;

    background-color: white;

}



.booksVehicles ._btnWhite {

    display: flex;

    padding: 10px 24px;

    justify-content: center;

    align-items: center;

    gap: 6px;

    border-radius: 2px;

    border: 1px solid var(--Primary-Base);

    background: var(--Neutral-00);

    cursor: pointer;

    color: var(--Primary-Base);

    font-family: var(--font-general);

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

    text-transform: uppercase;

}



.booksVehicles ._btnWhite:disabled {

    opacity: 0.3;

    cursor: default;

}



.booksVehicles ._separator {

    height: 4px;

    align-self: stretch;

}



/* estilos para la seccion de reservacion resultados */

.booksVehicles .heroSection ._heroElement img {

    width: 100%;

    object-fit: cover;

    aspect-ratio: 2.5;

}



.booksVehicles .contentBookSection {

    width: 100%;

    overflow: hidden;

}



.booksVehicles .contentBookSection .reservation ._titleElection {

    display: none;

}



.booksVehicles .contentBookSection .reservation {

    display: block;

}



.booksVehicles .contentBookSection h1 {

    color: var(--Primary-Base);

    text-align: center;

    margin-top: 2rem;

    font-family: var(--font-general);

    font-size: 1.5rem;

    font-style: normal;

    font-weight: 700;

    line-height: 120%;

}



.booksVehicles .contentCarouselSection{

    display: flex;

    justify-content: center;

}



.booksVehicles .contentBookSection .carouselSection {

    gap: 32px;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

}



.booksVehicles .carouselSection .itemCarousel {

    flex: 1 1 38rem; 

    max-width: 38rem;

    box-sizing: border-box;

    box-shadow: var(--shadow);

    background: white;

    border-radius: 16px;

    padding: 2rem;

    display: flex;

    align-items: center;

    cursor: pointer;

}



.booksVehicles .carouselSection .itemCarousel:not(.selected) {

    opacity: 0.4;

}



.booksVehicles .contentBookSection .detailsSelection {

    width: 92%;

    display: flex;

    flex-wrap: wrap;

    position: relative;

    max-width: 80rem;

    padding: 32px;

    align-items: flex-start;

    gap: 32px;

    margin: auto;

    /* margin-top: 3rem; */

    color: var(--Neutral-40);

    font-family: var(--font-general);

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 26px;

    border-radius: 16px;

    background: var(--Neutral-05);

    box-shadow: var(--shadow);

}



.booksVehicles .contentBookSection .detailsSelection .iconCancel {

    position: absolute;

    right: 24px;

    top: 24px;

}



.booksVehicles .contentBookSection .detailsSelection .iconCancel svg {

    cursor: pointer;

}



.booksVehicles .contentBookSection .detailsSelection .descriptionSelection {

    max-width: 40rem;

    width: 100%;

}



.booksVehicles .contentBookSection .detailsSelection .descriptionSelection h2 {

    /* font-weight: bold; */

    font-size: 22px;

    color: var(--Neutral-Base);

    margin-top: 0;

    line-height: 30px; 

}

.booksVehicles .contentBookSection .detailsSelection .descriptionSelection h2 .tipo{
    text-transform: lowercase;
}

.booksVehicles .contentBookSection .detailsSelection .descriptionSelection h2::first-letter {
    text-transform: uppercase;
}
.booksVehicles .contentBookSection .detailsSelection .descriptionSelection h2 .tipo::first-letter {
    text-transform: uppercase;
}
.booksVehicles .contentBookSection .detailsSelection .descriptionSelection.TRAMP h2:before{
    content: "Furgón";
}
.booksVehicles .contentBookSection .detailsSelection .descriptionSelection.TRAMP h2 .tipo{
    display: none;
}


.booksVehicles .contentBookSection .detailsSelection .detailsVehicle {

    list-style: none;

    padding: 0;

    font-size: 14px;

}



.booksVehicles .contentBookSection .detailsSelection .detailsVehicle li {

    padding: 3px 0;

}



.booksVehicles .contentBookSection .detailsSelection .detailsVehicle li span{

    margin-right: 10px;

}



.booksVehicles .contentBookSection .detailsSelection .optionsSelection {

    max-width: 28rem;

}



.booksVehicles .contentBookSection .detailsSelection .optionsSelection h4 {

    color: var(--Neutral-Base);

    margin-bottom: 18px;

    margin-top: 0;

}



.booksVehicles .contentBookSection .detailsSelection .boxElement {

    display: flex;

    flex-direction: column;

    gap: 16px;

    margin-bottom: 30px;

}



.booksVehicles .contentBookSection .detailsSelection .boxElement.totalResume .boxItem {

    background: var(--Neutral-Base);

    padding: 10px 24px;

    color: var(--Neutral-00);

    font-size: 16px;

}



.booksVehicles .contentBookSection .detailsSelection .boxElement .boxTitle {

    display: flex;

    padding: 6px 24px;

    gap: 8px;

    border-radius: 100px;

    background: var(--Neutral-40);

    color: var(--Neutral-00);

    font-family: var(--font-general);

    font-size: 18px;

    /* font-weight: 700; */

}



.booksVehicles .contentBookSection .detailsSelection .boxElement .boxDescription {

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 24px;

    color: var(--Neutral-40);

}



.booksVehicles .contentBookSection .detailsSelection .boxElement .boxItem {

    display: flex;

    justify-content: space-between;

    padding: 10px 24px;

    align-items: flex-start;

    gap: 8px;

    border-radius: 100px;

    background: var(--Neutral-00);

    box-shadow: var(--shadow);

    color: var(--Neutral-Base);

    font-size: 16px;

    /* font-weight: 700; */

    line-height: 24px;

    cursor: pointer;

}



.booksVehicles .contentBookSection .detailsSelection .boxElement .boxItem.selected {

    border: 4px solid var(--Primary-Base);

}



.booksVehicles .contentBookSection .detailsSelection .button-right {

    justify-content: flex-end;

    display: flex;

}



.booksVehicles .contentBookSection ._btnBlue {

    display: flex;

    padding: 10px 24px;

    justify-content: center;

    align-items: center;

    gap: 6px;

    border-radius: 2px;

    border: 1px solid var(--Primary-Base);

    background: var(--Primary-Base);

    cursor: pointer;

    color: var(--Neutral-00);

    font-family: var(--font-general);

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

    text-transform: uppercase;

}



.booksVehicles .contentBookSection ._btnBlue:disabled {

    opacity: 0.3;

    background: var(--Neutral-Base);

    cursor: default;

}



/* estilos para el login */

.booksVehicles .contentBookSection .login {

    margin: 3rem 0;

    padding: 0 10px;

}



._successMessage {

    display: none;

    color: #3ba0a0;

    text-align: center;

    font-family: var(--font-general);

    font-size: 14px;

    font-style: normal;

    font-weight: 700;

    line-height: 20px;

}



.booksVehicles ._enterpriceInputs {

    display: none;

    align-items: flex-start;

    align-content: flex-start;

    gap: 30px 32px;

    flex-wrap: wrap;

    width: 100%;

}



._errorLogin, ._error, ._errorMessages {

    display: none;

    color: #374A9B;

    text-align: center;

    

    font-family: var(--font-general);

    font-size: 15px;

    font-style: normal;

    font-weight: 700;

    line-height: 20px;

}



.booksVehicles .contentBookSection .login .boxLogin {

    display: flex;

    max-width: 400px;

    padding: 24px 32px;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 20px;

    border-radius: 16px;

    background: var(--Neutral-05);

    margin: auto;

}



.booksVehicles .contentBookSection .login .options {

    display: flex;

    justify-content: center;

    align-items: center;

    align-self: stretch;

    border-radius: 100px;

    min-width: 32rem;

    margin: auto;

}

.booksVehicles .min-width-100 {
    min-width: 100% !important;
}

.booksVehicles .contentBookSection .login .options .btnLeft,
.booksVehicles .contentBookSection .login .options .btnRight {

    display: flex;

    min-width: 80px;

    padding: 12px 0px;

    justify-content: center;

    align-items: center;

    gap: 6px;

    flex: 1 0 0;

    text-align: center;

    font-family: var(--font-login);

    font-size: 18px;

    font-style: normal;

    /* font-weight: 700; */

    line-height: 16px; 

    background: var(--primary-base-10);

    color: var(--Primary-Base);

    opacity: 0.5;

    cursor: pointer;

}



.booksVehicles .contentBookSection .login .options .active {

    background: var(--Primary-Base);

    color: var(--Neutral-00);

    opacity: inherit;

}



.booksVehicles .contentBookSection .login .options .btnLeft {

    border-radius: 2rem 0 0 2rem;

}



.booksVehicles .contentBookSection .login .options .btnRight {

    border-radius: 0 2rem 2rem 0;

}



.booksVehicles .contentBookSection .login ._btnBlue {

    margin: auto;

    margin-top: 2rem;

}



.booksVehicles .contentBookSection .login .formLogin {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 30px;

}



.booksVehicles .contentBookSection .login .formLogin label {

    color: var(--Neutral-Base);

    font-family: var(--font-general);

}



.booksVehicles ._inputs .inputPassword {

    display: flex;

    align-items: center;

    gap: 6px;

    width: 100%;

}



.booksVehicles .contentBookSection .login .formLogin ._inputs .inputPassword input {

    width: 100%;

}



.booksVehicles ._inputs .inputPassword .showPassword {

    cursor: pointer;

}



.booksVehicles .contentBookSection .forgotPassword {

    color: var(--Primary-Base);

    font-family: var(--font-general);

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

    /* text-transform: uppercase; */

    text-decoration: none;

    margin-top: 1rem;

    cursor: pointer;

    border-bottom: 1px solid var(--Primary-Base);

}



/* estilos para el registro de usuario */

.booksVehicles .boxRegister {

    max-width: 80rem !important;

}



.booksVehicles .boxRegister .options {

    margin: auto;

}



.booksVehicles .boxRegister ._formElement{

    flex: 1 1 calc(50% - 20px);

}



.booksVehicles .boxRegister ._formElement.col-2{

    flex: 1 1 calc(100% - 20px) !important;

}



.booksVehicles ._formRadioButtons {

    width: 100%;

    text-align: center;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 32px;

}



/* Estilos para la seccion de seleccion de conductores */

.driverSection {

    margin: 4rem 0;

    padding: 0px 80px;

}



.driverSection .selectedDriver{

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 32px;

}



.driverSection .selectedDriver .driverElement {

    display: flex;

    min-height: 240px;

    padding: 40px 32px 32px 32px;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 24px;

    cursor: pointer;

    border-radius: 16px;

    background: var(--Neutral-05);

    box-shadow: var(--shadow);

    color: var(--Primary-Base);

    text-align: center;    

    font-family: var(--font-general);

    font-size: 1.5rem;

    font-style: normal;

    /* font-weight: 700; */

    line-height: 140%;

    width: 32rem;

}



.driverSection .selectedDriver .driverElement.disabled {

    opacity: 0.4;

}



.driverSection .selectedDriver .driverElement.selected {

    border: 4px solid var(--Primary-Base);

}



.driverSection .selectedDriver .driverElement ._iconsBox {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 16px;

}



.driverSection .selectedDriver .driverElement ._icon {

    display: flex;

    padding: 10px;

    align-items: center;

    gap: 8px;

    border-radius: 100px;

    background: var(--Neutral-00);    

    box-shadow: var(--shadow);

}



.driverSection #selectedDriverContinue {

    margin: auto;

    margin-top: 3.5rem;

}



.driverSection .formNewDriver {

    display: flex;

    max-width: 842px;

    padding: 32px;

    flex-direction: column;

    gap: 32px;

    margin: auto;

    margin-top: 4rem;



    border-radius: 16px;

    background: var(--Neutral-05);

    box-shadow: var(--shadow);

}



.driverSection .formNewDriver ._titleForm {

    color: var(--Neutral-Base);

    font-family: var(--font-general);

    font-size: 22px;

    font-style: normal;

    /* font-weight: 700; */

    line-height: 30px;

}



.booksVehicles ._form ._displayInputs {

    display: flex;

    align-items: flex-start;

    align-content: flex-start;

    gap: 30px 32px;

    flex-wrap: wrap;

}



.booksVehicles ._form ._formElement.col-2 {

    flex: 0 0 calc(74% - 64px);

}



.booksVehicles #displayFormProfile ._form ._formElement.col-2 {

    flex: 0 0 calc(100% - 0px);

}



.booksVehicles ._form ._formElement label {

    color: var(--Neutral-Base);

    font-family: var(--font-general);

    font-size: 14px;

    font-style: normal;

    /* font-weight: 700; */

    line-height: 20px;

    padding-left: 5px;

}



.booksVehicles ._formElement ._formInput {

    border-radius: 100px;

    background: var(--Neutral-00);

    padding: 14px 22px;

    border: none;

    width: -webkit-fill-available;

    font-size: 12px;

    /* font-style: italic; */

    font-weight: 400;

    line-height: 24px;

    font-family: var(--font-general);

}



.booksVehicles ._formElement ._formInput::placeholder {

    color: var(--Primary-Base);

    opacity: 0.5;

}



.booksVehicles ._formElement ._errorInput {

    display: none;

    color: var(--Semantic-Error);

    font-size: 12px;

    margin-left: 21px;

}



.booksVehicles ._errorMessages {

    margin: 3rem 0;

    margin-bottom: 0;

    color: var(--Semantic-Error);

    font-family: var(--font-general);

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 24px;

    display: none;

}



.booksVehicles ._form ._buttonsHorizontal {

    display: flex;

    justify-content: center;

    gap: 16px;

    margin-top: 4rem;

}



/* pagina de carga para pagar */

.paymentLoading {

    margin: 4rem 0;

}



.paymentLoading ._displayPagePayment {

    display: flex;

    padding: 0px 80px;

    flex-direction: column;

    justify-content: flex-end;

    align-items: center;

    gap: 24px;

}



.paymentLoading ._displayPagePayment ._descriptionLoading {

    color: var(--Neutral-Base);

    text-align: center;    

    font-family: var(--font-general);

    font-size: 20px;

    font-style: normal;

    font-weight: 700;

    line-height: 30px

}



.paymentLoading ._displayPagePayment img{

    animation: spin 2s linear infinite;

}



@keyframes spin {

    0% {

      transform: rotate(0deg);

    }

    100% {

      transform: rotate(360deg);

    }

}



.capitalize-first-letter {

    text-transform: lowercase; /* convierte todo el texto en minúsculas */

}



.capitalize-first-letter::first-letter {

    text-transform: uppercase; /* convierte la primera letra en mayúscula */

}



/* estilos para las ventanas modal */

.modal {

    display: none;

    position: fixed;

    z-index: 9999;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: auto;

    background-color: rgb(0,0,0);

    background-color: rgba(0,0,0,0.4);

}



.modal .modal-content {

    background-color: white;

    margin: 15% auto;

    padding: 20px;

    border: 1px solid #888;

    width: 80%;

    max-width: 842px;

    text-align: center;

    border-radius: 16px;

    background: var(--Neutral-05);

    box-shadow: var(--shadow);

    padding: 40px 100px;



    color: var(--Neutral-40);

    text-align: center;

    font-family: var(--font-general);

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 26px;

}



.modal .modal-title {

    color: var(--Neutral-Base);

    text-align: center;    

    font-family: var(--font-general);

    font-size: 20px;

    font-style: normal;

    font-weight: 700;

    line-height: 30px;

    margin-top: 1rem;

}



.modal .modal-icon {

    width: max-content;

    margin: auto;

    display: flex;

    padding: 10px;

    align-items: center;

    gap: 8px;

    border-radius: 100px;

    background: var(--semantic-error-10);

}



.modal .modal-description {

    margin: 2rem 0;

}



.modal .modal-form {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 8px;

    align-self: stretch;

    margin: 2rem 0;

}



.modal .modal-form ._formElement {

    display: flex;

    width: 406px;

    flex-direction: column;

    align-items: flex-start;

    gap: 6px;

    margin-bottom: 2rem;

}



.modal .modal-form ._formElement label {

    color: var(--Neutral-Base);

    font-family: var(--font-general);

    font-size: 12px;

    font-style: normal;

    font-weight: 700;

    padding-left: 12px;

    line-height: 20px;

}



.modal .modal-form ._formElement .inputPassword {

    width: 100%;

    text-align: left;

    display: flex;

    align-items: center;

}



.modal .modal-form ._formElement .inputPassword input {

    width: 100%;

}



.modal .close {

    color: #aaa;

    float: right;

    font-size: 28px;

    font-weight: bold;

}



.modal .close:hover,

.modal .close:focus {

    color: black;

    text-decoration: none;

    cursor: pointer;

}



.modal .buttons {

    display: flex;

    gap: 16px;

    justify-content: center;

    margin-top: 3rem;

}



.modal .confirm-delete {

    display: flex;

    border: none;

    justify-content: center;

    align-items: center;

    gap: 8px;

    cursor: pointer;

    border-radius: 2px;

    background: var(--Semantic-Error);

    color: var(--Neutral-00);

    padding: 10px 24px;

    

}



.modal .cancel-delete {

    border: none;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 6px;

    padding: 10px 24px;

    border-radius: 2px;

    border: 1px solid var(--Primary-Base);

    background: var(--Neutral-00);

    color: var(--Primary-Base);

}



/* estilos para las sugerencias de vehiculos */

.booksVehicles .carouselSection .itemCarousel:not(.selected){

    opacity: inherit !important;

}



.booksVehicles .carouselSection .itemCarousel {

    flex-direction: column;

    align-items: flex-start !important;

    padding-top: 0 !important;

    padding-bottom: 0 !important;

    padding-left: 0 !important;

    padding-right: 0 !important;

    flex: 1 1 35rem !important;

    max-width: 35rem !important;

    margin: auto;

}



.booksVehicles .carouselSection .itemCarousel.selected {

    border: 4px solid var(--Primary-Base);

    border-radius: 22px;

    box-shadow: var(--shadow);

}



.booksVehicles .carouselSection .itemCarousel.selected .details {

    border-radius: 0 0 13px 13px;

}



.booksVehicles .carouselSection .itemCarousel .imageBox {

    padding: 0;

}



.booksVehicles .carouselSection .itemCarousel img {

    width: 100%;

    border-radius: 16px;

    box-shadow: var(--shadow);

    /* height: 21rem; */

    /* object-fit: contain; */

}



.booksVehicles .carouselSection .itemCarousel.suggestionItemCarousel img {

    border-radius: 16px 16px 0 0;

}



.booksVehicles .carouselSection .itemCarousel.suggestionItemCarousel.selected .details {

    border-radius: 0 0 20px 20px;

}



.booksVehicles .carouselSection .itemCarousel .details {

    display: flex;

    padding: 12px 24px 14px 24px;

    align-items: baseline;

    gap: 16px;

    width: 100%;

    background: var(--Neutral-05);

    border-radius: 0 0 16px 16px;

}



.booksVehicles .carouselSection .itemCarousel .details ._title {

    color: var(--Neutral-Base);

    font-family: var(--font-general);

    font-size: 16px;

    font-style: normal;

    font-weight: 700;

    line-height: 20px;
    text-transform: lowercase;

}

.booksVehicles .carouselSection .itemCarousel .details ._title:first-letter {
    text-transform: uppercase;
}

/* #elegible_TRAMP .details:before{
    content: "Furgón";
    font-weight: 700;
    color: var(--Neutral-Base);
    font-family: var(--font-general);
}
#elegible_TRAMP .details ._title{
    display: none;
} */

.booksVehicles .carouselSection .itemCarousel .details ._date {

    color: var(--Neutral-Base);

    font-family: var(--font-general);

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 26px;

}



.booksVehicles .carouselSection .itemCarousel .details ._date.blue {

    color: var(--Primary-Base);

}



.booksVehicles ._errorMessageGray {

    max-width: 85%;

    display: flex;

    margin: auto;

    margin-bottom: 3rem;

    margin-top: 1rem;

    width: max-content;

    padding: 12px 4rem;

    flex-direction: column;

    align-items: flex-start;

    gap: 8px;

    border-radius: 100px;

    background: var(--Neutral-10);

    color: var(--Neutral-Base);

    text-align: center;

    font-family: var(--font-general);

    font-size: 14px;

    font-style: normal;

    font-weight: 700;

    line-height: 24px;

}



.resumePayment ._displayresumePayment {

    display: flex;

    max-width: 50rem;

    padding: 24px 32px 32px 32px;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 16px;

    margin: auto;

    border-radius: 16px;

    background: var(--Neutral-05);

    margin-top: 5rem;

    text-align: center;

}



.resumePayment  ._title{

    color: var(--Neutral-Base);

    font-family: var(--font-general);

    font-size: 24px;

    font-style: normal;

    font-weight: 700;

    line-height: 140%;

}



.resumePayment p {

    color: var(--Neutral-40);

    text-align: center;

    font-family: var(--font-general);

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 26px;

    margin: 0;

}



.resumePayment p:first-child {

    font-size: 16px;

}



.resumePayment ._subtitle {

    color: var(--Neutral-Base);

    font-family: var(--font-general);

    font-size: 20px;

    font-style: normal;

    font-weight: 700;

    line-height: 30px;

}



.resumePayment ul {

    list-style: none;

    margin: 0;

    padding: 0;

}



.resumePayment ul li {

    margin: 5px 0;

    color: var(--Neutral-40);

    font-family: var(--font-general);

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

}



.resumePayment ul li:first-child {

    margin-top: 0;

}



.resumePayment ul li strong {

    color: var(--Neutral-Base);

    font-family: var(--font-general);

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 24px;

}



.resumePayment ._btnWhite {

    margin: auto;

    margin-top: 3rem;

}



.max-content {

    width: max-content;

}



.with-12 { 

    width: 12rem;

}



/* estilos para aparecer el detalle de los vehiculos cards */

.deploySelectionBooking {

    width: 100%;

    grid-column: 1 / -1; /* Ocupar todas las columnas (100% de la fila) */

}

 

/* estilos para el selector de horarios */

.custom-select-container {

    position: relative;

    width: 12rem;

    padding: 0 5px;

    color: var(--Primary-Base);

    font-family: var(--font-general);

    font-size: 14px;

    font-style: italic;

}



.custom-select {

    position: relative;

    display: block;

    cursor: pointer;

    text-align: left;

    line-height: normal;

    opacity: 0.5;

}



.custom-select.no-opacity {

    opacity: inherit;

}



.custom-select-menu {

    position: absolute;

    top: 2rem;

    left: 0;

    width: 100%;

    max-height: 200px;

    overflow-y: auto;

    background-color: #fff;

    border: 1px solid #ccc;

    border-radius: 4px;

    box-shadow: 0 4px 8px rgba(0,0,0,0.1);

    display: none;

    z-index: 1000;

    padding: 0;

    margin: 0;

    list-style-type: none;

}



.custom-select-menu li {

    padding: 10px;

    cursor: pointer;

}



.custom-select-menu li:hover {

    background-color: #eee;

}



.custom-select-menu::-webkit-scrollbar {

    width: 8px;

}



.custom-select-menu::-webkit-scrollbar-track {

    background: #f1f1f1;

}



.custom-select-menu::-webkit-scrollbar-thumb {

    background: #888;

    border-radius: 4px;

}



.custom-select-menu::-webkit-scrollbar-thumb:hover {

    background: #555;

}



.no-gap {

    gap: 0px !important;

}



/* 	Estilos para el calendario - datepicker */

.flatpickr-calendar {

	padding: 20px 24px 24px !important;

	width: auto !important;

}

.flatpickr-next-month, .flatpickr-prev-month {

	top: 20px !important;

}

.flatpickr-months {

	margin-bottom: 8px;

}

select.flatpickr-monthDropdown-months {

	font-weight: bold !important;

	/* for Firefox */

	-moz-appearance: none !important;

	/* for Chrome */

	-webkit-appearance: none!important;

	appearance: none !important;

    display: initial !important;

}

select.flatpickr-monthDropdown-months::-ms-expand {

	display: none !important;

}



.numInputWrapper > input::-webkit-outer-spin-button,

.numInputWrapper > input::-webkit-inner-spin-button {

    /* display: none; <- Crashes Chrome on hover */

    -webkit-appearance: none !important;

    margin: 0 !important; /* <-- Apparently some margin are still there even though it's hidden */

}

.numInputWrapper > input[type=number] {

    -moz-appearance:textfield !important; /* Firefox */

    appearance: textfield !important;

	font-weight: bold !important;

}

.numInputWrapper > .arrowUp, .numInputWrapper > .arrowDown {

	display: none !important;

}



@media (max-width: 769px) {

    .booksVehicles .contentBookSection .carouselSection {

        grid-template-columns: repeat(2, 1fr); /* 2 columnas */

    }

    .booksVehicles .contentBookSection .detailsSelection {

        padding: 32px 15px;

    }

}



@media (max-width: 762px) {

    .booksVehicles .contentBookSection .detailsSelection .descriptionSelection,

    .booksVehicles .contentBookSection .detailsSelection .optionsSelection {

        max-width: max-content;

    }



    .booksVehicles .contentBookSection .detailsSelection {

        padding: 32px;

    }

}



@media (max-width: 480px) {

    .booksVehicles .contentBookSection .carouselSection {

        grid-template-columns: repeat(1, 1fr); /* 1 columna */

    }

}



@media (max-width: 400px) {

    .booksVehicles .contentBookSection .login .options {

        min-width: 25rem;

    }

}



/* Mostrar _formSearchBox y ocultar previewMobile en pantallas grandes */

@media (min-width: 769px) {

    .booksVehicles ._formSearchBox {

        display: flex;

    }

    .booksVehicles .previewMobile {

        display: none !important;

    }

}



/* aqui se esconde el menu */

@media (max-width: 768px) {

    /* .booksVehicles ._formSearchBox {

        display: none !important;

    } */

    .booksVehicles .previewMobile {

        display: flex;

    }



    .booksVehicles ._formHeader ._formSearchBox {

        padding: 1rem;

    }



    .driverSection .selectedDriver .driverElement {

        width: 26rem;

    }

    body:not(.elementor-editor-active) #content-te-llamamos {
        display: none !important;
    }

    .booksVehicles ._formHeader ._formElement ._inputs input {
        width: 100% !important;
    }

}



@media (max-width: 712px) {

    .driverSection .selectedDriver .driverElement {

        width: 100%;

    }

}