body {
    background-color: white;
    /* shorthand: margin/padding: 25px 50px 75px 100px; top/right/bottom/left */
    margin-top:20px;
    margin-left:20px;
    margin-right:20px;
    padding-top: 0px;
    padding-bottom: 0px;
}

/* class used for body for tighter page, less wasted space */
.compact {
    padding:0;
    margin-top:10px;
    margin-left:10px;
    margin-right:10px;
    margin-bottom:10px;
}

table.table {
    border-collapse: collapse;
}

table.table th, .total {
    padding: 6px;
    background-color: #ccc;
}

table.table td {
    padding: 2px 6px;
    border: solid 1px #c9c8c4;
}

.blink_text {
    animation:1s blinker linear infinite;
    -webkit-animation:1s blinker linear infinite;
    -moz-animation:1s blinker linear infinite;
    
    color: red;
}

.divtable {
    float:left;
    width: 100%%;
    margin-right: 8px;
    margin-bottom: 8px;
    margin-top: 3px;
    height:700px;
    overflow:auto;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    bottom: 0px;
}

@-moz-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

/*
tr:hover, tr.alt:hover {
    color: #261F1D;
    background-color: #E5C37E;
}
*/

.myOnDragCSS {
    /*z-index: 500;*/
    /*width: 90%%;*/
    /*margin: -10px;*/
    /*display: table-cell;*/
    /*color: transparent;*/
    /*width: 0px*/
}

.myOnDragCSS td {
    /*background-color: #eee;*/
    background-color: red;
    /*-webkit-box-shadow: 11px 5px 12px 2px #333, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset;*/
    -webkit-box-shadow: 6px 3px 5px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset;
    /*-moz-box-shadow: 6px 4px 5px 1px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset;*/
    /*-box-shadow: 6px 4px 5px 1px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset;*/
}

.myOnDragCSS td:last-child {
    /*-webkit-box-shadow: 8px 7px 12px 0 #333, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset;*/
    -webkit-box-shadow: 1px 8px 6px -4px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset;
    /*-moz-box-shadow: 0 9px 4px -4px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset, -1px 0 0 #ccc inset;*/
    /*-box-shadow: 0 9px 4px -4px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset, -1px 0 0 #ccc inset;*/
}

/*
Page layout: flex outer box with 2 components:
 1) top; contains the navbar plus top controls
 2) bottom; contains the table that fills up the rest of the space to bottom
https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space
*/
html,
body {
  height: 100%;
  margin: 0
}

/* outer box container */
.container {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-flow: column;
  height: calc(100% - 15px);
  border: 0px solid red;
}

.container .row {
  /* border: 1px dotted grey; */
}

/* top containing navbar and controls */
.container .row.header {
  flex: 0 1 auto; /* shorthand for: flex-grow: 0, flex-shrink: 1, flex-basis: auto */
  border: 0px solid yellow;
}

/* growable conent to bottom/footer */
.container .row.content {
  flex: 1 1 auto; /* shorthand for: flex-grow: 0, flex-shrink: 1, flex-basis: auto */
  /* border: 5px solid green; */
  border: 1px solid black;
  overflow : hidden;
  clear:both;
  height:auto;
  overflow: scroll;
}

/* fixed footer */
.container .row.footer {
  flex: 0 1 40px;
}

/* End Page layout */