body
{
    background-color: #ececec !important;
}

.disable-select {
    -webkit-user-select: none;  
    -moz-user-select: none;    
    -ms-user-select: none;      
    user-select: none;
}
@font-face {
    font-family: Opensans;
    src: url("../../fonts/OpenSansCondensed-Light.ttf");

}
@font-face {
    font-family: Roboto;
    src: url("../../fonts/Roboto-Regular.ttf");
}
@font-face {
    font-family: FontAwesome;
    src: url("../../fonts/fontawesome/fonts/fontawesome-webfont.ttf");
}
.overflow
{
    overflow: auto;
}

.padding-allside-2
{
    padding:2px 2px !important;
}
.login_background_placeholder
{
    display:flex;
    align-items: center;
    width:100%;
    height:100%;
    background:url("img/login_background.jpg")no-repeat center;
    background-size:cover;
}
.login_box_placeholder
{
}
.login_box
{
    margin: 0 auto;
    border-radius: 5px;
    padding: 20px;
    display: block;
    max-width: 22em;
    height: auto;
    background-color: transparent;
    text-align: center;
}
.login_box_logo
{
    margin:0 auto;
}
#login_pin
{
    color: #9db1c3;
    background-color: transparent;
    background-image: none;
    border: none;
    font-size: 40px;
    text-align: center;
    box-shadow: none! important;

}
.login_pin_keyboard
{
    display:inline-block;
    width:100%;
    margin:0px;
    padding:0px;
    list-style: none;
}
.login_pin_keyboard li
{
    float: left;
    text-align: center;
    list-style: none;
    display: inline-block;
    width: 33%;
    margin-bottom: 8px;
}
.login_pin_keyboard li a
{
    width: 3.5em;
    font-size: 1.5em;
    margin: 0 auto;
    display: block;
    border-radius: 50px;
    padding: 20px;
    border: #ffffff 1px solid;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background-color: transparent;
}
.login_pin_keyboard li a:active
{
    width: 3.5em;
    font-size: 1.5em;
    margin: 0 auto;
    display: block;
    border-radius: 50px;
    padding: 20px;
    border:#c1e9ff 1px solid;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background-color: rgba(193, 233, 255, 0.29);
}
.login_pin_keyboard li a:focus
{
    width: 3.5em;
    font-size: 1.5em;
    margin: 0 auto;
    display: block;
    border-radius: 50px;
    padding: 20px;
    border:#c1e9ff 1px solid;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background-color: rgba(193, 233, 255, 0.29);
}
.clr_pwd
{   
    display: inline-block;
    padding: 2px 2px;
    margin-bottom: 0;
    color: white !important;
    font-size: 35px !important;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    outline : none;
}
.clr_pwd:link
{   
    display: inline-block;
    padding: 2px 2px;
    margin-bottom: 0;
    color: white !important;
    font-size: 35px !important;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    outline : none;
}
.clr_pwd:active
{   
    display: inline-block;
    padding: 2px 2px;
    margin-bottom: 0;
    color: white !important;
    font-size: 35px !important;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    outline : none;
}
.clr_pwd:active
{   
    display: inline-block;
    padding: 2px 2px;
    margin-bottom: 0;
    color: white !important;
    font-size: 35px !important;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    outline : none;
}
.clr_pwd:visited
{   
    display: inline-block;
    padding: 2px 2px;
    margin-bottom: 0;
    color: white !important;
    font-size: 30px !important;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    outline : none;
}
.clr_pwd:hover
{   
    display: inline-block;
    padding: 2px 2px;
    margin-bottom: 0;
    color: white !important;
    font-size: 35px !important;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    outline : none;
}

.login_pin_keyboard li button.accept
{
    width: 3.5em;
    font-size: 1.5em;
    margin: 0 auto;
    display: block;
    border-radius: 50px;
    padding: 24px;
    border: #5cb85c 2px solid;
    color: white;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background-color: rgba(92, 184, 92, 0.32);
    outline : none;
}
.login_pin_keyboard li button.accept:active
{
    width: 3.5em;
    font-size: 1.5em;
    margin: 0 auto;
    display: block;
    border-radius: 50px;
    padding: 24px;
    border:#5cb85c 2px solid;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background-color: rgba(92, 184, 92, 0.5);
    outline : none;
}
.login_pin_keyboard li button.accept:focus
{
    width: 3.5em;
    font-size: 1.5em;
    margin: 0 auto;
    display: block;
    border-radius: 50px;
    padding: 24px;
    border:#5cb85c 2px solid;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background-color: rgba(92, 184, 92, 0.5);
    outline : none;
}
.login_pin_keyboard li a.decline
{
    width: 3.5em;
    font-size: 1.5em;
    margin: 0 auto;
    display: block;
    border-radius: 50px;
    padding: 24px;
    border: #d9534f 2px solid;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background-color: rgba(217, 83, 79, 0.32);
    outline : none;
}
.login_pin_keyboard li a.decline:active
{
    width: 3.5em;
    font-size: 1.5em;
    margin: 0 auto;
    display: block;
    border-radius: 50px;
    padding: 24px;
    border: #d9534f 2px solid;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background-color: rgba(217, 83, 79, 0.5);
    outline : none;
}
.login_pin_keyboard li a.decline:focus
{
    width: 3.5em;
    font-size: 1.5em;
    margin: 0 auto;
    display: block;
    border-radius: 50px;
    padding: 24px;
    border: #d9534f 2px solid;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background-color: rgba(217, 83, 79, 0.5);
    outline : none;
}
.pos_placeholder
{
    width:100%;
    height:100%;
    align-items: center;
    background-color: #e8e8e8;
}
.pos_bar
{
    background-color: white;
    height:auto;
    padding:10px 0px;
}
.date_placeholder
{
    display:flex;
    align-items: center;
    font-size:1.1em;
}
.date_placeholder i
{
    font-size:1.1em;
    margin-right: 5px;
}
.time_placeholder
{
    display:flex;
    font-size:1.1em;
    align-items: center;
}
.time_placeholder i
{
    font-size:1.1em;
    margin-right: 5px;
}
.logged_user_placeholder
{
    font-weight:bold;
    font-size:1.1em;
}
.logged_user_placeholder i
{
    font-size:1.1em;
    margin-right: 5px;
}
a.user_btn_logout
{
    float:right;
    color:#d9534f;
    font-size:1.3em;
    outline:none;
    cursor:pointer;
}
a.user_btn_logout:active
{
    float:right;
    color:#d9534f;
    font-size:1.3em;
    outline:none;
    cursor:pointer;
}
a.user_btn_logout:hover
{
    float:right;
    color:#d9534f;
    font-size:1.3em;
    outline:none;
    cursor:pointer;
}
a.user_btn_logout:focus
{
    float:right;
    color:#d9534f;
    font-size:1.3em;
    outline:none;
    cursor:pointer;
}
.padding-side-0
{
    padding-right:0px !important;
    padding-left:0px !important;
}
.padding-top-botom-0
{
    padding-top:0px !important;
    padding-bottom:0px !important;
}
.padding-side-2
{
    padding:0px 2px !important;
}
#counter_box
{
    width: 100%;
    display: block;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 2;
    text-align: right;
    color: #797979;
    font-weight: bold;
    background-color: #f7f7f7;
    background-image: none;
    border: 1px solid #d6d6d6;
    border-radius: 4px;
}
#modal_payment_counter_box
{
    width: 100%;
    display: block;
    padding: 5px 12px;
    font-size: 16px;
    line-height: 2;
    text-align: right;
    color: #797979;
    font-weight: bold;
    background-color: #f7f7f7;
    background-image: none;
    border: 1px solid #d6d6d6;
    border-radius: 4px;
}
#modal_note_box
{
    width: 100%;
    display: block;
    padding: 5px 12px;
    font-size: 16px;
    line-height: 2;
    text-align: left;
    color: #797979;
    font-weight: bold;
    background-color: #f7f7f7;
    background-image: none;
    border: 1px solid #d6d6d6;
    border-radius: 4px;
}
#plu_box
{
    width:100%;
    display: block;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 2;
    text-align: right;
    color: #555;
    font-weight: bold;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #d6d6d6;
    border-radius: 4px;
}
.cart_placeholder
{
    display:flex;
    color: white;
    align-items: center;
    font-size: 1.1em;
}
.cart_placeholder i
{
    font-size: 1.5em;
    margin-right: 5px;
    color: white;
}
.customer_placeholder
{
    display:flex;
    color: white;
    align-items: center;
    font-size: 1.1em;
    justify-content: flex-end;
}
.customer_placeholder i
{
    font-size: 1.5em;
    margin-right: 5px;
    color: white;
}
.summary_placeholder
{
    text-align: left;
    color:black;
    font-size:1.5em;
    font-weight: bold;
}
.summary_price_placeholder
{
    text-align: right;
    color: black;
    font-weight: bold;
    font-size: 1.5em;
}
.subtotal_placeholder
{
    text-align: left;
    color:black;
    font-size:1.1em;
}
.subtotal_price_placeholder
{
    text-align: right;
    color: black;
    font-weight: bold;
    font-size: 1.1em;
}
.discount_placeholder
{
    text-align: left;
    color:#d9534f;
    font-size:1.1em;
    font-weight: bold;
}
.discount_price_placeholder
{
    text-align: right;
    color: #d9534f;
    font-weight: bold;
    font-size: 1.1em;
}
.summary_items_count_placeholder
{
    text-align: left;
    color:black;
    font-size:1.1em;
}
.summary_items_count
{
    text-align: right;
    color: black;
    font-weight: bold;
    font-size: 1.1em;
}
ul.bill
{
    margin:0px;
    padding: 0px;
    width:100%;
}
ul.bill li
{
    display:inline-block;
    list-style-type: none;
    padding:8px 2px;
    border-bottom: #d6d6d6 1px dotted;
    background-color: transparent;
    width:100%;
}
ul.bill li span.item_note
{
    display:inline-block;
    padding:2px 2px;
    font-size: 13px;
    border-radius:4px;
    background-color: transparent;
    color: #d9534f;
    font-style: italic;
    width:100%;
}
ul.bill li span.item_note i
{
    margin-right: 5px;
    color: #d9534f;
}
.item_registration_code
{

    font-size:14px;
    font-weight:bold;
    width:100%;
    display:block;
}
.vat_info
{
    font-size:14px;
    width:100%;
    display:block;
}
.item_name
{
    font-size:14px;
    width:100%;
    display:block;
    font-weight:bold;
    word-wrap:break-word;
}
.item_price
{
    text-align: right;
    font-size:14px;
    width:100%;
    display:block;
    font-weight:bold;
}
.item_info_price
{
    text-align: right;
    font-size:14px;
    width:100%;
    display:block;
}
.item_info_qty
{
    text-align: right;
    font-size:14px;
    width:100%;
    display:block;
}
.item_info_stock
{
    text-align: right;
    font-size:14px;
    width:100%;
    display:block;
}
.item_edit_modal_header_title
{
    display:inline-block;
}
.item_edit_modal_body_name
{
    display: inline-block;
    width:100%;
    font-size: 13px;
    color: #9a9999;
    text-align: left;
}

