/* ---------------------------- ESTILOS DE TECLADO ---------------------------- */
/* 
    Created on : 25-abr-2017, 17:40:22
    Author     : jmanso
*/

/* #numericPad { */
.numericPadFormClass {
    font-size: .85em !important;
    display: block !important;
    margin: auto !important;
}

.numericPad {
    max-height: 100vw;
    max-width: 75vh;
}
    
.teclado {
    background: transparent;
    box-shadow: 0 0px 0px rgba(0,0,0,0);
    border: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content:center;
    align-items: center;
}

/* Márgenes negativo para agrandar el teclado */
.container-fluid.row {
    margin-left: -30px;
    margin-right: -35px;/* Para dar sensación de igualdad con respecto al lado izquierdo */
}

/* Estilos generales de los botones de teclado*/
.numericPad .teclado_btn {
    touch-action: manipulation;
    color: #FFFFFF;
    box-sizing: border-box;
    border: 2px solid transparent; /* para que tenga en cuenta el tamaño del borde */
}
.numericPad .teclado_btn.square {
    position:relative;
    overflow:hidden;
    padding-bottom:100%;
    margin: 5px 0;
}
.numericPad .teclado_btn.square div {
    position:absolute;
    width: 100%;
    height: 100%;
    text-align: center;
}

/* Estilos de los botones con borde en estado normal.*/
.numericPad .teclado_btn.border {
    border-width: 2px;
    border-style: solid;
    border-color: #FFF;
    border-radius: 100%;
}
.numericPad .teclado_btn.border.borderTrans {
    border-color: transparent;
}

/* Estilo de los botones de numero al ser presionados */
.numericPad .teclado_btn.active,
.numericPad .teclado_btn.active{
    background: #D4D4D4;
}

/* Logo dentro de numericPad */
/* .numericPad #numericPad_logo { */
.numericPad .numericPad_logo {
    width: 70%;
    height: auto;
    margin-top: 3vh;
}

/* Estilo del campo de recogida de digitos*/
/* .numericPad #passwordInScreen{ */
.numericPad .passwordInScreen{
    width: 100%;
    
    text-align: center;
    background: transparent;
    color: #d4d4d4;
    
    height: 9vw;
    font-size: 7vw;
    margin-top: 0;
    border: none;
}

/* Estilos del selector de incidencias */
#incidence,
.insertPINCodeTextDiv {
    /* Estilos de flecha - select */
    background: transparent;
    background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
    background-size: 5px 5px, 5px 5px, 1px 1.5em;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* -------------- */
    /* background: transparent; */
    color: #FFFFFF;
    height: 10vw;
    width: 100%;
    text-align: center;
    text-align-last: center;
    border-radius: 3em;
    border: 2px white solid;
    margin-bottom: 5%;
    font-family: OpenSans-Regular;
    /*background-color: rgba(0, 164, 220,.4);*/
    color: #fff;
    font-size: 5vw;
}

#incidence option,#incidence optgroup {
    text-align: left;
}
   
/* Color de fondo del texto del select, cambiado el fondo del texto cambias el del desplegable) */
optgroup, .option{
    color: #000;
    background-color: #fff;
    font-size: 0.7em;
}

.numericPad .col-xs-3.col-sm-3, .numericPad .col-xs-6.col-sm-6 {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Estilos propios del teclado de opciones */
div#authTitleDiv {
    color: #ff9c18;
    margin-top: 1em;
}
span.autTitle {
    font-size: 4vw;
}

div#modalPadOptionsDialog.modalPadDialog {
    margin-top: 0px;
}

form#numericPadOptions .numericPad .passwordInScreen {
    color: #ff9c18;
}

.insertPINCodeTextDiv {
    padding-top: 1.6%;
    background-image: none;
    color: #ff9c18;
    border-color: #ff9c18;
}

form#numericPadOptions .teclado_btn.square.border.numero {
    border-color: #ff9c18;
}
form#numericPadOptions .numericPad .teclado_btn {
    color: #ff9c18;
}
form#numericPadOptions .teclado_btn.disabled {
    color: #ff9c184d;
}
/*
 PARA CENTAR EL DIALOGO VERTICALMENTE EN LA VENTANA
*/
/*
.modal#modalPad {
  text-align: center;
  padding: 0!important;
}

.modal#modalPad:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-dialog#modalPadDialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}
*/
/*
 FIN PARA CENTAR EL DIALOGO VERTICALMENTE EN LA VENTANA
*/

