* {
    box-sizing: border-box;
}

footer {
    text-align: left;
}

#ctipoLectura,
#cintroducionDNI{
    width: 20px;
    height: 20px;
}

#ltipoLectura,
#lintroducionDNI{
    padding-left: 5px;
}

#mp1 {
    text-align: center;
    font-size: 35px;
    padding-top: 10px;
    padding-bottom: 10px;
    height: 60px;
    display: flex;
    justify-content: space-between;
    display: none;
}

/*#idSele{
    display: none;
    margin-top: 10px;
}*/

#seleccionCamara{
    background-color: tomato;
}

html,
body {
    margin: 0px;
    padding: 0px;
}


#logo {
    height: 40px;
}
#imginok {
    width: 270px;
    height: 196px;
}
#botonesCabezera {
    text-align: left;
    width: 50%;
}

.logojanto {
    width: 50%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    display: none;
}

.logojanto svg {
    height: 50px;
    fill: #fff;
}

#botones {
    background-color: transparent;
    display: flex;
}

#botones button {
    background-color: #03575c;
    padding: 10px;
    color: #ffffff;
    border: none;
    font-size: 17px;
    text-decoration: none;
    flex-grow: 1;
}

#botones #qrimg,
#botones #eleccionTipo,
#botones #webcamimg {
    display: none;
}

#botones button svg {
    max-height: 40px;
    fill: #fff;
}

button#logojanto {
    background-color: #40a19e;
    pointer-events: none;
}

body {
    text-align: center;
    background-color: #f1f1f1;
}

#qr-canvas,#canvas3 {
    display: none;
}
#canvasVideo,#canvasDni,#drecargarRecibo {
    display: none;
}
#dni-canvas{
    width: 200px;
    height: 75px;
    margin:auto;
    border: solid;
}
#imgDni
{
    border: solid;
    margin: auto;
}

#iFicheros{
    opacity: 0;
    width: 200px;
}

.liFicheros
{
    font-size: 17px;
    width: 200px;
    padding: 10px 5px;
    height: 60px;
    background-color: #03575c;
    color: white;
    border-radius: 100px;
    margin-left: auto;
    margin-right: auto;
}

#recargarRecibo
{
    font-size: 17px;
    border-style: groove;
    width: 200px;
    padding: 10px 5px;
    height: 60px;
    background-color:  #03575c;
    color: white;
    border-radius: 100px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    margin-top: 10px;
}

#capturarDNI
{
    font-size: 17px;
    border-style: groove;
    width: 90%;
    padding: 10px 5px;
    height: 60px;
    background-color:  #03575c;
    color: white;
    border-radius: 100px;
    border: none;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    margin-top: 10px;
}
#v {
    width: 200px;
    height: 200px;
}

#qrfile {
    width: 200px;
    height: 200px;
}

#outdiv {
    width: 205px;
    height: 205px;
    border: solid;
    /*border-width: 3px 3px 3px 3px;*/
    margin: auto;
    display: none;
    margin-top: 10px;
}


#result {
    /*border: solid;
    border-width: 1px 1px 1px 1px;*/
    padding: 5px;
    width: 94%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5px;
    margin-top: 5px;
    /*border-radius: 10px;*/
    font-size: 16px;
    font-family: sans-serif;
    /*border-radius: 10px;*/
}

#result:empty {
    display: none;
}

#resultado svg {
    max-height: 100px;
}

button:disabled,
button[disabled] {
    opacity: 0.5;
}

select {
    padding: 10px;
    width: 320px;
    height: 40px;
    margin-bottom: 1em;
    border-radius: 10px;
}

#imghelp {
    left: 0px;
    top: -160px;
    z-index: 100;
    font: 16px sans-serif;
    background: #f0f0f0;
    margin-left: 3px;
    margin-right: 7px;
    padding-top: 10px;
    padding-bottom: 10px;
    /*border-radius: 20px;*/
}
#imgocr {
    width: 200px;
    height: 200px;
    display: none;
}

.capa_main {
    z-index: 2;
    border: 0px solid #000;
    text-align: center;
    position: relative;
    background-color: white;
    height: auto;
    top: 0px;
    width: 100%;
    left: 0px;
    margin-left: 0px;
    text-align: center;
    background-color: transparent;
    padding: 15px;
}

#operando2 {
    font-size: 17px;
    border-style: groove;
    width: 90%;
    padding: 5px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    border-radius: 5px;
}