.item_edit_modal_body_qty
{
    display: inline-block;
    width:100%;
    font-size: 13px;
    color: #9a9999;
    text-align: right;
}
.item_edit_modal_body_price
{
    display: inline-block;
    width:100%;
    font-size: 13px;
    color: #9a9999;
    text-align: right;
}
.item_edit_modal_body_stock
{
    display: inline-block;
    width:100%;
    font-size: 13px;
    color: #9a9999;
    text-align: right;
}
.item_edit_modal_footer
{
    border-top:white 1px solid !important;
}
.button 
{
    display:block;
}
.item_edit_modal_body_button
{
    width: 100% !important;
    background-color: white !important;
    border: #e5e5e5 1px solid;
    border-radius: 4px;
    padding: 20px 0px;
    text-align: center;
    outline : none;
}
.item_edit_modal_body_button:focus
{
    width: 100% !important;
    border: #e5e5e5 1px solid;
    background-color: #fbf9f9 !important;
    border-radius: 4px;
    padding: 20px 0px;
    text-align: center;
    outline : none;
}
.item_edit_modal_body_button:active
{
    width: 100% !important;
    background-color: #f1f1f1 !important;
    border: #e5e5e5 1px solid;
    border-radius: 4px;
    padding: 20px 0px;
    text-align: center;
    outline : none;
}
.item_edit_modal_body_button i
{
    font-size:2.2em;
    color: #6aa2d2;
}
.item_edit_modal_body_button span
{
    font-size: 14px;
    display: block;
    font-weight: bold;
}
.keyboard_plu_category_key
{
    display:flex;
    align-items: center;
    width: 100% !important;
    background-color: #1fbcd2 !important;
    border: #1fbcd2 1px solid;
    border-radius: 4px;
    padding: 5px 10px;
    justify-content: center;
    outline : none;
    min-height: 70px;
}
.keyboard_plu_category_key:focus
{
    display:flex;
    align-items: center;
    width: 100% !important;
    background-color: #45cee1 !important;
    border: #45cee1 1px solid;
    /*background-color: #e0e0e0 !important;
    border: #d2d2d2 1px solid;*/
    border-radius: 4px;
    padding: 5px 10px;
    justify-content: center;
    outline : none;
    min-height: 70px;
}
.keyboard_plu_category_key:active
{
    display:flex;
    align-items: center;
    width: 100% !important;
    background-color: #45cee1 !important;
    border: #45cee1 1px solid;
    /*background-color: #e0e0e0 !important;
    border: #d2d2d2 1px solid;*/
    border-radius: 4px;
    padding: 5px 10px;
    justify-content: center;
    outline : none;
    min-height: 70px;
}
.keyboard_plu_category_key span
{
    font-size: 13px;
    display: block;
    color:white;
    /*font-weight:bold;*/
}
.keyboard_num_plu_list_key
{
    width: 100% !important;
    background-color: #d6d6d6 !important;
    border: #d6d6d6 1px solid;
    border-radius: 4px;
    /*padding: 20px 0px;*/
    text-align: center;
    outline : none;
    min-height: 50px;
}
.keyboard_num_plu_list_key:focus
{
    width: 100% !important;
    background-color: #d6d6d6 !important;
    border: #d6d6d6 1px solid;
    border-radius: 4px;
    /*padding: 20px 0px;*/
    text-align: center;
    outline : none;
    min-height: 50px;
}
.keyboard_num_plu_list_key:active
{
    width: 100% !important;
    background-color: #bfbfbf !important;
    border: #bfbfbf 1px solid;
    border-radius: 4px;
    /*padding: 20px 0px;*/
    text-align: center;
    outline : none;
    min-height: 50px;
}
.keyboard_num_plu_list_key i
{
    font-size: 15px;
    display: inline-block;
    color:black;
    margin-right:5px;
}
.keyboard_num_plu_list_key span
{
    font-size: 15px;
    display: inline-block;
    color:black;
    text-transform: uppercase;
    font-weight:bold;
}
.keyboard_plu_category_function_key
{
    display:flex;
    align-items: center;
    width: 100% !important;
    background-color: #8e8d8d !important;
    border: #8e8d8d 1px solid;
    border-radius: 4px;
    padding: 5px 10px;
    justify-content: center;
    outline : none;
    min-height: 70px;
}
.keyboard_plu_category_function_key:focus
{
    display:flex;
    align-items: center;
    width: 100% !important;
    background-color: #8e8d8d !important;
    border: #8e8d8d 1px solid;
    border-radius: 4px;
    padding: 5px 10px;
    justify-content: center;
    outline : none;
    min-height: 70px;
}
.keyboard_plu_category_function_key:active
{
    display:flex;
    align-items: center;
    width: 100% !important;
    background-color:#9c9c9c !important;
    border: #9c9c9c 1px solid;
    border-radius: 4px;
    padding: 5px 10px;
    justify-content: center;
    outline : none;
    min-height: 70px;
}
.keyboard_plu_category_function_key i
{
    font-size: 2em;
    display: block;
    color:white;
    font-weight:bold;
}
.keyboard_plu_category_function_back_key
{
    display:flex;
    align-items: center;
    width: 100% !important;
    background-color: #d9534f !important;
    border: #d9534f 1px solid;
    border-radius: 4px;
    padding: 5px 10px;
    justify-content: center;
    outline : none;
    min-height: 70px;
    cursor:pointer;
}
.keyboard_plu_category_function_back_key:focus
{
    display:flex;
    align-items: center;
    width: 100% !important;
    background-color: #d9534f !important;
    border: #d9534f 1px solid;
    border-radius: 4px;
    padding: 5px 10px;
    justify-content: center;
    outline : none;
    min-height: 70px;
    cursor:pointer;
}
.keyboard_plu_category_function_back_key:active
{
    display:flex;
    align-items: center;
    width: 100% !important;
    background-color:#ea635f !important;
    border: #ea635f 1px solid;
    border-radius: 4px;
    padding: 5px 10px;
    justify-content: center;
    outline : none;
    min-height: 70px;
    cursor:pointer;
}
.keyboard_plu_category_function_back_key i
{
    font-size: 2em;
    display: block;
    color:white;
    font-weight:bold;
    cursor:pointer;
}
.keyboard_plu_category_item_key
{
    display:flex;
    align-items: center;
    width: 100% !important;
    background-color: white !important;
    border: #d2d2d2 1px solid;
    border-radius: 4px;
    padding: 5px 10px;
    justify-content: center;
    outline : none;
    min-height: 70px;
}
.keyboard_plu_category_item_key:focus
{
    display:flex;
    align-items: center;
    width: 100% !important;
    background-color: white !important;
    border: #d2d2d2 1px solid;
    border-radius: 4px;
    padding: 5px 10px;
    justify-content: center;
    outline : none;
    min-height: 70px;
}
.keyboard_plu_category_item_key:active
{
    display:flex;
    align-items: center;
    width: 100% !important;
    background-color: #f5f5f5 !important;
    border: #d2d2d2 1px solid;
    border-radius: 4px;
    padding: 5px 10px;
    justify-content: center;
    outline : none;
    min-height: 70px;
}
.keyboard_plu_category_item_key span
{
    font-size: 13px;
    display: block;
    color:black;
}
.keyboard_plu_category_item_key span.plu_item_price
{
    display: block;
    position: absolute;
    right: -1px;
    top: -1px;
    border-radius: 4px;
    font-size: 12px;
    background-color: rgb(117, 123, 128);
    padding: 2px 4px;
    color: #ffffff;
}
.keyboard_plu_category_item_pagging_key
{
    width: 100% !important;
    background-color: #8e8d8d !important;
    border: #8e8d8d 1px solid;
    border-radius: 4px;
    /*padding: 20px 0px;*/
    text-align: center;
    outline : none;
    min-height: 50px;
}
.keyboard_plu_category_item_pagging_key:focus
{
    width: 100% !important;
    background-color: #8e8d8d !important;
    border: #8e8d8d 1px solid;
    border-radius: 4px;
    /*padding: 20px 0px;*/
    text-align: center;
    outline : none;
    min-height: 50px;
}
.keyboard_plu_category_item_pagging_key:active
{
    width: 100% !important;
    background-color:#9c9c9c !important;
    border: #9c9c9c 1px solid;
    border-radius: 4px;
    /*padding: 20px 0px;*/
    text-align: center;
    outline : none;
    min-height: 50px;
}
.keyboard_plu_category_item_pagging_key i
{
    font-size: 1.5em;
    display: inline-block;
    color:white;
    margin-right:5px;
}
.keyboard_plu_category_item_pagging_key span
{
    font-size: 15px;
    display: inline-block;
    color:black;
    text-transform: uppercase;
    font-weight:bold;
}
.keyboard_plu_category_item_pagging_key_page
{
    width: 100% !important;
    background-color: #f1f1f1 !important;
    border: #f1f1f1 1px solid;
    border-radius: 4px;
    /*padding: 20px 0px;*/
    text-align: center;
    outline : none;
    min-height: 50px;
}
.keyboard_plu_category_item_pagging_key_page:focus
{
    width: 100% !important;
    background-color: #f1f1f1 !important;
    border: gray 1px solid;
    border-radius: 4px;
    /*padding: 20px 0px;*/
    text-align: center;
    outline : none;
    min-height: 50px;
}
.keyboard_plu_category_item_pagging_key_page:active
{
    width: 100% !important;
    background-color: #f1f1f1 !important;
    border: #f1f1f1 1px solid;
    border-radius: 4px;
    /*padding: 20px 0px;*/
    text-align: center;
    outline : none;
    min-height: 50px;
}
.keyboard_plu_category_item_pagging_key_page i
{
    font-size: 1.5em;
    display: inline-block;
    color:gray;
    margin-right:5px;
}
.keyboard_plu_category_item_pagging_key_page span
{
    font-size: 15px;
    display: inline-block;
    color:#bfbfbf;
    text-transform: uppercase;
    font-weight:bold;
}
.keyboard_plu_category_item_pagging_key_page:focus span
{
    font-size: 15px;
    display: inline-block;
    color:gray !important;
    text-transform: uppercase;
    font-weight:bold;
}
.payment_modal_body_button
{
    width: 100% !important;
    background-color: white !important;
    border: #e5e5e5 1px solid;
    border-radius: 4px;
    padding: 5px 0px;
    text-align: center;
    outline : none;
}
.payment_modal_body_button:focus
{
    width: 100% !important;
    border: #e5e5e5 1px solid;
    background-color: #fbf9f9 !important;
    border-radius: 4px;
    padding: 5px 0px;
    text-align: center;
    outline : none;
}
.payment_modal_body_button:active
{
    width: 100% !important;
    background-color: #f1f1f1 !important;
    border: #e5e5e5 1px solid;
    border-radius: 4px;
    padding: 5px 0px;
    text-align: center;
    outline : none;
}
.payment_modal_body_button i
{
    font-size:2.2em;
    color: #8cc152;
}
.payment_modal_body_button span
{
    font-size: 14px;
    display: block;
    font-weight: bold;
}

