@media screen and (max-width: 768px) {
    table.ui-keyboard-table td {
        width: 73px;
        height: 73px;
        margin: 0px;
        padding: 0px;
        border: 0px;
    }

    /*Ligne 1*/

    /*Colonne 1*/
    table.ui-keyboard-table tr:first-child td:first-child:hover {
        background-position: -292px -172px;
    }

    table.ui-keyboard-table tr:first-child td:first-child {
        background-position: 0px -172px;
    }

        /*Colonne 2*/
        table.ui-keyboard-table tr:first-child td:first-child + td:hover {
            background-position: -365px -172px;
        }

        table.ui-keyboard-table tr:first-child td:first-child + td {
            background-position: -73px -172px;
        }

            /*Colonne 3*/
            table.ui-keyboard-table tr:first-child td:first-child + td + td:hover {
                background-position: -438px -172px;
            }

            table.ui-keyboard-table tr:first-child td:first-child + td + td {
                background-position: -146px -172px;
            }
                /*Colonne 4*/
                table.ui-keyboard-table tr:first-child td:first-child + td + td + td:hover {
                    background-position: -511px -172px;
                }

                table.ui-keyboard-table tr:first-child td:first-child + td + td + td {
                    background-position: -219px -172px;
                }

    /*Ligne 2*/

    /*Colonne 1*/
    table.ui-keyboard-table tr:first-child + tr td:first-child:hover {
        background-position: -292px -245px;
    }

    table.ui-keyboard-table tr:first-child + tr td:first-child {
        background-position: 0px -245px;
    }

        /*Colonne 2*/
        table.ui-keyboard-table tr:first-child + tr td:first-child + td:hover {
            background-position: -365px -245px;
        }

        table.ui-keyboard-table tr:first-child + tr td:first-child + td {
            background-position: -73px -245px;
        }

            /*Colonne 3*/
            table.ui-keyboard-table tr:first-child + tr td:first-child + td + td:hover {
                background-position: -438px -245px;
            }

            table.ui-keyboard-table tr:first-child + tr td:first-child + td + td {
                background-position: -146px -245px;
            }
                /*Colonne 4*/
                table.ui-keyboard-table tr:first-child + tr td:first-child + td + td + td:hover {
                    background-position: -511px -245px;
                }

                table.ui-keyboard-table tr:first-child + tr td:first-child + td + td + td {
                    background-position: -219px -245px;
                }

    /*Ligne 3*/

    /*Colonne 1*/
    table.ui-keyboard-table tr:first-child + tr + tr td:first-child:hover {
        background-position: -292px -318px;
    }

    table.ui-keyboard-table tr:first-child + tr + tr td:first-child {
        background-position: 0px -318px;
    }

        /*Colonne 2*/
        table.ui-keyboard-table tr:first-child + tr + tr td:first-child + td:hover {
            background-position: -365px -318px;
        }

        table.ui-keyboard-table tr:first-child + tr + tr td:first-child + td {
            background-position: -73px -318px;
        }

            /*Colonne 3*/
            table.ui-keyboard-table tr:first-child + tr + tr td:first-child + td + td:hover {
                background-position: -438px -318px;
            }

            table.ui-keyboard-table tr:first-child + tr + tr td:first-child + td + td {
                background-position: -146px -318px;
            }
                /*Colonne 4*/
                table.ui-keyboard-table tr:first-child + tr + tr td:first-child + td + td + td:hover {
                    background-position: -511px -318px;
                }

                table.ui-keyboard-table tr:first-child + tr + tr td:first-child + td + td + td {
                    background-position: -219px -318px;
                }

    /*Ligne 4*/

    /*Colonne 1*/
    table.ui-keyboard-table tr:first-child + tr + tr + tr td:first-child:hover {
        background-position: -292px -391px;
    }

    table.ui-keyboard-table tr:first-child + tr + tr + tr td:first-child {
        background-position: 0px -391px;
    }

        /*Colonne 2*/
        table.ui-keyboard-table tr:first-child + tr + tr + tr td:first-child + td:hover {
            background-position: -365px -391px;
        }

        table.ui-keyboard-table tr:first-child + tr + tr + tr td:first-child + td {
            background-position: -73px -391px;
        }

            /*Colonne 3*/
            table.ui-keyboard-table tr:first-child + tr + tr + tr td:first-child + td + td:hover {
                background-position: -438px -391px;
            }

            table.ui-keyboard-table tr:first-child + tr + tr + tr td:first-child + td + td {
                background-position: -146px -391px;
            }
                /*Colonne 4*/
                table.ui-keyboard-table tr:first-child + tr + tr + tr td:first-child + td + td + td:hover {
                    background-position: -511px -391px;
                }

                table.ui-keyboard-table tr:first-child + tr + tr + tr td:first-child + td + td + td {
                    background-position: -219px -391px;
                }

    table.ui-keyboard-table button.keyboard-fn-button {
        width: 65px;
        height: 65px;
        margin-left: 3px;
        font-size: 22px;
    }

    table.ui-keyboard-table button.keyboard-button-ok {
        width: 138px;
    }

    .ui-skeyboard {
        width: 298px;
        height: 371px;
        padding-left: 7px;
        padding-top: 7px;
    }
}