#numDNI,#numDNInum,.numTipoBono,#numPasaporte,#tIdentificacion,#numImp {
    font-size: 17px;
    border-style: groove;
    width: 90%;
    padding: 5px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    border-radius: 5px;
}
#resetCamara,#bcancelar,#bicManual,#bsalir,#bicCamara,#bfichero {
    font-size: 17px;
    border-style: groove;
    width: 90%;
    padding: 10px 5px;
    height: 40px;
    background-color:  #03575c;
    color: white;
    border-radius: 100px;
    border: none;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    margin-top: 10px;
}
#brfichero
{
    font-size: 17px;
    border-style: groove;
    width: 200px;
    padding: 10px 5px;
    height: 60px;
    background-color:  #03575c;
    color: white;
    border-radius: 100px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    margin-top: 10px;
}
#resetCache2,#cancelar,#icManual,#salir,#icCamara,#fichero,#rfichero{
    background-color: #f1f1f1;
    padding: 5px;
}

#dOperando2,
#dnumDNI {
    background-color: #f1f1f1 ;
    display: none;
}

#tipoAcceso {
    display: table-column;
    font-size: 17px;
    border-style: groove;
    width: 100%;
    padding: 0px;
    margin: 0px;
    font-size: 1em;
    line-height: 1.3;
    font-family: sans-serif;
    background-clip: padding-box;
    border-width: 0px;
    background-color: #f1f1f1;
    padding-bottom: 5px;
    display: none;
}
#tipoLectura2,
#introducionDNI2{
    background-color: white;
    padding: 5px;
}
#introducionDNI2{
    display: none;
}
#tipoLectura,
#introducionDNI
{
    font-size: 17px;
    border-style: groove;
    width: 100%;
    padding: 0px;
    margin: 0px;
    font-size: 1em;
    line-height: 1.3;
    font-family: sans-serif;
    background-clip: padding-box;
    border-width: 0px;
    background-color: #f1f1f1;
    padding-bottom: 5px; 
    display: none;   
}

#resetCache,#cancelar,#icManual,#salir,#icCamara,#fichero,#rfichero{
    display: none;
}

#flegend {
    display: block;
    text-align: center;
    margin-bottom: 0.4em;
}

.radioTipo {
    display: inline-block;
    vertical-align: middle;
    border-radius: inherit;
    width: 100%;
    display: flex;
    justify-content: space-around;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.15);
    -o-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.15);
    -m-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.15);
}

.radioTipoE {
    float: left;
    clear: none;
    border-radius: 0px;
    margin: 0px;
    background-color: #ffffff;
    font-size: 10px;
    width: 33%;
    color: #464646;
    border-right: 1px solid #d4d4d4;
    color: #8f8f8f;
}

.radioTipoE input {
    position: absolute;
    margin: 5px 0px 0px -17px;
    z-index: 1;
}


.radioI {
    background-color: #ffffff;
    margin: 0px;
    text-align: center;
    white-space: normal;
    z-index: 2;
    display: block;
    padding: 0.7em 0.7em;
    position: relative;
    text-overflow: ellipsis;
    cursor: pointer;
    overflow: hidden;
    user-select: none;
    font-family: sans-serif;
    font-size: 10px;
    color: #8f8f8f;
}

.radioC {
    background-color: #ffffff;
    text-align: center;
    white-space: normal;
    z-index: 2;
    display: block;
    padding: 0.7em 0.7em;
    position: relative;
    text-overflow: ellipsis;
    cursor: pointer;
    overflow: hidden;
    user-select: none;
    font-family: sans-serif;
    font-size: 10px;
    color: #8f8f8f;
}

.radioD {
    background-color: #ffffff;
    margin: 0px;
    text-align: center;
    white-space: normal;
    z-index: 2;
    display: block;
    padding: 0.7em 0.7em;
    position: relative;
    text-overflow: ellipsis;
    cursor: pointer;
    overflow: hidden;
    user-select: none;
    font-family: sans-serif;
    font-size: 10px;
    color: #8f8f8f;
}

.radioTipoE input:checked + label {
    color: #172c34;
    fill: #172c34;
}

.radioTipoE input:checked + label svg {
    fill: #172c34;
}

#igual {
    font-size: 17px;
    border-style: groove;
    width: 90%;
    padding: 10px 5px;
    height: 60px;
    background-color:  #03575c;
    color: white;
    border-radius: 100px;
    border: none;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    margin-top: 10px;
}