.keyboard_qwerty_num_space_key
{
    width: 54% !important;
    margin:2px;
    display:inline-block;
    background-color: #d2d2d2 !important;
    border: #d2d2d2 1px solid;
    border-radius: 4px;
    padding: 10px 0px;
    text-align: center;
    outline : none;
    min-height: 50px;
}
.keyboard_qwerty_num_space_key:focus
{
    width: 54% !important;
    margin:2px;
    display:inline-block;
    background-color: #d2d2d2 !important;
    border: #d2d2d2 1px solid;
    border-radius: 4px;
    padding: 10px 0px;
    text-align: center;
    outline : none;
    min-height: 50px;
}
.keyboard_qwerty_num_space_key:active
{
    width: 54% !important;
    margin:2px;
    display:inline-block;
    background-color: #eaeaea !important;
    border: #d2d2d2 1px solid;
    border-radius: 4px;
    padding: 10px 0px;
    text-align: center;
    outline : none;
    min-height: 50px;
}
.keyboard_qwerty_num_space_key i
{
    font-size: 15px;
    display: inline-block;
    color:black;
    margin-right:5px;
}
.keyboard_qwerty_num_space_key span
{
    font-size: 15px;
    display: inline-block;
    color:black;
    text-transform: uppercase;
    font-weight:bold;
}

