﻿.virtualKeyboard {
    position: relative;
    width: 100%;
    height: auto;
    text-align: center;
}

    .virtualKeyboard .keytop, .virtualKeyboard .keybottom {
        width: 100%;
    }

    .virtualKeyboard .keybottom {
        margin-top: 15px;
        clear: both;
    }





    .virtualKeyboard .key {
        display: inline-block;
        border-radius: 100%;
        text-align: center;
        margin-right: 3px;
        color: #939698;
        margin-bottom: 8px;
        font-weight: 300;
        text-transform: uppercase;
        position: relative;
        border: 2px solid #939698;
        padding: 10px 15px;
        font-size: 16px;
        cursor: pointer;
        min-width: 43px;
        float: left;
    }

        .virtualKeyboard .key span {
            display: block;
            position: relative;
            top: 7px;
            font-weight: 700;
        }

        .virtualKeyboard .key.shift {
            text-transform: initial;
            line-height: 100% !important;
        }



    .virtualKeyboard .keybottom .key {
        border-radius: 30px;
        margin-right: 8px;
    }


    .virtualKeyboard .keybottom .row {
        margin: 0;
    }

    .virtualKeyboard .keybottom .buttons {
        padding-left: 0px;
        padding-right: 8px;
    }

    .virtualKeyboard.virtual-keyword {
        bottom: 0px;
        left: 0px;
    }

        .virtualKeyboard.virtual-keyword .key {
            padding: 0;
            opacity: 1;
            position: relative;
        }

    .virtualKeyboard .key.passive {
    }



    .virtualKeyboard .sutun {
        width: 100%;
        text-align: center;
    }

        .virtualKeyboard .sutun .key:last-child {
            margin-right: 0px;
        }


    .virtualKeyboard .key.lowercase {
        text-transform: lowercase;
    }

    .virtualKeyboard .key .icon {
        text-align: center;
        font-size: 19px;
        display: inline-block;
    }

        .virtualKeyboard .key .icon:before {
            color: white;
        }

    .virtualKeyboard .key.passive .icon:before {
        color: #445056;
    }

    .virtualKeyboard .key.delete, .virtualKeyboard .key.shift {
    }

        .virtualKeyboard .key.delete:hover:before {
            color: white;
        }


    .virtualKeyboard .key:hover {
        background: #e10514 !important;
        color: white !important;
    }

    .virtualKeyboard .key.shift:hover {
        background: #babfc2 !important;
        color: #445056 !important;
    }

    .virtualKeyboard .key.shift.red {
        background: #e10514 !important;
        color: white !important;
    }


    .virtualKeyboard .return:hover {
        background: #272C30 !important;
    }

    .virtualKeyboard .key.return:hover {
    }

    .virtualKeyboard .key.red {
    }


    .virtualKeyboard .key.active {
        background: #e10514 !important;
        color: white !important;
    }

        .virtualKeyboard .key.active .icon:before {
            color: white !important;
        }
