.Font-Regular {
    font-family: NeueHaasUnicaPro-Regula;
    font-weight: normal;
    font-style: normal;
}

.Font-Medium {
    font-family: NeueHaasUnicaPro-Medium;
    font-weight: normal;
    font-style: normal;
}

.keyboard-key {
    opacity: 1.0;
    width: 110px;
    height: 70px;
    border-radius: 5px;
    background-color: white;
    border-style: solid;
    border-width: thin;
    border-color: #d1d5db;
    color: #051d3d;
    font-family: NeueHaasUnicaPro-Medium;
    font-size: 26px;
    font-weight: bold;
    margin-right: 10px;
    margin-top: 10px;
    float: left;
}

.dark-keyboard-key {
    background-color: #002b5c;
    border: solid thin #0b80c3;
    color: white;
}

.keyboard-key:focus {
    outline: none;
}

.keyboard-key:active {
    opacity: 0.4;
    background-color: #d1d5db;
}

.keyboard-key:disabled {
    opacity: 0.4;
    background-color: lightgrey;
}

.num-key {
    width: 80px;
    height: 70px;
}

.first-symbol {
    margin-left: 80px;
}

.symbols {
    width: 120px;
    height: 70px;
}

.dark-symbol-keyboard-key {
    border: solid thin #0b80c3 !important;
    background-color: #004990 !important;
    color: white !important;

}

.first-right-key {
    margin-left: 5px;
}

.second-right-key {
    float: left;
    clear: left;
    margin-top: 10px;
    margin-left: 0;
}

.third-right-key {
    float: left;
    clear: left;
    margin-top: 10px;
    margin-left: 85px;
}

.fourth-right-key {
    float: left;
    clear: left;
    margin-top: 10px;
    margin-left: 155px;
}

.delete-key {
    margin-top: 10px;
    margin-left: 10px;
    width: 150px;
    height: 68px;
    border-radius: 5px;
    border-style: solid;
    border-width: thin;
    border-color: #d1d5db;
    background-color: #edf4f7;
    color: #051d3d;
    font-family: NeueHaasUnicaPro-Medium;
    font-size: 25px;
    font-weight: bold;
}

.dark-delete-key {
    border: solid thin #0b80c3 !important;
    background-color: #004990 !important;
    color: white !important;
}

.delete-key:focus {
    outline: none;
}

.delete-key:active {
    opacity: 0.4;
    background-color: white;
}

.space-key {
    clear: left;
    float: left;
    margin-top: 10px;
    margin-right: 10px;
    margin-left: 117px;
    opacity: 1.0;
    width: 798px;
    height: 70px;
    border-radius: 5px;
    border-style: solid;
    border-width: thin;
    border-color: #d1d5db;
    background-color: #edf4f7;
    color: #051d3d;
    font-family: NeueHaasUnicaPro-Medium;
    font-size: 26px;
    font-weight: bold;
}

.dark-space-key {
    border: solid thin #0b80c3 !important;
    background-color: #004990 !important;
    color: white !important;
}

.space-key:focus {
    outline: none;
}

.space-key:active {
    opacity: 0.4;
    background-color: white;
}

.space-key:disabled {
    opacity: 0.4;
    background-color: lightgrey;
}

.delete-image {
    height: 20px;
}

.normal-hiding-keyboard {
    width: 100%;
    position: fixed;
    bottom: 100px;
    left: 0;
    background: white;
    z-index: 1;
}

.larger-hiding-keyboard {
    width: 100%;
    position: fixed;
    bottom: 105px;
    left: 0;
    background: white;
    z-index: 1;
}

.hide-keyboard{
    display: inline-block;
    margin-top: 10px;
    right: 50px !important;
    z-index: 4;
    cursor: pointer;
    width: 80px;
    height: 70px;
    border-radius: 5px;
    border-style: solid;
    border-width: thin;
    border-color: #d1d5db;
    background-color: #edf4f7;
    background-position: center;
    background-image: url(hideKeyboard.png);
}