:root { --color-ciel-pantone: #646464; --color-ciel-pantone-azul: #00AFB9; --color-ciel-pantone-grisLight: #c4c9cb; --color-ciel-pantone-verdeLight: #96c83c; }

#canvasSegmentacion { background: no-repeat center center fixed; background-size: cover; }

#imgMenufondoVirtual { width: 30px; height: 30px; position: absolute; right: 0; }

#btnDifuminarFondoVirtual, #btnImagenFondoVirtual, #btnRestablecerFondoVirtual { cursor: Pointer; border-radius: 5px; padding: 2px; }

    #btnDifuminarFondoVirtual:hover, #btnImagenFondoVirtual:hover, #btnRestablecerFondoVirtual:hover { background-color: lightgray; }

.btn-pophover { background-image: url(../Imagenes/btnMenuFondoVirtual.svg); background-repeat: no-repeat; }

#imag { background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: 100% 100%; }

html { font-size: 16px; background-color: white; min-height: 100%; padding: 15px 0; background: url(../Imagenes/fondo.svg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

#idContenedorCaptcha { display: flex; justify-content: center; margin-bottom: 1rem; margin-top: 1rem; }

input[type="email"] { text-transform: lowercase !important; }

body { background-color: transparent; padding-bottom: 100px; }

video { background: var(--color-ciel-pantone); }

video, #canvasSegmentacionMostrar { border-color: var(--color-ciel-pantone-grisLight); border: 1px solid; border-radius: 10px; width: 680px; }

label { color: var(--color-ciel-pantone); }

progress { width: 100%; height: 5px; margin-bottom: 5px; }

#loginBtn { color: white; }

.header { position: fixed; width: 100%; top: 0; border-bottom: 1px solid white !important; z-index: 1000; background-color: white; }

    .header > img { border-style: none; border-width: 0px; opacity: 1; padding-left: 15px; padding-bottom: 5px; padding-top: 5px; height: 65px; cursor: pointer; }

    .header > img { content: url('../Imagenes/logo.png'); }

    .header > span { color: var(--color-ciel-pantone); font-size: 1.8rem; padding: 15px; vertical-align: middle; white-space: nowrap; position: absolute; }

.contenedorMutes { display: flex; justify-content: center; position: absolute; z-index: 20; margin-top: -7rem; width: 100%; }

#muteVideo { /*  position: absolute;
    right: 0;
    margin-top: -156px;
    margin-right: 15px;
    display: block;*/ background-color: rgba(44, 44, 45, 0.6); border-width: 10px 20px 10px 10px; border-style: solid; border-radius: 3rem 0 0 3rem; border-color: rgba(44,44,45,0.0); width: 6rem; cursor: pointer; }

#muteAudio { /*position: absolute;
    right: 0;
    margin-top: -105px;
    margin-right: 15px;
    display: block;*/ background-color: rgba(44, 44, 45, 0.6); border-width: 10px 10px 10px 20px; border-style: solid; border-radius: 0 3rem 3rem 0; border-color: rgba(44,44,45,0.0); width: 6rem; cursor: pointer; }

#videoLocal, #canvasSegmentacionMostrar { width: 200px; height: 150px; position: absolute; right: 0px; }

#usarioConexion, #usarioRemoto { text-align: right; width: 100%; font-size: 0.8rem; }

#usarioConexion { padding-right: 20px; margin-bottom: 0; }

#usarioRemoto { padding-right: 5px; }

#videoEscaner { -moz-transform: rotate(270deg); -webkit-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); position: relative; }

#divContenedorCanvas { line-height: 0.5; border: 1px solid rgba(0,0,0,.3); padding: 2px; text-align: center; margin-top: 4px; }

#divMsjError { background-color: lightpink; width: 100%; color: red; display: none; font-size: 20px; }

#optgDisponibles { background-color: #96C241; }

#optgOcupados { background-color: #c43734; }

#divLoading, #divConectandoSignaling { position: relative; z-index: 2000; display: flex; justify-content: center; align-items: center; }

#divLoadingInterno { background-color: var(--color-ciel-pantone); position: fixed; z-index: 2000; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.9; filter: alpha(opacity=90); }

#divConectandoSignaling > p { background-color: var(--color-ciel-pantone); position: fixed; z-index: 2000; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.9; display: flex; justify-content: center; align-items: center; color: white; filter: alpha(opacity=90); font-size: 1.3rem; text-align: center; font-weight: bolder; }

#divConectandoSignaling > small { position: fixed; z-index: 2000; top: 10px; left: 0; height: 105%; width: 100%; opacity: 0.9; display: flex; justify-content: center; align-items: center; color: white; filter: alpha(opacity=90); font-size: 1.2rem; text-align: center; font-weight: bolder; }

progress[value] { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; height: 10px; }

    progress[value]::-webkit-progress-bar { background-color: var(--color-ciel-pantone-grisLight); border-radius: 4px; }

    progress[value]#sendProgress::-webkit-progress-value { border-radius: 4px; background-color: var(--color-ciel-pantone-verdeLight); }

    progress[value]#receiveProgress::-webkit-progress-value { border-radius: 4px; background-color: var(--color-ciel-pantone-azul); }

.divArchivoRecibido, .divArchivoEnviado { border-style: solid; border-width: 0 0 1px 0; border-color: rgba(0,0,0,.125); padding: 3px 0; }

.card-body-archivos > .row { margin-left: 0; margin-right: 0; }

.svgArchivos { height: 3rem; width: 3rem; cursor: pointer; }

.svgArchivosGrandes { cursor: pointer; }

.contenedorItemMenuArchivo { float: right !important; text-align: center; }

    .contenedorItemMenuArchivo > span { display: flex; justify-content: center; width: 4rem; }

.itemMenuEscaner { height: 3rem; }

.modalEscaner { text-align: center; }

.itemModalEscaner { height: 1.3rem; }

.imgModalUbicacionEscaner { height: 100%; }

.svgVerArchivos, .svgReenviarArchivos, .svgImprimirArchivos, .svgEliminarArchivos { height: 3rem; cursor: pointer; }

.lblprogress { font-size: 1.2rem; margin-bottom: 0; font-weight: 400; }

.call-page { padding-top: 45px; position: relative; display: block; margin: 0 auto; width: 640px; height: auto; }


.contenido-corto-centrado { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.bg-ciel-azul { background-color: var(--color-ciel-pantone-azul); }

.btnAzul { background-color: #00afb9; color: white; border-color: #00afb9; }

    .btnAzul:disabled { background-color: #769496; color: white; border-color: #00afb9; }

.btnAmarillo { background-color: #ffbe00; color: white; border-color: #ffbe00; }

.btnVerde { background-color: #a1c44d; color: white; border-color: #a1c44d; }

.btnRojo { background-color: #d9031d; color: white; border-color: #d9031d; }

    .btnRojo:disabled { background-color: #e26060; color: white; border-color: #d9031d; }

.container { margin-bottom: 0; }

.footer-box { padding-bottom: 3px; position: fixed; bottom: 0px; width: 100%; background-color: white; left: 0; z-index: 1040; }

.botonesFooter { height: 100%; width: 100%; }

.contenedorBotonesFooter { margin-top: 0.6rem; margin-bottom: 0.6rem; margin-right: 0.1rem; margin-left: 0.1rem; text-align: center; justify-content: center; }

#contenedorBtnFooter1 { display: none; }

#contenedorBtnFooter2 { }

#contenedorBtnFooter3 { display: none; }

#contenedorBtnFooter4 { display: none; }

.loader { background-color: #58B3F0; border: 16px solid #fab423; border-radius: 50%; border-top: 16px solid #95c83b; width: 120px; height: 120px; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; margin: auto; z-index: 2001; position: absolute; top: 50%; left: 50%; margin-left: -60px; margin-top: -60px; }

.recuadroEsperandoAtencion { /* border: 1px solid var(--color-ciel-pantone-grisLight);
    padding: 12px;
    margin: 10px;*/ justify-content: center; }

.contenedorIconoEsperandoAtencion { width: 100%; padding: 2.3rem 0 1.2rem 0; }

.iconoEsperandoAtencion { background-color: #58B3F0; border: 16px solid #95c83b; border-radius: 50%; border-top: 16px solid black; width: 100px; height: 100px; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite; margin: auto; }

.divlblTiempoAproximadoEspera { width: 100%; justify-content: center; }

#lblTiempoAproximadoEspera { font-size: 2.5rem; text-align: center; font-weight: 500; color: black; }

.divlblInfoTurno { margin-top: 1rem; }

#mensajeEsperandoAtencion { font-size: 2.5rem; line-height: 2.5rem; /*color:black;*/ font-weight: 500; }

#lblInfoTurno { font-size: 2rem; line-height: 1; vertical-align: bottom; padding-top: 6rem; font-weight: 500; }

#lblInfoTurnoNumero { font-size: 2.5rem; color: black; font-weight: 500; }

#lblSubtituloTiempoEspera { font-size: 1.2rem; }

#lblTituloTiempoEspera { font-size: 1.8rem; }

.divMensajeBtnCacTurAutogestion { line-height: 1; }

#btnCancelarTurnoAutoGestion { height: 2.5rem; }

.divlblTituloTiempoEspera, .divlblSubtituloTiempoEspera { justify-content: center; width: 100%; }

#rowloginBtn { margin-top: 1rem; }

.inputfile { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }

    .inputfile + label { font-size: 0.9rem; font-weight: 300; font-style: italic; display: inline-block; }

.capturaDemo { height: 152px; width: 114px; border: 1px solid var(--color-ciel-pantone); margin: 1px; }

.noty_message { padding: 6px !important; }

.noty_text { font-size: 1.3rem; }

.cursor-pointer { cursor: pointer; }

#btnCancelarEscaneo { float: right; }


.btnValidarCliente { height: 2.5rem; background: url(../Imagenes/iconoBuscar.svg) no-repeat center; margin-left: 0.3rem; }

.rowValidacion { margin-left: 0; }

.validacion { border-color: lightgray; }

.validacionFallo { border-color: red !important; }

#btnCancelarCliente { border: none; height: 2.5rem; background: url('../Imagenes/btnCancelar.svg') no-repeat top left; }

.recortarTextosLargos { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding-top: 1.1rem; font-size: 1.5rem; }

#lblTituloInicial { color: #00afb9; font-size: 5.4rem; }

#lblSubtituloInicial { animation: rotateWordsFirst 10s linear infinite 0s; color: var(--color-ciel-pantone); margin-top: -20px; }

#contenedorVideoScanner { padding-top: 5px; }

#mInfoAdi { z-index: 3000; }

#mensajeFinLlamada { color: var(--color-ciel-pantone); }

.contenedorEsperandoAtencion { position: relative; top: 6rem; color: var(--color-ciel-pantone); margin-bottom: 10rem; padding-left: 1.5rem; padding-right: 1.5rem; }

.contenedorFinLlamada { position: relative; top: 12rem; color: var(--color-ciel-pantone); }

.contenedorCampos { position: relative; top: 3rem; text-align: center; line-height: 1; padding-bottom: 70px; color: var(--color-ciel-pantone); }

.controlesCampos { text-align: left; }

.filaCampo { margin: 2px; font-size: 1.2rem; margin-bottom: 5px; }

    .filaCampo > input { text-transform: capitalize; }

    .filaCampo > span { text-align: left; margin-right: 0px; }

.divTituloCampo { margin-bottom: 3rem; }

.tituloCampos { margin: 2px; font-size: 1.8rem; font-weight: 500; text-align: center; }

.grupoBtnCampos { margin-top: 50px; margin-bottom: 60px; }

    .grupoBtnCampos img { height: 3rem; }

.divBtnCancelarClietne { text-align: right; }

.divBtnContinuarCliente { text-align: left; }

.circulo { width: 15px; height: 15px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; float: right; border: 1px solid #d9d9d9; margin: 0 auto; -webkit-animation-name: cambiarOpacidad; animation-name: cambiarOpacidad; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }

.col-centradas { position: fixed; float: none; margin: 0 auto; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.borde-rojo { border-color: red; }

.borde-negro { border-color: black; }

.borde-grisclaro { border-color: lightgray; }

.borde-amarillo { border-color: #fab423; }

.borde-verde { border-color: #3ed30c; }

.borde-azulclaro { border-color: lightblue; }

.fondo-rojo { background-color: red; }

.fondo-negro { background-color: black; }

.fondo-grisclaro { background-color: lightgray; }

.fondo-amarillo { background-color: #fab423; }

.fondo-verde { background-color: #3ed30c; }

.fondo-azulclaro { background-color: lightblue; }

.card-body { padding: 0.25rem; }

.card-header-titulo:first-child { text-align: center; }

.card-header:first-child { font-size: 1.5rem; font-weight: bold; border-bottom: 1px solid rgba(0,0,0,.3); }

.card-archivos { border: 0; }

    .card-archivos .col-xs-12 { padding-left: 0; padding-right: 0; padding-top: 1px; }

.card-header-archivos { background-color: white; font-weight: bold; }

.card-body-archivos > div { margin-top: 0.5rem; margin-bottom: 0.5rem; }

#divPolitica { padding: 2px; }

#contenedorPoliticaDatos { margin-top: 1.5rem; display: flex !important; flex-direction: column-reverse; align-items: center; }

#ckPoliticaDatos { width: 1rem; height: 1rem; vertical-align: text-bottom; cursor: pointer; }

#lblCkPoliticaDatos { font-size: 1rem; cursor: pointer; }

.politicaDatosAceptar { margin-top: 1.5rem; }

#titIniEscan, #titInfoAdi, #lblInfoDocEscaneado { text-align: center !important; width: 100% !important; }

.instructivoEscaner { width: 100%; background: none; border: none; }

.divMensajeBtnCacTurAutogestion { display: none; }

.modal-footer { justify-content: space-around; }

.modal-header > h5 { font-size: 1.5rem; }

.modal-body { font-size: 1.3rem; text-align: center; }

.modal-bodyRecomendaciones { font-size: 1.3rem; text-align: justify; }

.modal-advertencia { background-color: red; }

.btnEditarCliente { height: 2.5rem; background: url(../Imagenes/btnEditar.svg) no-repeat center; margin-left: 45%; margin-top: 15px; }

.lista-datos { background: #00AFB914; border-radius: 12px; padding: 22px 26px; max-width: 600px; margin: auto; margin-top: 20px; }

.fila-dato { display: flex; justify-content: space-between; align-items: center; padding: 10px 4px; }

    .fila-dato + .fila-dato { margin-top: 12px; }

    .fila-dato span:first-child { font-weight: 600; color: #2B2B2B; letter-spacing: 0.2px; }

    .fila-dato span:last-child { color: #1A1A1A; }

    .fila-dato:hover { background: #00AFB922; border-radius: 6px; transition: background 0.2s ease; }

@-webkit-keyframes cambiarColor {
    0% { background-color: #fab423; }

    100% { background-color: #3ed30c; }
}

@keyframes cambiarColor {
    0% { background-color: #fab423; }

    100% { background-color: #3ed30c; }
}

@-webkit-keyframes cambiarOpacidad {
    0% { opacity: 0.3; }

    100% { opacity: 1; }
}

@keyframes cambiarColor {
    0% { opacity: 0.3; }

    100% { opacity: 1; }
}
/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }

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

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

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

@keyframes rotateWordsFirst {
    0% { opacity: 0; animation-timing-function: ease-in; height: 0px; }

    8% { opacity: 0; height: 100px; }

    19% { opacity: 1; height: 100px; }

    25% { opacity: 1; height: 100px; }

    100% { opacity: 1; height: 100px; }
}

.animacionFondo { -webkit-animation-name: kfRecibirArchivo; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */ -webkit-animation-iteration-count: 3; /* Safari 4.0 - 8.0 */ animation-name: kfRecibirArchivo; animation-duration: 2s; animation-iteration-count: 3; border-radius: 2rem; }

/* Safari 4.0 - 8.0 */
@-webkit-keyframes kfRecibirArchivo {
    0% { background-color: #a1c44e; left: 20px; top: 0px; }

    50% { background-color: #6bacb7; left: 0px; top: 0px; }

    100% { background-color: white; left: 0px; top: 0px; }
}

/* Standard syntax */
@keyframes kfRecibirArchivo {

    0% { background-color: #a1c44e; left: 20px; top: 0px; }

    50% { background-color: #6bacb7; left: 0px; top: 0px; }

    100% { background-color: white; left: 0px; top: 0px; }
}

@media (min-width: 250px) and (max-width: 400px) {
    .call-page { position: relative; display: block; margin: 0 auto; width: 280px; /*height: 210px;*/ }

    #videoRemoto { width: 280px; height: 210px; }

    #videoLocal, #canvasSegmentacionMostrar { width: 80px; height: 60px; }

    #videoEscaner { width: 200px; height: 150px; top: 26px; margin-left: -25px; }

    #contenedorVideoScanner { width: 150px; height: 200px; margin-bottom: 57px; }

    .capturaDemo { height: 108px; width: 81px; border: 1px solid var(--color-ciel-pantone); margin: 1px; }

    #btnCancelarEscaneo { float: left; margin-right: 4px; }

    .col-xs-12, .col-xs-7, .col-xs-5 { padding-left: 0; padding-right: 0; padding-top: 0.2rem }

    #lblTituloInicial { font-size: 4.2rem; }

    #lblSubtituloInicial { }

    .noty_message { padding: 2px !important; }

    .noty_text { font-size: 1rem; }

    .card-body { padding: 0.1rem; }

    .itemMenuEscaner { height: 2.5rem; }

    .contenedorEsperandoAtencion { top: 3rem; margin-bottom: 3rem; }

    .contenedorIconoEsperandoAtencion { padding: 1px; }

    #lblTituloTiempoEspera { font-size: 1.1rem; line-height: 1; }

    #lblSubtituloTiempoEspera { font-size: 0.9rem; line-height: 1; }

    #mensajeEsperandoAtencion { font-size: 1.5rem; line-height: 1.5rem; }

    #lblTiempoAproximadoEspera { font-size: 1.7rem; }

    #lblInfoTurnoNumero { font-size: 1.7rem; }

    #lblInfoTurno { font-size: 1.5rem; }

    .iconoEsperandoAtencion { width: 80px; height: 80px; }
}

@media (min-width: 401px) and (max-width: 575.98px) {
    .call-page { position: relative; display: block; margin: 0 auto; width: 360px; /*height: 270px;*/ }

    #videoRemoto { width: 360px; height: 270px; }

    #videoLocal, #canvasSegmentacionMostrar { width: 80px; height: 60px; }

    #videoEscaner { width: 280px; height: 210px; top: 36px; margin-left: -34px; }

    #contenedorVideoScanner { width: 210px; height: 280px; margin-bottom: 35px; }

    .capturaDemo { height: 144px; width: 108px; border: 1px solid var(--color-ciel-pantone); margin: 1px; }

    #btnCancelarEscaneo { float: left; margin-right: 4px; }

    .col-xs-12, .col-xs-7, .col-xs-5 { padding-left: 0; padding-right: 0; padding-top: 0.2rem }

    .noty_message { padding: 3px !important; }

    .noty_text { font-size: 1.1rem; }

    html { font-size: 14px; }

    .itemMenuEscaner { height: 2.5rem; }

    .contenedorEsperandoAtencion { top: 3rem; margin-bottom: 6rem; }

    .contenedorIconoEsperandoAtencion { padding: 1px; }

    #lblTituloTiempoEspera { font-size: 1.6rem; line-height: 1; }

    #lblSubtituloTiempoEspera { font-size: 1.2rem; line-height: 1; }

    #mensajeEsperandoAtencion { font-size: 2rem; line-height: 2rem; }

    #lblTiempoAproximadoEspera { font-size: 3rem; }

    #lblInfoTurnoNumero { font-size: 3rem; }

    #lblInfoTurno { font-size: 1.7rem; }

    .iconoEsperandoAtencion { width: 85px; height: 85px; }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .col-xs-12, .col-xs-7, .col-xs-5 { padding-left: 0; padding-right: 0; padding-top: 0.2rem }

    @media (max-height: 768.98px) {
        .call-page { position: relative; display: block; margin: 0 auto; width: 680px; }

        #videoRemoto { width: 680px; height: 510px; }

        #videoLocal, #canvasSegmentacionMostrar { width: 120px; height: 90px; }

        #videoEscaner { width: 340px; height: 255px; top: 43px; margin-left: -46px; }

        #contenedorVideoScanner { width: 255px; height: 340px; margin-bottom: 35px; }

        .contenedorEsperandoAtencion { top: 4rem; margin-bottom: 6rem; }

        .contenedorIconoEsperandoAtencion { padding: 5px; }

        #lblTituloTiempoEspera { font-size: 1.6rem; line-height: 1; }

        #lblSubtituloTiempoEspera { font-size: 1.2rem; line-height: 1; }

        #mensajeEsperandoAtencion { font-size: 2rem; line-height: 2rem; }

        #lblTiempoAproximadoEspera { font-size: 3rem; }

        #lblInfoTurnoNumero { font-size: 3rem; }

        #lblInfoTurno { font-size: 1.7rem; }

        .iconoEsperandoAtencion { width: 90px; height: 90px; }
    }

    @media (min-height: 769px) {
        .call-page { position: relative; display: block; margin: 0 auto; width: 480px; /*height: 360px;*/ }

        #videoRemoto { width: 480px; height: 360px; }

        #videoLocal, #canvasSegmentacionMostrar { width: 120px; height: 90px; }

        #videoEscaner { width: 280px; height: 210px; top: 56px; margin-left: -40px; }

        #contenedorVideoScanner { width: 210px; height: 280px; margin-bottom: 35px; }

        .col-xs-12, .col-xs-7, .col-xs-5 { padding-left: 0; padding-right: 0; padding-top: 0.2rem }

        html { font-size: 15px; }

        .contenedorEsperandoAtencion { top: 6rem; margin-bottom: 6rem; }

        .contenedorIconoEsperandoAtencion { padding: 1px; }

        #lblTituloTiempoEspera { font-size: 1.6rem; line-height: 1; }

        #lblSubtituloTiempoEspera { font-size: 1.2rem; line-height: 1; }

        #mensajeEsperandoAtencion { font-size: 2rem; line-height: 2rem; }

        #lblTiempoAproximadoEspera { font-size: 3rem; }

        #lblInfoTurnoNumero { font-size: 3rem; }

        #lblInfoTurno { font-size: 1.7rem; }

        .iconoEsperandoAtencion { width: 80px; height: 80px; }
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .rowValidacion { margin-left: -15px; }

    .tituloCampos { font-size: 1.8rem; }

    .filaCampo { font-size: 1.5rem; }

    .contenedorCampos { top: 12rem; }

    .col-xs-12, .col-xs-7, .col-xs-5 { padding-top: 0.2rem }

    @media (max-height: 768.98px) {
        .call-page { position: relative; display: block; margin: 0 auto; width: 680px; }

        #videoRemoto { width: 680px; height: 510px; }

        #videoLocal, #canvasSegmentacionMostrar { width: 120px; height: 90px; }

        #videoEscaner { width: 340px; height: 255px; top: 43px; margin-left: -46px; }

        #contenedorVideoScanner { width: 255px; height: 340px; margin-bottom: 35px; }

        .contenedorEsperandoAtencion { top: 4rem; margin-bottom: 6rem; }

        #lblTituloTiempoEspera { font-size: 1.6rem; line-height: 1; }

        #lblSubtituloTiempoEspera { font-size: 1.2rem; line-height: 1; }

        #mensajeEsperandoAtencion { font-size: 2rem; line-height: 2rem; }

        #lblTiempoAproximadoEspera { font-size: 3rem; }

        #lblInfoTurnoNumero { font-size: 3rem; }

        #lblInfoTurno { font-size: 1.7rem; }

        .iconoEsperandoAtencion { width: 90px; height: 90px; }
    }

    @media (min-height: 769px) {
        .call-page { position: relative; display: block; margin: 0 auto; width: 560px; /*height: 420px;*/ }

        #videoRemoto { width: 560px; height: 420px; }

        #videoLocal, #canvasSegmentacionMostrar { width: 120px; height: 90px; }

        #videoEscaner { width: 340px; height: 255px; top: 43px; margin-left: -46px; }

        #contenedorVideoScanner { width: 255px; height: 340px; margin-bottom: 35px; }

        .noty_message { padding: 5px !important; }

        .noty_text { font-size: 1.2rem; }

        .contenedorEsperandoAtencion { top: 7rem; margin-bottom: 14rem; }

        #lblTituloTiempoEspera { font-size: 2.5rem; line-height: 1; }

        #lblSubtituloTiempoEspera { font-size: 1.5rem; line-height: 1; }

        #mensajeEsperandoAtencion { font-size: 3rem; line-height: 3rem; }

        #lblTiempoAproximadoEspera { font-size: 4rem; }

        #lblInfoTurnoNumero { font-size: 4rem; }

        #lblInfoTurno { font-size: 2.5rem; }

        .iconoEsperandoAtencion { width: 100px; height: 100px; }

        #btnCancelarTurnoAutoGestion, #btnSolicitarVA { height: 3.7rem; font-size: 1.6rem; }
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .rowValidacion { margin-left: -15px; }

    .divlblInfoTurno { margin-top: 10rem; }

    .tituloCampos { font-size: 1.8rem; }

    .filaCampo { font-size: 1.5rem; }

    .contenedorCampos { top: 23rem; }

    @media (max-height: 768.98px) {
        .call-page { position: relative; display: block; margin: 0 auto; width: 680px; }

        #videoRemoto { width: 680px; height: 510px; }

        #videoLocal, #canvasSegmentacionMostrar { width: 120px; height: 90px; }

        #videoEscaner { width: 340px; height: 255px; top: 43px; margin-left: -46px; }

        #contenedorVideoScanner { width: 255px; height: 340px; margin-bottom: 35px; }

        .contenedorEsperandoAtencion { top: 3rem; margin-bottom: 6rem; }

        #lblTituloTiempoEspera { font-size: 1.6rem; line-height: 1; }

        #lblSubtituloTiempoEspera { font-size: 1.2rem; line-height: 1; }

        #mensajeEsperandoAtencion { font-size: 2rem; line-height: 2rem; }

        #lblTiempoAproximadoEspera { font-size: 3rem; }

        #lblInfoTurnoNumero { font-size: 3rem; }

        #lblInfoTurno { font-size: 1.7rem; }

        .iconoEsperandoAtencion { width: 90px; height: 90px; }
    }

    @media (min-height: 769px) and (max-height: 1080.98px) {
        .call-page { position: relative; display: block; margin: 0 auto; width: 720px; }

        #videoRemoto { width: 720px; height: 540px; }

        #videoLocal, #canvasSegmentacionMostrar { width: 200px; height: 150px; }

        #videoEscaner { width: 440px; height: 330px; top: 55px; margin-left: -60px; }

        #contenedorVideoScanner { height: 440px; width: 330px; margin-bottom: 35px; }

        .contenedorEsperandoAtencion { top: 7rem; margin-bottom: 11rem; }

        #lblTituloTiempoEspera { font-size: 1.6rem; line-height: 1; }

        #lblSubtituloTiempoEspera { font-size: 1.2rem; line-height: 1; }

        #mensajeEsperandoAtencion { font-size: 2rem; line-height: 2rem; }

        #lblTiempoAproximadoEspera { font-size: 3rem; }

        #lblInfoTurnoNumero { font-size: 3rem; }

        #lblInfoTurno { font-size: 1.7rem; }

        .iconoEsperandoAtencion { width: 100px; height: 100px; }

        #lblTituloTiempoEspera { font-size: 2.5rem; line-height: 1; }

        #lblSubtituloTiempoEspera { font-size: 1.5rem; line-height: 1; }

        #mensajeEsperandoAtencion { font-size: 3rem; line-height: 3rem; }

        #lblTiempoAproximadoEspera { font-size: 4rem; }

        #lblInfoTurnoNumero { font-size: 4rem; }

        #lblInfoTurno { font-size: 2.5rem; }

        .iconoEsperandoAtencion { width: 100px; height: 100px; }

        #btnCancelarTurnoAutoGestion, #btnSolicitarVA { height: 3.7rem; font-size: 1.6rem; }
    }

    @media (min-height: 1081px) {
        .contenedorCampos { top: 36rem; }

        .call-page { position: relative; display: block; margin: 0 auto; width: 760px; }

        #videoRemoto { width: 760px; height: 570px; }

        #videoLocal, #canvasSegmentacionMostrar { width: 200px; height: 150px; }

        #videoEscaner { width: 440px; height: 330px; top: 60px; margin-left: -60px; padding: 2px; }

        #contenedorVideoScanner { height: 440px; width: 330px; margin-bottom: 35px; }

        .contenedorEsperandoAtencion { top: 18rem; margin-bottom: 22rem; }

        #lblTituloTiempoEspera { font-size: 3rem; line-height: 1; }

        #lblSubtituloTiempoEspera { font-size: 1.8rem; line-height: 1.3; }

        #mensajeEsperandoAtencion { font-size: 3.5rem; line-height: 3rem; }

        #lblTiempoAproximadoEspera { font-size: 5rem; }

        #lblInfoTurnoNumero { font-size: 5rem; }

        #lblInfoTurno { font-size: 3.5rem; }

        .iconoEsperandoAtencion { width: 120px; height: 120px; }

        #btnCancelarTurnoAutoGestion, #btnSolicitarVA { height: 5rem; font-size: 2rem; }

        .divMensajeBtnCacTurAutogestion { font-size: 2rem; }
    }
}

@media (min-width: 1200px) {
    .rowValidacion { margin-left: -15px; }

    .divlblInfoTurno { margin-top: 5rem; }

    .tituloCampos { font-size: 1.8rem; }

    .filaCampo { font-size: 1.5rem; }

    .contenedorCampos { top: 9rem; }

    @media (max-height: 768.98px) {
        .divlblInfoTurno { margin-top: 1rem; }

        .call-page { position: relative; display: block; margin: 0 auto; width: 680px; }

        #videoRemoto { width: 680px; height: 510px; }

        #videoLocal, #canvasSegmentacionMostrar { width: 200px; height: 150px; }

        #videoEscaner { width: 400px; height: 300px; top: 50px; margin-left: -51px; }

        #contenedorVideoScanner { height: 400px; width: 300px; margin-bottom: 35px; }

        .contenedorEsperandoAtencion { top: 3rem; margin-bottom: 9rem; }

        #lblTituloTiempoEspera { font-size: 1.6rem; line-height: 1; }

        #lblSubtituloTiempoEspera { font-size: 1.2rem; line-height: 1; }

        #mensajeEsperandoAtencion { font-size: 2rem; line-height: 2rem; }

        #lblTiempoAproximadoEspera { font-size: 2.5rem; }

        #lblInfoTurnoNumero { font-size: 2.5rem; }

        #lblInfoTurno { font-size: 1.7rem; }

        .iconoEsperandoAtencion { width: 80px; height: 80px; }
    }

    @media (min-height: 769px) and (max-height: 1080.98px) {
        .call-page { position: relative; display: block; margin: 0 auto; width: 880px; }

        #videoRemoto { width: 880px; height: 660px; }

        #videoLocal, #canvasSegmentacionMostrar { width: 240px; height: 180px; }

        #videoEscaner { width: 480px; height: 360px; top: 60px; margin-left: -60px; }

        #contenedorVideoScanner { height: 480px; width: 360px; margin-bottom: 35px; }

        html { font-size: 17px; }
    }

    @media (min-height: 1081px) {
        .call-page { position: relative; display: block; margin: 0 auto; width: 920px; }

        #videoRemoto { width: 920px; height: 690px; }

        #videoLocal, #canvasSegmentacionMostrar { width: 280px; height: 210px; }

        #videoEscaner { width: 440px; height: 330px; top: 60px; margin-left: -60px; }

        #contenedorVideoScanner { height: 440px; width: 330px; margin-bottom: 35px; }

        html { font-size: 18px; }

        .contenedorEsperandoAtencion { top: 27rem; margin-bottom: 30rem; }

        #lblTituloTiempoEspera { font-size: 3.5rem; line-height: 3; }

        #lblSubtituloTiempoEspera { font-size: 2rem; line-height: 1; }

        #mensajeEsperandoAtencion { font-size: 4rem; line-height: 4rem; }

        #lblTiempoAproximadoEspera { font-size: 5rem; }

        #lblInfoTurnoNumero { font-size: 5rem; }

        #lblInfoTurno { font-size: 3.5rem; }

        .iconoEsperandoAtencion { width: 120px; height: 120px; }

        #btnCancelarTurnoAutoGestion, #btnSolicitarVA { height: 5rem; font-size: 2rem; }

        .divMensajeBtnCacTurAutogestion { font-size: 2rem; }
    }
}