/* width */
::-webkit-scrollbar {
    width: 1.25rem;
}


/* Handle */
::-webkit-scrollbar-thumb {
    border: 0.5rem solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    border-radius: 9999px;
    background-color: #D9D9D9;
}

.accordion {
    --bs-accordion-active-bg: #F2F2F2;
    --bs-accordion-btn-bg: #F2F2F2;
    --bs-body-bg: #F2F2F2;
}

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

    .accordion-button:not(.collapsed) {
        box-shadow: none;
        color: #1B1B1B;
        font-weight: 700;
    }

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

.dropdown .dropdown-button-menu {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: center;
    background-color: #fff;
    border-radius: 0.25rem;
    border: 1px solid #D9D9D9;
    padding: 1rem;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

    .dropdown .dropdown-button-menu span {
        font-size: 1rem;
        font-weight: 700;
        line-height: normal;
    }

    .dropdown .dropdown-button-menu::after {
        content: "\e313";
        font-family: 'Material Symbols Outlined', sans-serif;
        color: #1b1b1b;
        font-weight: 400;
    }

    .dropdown .dropdown-button-menu:focus-visible {
        border: 1px solid #1EA93C;
        outline: none;
    }

    .dropdown .dropdown-button-menu.show {
        border: 1px solid #1EA93C;
    }

        .dropdown .dropdown-button-menu.show ~ div,
        .dropdown .label-dropdown.has-value {
            opacity: 0.65;
            transform: scale(0.875) translateY(-0.625rem) translateX(0);
        }

    .dropdown .dropdown-button-menu.label-value {
        padding-top: 1.375rem;
        padding-bottom: 0.625rem;
    }

    .dropdown .dropdown-button-menu.show::after {
        content: "\e316";
    }

.dropdown-menu {
    width: 100%;
    padding: 1rem 0.75rem 1rem 1rem;
    margin-top: 0.25rem;
    border-radius: 1rem;
    border: 1px solid #D9D9D9;
    box-shadow: 0px 2px 12px 0px rgba(27, 27, 27, 0.15);
    max-height: 16.25rem;
    overflow: hidden;
    overflow-y: auto;
    text-overflow: ellipsis;
    background: #fff;
}

    .dropdown-menu .dropdown-item {
        padding: 0.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .dropdown-menu .dropdown-item:hover {
            color: inherit;
            background-color: #F2F2F2;
        }

        .dropdown-menu .dropdown-item:active {
            background-color: #5A5A5A;
        }


            .dropdown-menu .dropdown-item:active .text {
                color: #fff;
            }

dropdown-menu .dropdown-item .text {
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: #1b1b1b;
}

.dropdown .label-dropdown {
    position: absolute;
    transition: all .2s ease-in-out;
    left: calc(1rem + 1px);
    top: 1rem;
    transform-origin: 0 0;
}

    .dropdown .label-dropdown span {
        color: #5a5a5a;
    }

.dropdown > input {
    position: absolute;
}

.container-form .was-validated .form-control:invalid,
.container-form .was-validated .form-select:invalid:not([multiple]):not([size]),
.container-form .was-validated .form-control:valid,
.container-form .was-validated .form-select:valid:not([multiple]):not([size]) {
    background-image: none;
}


    .container-form .was-validated .form-control:invalid + button {
        border-color: #FF1C46;
    }

.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    transform: scale(0.875) translateY(-0.5rem) translateX(0.15rem);
}

.container-form .was-validated .form-control:invalid:focus,
.container-form .was-validated .form-select:invalid:not([multiple]):not([size]):focus,
.container-form .was-validated .form-control:valid:focus,
.container-form .was-validated .form-select:valid:not([multiple]):not([size]):focus {
    box-shadow: none;
}

.container-form .was-validated .form-control:invalid ~ .form-text,
.container-form .was-validated .form-select:invalid:not([multiple]):not([size]) ~ .form-text {
    display: none;
}

.container-form .was-validated .form-control:valid,
.container-form .was-validated .form-select:valid:not([multiple]):not([size]) {
    border-color: #D9D9D9;
}

.container-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    box-shadow: 0px 2px 12px 0px rgba(27, 27, 27, 0.15);
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
    background-color: #FFF;
    padding: 1rem 1rem 3rem 1rem;
}

    .container-form .invoiceDynamic-validation {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

        .container-form .invoiceDynamic-validation .form-group-section {
            row-gap: 1rem;
        }



        .container-form .invoiceDynamic-validation .form-group {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 0 0.5rem 0;
        }

            .container-form .invoiceDynamic-validation .form-group .field-required {
                font-size: 0.75rem;
                font-weight: 400;
                line-height: 0.875rem;
                color: #5A5A5A;
            }

        .container-form .invoiceDynamic-validation .button-container {
            gap: 1rem;
        }

            .container-form .invoiceDynamic-validation .button-container .skip-button {
                order: 2;
            }

        .container-form .invoiceDynamic-validation .form-group-label {
            font-weight: bold;
            font-size: 1rem;
        }

.container-titulos {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    .container-titulos h1 {
        margin-bottom: 0;
        font-size: 1.375rem;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .container-titulos p {
        margin-bottom: 0;
        font-size: 1rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.5rem;
    }

.contenido-componente {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 5rem
}

.header-desktop {
    display: none;
}

.header-mobile {
    padding: 0.875rem;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    background-color: #1B1B1B;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
}

    .header-mobile span {
        color: #FFFFFF;
    }

.purchase {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

    .purchase h2 {
        font-size: 1rem;
        font-weight: 700;
        margin: 0;
    }

.container-monto {
    flex-direction: column;
    border-radius: 0.75rem;
    border: 2px solid #1EA93C;
    background: #FFF;
    display: none;
    padding: 1.5rem 1rem;
    gap: 1.5rem;
}

    .container-monto .container-detalle-pago,
    .container-monto .container-pago-exitoso {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    .container-monto .container-monto-pagado {
        border-radius: 0.5rem;
        border: 1px solid #d9d9d9;
    }

    .container-monto .container-detalle-pago .detalle-pago {
        border-radius: 0.5rem 0.5rem 0 0;
        border-bottom: 1px solid #D9D9D9;
        background-color: #FAFAFA;
        padding: 0.75rem 1rem;
    }

        .container-monto .container-detalle-pago .detalle-pago .accordion {
            border: none;
            background: transparent;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0;
            font-size: 0.875rem;
            line-height: 1.125rem;
            font-weight: 700;
            color: #1b1b1b;
        }

            .container-monto .container-detalle-pago .detalle-pago .accordion span {
                font-size: 1.25rem;
                color: #1b1b1b;
                transition: 500ms;
            }

            .container-monto .container-detalle-pago .detalle-pago .accordion.collapsed span {
                transform: rotate(180deg);
                transition: 500ms;
            }

    .container-monto .container-detalle-pago .container-monto-pagado .monto-pagado {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        gap: 0.5rem;
    }

        .container-monto .container-detalle-pago .container-monto-pagado .monto-pagado p {
            font-size: 1.25rem;
            font-weight: 700;
            font-style: normal;
            line-height: 1.5rem;
            margin: 0;
        }

        .container-monto .container-detalle-pago .container-monto-pagado .monto-pagado .label {
            font-size: 1rem;
            line-height: 1.125rem;
        }

    .container-monto .container-pago-exitoso .codigo-reserva p {
        margin: 0;
    }

    .container-monto .container-pago-exitoso .codigo-reserva {
        font-size: 0.875rem;
        border-bottom: 1px solid #D9D9D9;
        padding-bottom: 1.5rem;
    }

        .container-monto .container-pago-exitoso .codigo-reserva .title {
            margin-bottom: 0.375rem;
            color: #5A5A5A;
        }

            .container-monto .container-pago-exitoso .codigo-reserva .title strong {
                color: #5A5A5A;
            }

    .container-monto .container-pago-exitoso .pago-exitoso {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0.625rem;
    }

    .container-monto .container-pago-exitoso .bar {
        border-radius: 1rem;
        background: #1EA93C;
        width: 100%;
        height: 0.5rem;
        flex-shrink: 0;
    }

    .container-monto .container-pago-exitoso .pago-exitoso .icon {
        color: #1EA93C;
    }

    .container-monto .container-pago-exitoso .pago-exitoso .description {
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 140%;
        color: #323237;
    }

#modalError .modal-body figure {
    margin: 0 auto;
}

    #modalError .modal-body figure img {
        width: 100%;
        height: auto;
        margin: 0;
    }

#modalError .modal-body .imagen-error {
    display: flex;
    width: 1.5rem;
    height: 1.5rem;
}

    #modalError .modal-body .imagen-error img {
        width: 100%;
        height: auto;
        margin: 0;
    }

#modalError .modal-body .error,
#modalError .modal-body .enviada {
    display: none;
    flex-direction: column;
    gap: 1.5rem;
}

    #modalError .modal-body .error .titulo {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        justify-content: center;
        align-items: center;
    }

    #modalError .modal-body .error .subtitulo {
        flex-direction: column;
        gap: 1rem;
    }

        #modalError .modal-body .error .subtitulo p,
        #modalError .modal-body .enviada p {
            font-size: 1.125rem;
            font-weight: 400;
            margin-bottom: 0;
            color: #5A5A5A;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.48813rem;
        }

            #modalError .modal-body .error .subtitulo p a,
            #modalError .modal-body .enviada p a {
                color: #177F8C;
            }

            #modalError .modal-body .error .subtitulo p strong,
            #modalError .modal-body .enviada p strong {
                color: #5A5A5A;
            }

    #modalError .modal-body .error .titulo h2,
    #modalError .modal-body .enviada h2 {
        margin: 0;
        font-size: 1.5rem;
        font-weight: bold;
        line-height: 1.98438rem;
    }

