/*
.keyboardarea {
}

.keyboardarea:after {
border:15px solid transparent;
border-bottom-color:#949494;
border-top-width:0;
top:-10px;
content:"";
display:block;
left:50px;
position:absolute;
width:0;
}
*/

@media only screen and (max-width: 768px) {
    #softkeyboard {
        display: none !important;
    }
}

.keyboardtable {
    display: table;
    margin: 0 auto;
    text-align: left;
    background-color: #FFFFFF;
    box-shadow:#B4B4B4 3px 3px 7px;
    border-top: 5px solid #949494;
}

.keyboard_area1 {
    display: table-cell;
    width: 400px;
}

.keyboard_area2 {
    display: table-cell;
    width: 150px;
    vertical-align: top;
}

.keyboardtable .row {
    display: table-row;
}

.keyboardtable .row .col2 {
    margin-left: 25px;
}

.keyboardtable .row .col3 {
    margin-left: 50px;
}

.keyboardtable .row .keyboard, .keyboardtable .row .keyboard2, .keyboardtable .row .keyboard3, keyboardtable .row .keyboard4 {
    display: table-cell;
}

.keyboard {
    display: inline-block;
}

.keyboardtable .td1b {
    border: 0.5px solid #6F6F6F;
    font-size: 1.4em;
    width: 430px;
    height: 44px;
    padding-top:10px;
    padding-left:10px;
}

.keyboardtable .row .keyboard input {
    width: 30px;
    height: 30px;
    margin-right: 5px;
    margin-bottom: 5px;
    font-size: 0.9em;
}

.keyboardtable .row .keyboard2 input {
    width: 150px;
    height: 40px;
    margin-left: 10px;
}

.keyboardtable .row .keyboard3 input {
    width: 125px;
    height: 40px;
    margin-left: 10px;
}

.keyboardtable .right {
    width: 110px;
    text-align: right;
    vertical-align: bottom;
}

.keyboardtable .char1 {
    font-size: 4em;
    font-weight: bold;
}

#lowercase {
    color: #FFF000;
}

.keyboardtable .ctrl_button {
    width: 130px;
    height: 30px;
    font-size: 1em;
}

.keyboardtable .btnstyle1 {
    width: 30px;
    height: 25px;
    font-size: 1.2rem;
    margin-top: 5px;
    border: 1px solid #7A7A7A;
    border-radius: 3px;
    background: linear-gradient(to bottom, #FFFDFD, #CCC8C9);
}

.keyboardtable .btnstyle1:hover {
    border: 1px solid #F79503;
    background: linear-gradient(to bottom, #FFFFFF, #FFC876);
    cursor: pointer;
}

.keyboardtable .btnstyle1:active {
    background: linear-gradient(to bottom, #FFE4B3, #FFC876);
}

.keyboardtable .btnstyleclear {
    margin-top: 10px;
    font-weight: bold;
    color: #FFFFFF;
    border-radius: 10px;
    border: 0.5px solid #5E5E5E;
    background: linear-gradient(to bottom, #CAC8C8, #4E4E4E);
}

.keyboardtable .btnstyleclear:hover {
    color: #666666;
    border: 1px solid #F79503;
    background: linear-gradient(to bottom, #FFFFFF, #FFC876);
    cursor: pointer;
}

.keyboardtable .btnstyleclear:active {
    background: linear-gradient(to bottom, #FFE4B3, #FFC876);
}

.keyboardtable .btnstyleclose {
    width: 80px;
    height: 30px;
    font-weight: bold;
    color: #666666;
    border-radius: 50px;
    border: 0.5px solid #5E5E5E;
    background: linear-gradient(to bottom, #FFFDFD, #CCC8C9);
}

.keyboardtable .btnstyleclose:hover {
    border: 1px solid #F79503;
    background: linear-gradient(to bottom, #FFFFFF, #FFC876);
    cursor: pointer;
}

.keyboardtable .btnstyleclose:active {
    background: linear-gradient(to bottom, #FFE4B3, #FFC876);
}



.closebtn{height:35px; background-color:#949494; text-align:center;}
.clearbtn{height:105px; background-color:#F0F0F0;}
.tab{overflow:hidden; background-color:#949494; padding-top: 3px; font-weight: bold; height:35px;}
.tab li{background:#696767; padding:5px 25px; float:left; margin-right:1px; color: #FFFFFF; border-radius: 10px 10px 0 0; cursor: pointer; box-sizing: border-box;}
.tab li.select{background:#eee; color:#696767;}
.tab li:hover {
    color: #666666;
    border: 1px solid #F79503;
    background: linear-gradient(to bottom, #FFC876, #FFFFFF);
}
.tab li:active {
    background: linear-gradient(to bottom, #FFE4B3, #FFC876);
}
.tabspace{background-color:#8A8A8A;height:35px;}
.content { height:105px; background:#eee; padding:3px;}
.hide {display:none;}