.suggestion_note
{
    margin:2px;
    display:inline-block;
    background-color: #f3f3f3 !important;
    border: #9a9a9a 1px solid;
    border-radius: 4px;
    padding: 5px;
    text-align: center;
    outline : none;
}
.suggestion_note:focus
{
    margin:2px;
    display:inline-block;
    background-color: #f3f3f3 !important;
    border: #9a9a9a 1px solid;
    border-radius: 4px;
    padding: 5px;
    text-align: center;
    outline : none;
}
.suggestion_note:active
{
    margin:2px;
    display:inline-block;
    background-color: white !important;
    border: #9a9a9a 1px solid;
    border-radius: 4px;
    padding: 5px;
    text-align: center;
    outline : none;
}
.suggestion_note i
{
    font-size: 12px;
    display: inline-block;
    color: #9a9a9a;
    margin-right:5px;
}
.suggestion_note span
{
    font-size: 13px;
    display: inline-block;
    color: #9a9a9a;
}
.keyboard_confirm_key
{
    width: 100% !important;
    background-color: #8cc152 !important;
    border: #8cc152 1px solid;
    border-radius: 4px;
    padding: 15px 30px;
    text-align: center;
    outline : none;
}
.keyboard_confirm_key:focus
{
    width: 100% !important;
    background-color: #8cc152 !important;
    border: #8cc152 1px solid;
    border-radius: 4px;
    padding: 15px 30px;
    text-align: center;
    outline : none;
}
.keyboard_confirm_key:active
{
    width: 100% !important;
    background-color: #9cd45f !important;
    border: #9cd45f 1px solid;
    border-radius: 4px;
    padding: 15px 30px;
    text-align: center;
    outline : none;
}
.keyboard_confirm_key i
{
    font-size: 15px;
    display: inline-block;
    color:white;
    margin-right:5px;
}
.keyboard_confirm_key span
{
    font-size: 15px;
    display: inline-block;
    color:white;
    text-transform: uppercase;
}
.keyboard_cancel_key
{
    width: 100% !important;
    background-color: #d9534f !important;
    border: #d9534f 1px solid;
    border-radius: 4px;
    padding: 15px 30px;
    text-align: center;
    outline : none;
}
.keyboard_cancel_key:focus
{
    width: 100% !important;
    background-color: #d9534f !important;
    border: #d9534f 1px solid;
    border-radius: 4px;
    padding: 15px 30px;
    text-align: center;
    outline : none;
}
.keyboard_cancel_key:active
{
    width: 100% !important;
    background-color: #ea635f !important;
    border: #ea635f 1px solid;
    border-radius: 4px;
    padding: 15px 30px;
    text-align: center;
    outline : none;
}
.keyboard_cancel_key i
{
    font-size: 15px;
    display: inline-block;
    color:white;
    margin-right:5px;
}
.keyboard_cancel_key span
{
    font-size: 15px;
    display: inline-block;
    color:white;
    text-transform: uppercase;
}

