.numericPadOpen .ScrollableContainer {
    margin-bottom: 16em;
}
.numericPadOpen .DetailSection .SingleAreaSection{
    margin-bottom: 16em;
}

.KeyboardWithEnter {
    width: 100%;
    bottom: 0em;
    left:0;
    position:fixed;
    background-color:rgba(217,220,224,0.98);
	height:19em;
    z-index:200000;

    ul{
         -webkit-box-pack: center;

        li {

		width: 35em;
        list-style-type: none;
        padding-left: 0em;
        height: 100%;

        margin-left: 23%;

            position: relative;

            .Key {
                background-color: #f7f8f9;
                border: none !important;
                border-radius: .25em;
                box-shadow: rgba(0, 0, 0, 0.35) 0 1px 0 0;
                color: #000;
                height: 3.8em;
                width: 6.5em;
                /*line-height: 2.25em;
                margin:.625em .375em 0 .625em;*/
                line-height: 3.25em;
                margin:.375em .375em 0 .375em;
                display:inline-block;
                text-align: center;
                font-weight: normal;

                label {
                    background:transparent;
                    padding:0;
                    font-size: 1.5em !important;
                    font-weight: normal;
                    color: #000 !important;
                    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important;
                }

                padding: 0 !important;
            }
            .Key:active {
                background-color: #D5D6D8;
                border: none !important;
                box-shadow: rgba(0, 0, 0, 0.35) 0 1px 0 0;
            }

            .KeyDark {
                background-color: #c1c3c7;
                box-shadow: rgba(0, 0, 0, 0.35) 0 1px 0 0;
               // margin-left:3em;
               // label {
               //     color: #000 !important;
               // }
            }

            .KeyDone {
                background: url("../graphics/hide-keyboard.png"), #c1c3c7;
                background-repeat: no-repeat;
                background-position: center center;
				margin-left: calc(-20% + 0.1875em) ;
                //unset 20% margin-left for li & also unset (0.375em)/2 of "KeyboardWithEnter ul li .Key : margin-left"
                label {
                    opacity: 0;
                }
            }
            .KeyDone:active {
                background: url("../graphics/hide-keyboard.png"), #ACAEB1;
                background-repeat: no-repeat;
                background-position: center center;
                border: none;
                box-shadow: rgba(0, 0, 0, 0.35) 0 1px 0 0;
            }

            .KeyDelete {
                background: url("../graphics/backspace.png"), #c1c3c7;
                background-repeat: no-repeat;
                background-position: center center;
                label {
                    opacity: 0;
                }
            }
            .KeyDelete:active {
                background: url("../graphics/backspace.png"), #ACAEB1;
                background-repeat: no-repeat;
                background-position: center center;
                border: none;
                box-shadow: rgba(0, 0, 0, 0.35) 0 1px 0 0;
            }

            .KeyClear {
                background-repeat: no-repeat;
                background-position: center center;
                label {
                    opacity: 1;
                }
            }
            .KeyClear:active {
                background-repeat: no-repeat;
                background-position: center center;
                border: none;
                box-shadow: rgba(0, 0, 0, 0.35) 0 1px 0 0;
            }
			.KeyPrevious {
				background: url("../graphics/KeyPrevious.png"), #c1c3c7;
                background-repeat: no-repeat;
                background-position: center center;
                label {
                    opacity: 0;
                }
			}
			.KeyNext {
				background: url("../graphics/KeyNext.png"), #c1c3c7;
                background-repeat: no-repeat;
                background-position: center center;
                label {
                    opacity: 0;
                }

			}
			.KeyEnter {
				background: url("../graphics/KeyEnter.png"), #c1c3c7;
                background-repeat: no-repeat;
                background-position: center center;
                label {
                    opacity: 0;
                }

			}
        }
    }
}



@media (orientation: portrait)  {
.KeyboardWithEnter {

    ul{


        li {
			margin-left: 20%;
		}

	}
}
}

 @media screen and (max-width: 767px){
        .KeyboardWithEnter {
            height:13em;
            ul{
                li{
                     margin-left: 15%;
                    .Key {

                        width: 8%;
                        height: 8%;
                        padding: 0!important;
                        margin: .375em .375em 0;
                        line-height: 2.25em;
                        border-radius: .25em;
                        color:red;
                        label {
                          font-size: 0.75em !important;
                          top: 0.11em;
                          position: relative;
                        }
                    }

                    .KeyDark {
                       // margin-left:1em;
					   width: 2.8em;
						height: 2.2em;

                    }

                    .KeyDone{
                        background-size: 30px 30px;
						margin-left: -9%;
                    }

                    .KeyDelete{
                        background-position: 50% 53%;
                        background-size: 30px 21px;
                    }

					.KeyPrevious {
				background: url("../graphics/KeyPreviousPhone.png"), #c1c3c7;
                background-repeat: no-repeat;
                background-position: center center;
                label {
                    opacity: 0;
                }
			}
			.KeyNext {
				background: url("../graphics/KeyNextPhone.png"), #c1c3c7;
                background-repeat: no-repeat;
                background-position: center center;
                label {
                    opacity: 0;
                }

			}
			.KeyEnter {
				background: url("../graphics/KeyEnterPhone.png"), #c1c3c7;
                background-repeat: no-repeat;
                background-position: center center;
                label {
                    opacity: 0;
                }

			}
                }
            }
        }
    }
