/** {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}*/




.app {
 
    margin: 10px 10px 10px 10px;
}

td {
padding-top:5px;
padding-bottom:5px;
}

tr.order {
    border: 1px solid black;
}

h1 {
    font-size:24px;
    font-weight:normal;
    margin:0px;
    overflow:visible;
    padding:0px;
    text-align:center;
}

.btn1 {
    border: 2px solid #467813;
    border-radius: 5px;
    color: #fff;
    background-color: darkseagreen;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 10px 10px 10px 10px;
    box-shadow: 2px 3px 3px #999;
}

.btn3 {
    border: 2px solid #467813;
    border-radius: 15px;
    color: #fff;
    background-color: darkseagreen;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 5px 5px 5px 5px;
    box-shadow: 2px 3px 3px #999;
}

.btn2 {
    border: 2px solid red;
    border-radius: 5px;
    color: #fff;
    background-color: salmon;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 10px 10px 10px 10px;
    box-shadow: 0 3px 3px #999;
}

.btn4 {
    border: 2px solid red;
    border-radius: 15px;
    color: #fff;
    background-color: salmon;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 5px 5px 5px 5px;
    box-shadow: 0 3px 3px #999;
}
body {
background-color:lightgray;
margin:auto;
}

img.icon {
    border: 2px solid #d3d3d3;
    box-shadow: 4px 4px 7px lightgray;
}

img.label{
    border: 2px solid #d3d3d3;
    box-shadow: 4px 4px 7px lightgray;
    margin-left:40px;

}

table.dropshadow {
    margin-top:10px;
    align-content:center;
    background-color : white;
    border: 1px solid gray;
    padding: 10px;
    box-shadow: 5px 10px 10px #888888;
}

table.dropshadow2 {
    align-content:center;
    background-color : whitesmoke;
    width:90%;
    border: 2px solid #d3d3d3;
    padding: 5px;
    box-shadow: 8px 8px 7px lightgray;
       

}

table.dropshadow3 {
    align-content:center;
    background-color : whitesmoke;
    width:90%;
    border: 2px solid #d3d3d3;
    padding: 5px;
    box-shadow: 8px 8px 7px lightgray;
       

}

label.productheader {
    font-size:xx-large;
    font:bold 50px Century Schoolbook;

}

input.focused {
    border-color:red;
}

input.blured {
     border-color:black;
}

tr.dropshadow {
    display:block;
    border: 1px solid gray;
    padding: 10px;
    box-shadow: 5px 10px 10px #888888;
}

.myGridClass {
  width: 100%;
  /*this will be the color of the odd row*/
  background-color: #fff;
  margin: 5px 0 10px 0;
  border: solid 2px #525252;
  border-collapse:collapse;
}

/*data elements*/
.myGridClass td {
  padding: 2px;
  
  color: #717171;
}

/*header elements*/
.myGridClass th {
  padding: 4px 2px;
  color: #fff;
  background: lightblue;
  border-left: solid 1px #525252;
  font-size: 0.9em;
}

/*his will be the color of even row*/
.myGridClass .myAltRowClass { background-color: lightgray; }

/*and finally, we style the pager on the bottom*/
.myGridClass .myPagerClass { background: #424242; }

.myGridClass .myPagerClass table { margin: 5px 0; }

.myGridClass .myPagerClass td {
  border-width: 0;
  padding: 0 6px;
  border-left: solid 1px #666;
  font-weight: bold;
  color: #fff;
  line-height: 12px;
}

.myGridClass .myPagerClass a { color: #666; text-decoration: none; }

.myGridClass .myPagerClass a:hover { color: #000; text-decoration: none; } 

#overlay {
    position: fixed;
    z-index: 99;
    top: 0px;
    left: 0px;
    background-color: #f8f8f8;
    width: 100%;
    height: 100%;
    filter: Alpha(Opacity=90);
    opacity: 0.9;
    -moz-opacity: 0.9;
}            
#theprogress {
    background-color: #fff;
    border:1px solid #ccc;
    padding:10px;
    width: 300px;
    height: 30px;
    line-height:30px;
    text-align: center;
    filter: Alpha(Opacity=100);
    opacity: 1;
    -moz-opacity: 1;
}
#modalprogress {
    position: absolute;
    top: 40%;
    left: 50%;
    margin: -11px 0 0 -150px;
    color: #990000;
    font-weight:bold;
    font-size:14px;
}