#modalError .modal-body .btnModal {
    display: flex;
    justify-content: center;
}

#modalError .modal-body .btn-dark {
    border-radius: 6.25rem;
    padding: 0.75rem 1.5rem;
    font-size: 1.25rem;
    font-weight: bold;
    width: 100%;
    min-width: 12.5rem;
    border: 2px solid #1b1b1b;
    background-color: #1b1b1b;
}

    #modalError .modal-body .btn-dark:hover {
        border: 2px solid #494949;
        background-color: #494949;
    }

    #modalError .modal-body .btn-dark:focus,
    #modalError .modal-body .btn-dark:focus-visible {
        border: 2px solid #6C6C6C;
        background-color: #6C6C6C;
        box-shadow: none;
    }

#modalError .modal-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem 1.5rem;
    text-align: center;
}

#modalError .modal-content {
    border-radius: 1rem;
}

#modalError {
    --bs-modal-margin: 1rem;
}

.correo-sv,
.correo-gt {
    display: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

#invoiceDynamic input,
#invoiceDynamic select {
    font-weight: 700;
}


.container-alerta {
    display: none;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.alerta {
    display: flex;
    background: #F2F2F2;
    padding: 1rem 1.5rem;
    flex-direction: row;
    gap: 1.5rem;
    border-radius: 0.5rem;
    align-items: center;
}

.alerta-icono {
    padding: 0 0.15625rem;
}

.btn-form .btn-dark {
    display: flex;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 2rem;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    background-color: #1b1b1b;
    border: 2px solid #1b1b1b;
}

/* alerta formulario */
.container-form .alertFormContent {
    border-radius: 8px;
    background: #F7FBFC;
    flex-shrink: inherit;
    padding: 16px;
    display: flex;
    gap: 12px;
}

    .container-form .alertFormContent .iconForm {
        width: 20px;
        height: 20px;
        color: #177F8C;
    }

    .container-form .alertFormContent .contentAlert,
    .container-form .alertFormContent .contentAlert p {
        font-size: 0.875rem;
        margin: 0px;
    }

table th,
table td {
    vertical-align: middle;
}

table thead tr {
    border-style: dashed !important;
    min-height: 2.5rem;
    height: 2.5rem;
}

table tr,
table th,
table td {
    border-style: dashed !important;
}

table tr {
    min-height: 3.75rem;
    height: 3.75rem;
}

    table tr .title {
        border-right: 1px dashed #D9D9D9;
        padding: 0 1rem;
    }

        table tr .title span {
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
        }

table .collapsed tr .title .icon {
    transform: rotate(180deg);
    transition: 500ms;
}

table tr .title .icon {
    font-size: 1.25rem;
    transition: 500ms;
    cursor: pointer;
}

table tr .monto {
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5rem;
}

table tr .left {
    border-right: 1px dashed #D9D9D9;
    padding: 0.125rem 1rem 0.125rem 1.5rem;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.125rem;
}

    table tr .left .label {
        font-size: 0.75rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.125rem;
    }

    table tr .left .id {
        font-size: 0.75rem;
        font-style: normal;
        font-weight: 300;
        line-height: normal;
        color: #5A5A5A;
    }

table tr .rigth {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem;
}


@media (min-width: 576px) {
    #modalError .modal-body {
        padding: 2rem;
    }

    #modalError .modal-dialog {
        max-width: 27.5rem;
    }
}

