body {
    padding: 15px;
}

.poblacion, .alojamiento, .cantidad {
    width: 100% !important;
}

.alojamiento:disabled, .alojamiento:read-only {
    background: #d5d5d5;
}

.fecha {
    width: 100px !important;
}

container-iframe {
    background: red;
}

.container p, .container label {
    margin: 2px 0 0 0;
}

.precio_linea {
    font-size: 1.2em;
    float: left;
    margin: 5px 0 0 0 !important;
    width: 100%;
    line-height: 1;
}

.precio_linea small {
    font-size: 0.8em;
}

.total_precio {
    font-size: 1.7em;
    width: 100%;
}

.descuento {
    margin-top: 0 !important;
    width: 100%;
}

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

.datos_personales {
    min-height: 41px;
}

.datos_personales input {
    color: #222;
}

input[type="checkbox"] {
    margin-top: 0px;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px;
    height: 100%;
    background: #ddd;
    z-index: 101;
    opacity: 0.4;
    display: none;
}

.div_datos_personales {
    display: none;
}

.has-icon {
    position: relative;
}

.has-icon input {
    padding-left: 30px !important;
}

.has-icon img {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    height: 16px;
    z-index: 10;
    pointer-events: none;
    filter: invert(27%) sepia(21%) saturate(2258%) hue-rotate(176deg) brightness(54%) contrast(89%);
}

.input-icon {
    background-repeat: no-repeat !important;
    background-position: 8px center !important;
    padding-left: 30px !important;
}

.ui-dialog {
    z-index: 999;
}

#codigo_descuento {
    color: #333;
}

footer {
    position: fixed;
    bottom: 10px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 400px; /* Need a specific value to work */
}

#cargando {
    position: absolute;
    display: none;
    z-index: 99999;
    margin-top: 300px;
    margin-left: 50%;
}

#cargando_texto {
    font-size: 1.6em;
    font-weight: bold;
    color: white;
}

.round_this {
    color: #fff;
    width: 500px;
    padding: 10px;
    text-align: center;
    background-color: black;
    margin-left: -250px;
    border-radius: 10px;
}

.video_ayuda {
    padding: 4px;
}

.video_ayuda:hover {
    cursor: pointer;
}

.linea-video {
    display: flex;
    align-items: center;
    margin: 10px 0;
    font-weight: bold;
    color: #265078;
}

.linea-video img {
    width: 30px;
}

.boton_eliminar {
    width: 30px;
}

.ui-autocomplete {
    max-height: 300px !important;
    overflow-y: auto; /* prevent horizontal scrollbar */
    overflow-x: hidden; /* add padding to account for vertical scrollbar */
    z-index: 1000 !important;
}

.idioma {
    cursor: pointer;
}

.poblacion_autocomplete{
    width: 100% !important;
}

.text-info{
    width: 100%;
    display: block;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: normal; /* Asegura que no se corte por carácter */
}

.text-info * {
    max-width: 100%;
    box-sizing: border-box;
    white-space: pre-wrap; /* Para que el texto en <pre> se adapte */
    word-break: normal;
}

.text-info img {
    height: auto;
}

@media screen and (max-width: 800px) {
    body {
        max-width: 800px;
    }

    .imagen_logo {
        width: 80%;
    }

    h1 {
        font-size: 1.4em;
        margin: 5px 0 5px 0;
    }

    .icono_motor_desplegado, .icono_motor_plegado {
        display: none;
    }

    .col-xs-12 {
        margin-bottom: 10px;
    }

    #tabla_reserva {
        margin-top: 15px;
    }

    #tabla_reserva tr th img {
        width: 35%;
    }

    #tabla_reserva tr {
        background: transparent !important;
    }

    #tabla_reserva td {
        display: block;
        padding: 0;
        width: 100%;
        border: none;
    }

    #tabla_reserva th {
        display: none;
    }

    #tabla_reserva td div.form-group {
        margin-bottom: 5px;
    }

    #tabla_reserva td input.fecha {
        background: url('images/calendario.png') no-repeat;
        background-size: 10%;
        background-position: 96%;
        width: 200px !important;
    }

    #tabla_reserva tr td:nth-child(1) {
        position: absolute;
        width: 40px;
    }

    #tabla_reserva tr td:nth-child(2) {
        margin-left: 40px;
        width: 90%;
    }

    #tabla_reserva tr td:nth-child(7) {
        border-bottom: 2px solid #ccc;
        margin-top: 40px;
        margin-bottom: 20px;
    }

    #tabla_reserva td input.alojamiento {
        background: url('images/origen.png') no-repeat;
        background-size: 2.5%;
        background-position: 96.5%;
    }

    #tabla_reserva td select.cantidad {
        background: url('images/mochila.png') no-repeat;
        background-size: 5%;
        background-position: 98%;
    }

    .ui-datepicker-multi .ui-datepicker-group {
        float: none;
        width: 100%;
    }

    .ui-datepicker-multi {
        width: 70% !important;
    }

    .textwidget {
        display: none;
    }

    .vertical-center {
        display: block;
    }

    #boton_reservar {
        width: 100%;
    }

    .pago_reserva p{
        text-align: left;
    }
}