/*
    responsive.css
    Nou CSS pel disseny del chekin online.

    Created on : 17 jun. 2020, 13:57:01
    Autor      : Gabriel Marti (gmarti@interbits.net)
*/

:root {
    --color-texto-card-header: #1A5583;
    --color-texto-titulos-campos: #666666;      /* gris oscuro */
    --color-fondo-boton: #1A5583;               /* Azul logo DAP */
    --color-texto-boton: white;
    --color-fondo-datos-reserva: #dae0e0;       /* gris claro */
    --color-texto-datos-reserva: #1A5583;       /* azul */       
    --color-texto-campo-check: #cc0000;         /* rojo oscuro */
    --color-texto-placeholder: #1A5583;         /* azul */ 
}

.img-responsive {
    padding: 0.5em;
    text-align: center;
}

.img-dni {
    width: 30%;
    object-fit: cover;
}

.card {
    padding: 0px;
}

.card-header {
    font-weight: bold;
    color: var(--color-texto-card-header);
}

.cabecera-checkin {
    text-align: center; 
}

.datos-reserva {
    color: var(--color-texto-datos-reserva);
    background-color: var(--color-fondo-datos-reserva); 
}

label {
    font-weight: bold;
    color: var(--color-texto-titulos-campos);
}

.card-footer {
    text-align: center;
}

#BotonEnviar, #GuardaDatos {
    color: var(--color-texto-boton);
    background-color: var(--color-fondo-boton);
}

#logo_ {
    text-align: center;
}

input:invalid {
  border-color: hsla(0, 90%, 70%, 1);
}

input:valid {
  border-color: hsla(135, 100%, 40%, 1);
}

/* -+- datos cliente -+- */

.form-control::-webkit-input-placeholder { color: var(--color-texto-placeholder); }      /* WebKit, Blink, Edge */
.form-control:-moz-placeholder { color: var(--color-texto-placeholder); }                /* Mozilla Firefox 4 to 18 */
.form-control::-moz-placeholder { color: var(--color-texto-placeholder); }               /* Mozilla Firefox 19+ */
.form-control:-ms-input-placeholder { color: var(--color-texto-placeholder); }           /* Internet Explorer 10-11 */
.form-control::-ms-input-placeholder { color: var(--color-texto-placeholder); }          /* Microsoft Edge */
            

.campocheck {
    margin-left: 1.5em;
}

.labelcheck {
    color: var(--color-texto-campo-check);
}

@media screen and (max-width: 900px) {
    .ocultar-div{
        display:none;
    }
}

.blacktext {
    color: #736F6F;/*#000000;*/
    font-size: 12px;
    text-align: justify; 
}
.blacktextcenter {
    color: #736F6F;/*#000000;*/
    font-size: 12px;
    text-align: justify; 
}
.bluetext {	
    color: #00AEC7;
    font-weight: bold;
    font-size: 14px;
    text-align: left;

}
.bluetext3 {	
    color: #00AEC7;
    font-weight: bold;
    font-size: 10px;
    text-align: right; 
}
.blacktext3 {
    color: #000000;
    font-size: 10px;
    text-align: right; 
}

.whitetext {
    color: #dae0e0;
    font-size: 14px; 
}

.modal-body{
    height: 100px;
    width: 100%;
    overflow-y: auto;
    text-align:left;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/*
Full screen Modal 
*/
.fullscreen-modal .modal-dialog {
    margin: 0;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}
@media (min-width: 768px) {
    .fullscreen-modal .modal-dialog {
        width: 750px;
    }
}
@media (min-width: 992px) {
    .fullscreen-modal .modal-dialog {
        width: 970px;
    }
}
@media (min-width: 1200px) {
    .fullscreen-modal .modal-dialog {
        width: 1170px;
    }
}

body{
    overflow-x: hidden;
}


@media (min-width: 576px) {
    .modal-dialog { max-width: none; }
}

.modal-dialog {
    width: 98%;
    height: 92%;
    padding: 0;
}

.modal-content {
    height: 99%;
}



*, *.before, *:after {
    box-sizing:border-box;
}

body {
    font-family: Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif;
}

#Selector {
    width: 100px;
    margin: 0 auto;
}

.SubirFoto {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
    line-height: normal;
    font-size: 100%;
    margin: 0;
}

.SubirFoto + label {
    font-size: 1.2rem;
    font-weight: bold;
    color: black;
    display: inline-block;
    text-overflow: ellipsis;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    padding: 0.6rem 1.2rem;
    cursor: pointer;
}

.SubirFoto:focus + label,
.SubirFoto + label:hover {
    color: black;
    outline: 1px dotted #000;
    fill: black;
}

.SubirFoto + label figure {
    width: 45px;
    height: 45px;
    fill: #f1e5e6;
    border-radius: 50%;
    background-color: #428bca;
    display: block;
    padding: 5px;
    margin: 0 auto 10px;
}

.SubirFoto + label:hover figure {
    background: #5bc0de;
}

inputfile + label svg {
    vertical-align: middle;
    width: 45px;
    height: 45px;
    fill: #f1e5e6;
}

.texto {
    font-size : 12px;
    font-weight: bold;
}