#digual{
    background-color:#f1f1f1;
}

#contenedor {
    width: 100%;
    font-size: 16px;
    font-family: sans-serif;
    padding: 20px;
    margin: 10px 0px;
}

#mensajeNOK,
#mensajeOKE,
#mensajeOKS,
#mensajeNOKB {
    font-size: 1.5em;
    margin-bottom: 20px;
    padding: 5px;
    padding-bottom: 10px;
    font-weight: bold;

}


#infoCodigo,
#infoTerminal,
#importeCanjeado,
#MaxImporteCanje,
#MaxTicketsCanje,
#NumTicketsCanjeados,
#infoSesion,
#infoConcesion,
#infoEntrada,
#infoConcesion,
#infoOperacion,
#infoFechaCompra,
#infoZona,
#infoButaca,
#infoSituacion,
#infoCodigoProcedencia,
#infoValorFacial {
    text-align: left;
    padding-bottom: 10px;
}

.labelBono {
    text-align: center;
    padding-bottom: 0px;
    padding-top: 10px;
}

#infoValorFacial,
#nombrePagador {
    text-align: left;
    font-weight: bold;
    font-size: 25px;
}

#infoValorFacial{
    padding-top: 10px;
    margin-top: 10px;
    margin-bottom: 3px;
    font-size: 50px;
}

/*#infoValorFacial b{
    display: none;
}*/

#nombrePagador {
        display: flex;
    flex-direction: column;
}

#nombrePagador b{
    font-size: 16px;
}

#infoValorFacial i, #nombrePagador i{
    display: inline-block;
    width: 15px;
        margin-right: 5px;
}

#infoValorFacial i {
    width: 40px;
}

#infoValorFacial i svg, #nombrePagador i svg{
    width: 100%;
    height: auto;
}

#nombrePagador{
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid;
    margin-top: 3px;
}

#infoError {
    margin-bottom: 15px;
    text-align: left;
    display: none;
}

#tableinfo tbody {
    overflow: auto;
}

#dinamicForm {
    display: none;
}

select#seleccionCamara{
    width: 100%;
    border-radius: 0px;
}

#formulario {
    background-color: #f1f1f1;
    
}

.iconito {
    display: flex;
    justify-content: center;
}

.iconito svg {
    height: 40px;
    width: 40px;
    fill: #8f8f8f;
}

#datosOperacion {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    
}



#infoTerminal{
    padding-bottom: 10px;
}

#infoCodigo{
    padding-top: 15px;
}

/*** VERDE - OK - ENTRAR  ***/

.verde {
    background-color: #85d29c;
    color: #275e46;
}

.verde .estados-icono {
    fill: #275e46;
}


.verde #datosOperacion,
.verde #infoCodigo,
.verde #infoTerminal,
.verde #importeCanjeado,
.verde #MaxImporteCanje,
.verde #MaxTicketsCanje,
.verde #NumTicketsCanjeados,
.verde #infoSesion,
.verde #infoConcesion,
.verde #infoEntrada,
.verde #infoConcesion,
.verde #infoOperacion,
.verde #infoFechaCompra,
.verde #infoZona,
.verde #infoButaca,
.verde #infoSituacion,
.verde #infoCodigoProcedencia,
.verde #infoValorFacial {
    background-color: #b0e9c2;
}



/*** AZUL - OK - SALIR  ***/

.azul {
    background-color: #8dcbe7;
    color: #295468;
}

.azul .estados-icono {
    fill: #295468;
}


.azul #datosOperacion,
.azul #infoCodigo,
.azul #infoTerminal,
.azul #importeCanjeado,
.azul #MaxImporteCanje,
.azul #MaxTicketsCanje,
.azul #NumTicketsCanjeados,
.azul #infoSesion,
.azul #infoConcesion,
.azul #infoEntrada,
.azul #infoConcesion,
.azul #infoOperacion,
.azul #infoFechaCompra,
.azul #infoZona,
.azul #infoButaca,
.azul #infoSituacion,
.azul #infoCodigoProcedencia,
.azul #infoValorFacial {
    background-color: #afdbee;
}

/*** BLANCO - Consulta  ***/

.blanco {
    background-color: white;
    color: #3e3e3e;
}

/*** ROJO - ERROR - Ya usado  ***/

.rojo {
    background-color: #e95377;
    color: #570e20;
}


.rojo .estados-icono {
    fill: #8d1834;
}