@media (min-width: 768px) {
    .purchase h2 {
        font-size: 1.25rem;
    }


    .container-monto .container-detalle-pago .detalle-pago .accordion {
        font-size: 1rem;
    }

    .container-monto .container-pago-exitoso .codigo-reserva .title,
    .container-monto .container-pago-exitoso .codigo-reserva .title strong {
        font-size: 1rem;
    }

    table tr .title span {
        font-size: 1rem;
        font-weight: 500;
    }

    table tr .left,
    table tr .left .label,
    table tr .left .id {
        font-size: 0.875rem;
    }

    .dropdown-menu {
        padding: 1.5rem 1rem 1.5rem 1.5rem;
    }

        .dropdown-menu .dropdown-item {
            padding: 1rem;
        }

    .btn-form .btn-dark {
        padding: 0.75rem 2.5rem;
        border-radius: 6.25rem;
    }

    .container-alerta {
        background: #F2F2F2;
        flex-direction: row;
        gap: 2rem;
        padding: 1rem 3rem;
        align-items: center;
        border-radius: 0.5rem;
    }

    .alerta {
        background: none;
        padding: 0;
        gap: 2rem;
    }

        .alerta .alerta-texto p {
            margin-bottom: 0;
        }


    .container-form {
        padding: 3rem;
    }

        .container-form .invoiceDynamic-validation .form-group-label {
            font-size: 1.25rem;
        }

        .container-form .invoiceDynamic-validation .button-container {
            gap: 0.625rem;
        }

            .container-form .invoiceDynamic-validation .button-container .skip-button {
                padding: 0;
            }

            .container-form .invoiceDynamic-validation .button-container .continuar-button {
                padding: 0 0.75rem 0 0;
                order: 2;
            }

    .container-titulos {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

        .container-titulos h1 {
            font-size: 1.75rem;
        }

        .container-titulos p {
            font-size: 1rem;
        }

    .contenido-componente {
        gap: 1.5rem;
    }

    .header-mobile {
        display: none;
    }

    .header-desktop {
        display: flex;
        background: #FFF;
        margin-bottom: 2rem;
    }

        .header-desktop .container-header {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 1rem 0.75rem;
        }

            .header-desktop .container-header .container-logo-info {
                display: flex;
                gap: 1.9375rem;
            }

            .header-desktop .container-header .imagen {
                display: flex;
                align-items: center;
            }

            .header-desktop .container-header .info-vuelo {
                display: flex;
                flex-direction: column;
            }

                .header-desktop .container-header .info-vuelo .itinerary {
                    display: flex;
                    gap: 0.25rem;
                    font-size: 1.125rem;
                    font-style: normal;
                    font-weight: 700;
                    line-height: normal;
                }

                .header-desktop .container-header .info-vuelo .dates {
                    display: flex;
                    gap: 1.125rem;
                }

                    .header-desktop .container-header .info-vuelo .dates .dates-gap {
                        display: flex;
                        gap: 0.375rem;
                    }

                        .header-desktop .container-header .info-vuelo .dates .dates-gap span {
                            font-size: 1rem;
                            font-weight: 400;
                        }

            .header-desktop .container-header .progress-bar {
                align-items: center;
                gap: 0.75rem;
            }

                .header-desktop .container-header .progress-bar .texto span {
                    font-size: 1rem;
                    font-style: normal;
                    font-weight: 700;
                    line-height: normal;
                }

                .header-desktop .container-header .progress-bar .bar {
                    border-radius: 0.75rem;
                    background: #1EA93C;
                    width: 100%;
                    height: 0.5rem;
                    flex-shrink: 0;
                }

    .container-monto {
        flex-direction: row;
        padding: 2rem;
        gap: 0;
    }

        .container-monto .container-detalle-pago {
            padding-left: 2rem;
        }

        .container-monto .container-pago-exitoso {
            border-right: 1px solid #D9D9D9;
            padding-right: 2rem;
        }

            .container-monto .container-pago-exitoso .codigo-reserva {
                border-bottom: none;
            }

    #arrival {
        display: none;
    }
}


