body {
  text-align:center;
  background-color:#ABB7B7
  font-family:Verdana, Arial, Helvetica, sans-serif;
}
#keypad {margin:auto; margin-top:20px;}

#keypad tr td {
  vertical-align:middle;
  text-align:center;
  border:14px solid #006442;
 font-size: -webkit-xxx-large;
font-weight: 900;
  width:80px;
  height:80px;
  cursor:pointer;
  background-color:#229922;
  color:white;
  background-image: none;
  border: 5px solid;
  border-radius: 16px;
}
#keypad tr td:hover {background-color:#999999; color:#FFFF00;}

.display {
  width:200px;
  height:80px;
  margin:10px auto auto auto;
  background-color:#ABB7B7;
  color: #003171;
font-size: -webkit-xxx-large;
font-weight: 900;
  border:1px solid #999999;
}
#message {
  text-align:center;
  color:#009900;
  font-size:14px;
  font-weight:bold;
  display:none;
}


               
                .dataTables_wrapper{
                padding-top: 7%;
                position: relative; !important;
                padding-left: 1%;
                padding-right: 1%;
                width:100%;
                top:1%;

              }


              .dataTables_filter{
                position: absolute; !important;
                padding-left: 0%;
                top:1px;
                display: none;
              }
              .dataTables_length{
                position: absolute;
                right: 5%;
                top:2%;
                display: none;
              }
              table {
                border-collapse: separate;
                border-spacing: 0;
              }
              th,
              td {
                padding: 10px 15px;
                font-weight: bold;
                 border: 1px solid #5D6D7E;
                 height:20px;

              }
              thead {
                background:#1f7a1f;
                color: white;
              }
              input{
                height:50px;
                width:auto;
                min-width: 400px;
              }
                table a {
                color: white;
                background-color: red;
                font-size: 130%;
            
                }

                table a:hover {
               font-size:150%;
                }
              

               .container10 {
                position: absolute;
                left:1500px;
                top:400px;
                z-index: 11;
                background:#ecf0f1;
                overflow-y: scroll;
                -webkit-overflow-scrolling: touch;
                }
               .container {
                position: relative;
                height: 90%;
                bottom: 1px;
                left:3%;
                width: 95%;
                z-index: 11;
                background:#ecf0f1;
                overflow-y: scroll;
                -webkit-overflow-scrolling: touch;
                }
                .outputq {
                position:fixed;
                top:30%;
                left:5%;
                border: 5px solid grey;
                font-size: :20px;
                text-align: center;
                background:#ABB7B7;
                border-radius: 8px;
                }
                  .scan_product{
                position:relative;
                top:10%;
                left:1%;
                max-width: 500px;
                margin: auto;            
                border: 5px solid grey;
                font-size: :20px;
                text-align: center;
                background:#ffffff;
                border-radius: 8px;
                color: #1f7a1f;
                }
                    .file_uploader{
                position:relative;
                top:40%;
                left:1%;
                max-width: 500px;
                margin: auto;            
                border: 5px solid green;
                font-size: :20px;
                text-align: center;
                background:#1f7a1f;
                border-radius: 28px;
                color: black;
                }
                .order_block
                {position:relative;
                padding-top: 1%;
                 margin: auto;  
                max-width:80%;
                font-size: :20px;
                text-align: left;
                background:#1f7a1f;
                border-radius: 8px;
                color:white;
                }
                .show_order
                {
               position:relative;
                top:3%;
                left:5%;
                border: 5px solid grey;
                font-size: :20px;
                text-align: center;
                background:#ABB7B7;
                border-radius: 8px;
                width:85%;
                }

              .accept {               
                  
                  text-align:center;
                  margin-left:auto;
                  margin-right:auto;
                  width:auto;
                  }
                 tr,td 
                 {
                   text-align:left;
                  }



               .blocktext {
                    margin-left: auto;
                    margin-right: auto;
                    width: 6em
                }
                .scan {
                position: relative;

                width: 70%;
                border: 50px solid #FFA500;

                }
                
                .img_out {
                  position: fixed;
                top: 70%;
                left: 50%;
                /* bring your own prefixes */
                transform: translate(-50%, -50%);
                  }

                
                  .warning_out {
                 position:absolute;
                 top:30%;
                 left:5%;
                 color: #C72C1C;
                }
                .alert-danger{
                  color:
                  #C72C1C;
                }
                img.displayed {

                max-width:45%;
                max-height: 100%;

               }
                .container_nav {
                position:absolute;
                 top:1%;
                 left:1%;
                 width:100%;

                 border: 5px solid grey;
                z-index: 11;
                overflow-y: scroll;
                -webkit-overflow-scrolling: touch;

               }
                .details {
                position: absolute;
                top:300px;
                width: 70%;
                background:#F7DC6F  ;
                border: 5px solid grey;
                font-size: :20px;
                left:5%;


                }


               .tr {
               text-align: center;
               }
              .jumbotron{
                text-align: center;
                background: #ffffff;
              }
              .form-actions{
                 text-align: left;
                 width:50%;

               }
                .form-actions-center {
                 padding-left:20%;

               }
               .focusedInput {
                border-color: rgba(82,168,236,.8);
                outline: 0;
                outline: thin dotted \9;
                -moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
                box-shadow: 0 0 8px rgba(82,168,236,.6) !important;
                }
                .btn-success{
                   font-size: 20px;
                   border-radius: 8px;
                   margin-right: 100px;
                   background-color: #229922;
                }
                .btn-danger{
                   font-size: 20px;
                    border-radius: 8px;

                }
                figure, figcaption{
                display: block;
                font-style: italic;
                font-variant: small-caps;
                }
                 tr {
                      text-align: center
                    }

.link_button {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 20px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    background: #4479BA;
    color: #FFF;
    padding: 5px 32px;
    text-decoration: none;
}