.inputAndLabel span,
input {
    display: inline-block;
    vertical-align: middle;
    /* Adjusts vertical alignment */
    margin-right: 10px;
    /* Adjust spacing as necessary */
}

.inputAndLabel input {
    width: fit-content !important;
}

.inputAndLabel2 {
    display: flex;
    align-items: center;
    /* Centers the items vertically */
}

.inputAndLabel2>.pLocation {
    margin-right: 10px;
    vertical-align: middle;
}

.showFormularios {
    display: flex !important;
    flex-direction: column;
}

.hideFormularios {
    display: none !important;
}

.showDateTimeViaje {
    display: block !important;
}

.hideDateTimeViaje {
    display: none !important;
}

.hiddenList {
    z-index: 9999999;
    position: absolute;
    background-color: whitesmoke;
    width: 30%;
    list-style-type: none;
}

.hiddenInput {
    background: url('data:image/svg+xml;utf8,<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M7,10L12,15L17,10H7Z" /></svg>') no-repeat right 10px center;
    background-size: 20px;
    width: 400px;
}

.customAppearance {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url('data:image/svg+xml;utf8,<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M7,10L12,15L17,10H7Z" /></svg>') no-repeat right 10px center;
    background-size: 20px;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    /* Set the width as needed */
}

/* Style the list items */

.liCustom {
    list-style: none;
    padding: 10px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    margin: 5px;
    z-index: 999999;
    cursor: pointer;
}

/* Apply styles when hovering over the list items */

.liCustom:hover {
    background-color: #a0a0a0;
    color: white;
    /* Change text color on hover if desired */
    cursor: pointer;
    /* Change cursor to pointer on hover */
}

main {
    display: flex !important;
    flex-direction: column;
}

[id^="languages"] {
    position: relative;
    right: 0;
    display: flex;
    list-style: none;
    flex-direction: column;
    align-self: flex-end;
    justify-content: flex-end;
    width: 33%;
    margin-right: 0 !important;
    margin-block-end: 0 !important;
}

@media (max-width: 768px) {
    [id^="languages"] {
        width: 68%;
        margin: 0 !important;
        font-size: 0.8rem;
    }
}

[id^="languages"] li {
    text-align: center;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    width: fit-content;
    cursor: pointer;
    border: 1px solid #e2e2e2;
    width: 100%;
}

[id^="languages"] li:first-child i {
    margin-left: auto;
}

[id^="languages"] li:last-child {
    padding-right: 0;
}

[id^="languages"] li img {
    width: 20px;
    margin-right: 10px;
}

[id^="languages"] li span {
    font-weight: 700;
}

.languageContainer {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    width: auto;
    margin-bottom: 20px;
    margin-right: 10px;
}

.languageView {
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    right: 0;
    top: 100%;
}

.active_form_gl {
    background-color: blue !important;
    font-size: 20px !important;
}

.custom_input_form_gl_request {
    width: 25% !important;
    position: absolute !important;
}

.custom_margin_buttom_form_gl_request {
    margin-top: -105px !important;
    justify-content: center !important;
}

.input-wrapper {
    display: flex;
    /* Use flexbox to lay out children inline */
    align-items: center;
    /* Align items vertically in the center */
}

#ampm {
    padding: 5px;
    border-radius: 5px;
    margin-top: 10px;
}

.inputForm,
#ampm {
    margin-right: 5px;
    /* Adds some space between the input and the span */
}

.inputForm,
#rampm {
    margin-right: 5px;
    /* Adds some space between the input and the span */
}

#rampm {
    padding: 5px;
    border-radius: 5px;
    margin-top: 10px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.gl-spinner {
    display: inline-block;
    border: 4px solid rgba(255, 255, 255, 0.3);
    /* Light grey */
    border-top: 4px solid #3498db;
    /* Blue */
    border-radius: 50%;
    width: 12px;
    height: 12px;
    animation: spin 2s linear infinite;
}

.custom_link_resumen_gl {
    margin: 0 10px;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.custom_container_link_resumen {
    display: flex;
    align-items: center;
}

.error-input {
    border-color: red !important;
    background: rgb(253 0 0 / 10%) !important;
    color: red !important;
}

.disabled-car {
    /*background: linear-gradient( 135deg, transparent calc(50% - 1px), red 50%, transparent calc(50% + 1px));*/
    background-color: #d3d3d3 !important;
}

/*Dynamic Boxes*/

.caja_dinamica_servicio {
    width: 50%;
    margin: -10px 0px -20px 10px;
    padding-bottom: 15px;
    padding-top: 10px;
}

.texto_servicio {
    margin: 50px;
}

#hiddenList {
    width: auto;
    margin-left: 16% !important;
    margin-right: 2% !important;
}

.pAbsolute_servicio {
    position: relative !important;
    width: 50% !important;
    text-align: left !important;
    font-size: 0.95rem !important;
    bottom: 0 !important;
}

@media (max-width: 768px) {
    .pAbsolute_servicio {
        position: relative !important;
        width: 100% !important;
        text-align: center !important;
        font-size: 0.95rem !important;
        bottom: 0 !important;
    }

    .sg-text {
        display: inline-block;
        /* Permite que el botón se ajuste al contenido */
        max-width: 100%;
        /* Limita el ancho máximo del botón al contenedor padre */
        word-wrap: break-word;
        /* Permite el salto de línea dentro de palabras si es necesario */
        white-space: normal;
        /* Permite que el texto ocupe más de una línea */
    }

    .sg-one-word {
        display: inline-block;
        word-break: break-word;
        /* Permite romper las palabras y hacer saltos de línea */
        white-space: normal;
        /* Permite saltos de línea normales */
        text-align: center;
        /* Centrar el texto */
        padding: 10px 20px;
        /* Espacio interior alrededor del texto */
        box-sizing: border-box;
        /* Incluye el padding y borde dentro del ancho total */
    }

    .sg-down-title {
        margin-top: 19%;
    }
}

/* Ajustes para que se vean bien input de fecha y hora del form inicial */
/* WebKit-specific styles */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .inputForm {
        -webkit-appearance: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .input-wrapper {
        display: -webkit-flex;
        /* Use webkit flexbox for older versions */
        align-items: center;
    }

    .popupDetails img {
        -webkit-user-select: none;
        /* Prevent image selection */
        user-select: none;
    }
}

/* General responsive adjustments */
@media (max-width: 600px) {
    .contentDate {
        display: flex;
        flex-direction: column;
    }

    .formDate {
        width: 100%;
    }

    .inputForm {
        width: calc(100% - 10px);
    }

    #rstartingtime {
        transform: translateY(-18%);
    }
}

@media (max-width: 576px) {
    .input-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .inputForm {
        width: 100%;
        margin-bottom: 10px;
    }

    #ampm {
        margin-right: 0;
        width: 100%;
        margin-bottom: 10px;
    }

    .d-flexform {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 10px;
    }

    .labelFormInfDate,
    .labelFormInfTime {
        width: 100%;
    }
}

.contentFlex_servicio {
    display: flex;
    flex-flow: wrap;
    width: 100%;
    justify-content: start;
}

.sg-up {
    margin-bottom: -15%;
}

@media (max-width: 360px) {
    .custom_link_resumen_gl {
        margin: 0 5px;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
}