@media screen and (max-width: 320px), screen and (min-width: 768px) {
    table.ui-keyboard-table td {
        width: 43px;
        height: 43px;
        margin: 0px;
        padding: 0px;
        border: 0px;
    }
    /*Ligne 1*/
    /*Colonne 1*/
    table.ui-keyboard-table tr:first-child td:first-child:hover {
        background-position: -172px 0px;
    }

    table.ui-keyboard-table tr:first-child td:first-child {
        background-position: 0px 0px;
    }
        /*Colonne 2*/
        table.ui-keyboard-table tr:first-child td:first-child + td:hover {
            background-position: -215px 0px;
        }

        table.ui-keyboard-table tr:first-child td:first-child + td {
            background-position: -43px 0px;
        }
            /*Colonne 3*/
            table.ui-keyboard-table tr:first-child td:first-child + td + td:hover {
                background-position: -258px 0px;
            }

            table.ui-keyboard-table tr:first-child td:first-child + td + td {
                background-position: -86px 0px;
            }
                /*Colonne 4*/
                table.ui-keyboard-table tr:first-child td:first-child + td + td + td:hover {
                    background-position: -301px 0px;
                }

                table.ui-keyboard-table tr:first-child td:first-child + td + td + td {
                    background-position: -129px 0px;
                }
    /*Ligne 2*/
    /*Colonne 1*/
    table.ui-keyboard-table tr:first-child + tr td:first-child:hover {
        background-position: -172px -43px;
    }

    table.ui-keyboard-table tr:first-child + tr td:first-child {
        background-position: 0px -43px;
    }
        /*Colonne 2*/
        table.ui-keyboard-table tr:first-child + tr td:first-child + td:hover {
            background-position: -215px -43px;
        }

        table.ui-keyboard-table tr:first-child + tr td:first-child + td {
            background-position: -43px -43px;
        }
            /*Colonne 3*/
            table.ui-keyboard-table tr:first-child + tr td:first-child + td + td:hover {
                background-position: -258px -43px;
            }

            table.ui-keyboard-table tr:first-child + tr td:first-child + td + td {
                background-position: -86px -43px;
            }
                /*Colonne 4*/
                table.ui-keyboard-table tr:first-child + tr td:first-child + td + td + td:hover {
                    background-position: -301px -43px;
                }

                table.ui-keyboard-table tr:first-child + tr td:first-child + td + td + td {
                    background-position: -129px -43px;
                }
    /*Ligne 3*/
    /*Colonne 1*/
    table.ui-keyboard-table tr:first-child + tr + tr td:first-child:hover {
        background-position: -172px -86px;
    }

    table.ui-keyboard-table tr:first-child + tr + tr td:first-child {
        background-position: 0px -86px;
    }
        /*Colonne 2*/
        table.ui-keyboard-table tr:first-child + tr + tr td:first-child + td:hover {
            background-position: -215px -86px;
        }

        table.ui-keyboard-table tr:first-child + tr + tr td:first-child + td {
            background-position: -43px -86px;
        }
            /*Colonne 3*/
            table.ui-keyboard-table tr:first-child + tr + tr td:first-child + td + td:hover {
                background-position: -258px -86px;
            }

            table.ui-keyboard-table tr:first-child + tr + tr td:first-child + td + td {
                background-position: -86px -86px;
            }
                /*Colonne 4*/
                table.ui-keyboard-table tr:first-child + tr + tr td:first-child + td + td + td:hover {
                    background-position: -301px -86px;
                }

                table.ui-keyboard-table tr:first-child + tr + tr td:first-child + td + td + td {
                    background-position: -129px -86px;
                }
    /*Ligne 4*/
    /*Colonne 1*/
    table.ui-keyboard-table tr:first-child + tr + tr + tr td:first-child:hover {
        background-position: -172px -129px;
    }

    table.ui-keyboard-table tr:first-child + tr + tr + tr td:first-child {
        background-position: 0px -129px;
    }
        /*Colonne 2*/
        table.ui-keyboard-table tr:first-child + tr + tr + tr td:first-child + td:hover {
            background-position: -215px -129px;
        }

        table.ui-keyboard-table tr:first-child + tr + tr + tr td:first-child + td {
            background-position: -43px -129px;
        }
            /*Colonne 3*/
            table.ui-keyboard-table tr:first-child + tr + tr + tr td:first-child + td + td:hover {
                background-position: -258px -129px;
            }

            table.ui-keyboard-table tr:first-child + tr + tr + tr td:first-child + td + td {
                background-position: -86px -129px;
            }
                /*Colonne 4*/
                table.ui-keyboard-table tr:first-child + tr + tr + tr td:first-child + td + td + td:hover {
                    background-position: -301px -129px;
                }

                table.ui-keyboard-table tr:first-child + tr + tr + tr td:first-child + td + td + td {
                    background-position: -129px -129px;
                }


    table.ui-keyboard-table button.keyboard-fn-button {
        width: 38px;
        height: 38px;
        margin-left: 1px;
        font-size: 18px;
    }

    table.ui-keyboard-table button.keyboard-button-ok {
        width: 82px;
    }

    .ui-skeyboard {
        width: 230px;
        height: 196px;
        padding-left: 5px;
        padding-top: 5px;
    }
}