@media (max-width: 991px) {
    .header-desktop .container-header .info-vuelo {
        display: none;
    }
}

.form-control, .form-select {
    border-radius: 0.25rem;
    border: 1px solid #D9D9D9;
    padding: 0.375rem 2.25rem 0.375rem 1rem;
}

.form-floating {
    margin: 0;
}

    .form-floating > label {
        color: #5a5a5a;
        padding: 1rem 1.5rem;
    }

    .form-floating .form-text {
        color: #1b1b1b;
        padding-left: 1rem;
    }

    .form-floating > .form-control, .form-floating > .form-control-plaintext {
        padding: 1rem 1rem;
    }

.form-control:hover,
.form-select:hover,
.container-form .was-validated .form-control:valid:hover,
.container-form .was-validated .form-select:valid:not([multiple]):not([size]):hover,
.container-form .was-validated .form-control:valid:focus,
.container-form .was-validated .form-select:valid:not([multiple]):not([size]):focus,
.dropdown .dropdown-button-menu:hover,
.form-control:focus,
.form-select:focus {
    border: 1px solid #1EA93C;
    box-shadow: none;
}

.dropdown:focus,
.dropdown:focus-visible {
    border-radius: 0.25rem;
    border: 1px solid #1EA93C;
    box-shadow: none;
    outline: none;
}

.form-control.is-invalid, .was-validated .form-control:invalid,
.form-select.is-invalid, .was-validated .form-select:invalid {
    border-color: #FF1C46;
}


.invalid-feedback {
    color: #FF1C46;
    padding-left: 1rem;
    margin-top: 0.5rem;
}

select {
    overflow: hidden;
    text-overflow: ellipsis;
}