/* keypad-popup */
.show-keypad .keypad-popup { opacity: 1 !important; height: auto !important; display: block !important; top: 50% !important; left: 100% !important; background: #fff; border-radius: 5px; text-align: center; min-width: 220px; position: absolute !important; margin: 0 0 0 10px !important; padding: 18px 12px 12px !important; -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); transform: translate(0, -50%); border: solid 1px #f1f1f1; }
.show-keypad .keypad-popup:before, .show-keypad .keypad-popup:after { top: 50%; right: 100%; margin: -10px 0 0; content: ''; border-width: 10px 10px 10px 0; position: absolute; border-color: transparent; border-style: solid dashed; border-right-color: #fff; }
.show-keypad .keypad-popup:before { z-index: 2; }
.show-keypad .keypad-popup:after { z-index: 1; margin: -12px 0 0; border-right-color: #f1f1f1; border-width: 12px 12px 12px 0; }
.show-keypad .keypad-popup.position-top { top: 100% !important; left: 50% !important; margin: 10px 0 0 !important; -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }
.show-keypad .keypad-popup.position-top:after, .show-keypad .keypad-popup.position-top:before { left: 50%; top: auto; right: auto; bottom: 100%; margin: 0 0 0 -10px; border: dashed solid; border-width: 0 10px 10px; border-color: transparent transparent #fff; }
.show-keypad .keypad-popup.position-top:after { margin: 0 0 0 -12px; border-width: 0 12px 12px; border-color: transparent transparent #f1f1f1; }
.keypad-popup .btn { padding: 5px; display: inline-block; vertical-align: top; width: 50px; height: 50px; min-width: inherit; margin: 0 5px 10px; }
.keypad-popup .btn + .btn { margin: 0 5px 10px; }
.keypad-popup .btn.keypad-clear { font-size: 13px; line-height: 1.38462; }
.keypad-popup .btn.keypad-back { font-size: 0; line-height: 0; }
.keypad-popup .btn.keypad-back:before { content: "\e974"; font: 13px/1 'cholder4' !important; }
.keypad-popup .btn.keypad-close { margin: 0; border: 0; border-radius: 0; width: auto; height: auto; }
.keypad-popup .btn.keypad-close:before { content: "\e909"; margin: 0 10px 0 0; font: 59%/1 'cholder4' !important; font-weight: bold !important; }
.keypad-popup .btn.keypad-close:hover, .form .keypad-popup .btn.keypad-close:focus, .form .keypad-popup .btn.keypad-close:active, .form .keypad-popup .btn.keypad-close:active:focus { color: #aaa; background: #fff; }
.keypad-popup .btn.keypad-close { font-size: 13px !important; margin-top: 10px !important; }

.keypad-row { margin-left: -10px; margin-right: -10px; font-size: 1rem; }
.keypad-popup .btn { border: 0; font-weight: 500; }
.keypad-popup .btn.keypad-close { background-color: transparent; font-size: 14px; }
.keypad-popup .btn.keypad-close:before { font-size: 60%; vertical-align: middle; }

@media (max-width: 991px) {
.show-keypad .keypad-popup { padding: 10px !important; min-width: 155px; width: 155px !important; top: 100% !important; left: 50% !important; margin: 10px 0 0 !important; -ms-transform: translate(-50%, 0) !important; -webkit-transform: translate(-50%, 0) !important; transform: translate(-50%, 0) !important; }
.show-keypad .keypad-popup:before, .show-keypad .keypad-popup:after { top: auto; bottom: 100%; right: auto; margin: 0 0 0 -12px; border-width: 0 12px 12px; border-color: transparent transparent #f1f1f1; }
.show-keypad .keypad-popup:before { border-bottom-color: #fff; border-width: 0 10px 10px; margin: 0 0 0 -10px; }
.keypad-popup .btn { width: 34px; height: 34px; }
.keypad-popup .btn.keypad-clear { font-size: 10px; }
.keypad-popup .btn.keypad-back:before { font-size: 12px !important; }
[aria-describedby=additionalauthdialog] #additionalauthdialog .show-keypad.keypad-top .keypad-popup {left:0 !important; }

}
@media (max-width: 767px){
	main#main .show-keypad .keypad-popup,
        #chverificationform .show-keypad .keypad-popup{
		padding:15px 10px 10px !important;
		top: auto !important;
		bottom: 0;
		position: fixed !important;
		width: auto !important;
		left: 0 !important;
		right: 0 !important;
		transform: none !important;
		-webkit-box-shadow: 0px -10px 20px -5px rgba(0,0,0,0.2);
		-moz-box-shadow: 0px -10px 20px -5px rgba(0,0,0,0.2);
		box-shadow: 0px -10px 20px -5px rgba(0,0,0,0.2);
	}
	.keypad-popup .keypad-row .btn-light{ width: 30% !important; border: 1px solid #ebeff4 !important;}
	.show-keypad .keypad-popup:before, .show-keypad .keypad-popup:after{ display:none;}
	.form .keypad-popup .btn.keypad-close{ border:0 !important;}
}

@media (max-width: 767px) and (orientation: landscape){
	main#main .show-keypad .keypad-popup,
        #chverificationform .show-keypad .keypad-popup{
		padding:10px 10px 10px !important;
		height: 45% !important;
	}
	.keypad-popup .keypad-row .btn-light{ height:auto;}
	.form .keypad-popup .btn{padding:0; margin: 0 5px 5px;}
	.form .keypad-popup .btn + .btn{ margin: 0 5px 5px;}
	.form .keypad-popup .btn.keypad-clear , .form .keypad-popup .btn.keypad-back { height:22px;}
	.form .keypad-popup .btn.keypad-close{ margin-top:3px !important}
}

@media (max-width: 579px) {
      [aria-describedby=additionalauthdialog] #additionalauthdialog .show-keypad.keypad-top .keypad-popup {bottom: 0 !important;}
}