/* ========== Sinhala Keyboard ========== */

/* Keyboard Panel */
.skbd-input-container {
    display: inline-block;
    overflow: visible;
    position: relative;
}

.skbd-panel.drop-down{    
    width: 440px;
    position: absolute;
    left: -100px;
    padding: 10px 0 0 10px;  
    border-radius: 10px;
    border: 1px solid #eaeaea;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    box-sizing: border-box;
    z-index: 20000;
}

.skbd-panel{
    display: block;
    text-align: left;
    background-color: #ececec;
    box-sizing:content-box;    
}

/* Main Keys */

.skbd-panel .kb{ /* a main key */
    position:relative;
    display: inline-block;
    background-color: #fff;
    margin: 0 0 0 2%;
    border-radius: 4px;
    width: 8%; 
    height: 40px;
    border:none;
    border-bottom: 1px solid #bababa;
    overflow: visible;
}

.skbd-panel .mk{
    position:absolute;        
    display: block;        
    left: 0px;
    top: 0;
    bottom: 0px;
    width: 100%;
    height: 100%;
    margin: 0;
    text-align: center;
    border-radius: 4px;
    overflow:hidden;
    box-sizing:border-box;
}

.skbd-panel .mk span {
    position: absolute;
    left: 50%;
    top: 0;
    width: 36px;
    height: 36px;
    margin: 0 0 0 -18px;
    display:inline-block;        
    background-repeat: no-repeat;
    background-size: 240px 336px;
    background-origin: border-box;
    background-position: left top;
    background-position-x: left;
    background-position-y:top;
    background: url('../img/keys.png') 240px 336px no-repeat;
}

.skbd-panel .mk.hdd{
    bottom: 10px;
    height: 31px;
    border-radius: 4px 4px 0 0;
}

.shift .mk.hdd {
    bottom: 0 !important;
    height: 100% !important;
    border-radius: 4px !important;
}

body.non-touch-device .skbd-panel .mk:hover,
.skbd-panel .mk.pressed{
     background-color: #555 !important;
}

body.non-touch-device .skbd-panel .mk:hover > span,
body.non-touch-device .skbd-panel .pk:hover span,
.skbd-panel .mk.pressed > span,
.skbd-panel .pk.pressed span,
.skbd-panel .pk.pressed span
{
    background: url('../img/keys-hover.png');
}

/* Special Keys */
.sk-first-in-row{
    margin-left: 0 !important;
}

.sk-space {
    width: 68% !important;
}

.sk-space .mk span{
    left: 0;
    margin: 0;
    background-image: none !important;
    width:100% !important;
}

.sk-space .mk span::before{
    content: "හිස් තැනක්";
    color: #fff;
    line-height: 40px;
    height: 40px;
    font-size: 12px;
}

.sk-delete .mk{    
    background-color: #d9d9d9;
}

body.non-touch-device .sk-delete .mk:hover,
.sk-delete .mk.pressed{
    background-color: #870a07 !important;
}

.sk-delete .mk > span{    
    margin-top: 2px;
}

.sk-shift .mk{
    background-color: #d9d9d9;
}

.shift .sk-shift .mk{
    background-color: #c0c0c0;
} 

.shift .sk-shift .mk{
    border-bottom:none;
    border-top: 1px solid #888;
}

.sk-shift .mk span{
    margin-top: 2px;
}

.shift .sk-shift .mk span{    
    background-position-x: -288px !important;
    background-position-y: -216px !important;
    background-position: -288px -216px !important;
}


.hard-shift .sk-shift .mk span{    
    background-position-x: -324px !important;
    background-position-y: -216px !important;
    background-position: -324px -216px !important;
}

.sk-action {
    width: 18% !important;
}

.sk-action .mk span{
    left: 0;
    margin: 0;
    background-image: none !important;
    width:100% !important;
    line-height: 40px;
    height: 40px;
    font-size: 12px;
    color: #4285f4;
}