@media screen and (max-width: 767px) {
    .numericPadOpen .DetailSection .SingleAreaSection {
        margin-bottom: 13em;
    }
}
@media screen and (max-width: 767px) {
    .numericPadOpen .ScrollableContainer {
        margin-bottom: 10em;
    }
}


.numericPadOpen .ScrollableContainer {
    margin-bottom: 16em;
}
.numericPadOpen .DetailSection .SingleAreaSection{
    margin-bottom: 16em;
}

.Keyboard {
    width: 100%;
    bottom: 0em;
    left:0;
    position:fixed;
    background-color:rgba(217,220,224,0.98);
	height:19em;
    z-index:200000;

    ul{
        width: 35em;
        list-style-type: none;
        padding-left: 0em;
        height: 100%;
        -webkit-box-pack: center;
        float: right;
        left: -50%;
        position: relative;

        li {
            left: 50%;
            position: relative;

            .Key {
                background-color: #f7f8f9;
                border: none !important;
                border-radius: .25em;
                box-shadow: rgba(0, 0, 0, 0.35) 0 1px 0 0;
                color: #000;
                height: 3.8em;
                width: 6.5em;
                /*line-height: 2.25em;
                margin:.625em .375em 0 .625em;*/
                    line-height: 3.25em;
                     margin:.375em .375em 0 .375em;
                     display:inline-block;
                text-align: center;
                font-weight: normal;

                label {
                    background:transparent;
                    padding:0;
                    font-size: 2em !important;
                    font-weight: normal;
                    color: #000 !important;
                    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important;
                }

                padding: 0 !important;
            }
            .Key:active {
                background-color: #D5D6D8;
                border: none !important;
                box-shadow: rgba(0, 0, 0, 0.35) 0 1px 0 0;
            }

            .KeyDark {
                background-color: #c1c3c7;
                box-shadow: rgba(0, 0, 0, 0.35) 0 1px 0 0;
                margin-left:5em;
                label {
                    font-size: 1.3em;
                    color: #000 !important;
                }
            }

            .KeyDone {
                background: url("../graphics/hide-keyboard.png"), #c1c3c7;
                background-repeat: no-repeat;
				 margin-left:5em;
                background-position: center center;
                label {
                    opacity: 0;
                }
            }
            .KeyDone:active {
                background: url("../graphics/hide-keyboard.png"), #ACAEB1;
                background-repeat: no-repeat;
                background-position: center center;
                border: none;
                box-shadow: rgba(0, 0, 0, 0.35) 0 1px 0 0;
            }

            .KeyDelete {
                background: url("../graphics/backspace.png"), #c1c3c7;
                background-repeat: no-repeat;
                background-position: center center;
                label {
                    opacity: 0;
                }
            }
            .KeyDelete:active {
                background: url("../graphics/backspace.png"), #ACAEB1;
                background-repeat: no-repeat;
                background-position: center center;
                border: none;
                box-shadow: rgba(0, 0, 0, 0.35) 0 1px 0 0;
            }

            .KeyClear {
                background-repeat: no-repeat;
                background-position: center center;
                label {
                    opacity: 1;
                }
            }
            .KeyClear:active {
                background-repeat: no-repeat;
                background-position: center center;
                border: none;
                box-shadow: rgba(0, 0, 0, 0.35) 0 1px 0 0;
            }
        }
    }
}

 @media screen and (max-width: 767px){
        .Keyboard {
            height:13em;
            ul{
                li{
                    left: 74%;
                    .Key {

                        width: 10%;
                        height: 10%;
                        padding: 0!important;
                        margin: .375em .375em 0;
                        line-height: 2.25em;
                        border-radius: .25em;
                        color:red;
                        label {
                            font-size:1.5em !important;
                          top: 0.11em;
                          position: relative;
                        }
                    }

                    .KeyDark {
                        margin-left:1em;
                    }

                    .KeyDone{
                        background-position: 50% 53%;
                        background-size: 30px 21px;
						margin-left: 1em;
                    }

                    .KeyDelete{
                        background-position: 50% 53%;
                        background-size: 30px 21px;
						margin-left: 1em;
                    }
                }
            }
        }
    }
@media screen and (max-width: 767px) {
    .numericPadOpen .DetailSection .SingleAreaSection {
        margin-bottom: 13em;
    }
}
@media screen and (max-width: 767px) {
    .numericPadOpen .ScrollableContainer {
        margin-bottom: 10em;
    }
}