.rojo #datosOperacion,
.rojo #infoCodigo,
.rojo #infoTerminal,
.rojo #importeCanjeado,
.rojo #MaxImporteCanje,
.rojo #MaxTicketsCanje,
.rojo #NumTicketsCanjeados,
.rojo #infoSesion,
.rojo #infoConcesion,
.rojo #infoEntrada,
.rojo #infoConcesion,
.rojo #infoOperacion,
.rojo #infoFechaCompra,
.rojo #infoZona,
.rojo #infoButaca,
.rojo #infoSituacion,
.rojo #infoCodigoProcedencia,
.rojo #infoValorFacial {
    background-color: #ec6d8b;
}

/*** NEGRO - INTERROGACIÓN - Otra zona / No existe  ***/

.negro {
    background-color: #2b2b2b;
    color: white;
}

.negro .estados-icono {
    fill: #ffffff;
}

.negro #datosOperacion,
.negro #infoCodigo,
.negro #infoTerminal,
.negro #importeCanjeado,
.negro #MaxImporteCanje,
.negro #MaxTicketsCanje,
.negro #NumTicketsCanjeados,
.negro #infoSesion,
.negro #infoConcesion,
.negro #infoEntrada,
.negro #infoConcesion,
.negro #infoOperacion,
.negro #infoFechaCompra,
.negro #infoZona,
.negro #infoButaca,
.negro #infoSituacion,
.negro #infoCodigoProcedencia,
.negro #infoValorFacial {
    background-color: #3e3e3e;
}

/*** MORADO - ERROR - REIMPRESO ***/
.morado {
    background-color: #ab7cab;
    color: #482348;
}


.morado .estados-icono {
    fill: #482348;
}

.morado #datosOperacion,
.morado #infoCodigo,
.morado #infoTerminal,
.morado #importeCanjeado,
.morado #MaxImporteCanje,
.morado #MaxTicketsCanje,
.morado #NumTicketsCanjeados,
.morado #infoSesion,
.morado #infoConcesion,
.morado #infoEntrada,
.morado #infoConcesion,
.morado #infoOperacion,
.morado #infoFechaCompra,
.morado #infoZona,
.morado #infoButaca,
.morado #infoSituacion,
.morado #infoCodigoProcedencia,
.morado #infoValorFacial {
    background-color: #b890b8;
}

/*** GRIS ***/


.gris {
    background-color: #6f6f6f;
    color: white;
}

.gris .estados-icono {
    fill: #c1c1c1;
}

.gris #datosOperacion,
.gris #infoCodigo,
.gris #infoTerminal,
.gris #importeCanjeado,
.gris #MaxImporteCanje,
.gris #MaxTicketsCanje,
.gris #NumTicketsCanjeados,
.gris #infoSesion,
.gris #infoConcesion,
.gris #infoEntrada,
.gris #infoConcesion,
.gris #infoOperacion,
.gris #infoFechaCompra,
.gris #infoZona,
.gris #infoButaca,
.gris #infoSituacion,
.gris #infoCodigoProcedencia,
.gris #infoValorFacial {
    background-color: #a2a2a2;
}

/**/

.estados-icono {
    padding: 20px 0px 10px 0px;
}

#infoDiario th {
    font-weight: normal;
}

#infoDiario tr:first-of-type {
    height: 80px;
}

/*** Diario de usos ***/
#infoDiario caption{
    text-align: left;
        border-top: 1px solid;
    margin-top: 10px;
    padding-top: 10px;
    font-weight: bold;
    margin-bottom: 10px;
}

#botonMasInformacion button {
    font-size: 18px;
    background-color: #172c34;
    color: #ffffff;
    border: none;
    border-radius: 100px;
    padding: 10px 25px;
    margin-top: 5px;
}

.estados-icono svg {
    max-height: 100px;
}

@media screen and (min-width: 800px) {

    #header,
    #mainbody,
    #main,
    footer,
    #canvasVideo,
    #result,
    #canvasDni {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (max-width: 500px) {
    #infoValorFacial i{
        display: none;
    }
    #imginok {
        width: 270px;
        height: 196px;
    }

}
@media screen and (max-width: 450px) {
    #infoValorFacial{
        font-size: 42px;
    }
    #imginok {
        width: 270px;
        height: 196px;
    }
}
@media screen and (max-width: 405px) {
    #infoValorFacial{
        font-size: 38px;
    }
}
@media screen and (max-width: 370px) {
    #infoValorFacial{
        font-size: 35px;
    }
}