body.non-touch-device .sk-action .mk:hover span,
.sk-action .mk.pressed span{
    color: #fff;
}

/* Disabled key behavior */
.skbd-panel .mk.disb{
}

.skbd-panel .mk.disb > span{
    opacity: 0.5;
    background-image: url('../img/keys.png') !important;
}

.skbd-panel .mk.selected span{
    background-image: url("../img/keys_selected.png") !important;
    cursor: default;
}

body.non-touch-device .skbd-panel .mk.selected:hover,
.skbd-panel .mk.selected.pressed{
     background-color: #fff !important;
     cursor: default;
}

body.non-touch-device .skbd-panel .mk.disb:hover,
.skbd-panel .mk.disb.pressed{
     background-color: #fff !important;
}

/* Shift handling */
.skbd-panel .sh{
    display:none;
}

.skbd-panel.shift .mk.nsh{
    display:none;
}

.skbd-panel.shift .mk.sh{
    display:block;
}

/* Drop Down Arrows */
.da{
    position:absolute;
    left:0;
    bottom: 0;
    width: 74px;
    height: 9px;
    width: 100%;
    background-color: #fff;
    background-image: url("../img/Sinhala_Keyboard_DropDown_Arrow.gif");
    background-position: center 2px;
    background-position-x:center;
    background-position-y:2px;
    background-size: 7px 4px;
    background-repeat:no-repeat;    
    overflow: visible;    
    box-sizing: border-box;
    border: 0 solid #c0c0c0;
    opacity: 0.4;
}

.shift .da{
    display:none !important;
}

.da:hover,
.da.pressed{
    background-position: center 3px;
    background-position-x: center;
    background-position-y:3px;
    border-top-width: 1px;
    border-radius: 0 0 4px 4px;
    opacity:1;
}

.da-highlight{
    background-color: #c0c0c0;
    border-radius: 0 !important;    
}

/* Drop Down Panel */
.skbd-panel .dp{
    position:absolute;    
    top: 7px;
    padding: 2px;
    background-color: #c0c0c0;
    display: none;
    border-radius: 0 8px 8px 8px;    
    white-space: nowrap;
    text-align: left;      
    vertical-align: top;
    z-index: 1;
}

.skbd-panel .dp hr{
    display: block;
    outline: none;
    background-color: transparent;
    border: none;
    border-top: 1px solid #cecece;
    height: 1px;
    width: 100%;
    padding: 0;
    margin: 6px 0;
}

.skbd-panel .pk {
    display: inline-block;
    background-color: #fff;    
    border-radius: 4px;    
    width: 36px; 
    height: 36px;    
    text-align: center;
    margin: 4px;
    vertical-align: top;
    overflow:hidden;
}

.skbd-panel .pk span{
    width: 36px;
    height: 36px;
    display:inline-block;
    background-repeat: no-repeat;
    background-size: 240px 336px;
    background-origin: border-box;
    background-position: left top;
    background-position-x: left;
    background-position-y:top;
    margin-top: 0px;
    background: url('../img/keys.png') 240px 336px no-repeat;
}

.skbd-panel .mk.pressed span,
.skbd-panel .pk.pressed span{
    margin-top: 1px;
}

.skbd-panel .rk .mk{    
    transition: top 0.3s cubic-bezier(0.33, 1, 0.68, 1), height 0.06s cubic-bezier(0.33, 1, 0.68, 1);
}

body.touch-device .skbd-panel .rk .mk.touch-pressed{
    top: -8px;
    height: 48px;
    transition: top 0s, height 0s;
    -webkit-box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.25);
    box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.25);
}

body.non-touch-device .skbd-panel .pk:hover,
.skbd-panel .pk.pressed {
     color: #fff;
     background-color: #555;
     background-color: rgba(0, 0, 0, 0.64);
}

.skbd-panel .pk.pressed{
     top: -10px !important;
}