@media screen and (orientation: portrait) {
    /* #modalPadDialog {*/
    .modalPadDialog {
	margin-top: 5vh;
    }
    span.autTitle {
        font-size: 4vw;
    }
    
    div#modalPadOptionsDialog.modalPadDialog {
	margin-top: 0vh;
    }
     
    /* Botones en general*/
    .numericPad .teclado_btn {
	font-size: 11vw;
    }
    .numericPad .teclado_btn.square div {
    	padding: Calc(50% - 7.5vw) 0;
    }
    
    /* Botones de retroceso y borrado */
    .numericPad .teclado_btn.especial.clear > div > i, 
    .numericPad .teclado_btn.especial.cancel > div > i {
        font-size: 9vw;
    }
    /* Boton done */
    .numericPad .teclado_btn.especial.done > div > i {
        font-size: 11vw;
    }
    .numericPad .teclado_btn.square div.simbol {
        padding: calc(50% - 8.2vw) 0;
    }
    
    /* .numericPad #passwordInScreen{ */
    .numericPad .passwordInScreen{
        height: 13vw;
        font-size: 11vw;
    }
    
    #incidence,
    .insertPINCodeTextDiv {
        height: 10vw;
        font-size: 5vw;
    }
}

@media screen and (orientation: landscape) {
    /* Botones en general*/
    .numericPad .teclado_btn {
	font-size: 9vh;
    }
    .numericPad .teclado_btn.square div {
	margin-top: -2vh;
    	padding: Calc(50% - 4.1vh) 0;
    }
    
    /* Botones de retroceso y borrado */
    .numericPad .teclado_btn.especial.clear > div > i, 
    .numericPad .teclado_btn.especial.cancel > div > i {
        font-size: 7vh;
    }
    
    /* Botones done */
    .numericPad .teclado_btn.especial.done > div > i {
        font-size: 9vh;
    }
    .numericPad .teclado_btn.square div.simbol {
        padding: calc(50% - 4.7vh) 0;
    }
    
    /* .numericPad #passwordInScreen{ */
    .numericPad .passwordInScreen{
        height: 10vh;
        font-size: 8vh;
    }
    
    #incidence,
    .insertPINCodeTextDiv {
	height: 10vh;
	font-size: 5vh;
    }
    
    span.autTitle {
        font-size: 4vh;
    }

}
@media screen and (min-width: 301px) and (orientation: portrait){
    .numericPad .col-xs-3.col-sm-3, .numericPad .col-xs-6.col-sm-6 {
	padding-left: 4px !important;
	padding-right: 4px !important;
    }
}
@media screen and (min-width: 480px) and (orientation: portrait){
    .numericPad .col-xs-3.col-sm-3, .numericPad .col-xs-6.col-sm-6 {
	padding-left: 12px !important;
	padding-right: 12px !important;
    }
}
@media screen and (min-width: 601px) and (orientation: portrait){
    .numericPad .col-xs-3.col-sm-3, .numericPad .col-xs-6.col-sm-6 {
	padding-left: 15px !important;
	padding-right: 15px !important;
    }
}
@media screen and (min-width: 992px) and (orientation: portrait){
    /*#modalPadDialog {*/
    .modalPadDialog {
	margin-top: 2vh;
    }
}
@media screen and (min-width: 1200px) and (orientation: portrait){
    /*#modalPadDialog {*/
    .modalPadDialog {
	margin: 10px;
    }
}
@media screen and (max-width: 300px) and (orientation: portrait)  {
    .numericPad .col-xs-3.col-sm-3, .numericPad .col-xs-6.col-sm-6 {
	padding-left: 2px !important;
	padding-right: 2px !important;
    }
}
@media (max-height: 469px) and (orientation: landscape) {
    .numericPad .col-xs-3.col-sm-3, .numericPad .col-xs-6.col-sm-6 {
	padding-left: 6px !important;
	padding-right: 6px !important;
    }
    
    /* Botones en general*/
    .numericPad .teclado_btn {
	font-size: 9vh;
    }
    .numericPad .teclado_btn.square div {
	margin-top: -2vh;
    	padding: Calc(50% - 4vh) 0;
    }
    
    /* Botones de retroceso y borrado */
    .numericPad .teclado_btn.especial.clear > div > i, 
    .numericPad .teclado_btn.especial.cancel > div > i {
        font-size: 7vh;
    }
    
    /* Botones done */
    .numericPad .teclado_btn.especial.done > div > i {
        font-size: 9vh;
    }
    .numericPad .teclado_btn.square div.simbol {
        padding: calc(50% - 4.8vh) 0;
    }
    
    /*.numericPad #passwordInScreen{*/
    .numericPad .passwordInScreen{
        height: 9vh;
        font-size: 7vh;
    }
    
    /*#modalPadDialog {*/
    .modalPadDialog {
	margin-top: 0;
    }
    .numericPad {
	max-height: 100vw;
	max-width: 65vh;
    }
}
/*
@media screen and (max-width: 550px) {
    span.autTitle {
        font-size: 1.3em;
    }
}
@media screen and (max-width: 350px) {
    span.autTitle {
        font-size: .9em;
    }
}
 */