@media screen 
and (max-width : 4000px)
{
    .keyboard_f_key
    {
        width: 100% !important;
        background-color: #6aa2d2 !important;
        border: #6aa2d2 1px solid;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 70px;
    }
    .keyboard_f_key:focus
    {
        width: 100% !important;
        border: #6aa2d2 1px solid;
        background-color: #6aa2d2 !important;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 70px;
    }
    .keyboard_f_key:active
    {
        width: 100% !important;
        background-color: #73b7f1 !important;
        border: #73b7f1 1px solid;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 70px;
    }
    .keyboard_f_key i
    {
        font-size:2.2em;
        color: #6aa2d2;
    }
    .keyboard_f_key span
    {
        position: absolute;
        top: 7px;
        left: 10px;
        color: white;
    }
    .keyboard_fn_key
    {
        width: 100% !important;
        background-color: #93d6f5 !important;
        border: #93d6f5 1px solid;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 70px;
    }
    .keyboard_fn_key:focus
    {
        width: 100% !important;
        border: #93d6f5 1px solid;
        background-color: #93d6f5 !important;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 70px;
    }
    .keyboard_fn_key:active
    {
        width: 100% !important;
        background-color: #a2dcf7 !important;
        border: #a2dcf7 1px solid;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 70px;
    }
    .keyboard_fn_key i
    {
        position: absolute;
        top: 7px;
        left: 10px;
        color: black;
    }
    .keyboard_fn_key span
    {
        font-size: 13px;
        display: block;
        color:black
    }
    .keyboard_gray_key
    {
        width: 100% !important;
        background-color: #d2d2d2 !important;
        border: #d2d2d2 1px solid;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 70px;
    }
    .keyboard_gray_key:focus
    {
        width: 100% !important;
        background-color: #d2d2d2 !important;
        border: #d2d2d2 1px solid;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 70px;
    }
    .keyboard_gray_key:active
    {
        width: 100% !important;
        background-color: #e0e0e0 !important;
        border: #d2d2d2 1px solid;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 70px;
    }
    .keyboard_gray_key i
    {
        font-size: 1.5em;
        display: block;
        color:black
    }
    .keyboard_gray_key span
    {
        font-size: 13px;
        display: block;
        color:black
    }
    .keyboard_darkblue_key
    {
        width: 100% !important;
        background-color: #174680 !important;
        border: #174680 1px solid;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 70px;
    }
    .keyboard_darkblue_key:focus
    {
        width: 100% !important;
        background-color: #174680 !important;
        border: #174680 1px solid;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 70px;
    }
    .keyboard_darkblue_key:active
    {
        width: 100% !important;
        background-color: #285d9e !important;
        border: #285d9e 1px solid;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 70px;
    }
    .keyboard_darkblue_key i
    {
        font-size: 15px;
        display: inline-block;
        color:white;
        margin-right:5px;
    }
    .keyboard_darkblue_key span
    {
        font-size: 15px;
        display: inline-block;
        color:white;
        text-transform: uppercase;
        font-weight:bold;
    }
    .keyboard_red_key
    {
        width: 100% !important;
        background-color: #d9534f !important;
        border: #d9534f 1px solid;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 70px;
    }
    .keyboard_red_key:focus
    {
        width: 100% !important;
        background-color: #d9534f !important;
        border: #d9534f 1px solid;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 70px;
    }
    .keyboard_red_key:active
    {
        width: 100% !important;
        background-color: #ea635f !important;
        border: #ea635f 1px solid;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 70px;
    }
    .keyboard_red_key i
    {
        font-size: 15px;
        display: inline-block;
        color:white;
        margin-right:5px;
    }
    .keyboard_red_key span
    {
        font-size: 15px;
        display: inline-block;
        color:white;
        text-transform: uppercase;
        font-weight:bold;
    }
    .keyboard_lightblue_key
    {
        display:block;
        width: 100% !important;
        background-color: #1fbcd2 !important;
        border: #1fbcd2 1px solid;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 70px;
    }
    .keyboard_lightblue_key:focus
    {
        display:block;
        width: 100% !important;
        background-color: #1fbcd2 !important;
        border: #1fbcd2 1px solid;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 70px;
    }
    .keyboard_lightblue_key:active
    {
        display:block;
        width: 100% !important;
        background-color: #45cee1 !important;
        border: #45cee1 1px solid;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 70px;
    }
    .keyboard_lightblue_key i
    {
        font-size: 15px;
        display: inline-block;
        color:white;
        margin-right:5px;
    }
    .keyboard_lightblue_key span
    {
        font-size: 15px;
        display: inline-block;
        color:white;
        text-transform: uppercase;
        font-weight:bold;
    }
    .keyboard_darkyellow_key
    {
        width: 100% !important;
        background-color: #fd9727 !important;
        border: #fd9727 1px solid;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 70px;
    }
    .keyboard_darkyellow_key:focus
    {
        width: 100% !important;
        background-color: #fd9727 !important;
        border: #fd9727 1px solid;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 70px;
    }
    .keyboard_darkyellow_key:active
    {
        width: 100% !important;
        background-color: #fda94c !important;
        border: #fda94c 1px solid;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 70px;
    }
    .keyboard_darkyellow_key i
    {
        font-size: 15px;
        display: inline-block;
        color:white;
        margin-right:5px;
    }
    .keyboard_darkyellow_key span
    {
        font-size: 15px;
        display: inline-block;
        color:white;
        text-transform: uppercase;
        font-weight:bold;
    }
    .keyboard_steelblue_key
    {
        width: 100% !important;
        background-color: #617d8a !important;
        border: #617d8a 1px solid;
        border-radius: 4px;
        padding: 13px 0px !important;
        text-align: center;
        outline : none;
        min-height: 70px;
    }
    .keyboard_steelblue_key:focus
    {
        width: 100% !important;
        background-color: #617d8a !important;
        border: #617d8a 1px solid;
        border-radius: 4px;
        padding: 13px 0px;
        text-align: center;
        outline : none;
        min-height: 70px;
    }
    .keyboard_steelblue_key:active
    {
        width: 100% !important;
        background-color: #71909e !important;
        border: #71909e 1px solid;
        border-radius: 4px;
        padding: 13px 0px;
        text-align: center;
        outline : none;
        min-height: 70px;
    }
    .keyboard_steelblue_key i
    {
        font-size: 15px;
        display: inline-block;
        color:white;
        margin-right:5px;
    }
    .keyboard_steelblue_key span
    {
        font-size: 15px;
        display: inline-block;
        color:white;
        text-transform: uppercase;
        font-weight:bold;
    }
    .keyboard_green_key
    {
        width: 100% !important;
        background-color: #8cc152 !important;
        border: #8cc152 1px solid;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 70px;
    }
    .keyboard_green_key:focus
    {
        width: 100% !important;
        background-color: #8cc152 !important;
        border: #8cc152 1px solid;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 70px;
    }
    .keyboard_green_key:active
    {
        width: 100% !important;
        background-color: #9cd45f !important;
        border: #9cd45f 1px solid;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 70px;
    }
    .keyboard_green_key i
    {
        font-size: 15px;
        display: inline-block;
        color:white;
        margin-right:5px;
    }
    .keyboard_green_key span
    {
        font-size: 15px;
        display: inline-block;
        color:white;
        text-transform: uppercase;
        font-weight:bold;
    }
    .keyboard_num_key
    {
        width: 100% !important;
        background-color: #ecd253 !important;
        border: #ecd253 1px solid;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 70px;
    }
    .keyboard_num_key:focus
    {
        width: 100% !important;
        background-color: #ecd253 !important;
        border: #ecd253 1px solid;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 70px;
    }
    .keyboard_num_key:active
    {
        width: 100% !important;
        background-color: #f9e791 !important;
        border: #f9e791 1px solid;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 70px;
    }
    .keyboard_num_key i
    {
        font-size: 15px;
        display: inline-block;
        color:black;
        margin-right:5px;
    }
    .keyboard_num_key span
    {
        font-size: 15px;
        display: inline-block;
        color:black;
        text-transform: uppercase;
        font-weight:bold;
    }
    a.clearbox_btn
    {
        text-align: center;
        border-radius: 4px;
        padding: 9px 0;
        display: block;
        color: #ffffff;
        border: #d9534f 2px solid;
        background-color: #d9534f;
        font-size: 1.2em;
        outline: none;
        cursor: pointer;
        text-decoration: none;
    }
    a.clearbox_btn:active
    {
        text-align: center;
        border-radius: 4px;
        padding: 9px 0;
        display: block;
        color: #ffffff;
        border: #d9534f 2px solid;
        background-color: #d9534f;
        font-size: 1.2em;
        outline: none;
        cursor: pointer;
        text-decoration: none;
    }
    a.clearbox_btn:hover
    {
        text-align: center;
        border-radius: 4px;
        padding: 9px 0;
        display: block;
        color: #ffffff;
        border: #d9534f 2px solid;
        background-color: #d9534f;
        font-size: 1.2em;
        outline: none;
        cursor: pointer;
        text-decoration: none;
    }
    a.clearbox_btn:focus
    {
        text-align: center;
        border-radius: 4px;
        padding: 9px 0;
        display: block;
        color: #ffffff;
        border: #d9534f 2px solid;
        background-color: #d9534f;
        font-size: 1.2em;
        outline: none;
        cursor: pointer;
        text-decoration: none;
    }
    a.clearbox_btn i
    {
        margin-right: 5px;
    }
    .padding-top-botom-10
    {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    .bill_header
    {
        margin-top: 0px;
        width:100%;
        display:block;
        padding:8px 0px;
        background-color: #8e8d8d;
        border-radius:4px 4px 0px 0px;
        border-top: 1px solid #d6d6d6;
        border-right: 1px solid #d6d6d6;
        border-left:1px solid #d6d6d6;
    }
    .bill_body
    {
        width:100%;
        max-height: 400px;
        height: 400px;
        display:block;
        background-color: white;
        border-right: 1px solid #d6d6d6;
        border-left:1px solid #d6d6d6;
    }
    
    a.configure_item
    {
        text-align: left;
        border-radius: 4px;
        display: block;
        color: #6aa2d2;
        font-size: 2.5em;
        outline: none;
        cursor: pointer;
        text-decoration: none;
    }
    a.configure_item:active
    {
        text-align: left;
        border-radius: 4px;
        display: block;
        color: #6aa2d2;
        font-size: 2.5em;
        outline: none;
        cursor: pointer;
        text-decoration: none;
    }
    a.configure_item:hover
    {
        text-align: left;
        border-radius: 4px;
        display: block;
        color: #6aa2d2;
        font-size: 2.5em;
        outline: none;
        cursor: pointer;
        text-decoration: none;
    }
    a.configure_item:focus
    {
        text-align: left;
        border-radius: 4px;
        display: block;
        color: #6aa2d2;
        font-size: 2.5em;
        outline: none;
        cursor: pointer;
        text-decoration: none;
    }
    
    a.edit_item
    {
        text-align: right;
        border-radius: 4px;
        display: block;
        color: #6aa2d2;
        font-size: 2.5em;
        outline: none;
        cursor: pointer;
        text-decoration: none;
    }
    a.edit_item:active
    {
        text-align: right;
        border-radius: 4px;
        display: block;
        color: #6aa2d2;
        font-size: 2.5em;
        outline: none;
        cursor: pointer;
        text-decoration: none;
    }
    a.edit_item:hover
    {
        text-align: right;
        border-radius: 4px;
        display: block;
        color: #6aa2d2;
        font-size: 2.5em;
        outline: none;
        cursor: pointer;
        text-decoration: none;
    }
    a.edit_item:focus
    {
        text-align: right;
        border-radius: 4px;
        display: block;
        color: #6aa2d2;
        font-size: 2.5em;
        outline: none;
        cursor: pointer;
        text-decoration: none;
    }
    .modal_body_item
    {
        padding:20px 0px;
    }
    a.edit_total
    {
        text-align: right;
        border-radius: 4px;
        display: block;
        color: #6aa2d2;
        font-size: 2.5em;
        outline: none;
        cursor: pointer;
        text-decoration: none;
    }
    a.edit_total:active
    {
        text-align: right;
        border-radius: 4px;
        display: block;
        color: #6aa2d2;
        font-size: 2.5em;
        outline: none;
        cursor: pointer;
        text-decoration: none;
    }
    a.edit_total:hover
    {
        text-align: right;
        border-radius: 4px;
        display: block;
        color: #6aa2d2;
        font-size: 2.5em;
        outline: none;
        cursor: pointer;
        text-decoration: none;
    }
    a.edit_total:focus
    {
        text-align: right;
        border-radius: 4px;
        display: block;
        color: #6aa2d2;
        font-size: 2.5em;
        outline: none;
        cursor: pointer;
        text-decoration: none;
    }
    .keyboard_qwerty_num_key
    {
        width: 9% !important;
        margin:2px;
        display:inline-block;
        background-color: #9a9a9a !important;
        border: #9a9a9a 1px solid;
        border-radius: 4px;
        padding: 10px 0px;
        text-align: center;
        outline : none;
        min-height: 50px;
    }
    .keyboard_qwerty_num_key:focus
    {
        width: 9% !important;
        margin:2px;
        display:inline-block;
        background-color: #9a9a9a !important;
        border: #9a9a9a 1px solid;
        border-radius: 4px;
        padding: 10px 0px;
        text-align: center;
        outline : none;
        min-height: 50px;
    }
    .keyboard_qwerty_num_key:active
    {
        width: 9% !important;
        margin:2px;
        display:inline-block;
        background-color: #b5b5b5 !important;
        border: #9a9a9a 1px solid;
        border-radius: 4px;
        padding: 10px 0px;
        text-align: center;
        outline : none;
        min-height: 50px;
    }
    .keyboard_qwerty_num_key i
    {
        font-size: 15px;
        display: inline-block;
        color:black;
        margin-right:5px;
    }
    .keyboard_qwerty_num_key span
    {
        font-size: 15px;
        display: inline-block;
        color:white;
        text-transform: uppercase;
        font-weight:bold;
    }
    .keyboard_qwerty_alpha_key
    {
        width: 9% !important;
        margin:2px;
        display:inline-block;
        background-color: #d2d2d2 !important;
        border: #d2d2d2 1px solid;
        border-radius: 4px;
        padding: 10px 0px;
        text-align: center;
        outline : none;
        min-height: 50px;
    }
    .keyboard_qwerty_alpha_key:focus
    {
        width: 9% !important;
        margin:2px;
        display:inline-block;
        background-color: #d2d2d2 !important;
        border: #d2d2d2 1px solid;
        border-radius: 4px;
        padding: 10px 0px;
        text-align: center;
        outline : none;
        min-height: 50px;
    }
    .keyboard_qwerty_alpha_key:active
    {
        width: 9% !important;
        margin:2px;
        display:inline-block;
        background-color: #eaeaea !important;
        border: #d2d2d2 1px solid;
        border-radius: 4px;
        padding: 10px 0px;
        text-align: center;
        outline : none;
        min-height: 50px;
    }
    .keyboard_qwerty_alpha_key i
    {
        font-size: 15px;
        display: inline-block;
        color:black;
        margin-right:5px;
    }
    .keyboard_qwerty_alpha_key span
    {
        font-size: 15px;
        display: inline-block;
        color:black;
        text-transform: uppercase;
        font-weight:bold;
    }
    #plu_placeholder
    {
        margin-bottom: 10px;
        margin-top: 0px;
    }
    .modal_body_item
    {
        padding:20px 0px !important;
    }
    .bill_flex_placeholder
    {
        display:flex;
        flex-direction:column;
    }
    .bill_footer
    {
        width:100%;
        display:block;
        background-color: white;
        border-right: 1px solid #d6d6d6;
        border-left:1px solid #d6d6d6;
        border-bottom:1px solid #d6d6d6;
        border-radius:0px 0px 4px 4px;
        border-top:1px solid #d6d6d6;
        padding-top:10px;
    }
    .bill_footer
    {
        width:100%;
        display:block;
        background-color: white;
        border-right: 1px solid #d6d6d6;
        border-left:1px solid #d6d6d6;
        border-bottom:1px solid #d6d6d6;
        border-radius:0px 0px 4px 4px;
        border-top:1px solid #d6d6d6;
        padding:5px 0px;
    }
}

@media screen 
and (max-width : 768px)
{
    .keyboard_f_key
    {
        width: 100% !important;
        background-color: #6aa2d2 !important;
        border: #6aa2d2 1px solid;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 40px;
    }
    .keyboard_f_key:focus
    {
        width: 100% !important;
        border: #6aa2d2 1px solid;
        background-color: #6aa2d2 !important;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 40px;
    }
    .keyboard_f_key:active
    {
        width: 100% !important;
        background-color: #73b7f1 !important;
        border: #73b7f1 1px solid;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 40px;
    }
    .keyboard_f_key i
    {
        font-size:2.2em;
        color: #6aa2d2;
    }
    .keyboard_f_key span
    {
        position: absolute;
        top: 7px;
        left: 10px;
        color: white;
    }
    .keyboard_fn_key
    {
        width: 100% !important;
        background-color: #93d6f5 !important;
        border: #93d6f5 1px solid;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 40px;
    }
    .keyboard_fn_key:focus
    {
        width: 100% !important;
        border: #93d6f5 1px solid;
        background-color: #93d6f5 !important;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 40px;
    }
    .keyboard_fn_key:active
    {
        width: 100% !important;
        background-color: #a2dcf7 !important;
        border: #a2dcf7 1px solid;
        border-radius: 4px;
        padding: 20px 0px;
        text-align: center;
        outline : none;
        min-height: 40px;
    }
    .keyboard_fn_key i
    {
        position: absolute;
        top: 7px;
        left: 10px;
        color: black;
    }
    .keyboard_fn_key span
    {
        font-size: 13px;
        display: block;
        color:black
    }
    .keyboard_gray_key
    {
        width: 100% !important;
        background-color: #d2d2d2 !important;
        border: #d2d2d2 1px solid;
        border-radius: 4px;
        padding: 10px 0px;
        text-align: center;
        outline : none;
        min-height: 40px;
    }
    .keyboard_gray_key:focus
    {
        width: 100% !important;
        background-color: #d2d2d2 !important;
        border: #d2d2d2 1px solid;
        border-radius: 4px;
        padding: 10px 0px;
        text-align: center;
        outline : none;
        min-height: 40px;
    }
    .keyboard_gray_key:active
    {
        width: 100% !important;
        background-color: #e0e0e0 !important;
        border: #d2d2d2 1px solid;
        border-radius: 4px;
        padding: 10px 0px;
        text-align: center;
        outline : none;
        min-height: 40px;
    }
    .keyboard_gray_key i
    {
        font-size: 1.5em;
        display: block;
        color:black
    }
    .keyboard_gray_key span
    {
        font-size: 13px;
        display: block;
        color:black
    }
    .keyboard_darkblue_key
    {
        width: 100% !important;
        background-color: #174680 !important;
        border: #174680 1px solid;
        border-radius: 4px;
        padding: 13px 0px;
        text-align: center;
        outline : none;
        min-height: 40px;
    }
    .keyboard_darkblue_key:focus
    {
        width: 100% !important;
        background-color: #174680 !important;
        border: #174680 1px solid;
        border-radius: 4px;
        padding: 13px 0px;
        text-align: center;
        outline : none;
        min-height: 40px;
    }
    .keyboard_darkblue_key:active
    {
        width: 100% !important;
        background-color: #285d9e !important;
        border: #285d9e 1px solid;
        border-radius: 4px;
        padding: 13px 0px;
        text-align: center;
        outline : none;
        min-height: 40px;
    }
    .keyboard_darkblue_key i
    {
        font-size: 15px;
        display: inline-block;
        color:white;
        margin-right:5px;
    }
    .keyboard_darkblue_key span
    {
        font-size: 15px;
        display: inline-block;
        color:white;
        text-transform: uppercase;
        font-weight:bold;
    }
    .keyboard_red_key
    {
        width: 100% !important;
        background-color: #d9534f !important;
        border: #d9534f 1px solid;
        border-radius: 4px;
        padding: 13px 0px;
        text-align: center;
        outline : none;
        min-height: 40px;
    }
    .keyboard_red_key:focus
    {
        width: 100% !important;
        background-color: #d9534f !important;
        border: #d9534f 1px solid;
        border-radius: 4px;
        padding: 13px 0px;
        text-align: center;
        outline : none;
        min-height: 40px;
    }
    .keyboard_red_key:active
    {
        width: 100% !important;
        background-color: #ea635f !important;
        border: #ea635f 1px solid;
        border-radius: 4px;
        padding: 13px 0px;
        text-align: center;
        outline : none;
        min-height: 40px;
    }
    .keyboard_red_key i
    {
        font-size: 15px;
        display: inline-block;
        color:white;
        margin-right:5px;
    }
    .keyboard_red_key span
    {
        font-size: 15px;
        display: inline-block;
        color:white;
        text-transform: uppercase;
        font-weight:bold;
    }
    .keyboard_lightblue_key
    {
        display:block;
        width: 100% !important;
        background-color: #1fbcd2 !important;
        border: #1fbcd2 1px solid;
        border-radius: 4px;
        padding: 13px 0px;
        text-align: center;
        outline : none;
        min-height: 40px;
    }
    .keyboard_lightblue_key:focus
    {
        display:block;
        width: 100% !important;
        background-color: #1fbcd2 !important;
        border: #1fbcd2 1px solid;
        border-radius: 4px;
        padding: 13px 0px;
        text-align: center;
        outline : none;
        min-height: 40px;
    }
    .keyboard_lightblue_key:active
    {
        display:block;
        width: 100% !important;
        background-color: #45cee1 !important;
        border: #45cee1 1px solid;
        border-radius: 4px;
        padding: 13px 0px;
        text-align: center;
        outline : none;
        min-height: 40px;
    }
    .keyboard_lightblue_key i
    {
        font-size: 15px;
        display: inline-block;
        color:white;
        margin-right:5px;
    }
    .keyboard_lightblue_key span
    {
        font-size: 15px;
        display: inline-block;
        color:white;
        text-transform: uppercase;
        font-weight:bold;
    }
    .keyboard_darkyellow_key
    {
        width: 100% !important;
        background-color: #fd9727 !important;
        border: #fd9727 1px solid;
        border-radius: 4px;
        padding: 13px 0px;
        text-align: center;
        outline : none;
        min-height: 40px;
    }
    .keyboard_darkyellow_key:focus
    {
        width: 100% !important;
        background-color: #fd9727 !important;
        border: #fd9727 1px solid;
        border-radius: 4px;
        padding: 13px 0px;
        text-align: center;
        outline : none;
        min-height: 40px;
    }
    .keyboard_darkyellow_key:active
    {
        width: 100% !important;
        background-color: #fda94c !important;
        border: #fda94c 1px solid;
        border-radius: 4px;
        padding: 13px 0px;
        text-align: center;
        outline : none;
        min-height: 40px;
    }
    .keyboard_darkyellow_key i
    {
        font-size: 15px;
        display: inline-block;
        color:white;
        margin-right:5px;
    }
    .keyboard_darkyellow_key span
    {
        font-size: 15px;
        display: inline-block;
        color:white;
        text-transform: uppercase;
        font-weight:bold;
    }
    .keyboard_steelblue_key
    {
        width: 100% !important;
        background-color: #617d8a !important;
        border: #617d8a 1px solid;
        border-radius: 4px;
        padding: 13px 0px;
        text-align: center;
        outline : none;
        min-height: 40px;
    }
    .keyboard_steelblue_key:focus
    {
        width: 100% !important;
        background-color: #617d8a !important;
        border: #617d8a 1px solid;
        border-radius: 4px;
        padding: 13px 0px;
        text-align: center;
        outline : none;
        min-height: 40px;
    }
    .keyboard_steelblue_key:active
    {
        width: 100% !important;
        background-color: #71909e !important;
        border: #71909e 1px solid;
        border-radius: 4px;
        padding: 13px 0px;
        text-align: center;
        outline : none;
        min-height: 40px;
    }
    .keyboard_steelblue_key i
    {
        font-size: 15px;
        display: inline-block;
        color:white;
        margin-right:5px;
    }
    .keyboard_steelblue_key span
    {
        font-size: 15px;
        display: inline-block;
        color:white;
        text-transform: uppercase;
        font-weight:bold;
    }
    .keyboard_green_key
    {
        width: 100% !important;
        background-color: #8cc152 !important;
        border: #8cc152 1px solid;
        border-radius: 4px;
        padding: 13px 0px;
        text-align: center;
        outline : none;
        min-height: 40px;
    }
    .keyboard_green_key:focus
    {
        width: 100% !important;
        background-color: #8cc152 !important;
        border: #8cc152 1px solid;
        border-radius: 4px;
        padding: 13px 0px;
        text-align: center;
        outline : none;
        min-height: 40px;
    }
    .keyboard_green_key:active
    {
        width: 100% !important;
        background-color: #9cd45f !important;
        border: #9cd45f 1px solid;
        border-radius: 4px;
        padding: 13px 0px;
        text-align: center;
        outline : none;
        min-height: 40px;
    }
    .keyboard_green_key i
    {
        font-size: 15px;
        display: inline-block;
        color:white;
        margin-right:5px;
    }
    .keyboard_green_key span
    {
        font-size: 15px;
        display: inline-block;
        color:white;
        text-transform: uppercase;
        font-weight:bold;
    }
    .keyboard_num_key
    {
        width: 100% !important;
        background-color: #ecd253 !important;
        border: #ecd253 1px solid;
        border-radius: 4px;
        padding: 10px 0px;
        text-align: center;
        outline : none;
        min-height: 40px;
    }
    .keyboard_num_key:focus
    {
        width: 100% !important;
        background-color: #ecd253 !important;
        border: #ecd253 1px solid;
        border-radius: 4px;
        padding: 10px 0px;
        text-align: center;
        outline : none;
        min-height: 40px;
    }
    .keyboard_num_key:active
    {
        width: 100% !important;
        background-color: #f9e791 !important;
        border: #f9e791 1px solid;
        border-radius: 4px;
        padding: 10px 0px;
        text-align: center;
        outline : none;
        min-height: 40px;
    }
    .keyboard_num_key i
    {
        font-size: 15px;
        display: inline-block;
        color:black;
        margin-right:5px;
    }
    .keyboard_num_key span
    {
        font-size: 15px;
        display: inline-block;
        color:black;
        text-transform: uppercase;
        font-weight:bold;
    }
    a.clearbox_btn
    {
        text-align: center;
        border-radius: 4px;
        padding: 12px 0;
        display: block;
        color: #ffffff;
        border: #d9534f 2px solid;
        background-color: #d9534f;
        font-size: 1.2em;
        outline: none;
        cursor: pointer;
        text-decoration: none;
    }
    a.clearbox_btn:active
    {
        text-align: center;
        border-radius: 4px;
        padding: 12px 0;
        display: block;
        color: #ffffff;
        border: #d9534f 2px solid;
        background-color: #d9534f;
        font-size: 1.2em;
        outline: none;
        cursor: pointer;
        text-decoration: none;
    }
    a.clearbox_btn:hover
    {
        text-align: center;
        border-radius: 4px;
        padding: 12px 0;
        display: block;
        color: #ffffff;
        border: #d9534f 2px solid;
        background-color: #d9534f;
        font-size: 1.2em;
        outline: none;
        cursor: pointer;
        text-decoration: none;
    }
    a.clearbox_btn:focus
    {
        text-align: center;
        border-radius: 4px;
        padding: 12px 0;
        display: block;
        color: #ffffff;
        border: #d9534f 2px solid;
        background-color: #d9534f;
        font-size: 1.2em;
        outline: none;
        cursor: pointer;
        text-decoration: none;
    }
    a.clearbox_btn i
    {
        margin-right: 5px;
    }
    .padding-top-botom-10
    {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }
    .bill_body
    {
        width:100%;
        height:160px;
        display:block;
        background-color: white;
        border-right: 1px solid #d6d6d6;
        border-left:1px solid #d6d6d6;
    }
    a.edit_item
    {
        text-align: right;
        border-radius: 4px;
        display: block;
        color: #6aa2d2;
        font-size: 1.5em;
        outline: none;
        cursor: pointer;
        text-decoration: none;
    }
    a.edit_item:active
    {
        text-align: right;
        border-radius: 4px;
        display: block;
        color: #6aa2d2;
        font-size: 1.5em;
        outline: none;
        cursor: pointer;
        text-decoration: none;
    }
    a.edit_item:hover
    {
        text-align: right;
        border-radius: 4px;
        display: block;
        color: #6aa2d2;
        font-size: 1.5em;
        outline: none;
        cursor: pointer;
        text-decoration: none;
    }
    a.edit_item:focus
    {
        text-align: right;
        border-radius: 4px;
        display: block;
        color: #6aa2d2;
        font-size: 1.5em;
        outline: none;
        cursor: pointer;
        text-decoration: none;
    }
    a.edit_total
    {
        margin-top: 5px;
        text-align: right;
        border-radius: 4px;
        display: block;
        color: #6aa2d2;
        font-size: 1.5em;
        outline: none;
        cursor: pointer;
        text-decoration: none;
    }
    a.edit_total:active
    {
        margin-top: 5px;
        text-align: right;
        border-radius: 4px;
        display: block;
        color: #6aa2d2;
        font-size: 1.5em;
        outline: none;
        cursor: pointer;
        text-decoration: none;
    }
    a.edit_total:hover
    {
        margin-top: 5px;
        text-align: right;
        border-radius: 4px;
        display: block;
        color: #6aa2d2;
        font-size: 1.5em;
        outline: none;
        cursor: pointer;
        text-decoration: none;
    }
    a.edit_total:focus
    {
        margin-top: 5px;
        text-align: right;
        border-radius: 4px;
        display: block;
        color: #6aa2d2;
        font-size: 1.5em;
        outline: none;
        cursor: pointer;
        text-decoration: none;
    }
    .keyboard_qwerty_num_key
    {
        width: 9% !important;
        margin:1px;
        display:inline-block;
        background-color: #9a9a9a !important;
        border: #9a9a9a 1px solid;
        border-radius: 4px;
        padding: 10px 0px;
        text-align: center;
        outline : none;
        min-height: 50px;
    }
    .keyboard_qwerty_num_key:focus
    {
        width: 9% !important;
        margin:1px;
        display:inline-block;
        background-color: #9a9a9a !important;
        border: #9a9a9a 1px solid;
        border-radius: 4px;
        padding: 10px 0px;
        text-align: center;
        outline : none;
        min-height: 50px;
    }
    .keyboard_qwerty_num_key:active
    {
        width: 9% !important;
        margin:1px;
        display:inline-block;
        background-color: #b5b5b5 !important;
        border: #9a9a9a 1px solid;
        border-radius: 4px;
        padding: 10px 0px;
        text-align: center;
        outline : none;
        min-height: 50px;
    }
    .keyboard_qwerty_num_key i
    {
        font-size: 15px;
        display: inline-block;
        color:black;
        margin-right:5px;
    }
    .keyboard_qwerty_num_key span
    {
        font-size: 15px;
        display: inline-block;
        color:white;
        text-transform: uppercase;
        font-weight:bold;
    }
    .keyboard_qwerty_alpha_key
    {
        width: 9% !important;
        margin:1px;
        display:inline-block;
        background-color: #d2d2d2 !important;
        border: #d2d2d2 1px solid;
        border-radius: 4px;
        padding: 10px 0px;
        text-align: center;
        outline : none;
        min-height: 50px;
    }
    .keyboard_qwerty_alpha_key:focus
    {
        width: 9% !important;
        margin:1px;
        display:inline-block;
        background-color: #d2d2d2 !important;
        border: #d2d2d2 1px solid;
        border-radius: 4px;
        padding: 10px 0px;
        text-align: center;
        outline : none;
        min-height: 50px;
    }
    .keyboard_qwerty_alpha_key:active
    {
        width: 9% !important;
        margin:1px;
        display:inline-block;
        background-color: #eaeaea !important;
        border: #d2d2d2 1px solid;
        border-radius: 4px;
        padding: 10px 0px;
        text-align: center;
        outline : none;
        min-height: 50px;
    }
    .keyboard_qwerty_alpha_key i
    {
        font-size: 15px;
        display: inline-block;
        color:black;
        margin-right:5px;
    }
    .keyboard_qwerty_alpha_key span
    {
        font-size: 15px;
        display: inline-block;
        color:black;
        text-transform: uppercase;
        font-weight:bold;
    }
    .bill_header
    {
        margin-top: 0px;
        width:100%;
        display:block;
        padding:8px 0px;
        background-color: #8e8d8d;
        border-radius:4px 4px 0px 0px;
        border-top: 1px solid #d6d6d6;
        border-right: 1px solid #d6d6d6;
        border-left:1px solid #d6d6d6;
    }
    #plu_placeholder
    {
        margin-bottom: 0px;
        margin-top: 5px;
    }
    .modal_body_item
    {
        padding:5px 0px !important;
    }
    .bill_flex_placeholder
    {
        display:flex;
        flex-direction:column-reverse;
    }
    .bill_footer
    {
        width:100%;
        display:block;
        background-color: white;
        border-right: 1px solid black;
        border-left:1px solid black;
        border-bottom:1px solid black;
        border-radius:0px 0px 4px 4px;
        border-top:1px solid black;
        padding:10px 0px;
    }
}

@media only screen and (-moz-max-device-pixel-ratio: 1.5) and (max-width : 481px), 
only screen and (-o-max-device-pixel-ratio: 1.5/1) and (max-width : 481px), 
only screen and (-webkit-max-device-pixel-ratio: 1.5) and (max-width : 481px), 
only screen and (max-device-pixel-ratio: 1.5) and (max-width : 481px)
{
    .bill_body
    {
        width:100%;
        height:100px;
        display:block;
        background-color: white;
        border-right: 1px solid #d6d6d6;
        border-left:1px solid #d6d6d6;
    }
}