input[type='hidden'] {
    display:none;
}

table.ui-keyboard-table {
    border: none;
    border-spacing: 4px;
    border-collapse: separate;
    margin-left:15px;
}

    table.ui-keyboard-table button.keyboard-fn-button {
        border: 1px solid #1aa3e9;
        background: #1496d6;
        background-image: -webkit-linear-gradient(bottom, #008ed6 0%, #1aa3e9 100%);
        background-image: -moz-linear-gradient(bottom, #008ed6 0%, #1aa3e9 100%);
        background-image: -ms-linear-gradient(bottom, #008ed6 0%, #1aa3e9 100%);
        background-image: -o-linear-gradient(bottom, #008ed6 0%, #1aa3e9 100%);
        background-image: linear-gradient(bottom, #008ed6 0%, #1aa3e9 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1aa3e9',endColorstr='#008ed6', GradientType=0);
        border-top-left-radius: 4px /*{cornerRadius}*/;
        border-top-right-radius: 4px /*{cornerRadius}*/;
        border-bottom-left-radius: 4px /*{cornerRadius}*/;
        border-bottom-right-radius: 4px /*{cornerRadius}*/;
        font-family: Verdana,Arial,sans-serif /*{ffDefault}*/;
        border: none !important;
        color: #ffffff !important;
    }

    table.ui-keyboard-table td.keyboard-fn-cell {
        margin: 3px;
    }

    table.ui-keyboard-table td.key-active:hover {
        cursor:pointer;
    }

    table.ui-keyboard-table button.keyboard-button-ok:hover {
        background: #46ce45;
    }

    table.ui-keyboard-table button.keyboard-button-reset:hover {
        background: #fdb42c;
    }

    table.ui-keyboard-table button.keyboard-button-delete:hover {
        background: #fc4620;
    }

    table.ui-keyboard-table button {
        outline: none;
    }

.ui-skeyboard {
    position: relative !important;
    z-index: 299;
}

    .ui-skeyboard.ui-skeyboard-loading {
        background: url("../Img/ajax-loader.gif") center center no-repeat;
        background-color: white;
    }



       table.ui-keyboard-table td {
        width: 42px;
        height: 42px;
        margin: 0px;
        padding: 1px;
        border: 0px;
    }
    /*Ligne 1*/
    /*Colonne 1*/
    table.ui-keyboard-table tr:first-child td:first-child:hover {
        background-position: -172px 0px;
    }

    table.ui-keyboard-table tr:first-child td:first-child {
        background-position: 0px 0px;
    }
        /*Colonne 2*/
        table.ui-keyboard-table tr:first-child td:first-child + td:hover {
            background-position: -215px 0px;
        }

        table.ui-keyboard-table tr:first-child td:first-child + td {
            background-position: -43px 0px;
        }
            /*Colonne 3*/
            table.ui-keyboard-table tr:first-child td:first-child + td + td:hover {
                background-position: -258px 0px;
            }

            table.ui-keyboard-table tr:first-child td:first-child + td + td {
                background-position: -86px 0px;
            }
                /*Colonne 4*/
                table.ui-keyboard-table tr:first-child td:first-child + td + td + td:hover {
                    background-position: -301px 0px;
                }

                table.ui-keyboard-table tr:first-child td:first-child + td + td + td {
                    background-position: -129px 0px;
                }
    /*Ligne 2*/
    /*Colonne 1*/
    table.ui-keyboard-table tr:first-child + tr td:first-child:hover {
        background-position: -172px -43px;
    }

    table.ui-keyboard-table tr:first-child + tr td:first-child {
        background-position: 0px -43px;
    }
        /*Colonne 2*/
        table.ui-keyboard-table tr:first-child + tr td:first-child + td:hover {
            background-position: -215px -43px;
        }

        table.ui-keyboard-table tr:first-child + tr td:first-child + td {
            background-position: -43px -43px;
        }
            /*Colonne 3*/
            table.ui-keyboard-table tr:first-child + tr td:first-child + td + td:hover {
                background-position: -258px -43px;
            }

            table.ui-keyboard-table tr:first-child + tr td:first-child + td + td {
                background-position: -86px -43px;
            }
                /*Colonne 4*/
                table.ui-keyboard-table tr:first-child + tr td:first-child + td + td + td:hover {
                    background-position: -301px -43px;
                }

                table.ui-keyboard-table tr:first-child + tr td:first-child + td + td + td {
                    background-position: -129px -43px;
                }
    /*Ligne 3*/
    /*Colonne 1*/
    table.ui-keyboard-table tr:first-child + tr + tr td:first-child:hover {
        background-position: -172px -86px;
    }

    table.ui-keyboard-table tr:first-child + tr + tr td:first-child {
        background-position: 0px -86px;
    }
        /*Colonne 2*/
        table.ui-keyboard-table tr:first-child + tr + tr td:first-child + td:hover {
            background-position: -215px -86px;
        }

        table.ui-keyboard-table tr:first-child + tr + tr td:first-child + td {
            background-position: -43px -86px;
        }
            /*Colonne 3*/
            table.ui-keyboard-table tr:first-child + tr + tr td:first-child + td + td:hover {
                background-position: -258px -86px;
            }

            table.ui-keyboard-table tr:first-child + tr + tr td:first-child + td + td {
                background-position: -86px -86px;
            }
                /*Colonne 4*/
                table.ui-keyboard-table tr:first-child + tr + tr td:first-child + td + td + td:hover {
                    background-position: -301px -86px;
                }

                table.ui-keyboard-table tr:first-child + tr + tr td:first-child + td + td + td {
                    background-position: -129px -86px;
                }
    /*Ligne 4*/
    /*Colonne 1*/
    table.ui-keyboard-table tr:first-child + tr + tr + tr td:first-child:hover {
        background-position: -172px -129px;
    }

    table.ui-keyboard-table tr:first-child + tr + tr + tr td:first-child {
        background-position: 0px -129px;
    }
        /*Colonne 2*/
        table.ui-keyboard-table tr:first-child + tr + tr + tr td:first-child + td:hover {
            background-position: -215px -129px;
        }

        table.ui-keyboard-table tr:first-child + tr + tr + tr td:first-child + td {
            background-position: -43px -129px;
        }
            /*Colonne 3*/
            table.ui-keyboard-table tr:first-child + tr + tr + tr td:first-child + td + td:hover {
                background-position: -258px -129px;
            }

            table.ui-keyboard-table tr:first-child + tr + tr + tr td:first-child + td + td {
                background-position: -86px -129px;
            }
                /*Colonne 4*/
                table.ui-keyboard-table tr:first-child + tr + tr + tr td:first-child + td + td + td:hover {
                    background-position: -301px -129px;
                }

                table.ui-keyboard-table tr:first-child + tr + tr + tr td:first-child + td + td + td {
                    background-position: -129px -129px;
                }


    table.ui-keyboard-table button.keyboard-fn-button {
        width: 38px;
        height: 38px;
        margin-left: 1px;
        font-size: 18px;
    }

    table.ui-keyboard-table button.keyboard-button-ok {
        width: 82px;
    }

    .ui-skeyboard {
        width: 230px;
        height: 196px;
        padding-left: 5px;
        padding-top: 5px;
    }