#virtualKeyboard {

	position:absolute;
	display:block;
	z-index:99998;
	overflow:hidden;
	bottom:0px;
	left:0px;
	height:0px; 
	max-height:550px;
    width: 100vw;
    text-align: center;
    background-color: #CED1D5;
	
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3f4c6b+0,606c88+99 */
background: #3f4c6b; /* Old browsers */
background: -moz-linear-gradient(top,  #3f4c6b 0%, #606c88 99%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #3f4c6b 0%,#606c88 99%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #3f4c6b 0%,#606c88 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b', endColorstr='#606c88',GradientType=0 ); /* IE6-9 */

	
	
	box-sizing:border-box;
	opacity:0.95;

	-webkit-transition: all 400ms ease-in-out;
	-moz-transition: all 400ms ease-in-out;
	-ms-transition: all 400ms ease-in-out;
	-o-transition: all 400ms ease-in-out;
	transition: all 400ms ease-in-out;

} #virtualKeyboard.visible { height:auto !important; }

#virtualKeyboard div#keyboardHeader { 
	
	display:inline-block; 
	float:left; 
	position:relative; 
	width:104.4%; 
	margin-top:-24px;
	margin-left:-2.2%;
	margin-bottom: 12px;
	height:56px; 
	background-color:rgba(255,0,128,1.00); 
	z-index:99998; clear: both; 
	
	background-image: url("pic/open_keyboard.svg"); background-repeat:no-repeat; background-size: 128px; background-position: center;

}
#virtualKeyboard div#keyboardHeader:hover { background-color: rgba(255,158,0,1.00); cursor: pointer; }


#virtualKeyboard.visible div#keyboardHeader { background-image: url("pic/close_keyboard.svg"); }

.prev_btn.btnstyle,.next_btn.btnstyle,
.prev_btn.btnstyle.uplift,.next_btn.btnstyle.uplift {
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out; }



/* .prev_btn.btnstyle.uplift, */ .next_btn.btnstyle.uplift { bottom: auto; width: 22%; padding-top: 10px; padding-bottom: 10px; height: auto;  }
/* .prev_btn.btnstyle.uplift { left:5%; } */
.next_btn.btnstyle.uplift { right:5%; }







#keyboard {
			position:relative;
			padding:24px 2% 24px 2%;
			width:100%;
			margin: 0;
			display:inline-block;
			float:left; 
			clear: both;
			box-sizing:border-box;
 }




#keyboardCapitalLetter {display:none;}
#keyboardSmallLetter {display:block;}
#keyboardNumber {display:none;}
#keyboardSymbols {display:none;}



#keyboard .button, #keyboard .button:hover {
	
    min-width:12px; 
	padding: 10px 0px 10px 0px;
	box-sizing: border-box;
	
	height:auto;
	
	min-height:calc(1.6em + 20px); 
	line-height: inherit;
	
    position:relative;
	display:inline-block; 
    float:left;
	
    margin: 5px 0.25%;
	
    cursor:pointer;
	
    font-size:1.6em;
	
	-moz-border-radius: 5px;
	border-radius: 5px;
	
	font-weight:200 !important;
	
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
	
	
}

#keyboard .button {
	
    color:#000;
	background: rgba(255,255,255,1.00);
	-webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.65); 
	-moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.65); 
	box-shadow: 0px 1px 1px rgba(0,0,0,0.65);
	
}



#keyboard .button_small {width:8.54%;}
#keyboard .button_small.narrow {width:7.75%; }
#keyboard .button_small.wider {width:9.85%; }
#keyboard .button_small.narrow.first { margin-left: 4%; }




#keyboard .button_numbers,
#keyboard .button_del,
#keyboard .button_smallletter,
#keyboard .button_capitalletter { width:13%; }


#keyboard .button.num 	 { width:9.45%; }
#keyboard .button.sonder { width:7.75%; }

#keyboard .button_space { width:72% !important; margin-left:0.75% !important; margin-right:0.75% !important;  }

#keyboard .button_functional { font-size:2em; }

#keyboard .button_active { font-size:2em; }


#keyboard .button_space,
#keyboard .button_small.num,
#keyboard .button_del,
#keyboard .button_smallletter,
#keyboard .button_capitalletter { background:#A0B9C9; color:#111; }


 
 
#keyboard .button_del,
#keyboard .button_smallletter,
#keyboard .button_capitalletter 			{ background-position:center !important; background-repeat:no-repeat !important;  }

#keyboard .button_del  						{ background-image:url("pic/del_black.svg"); background-size: 64px !important; }

#keyboard .button_smallletter,
#keyboard .button_capitalletter 			{ background-image:url("pic/upletter_black.svg"); background-size:42px !important;}



#keyboard .button_smallletter.button_active,
#keyboard .button_small.upper { font-weight:400 !important; color: rgba(47,47,47,1.00)}



#keyboard .button_small.upper { background-image:url("pic/is_upper.svg"); background-repeat: no-repeat; background-size: 18px; background-position: right top; background-color: rgba(248,248,243,1.00)}







 /* #keyboard .button:hover, #keyboard .button:focus, */ #keyboard .button:active { 

	
    color:#fff;
	background: rgba(25,25,25,1.00);
	-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.25); -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.25); box-shadow: 0px 1px 2px rgba(0,0,0,0.25);

}




#keyboard .button_del:active 							{ background-image:url("pic/del_filled_black.svg");  background-color:#F4F4F4; }

#keyboard .button_smallletter:active,
#keyboard .button_capitalletter:active,
#keyboard .button_smallletter.button_active,
#keyboard .button_capitalletter.button_active 			{ background-image:url("pic/upletter_filled_black.svg"); background-color:#F4F4F4;  }










@media only screen and (device-height : 1920px) and (orientation : portrait) { 


	/* .prev_btn.btnstyle.uplift, */ .next_btn.btnstyle.uplift { top:auto; bottom:380px !important }
	/* .uplift { top:auto; bottom:380px !important } */
	button.button.save.next_btn.btnstyle.uplift { top:auto; bottom:555px !important; right:3% !important; }

	#keyboard .button, #keyboard .button:hover { font-size:1.8em;  }
	
	
	
	
}