/* keyboard - jQuery UI Widget */
.ui-keyboard {
    padding: .3em;
    z-index: 16000;
    border: 1px solid #dedcdc !important;
    -webkit-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.65);
    -moz-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.65);
    box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.65);
    background: #dedcdc;
    font-size: initial !important;
    top: 0px !important;
    left: 0px !important;
    text-align: center;
}
.ui-keyboard-has-focus { z-index: 16001; }
.ui-keyboard div { font-size: 1.1em; }
.ui-keyboard-button {
    min-height: 1.8em;
    width: 4em;
    min-width: 1em;
    margin: 0.1em;
    cursor: pointer;
    overflow: hidden;
    line-height: 2em;
    -moz-user-focus: ignore;
    font-size: 1.3em !important;
    transform: scale(1);
    transition: all 250ms ease-in-out;
    border: 1px solid #bbb !important;
    background: #FFF !important;
    color: #191919 !important;
    border-radius: 0.2em !important;
    box-shadow: 0px 0px 1px 1px rgba(100,100,100,0.15);
    
}
.ui-keyboard-button span { padding: 0; margin: 0; white-space:nowrap; display: inline-block; }
.ui-keyboard-button-endrow { clear: left; }
.ui-keyboard-widekey { min-width: 3.6em; width: auto; }
.ui-keyboard-widekey i.fa-long-arrow-left { font-size: 1.6em; }
.ui-keyboard-space { min-width: 16em; /* height: 3em; */ }
.ui-keyboard-space span, .ui-keyboard-empty span { font: 0/0 a; text-shadow: none; color: transparent; } /* see http://nicolasgallagher.com/another-css-image-replacement-technique/ */
.ui-keyboard-preview-wrapper { text-align: center; padding: 0px 5px; }
.ui-keyboard-preview { border-radius: 6px !important; background: #fff !important; border: 1px solid #bbb !important; height: 40px !important; text-align: left; margin: 0 0 3px 0; display: inline; width: 99%;} /* width is calculated in IE, since 99% = 99% full browser width =( */ 
.ui-keyboard-keyset { text-align: center; white-space: nowrap; }
.ui-keyboard-input { text-align: left; }
.ui-keyboard-input-current { -moz-box-shadow: 1px 1px 10px #8a8a8a; -webkit-box-shadow: 1px 1px 10px #8a8a8a; box-shadow: 1px 1px 10px #8a8a8a; }
.ui-keyboard-placeholder { color: #888; }
.ui-keyboard-nokeyboard { color: #888; border-color: #888; } /* disabled or readonly inputs, or use input[disabled='disabled'] { color: #f00; } */
.ui-keyboard-button.disabled { opacity: 0.5; filter: alpha(opacity=50); } /* used by the acceptValid option to make the accept button appear faded */
.ui-keyboard-spacer { display: inline-block; width: 1px; height: 0; }
.ui-keyboard-button:hover{
    background: #EEE !important;
}
.ui-keyboard-button.active, .ui-keyboard-button:active  {
    transform: scale(1.8);
    background: #AAA !important;
    border-color: #AAA !important;
	color: #000 !important;
}
.ui-keyboard-button.ui-keyboard-actionkey  {
    background: #c3c3c3 !important;
    color: #000000 !important;
    border-color: #9e9e9e !important;
}
.ui-keyboard-button.ui-keyboard-actionkey.ui-keyboard-shift.ui-state-active {
	border-color: #c1272d !important;
    background: #c1272d !important;
    color: #fff !important;
}
.ui-keyboard .ui-state-default.ui-keyboard-cancel {
    border-color: #c1272d !important;
    background: #c1272d !important;
    color: #fff !important;
}
.ui-keyboard-button.ui-keyboard-actionkey.ui-keyboard-bksp  {
	/* color: #fff !important;
	background: #a94442 !important; */
}



.ui-keyboard-button.wide-key {
    min-width: 3.6em; width: auto;
}

/* combo key styling - toggles diacritics on/off */
.ui-keyboard-button.ui-keyboard-combo.ui-state-default { border-color: #ffaf0f; }

/* (in)valid inputs */
button.ui-keyboard-accept.ui-keyboard-valid-input
,button.ui-keyboard-button.success
{ border-color: #1b961b !important; background: #1b961b !important; color: #fff !important; }
button.ui-keyboard-accept.ui-keyboard-valid-input:hover
,button.ui-keyboard-button.success:hover {
	background: #0a0 !important;
}
button.ui-keyboard-accept.ui-keyboard-invalid-input { border-color: #c00 !important; background: #800 !important; color: #fff !important; }
button.ui-keyboard-accept.ui-keyboard-invalid-input:hover { background: #a00 !important; }


/*** jQuery Mobile definitions ***/
/* jQuery Mobile styles - need wider buttons because of font size and text-overflow:ellipsis */
.ui-body .ui-keyboard-button { width: 3em; display: inline-block; }
.ui-body .ui-keyboard-widekey { width: 5.5em; }
.ui-body .ui-keyboard-space { width: 15em; }
.ui-body .ui-keyboard-space span { visibility: hidden; } /* hides the ellipsis */
.ui-body .ui-keyboard-keyset { line-height: 0.5em; }
.ui-body input.ui-input-text, .ui-body textarea.ui-input-text { width: 95%; }

/* over-ride padding set by mobile ui theme - needed because the mobile script wraps button text with several more spans */
.ui-body .ui-btn-inner { height: 2em; padding: 0.2em 0; margin: 0; }
.ui-body .ui-btn { margin: 0; font-size: 13px; } /* mobile default size is 13px */

/* For general iPad layouts */
@media only screen and (min-width: 960px) and (max-width: 1024px) {

}


/* For portrait layouts only */
@media only screen and (max-width: 960px) {
	.ui-keyboard div { font-size: 16px; }
	.ui-keyboard .ui-keyboard-input { font-size: 14px; }
	.ui-body .ui-btn { margin: 0; font-size: 10px; }
	.ui-body .ui-keyboard-button { height: 2.5em; }
	.ui-body .ui-btn-inner { height: 2.5em; padding: 0.5em 0; }

}

/* For 7 inch tablet layouts */
@media only screen and (min-width: 400px) and (max-width: 720px) {
	/* For 7 inch tablet portrait */
	.ui-keyboard div { font-size: 12.5px; }
	.ui-keyboard .ui-keyboard-input { font-size: 14px; }
	.ui-body .ui-btn { margin: 0; font-size: 10px; }
	.ui-body .ui-keyboard-button { height: 2.5em; }
	.ui-body .ui-btn-inner { height: 2.5em; padding: 0.5em 0; }
}




#keyBoardContainer {
    float: left;
    position: fixed;
    /* left: 0px; */
    width: 100%;
    bottom: 0px;
    z-index: 10000;

}

.keyboard-container-dialog {
    /* float: left; */
    position: fixed;
    left: 0px;
    width: 100%;
    bottom: 0px;
    z-index: 10000;

}
#keyBoardContainer .ui-widget-header {
    background: transparent;
    border-color: transparent;
    color: #000000;
}

/* 
 .ui-keyboard {
    left: 0px !important;
    top: auto !important;
    bottom: 0px;
    position: fixed !important;
    width: 100%;
}  */



/*** Caret extension definition; included in keyboard.css ***/
/* margin-top => is added to the caret height (top & bottom) */
.ui-keyboard-caret {
  background: #000;
  width: 1px;
  margin-top: 3px;
}


/* Additional css to make the caret blinky; NOT included in the
 keyboard.css file */
.blinking-cursor {
  -webkit-animation: 1s blinkCursor step-end infinite;
  -moz-animation:    1s blinkCursor step-end infinite;
  -ms-animation:     1s blinkCursor step-end infinite;
  -o-animation:      1s blinkCursor step-end infinite;
  animation:         1s blinkCursor step-end infinite;
}
@keyframes "blinkCursor"         { from, to { opacity: 100%; } 50% { opacity: 0; } }
@-moz-keyframes blinkCursor      { from, to { opacity: 100%; } 50% { opacity: 0; } }
@-webkit-keyframes "blinkCursor" { from, to { opacity: 100%; } 50% { opacity: 0; } }
@-ms-keyframes "blinkCursor"     { from, to { opacity: 100%; } 50% { opacity: 0; } }
@-o-keyframes "blinkCursor"      { from, to { opacity: 100%; } 50% { opacity: 0; } }


.keyboard-mute {
    /* width: 30px;
    height: 30px;
    background: #343434;
    border: 0;
    border-radius: 50%; */
    width: 47px;
    height: 47px;
    background: #ed1c24;
    border: 0;
    position: absolute;
    top: 4px;
    right: 10px;
    font-size: 1.8em !important;
}