.MainContent {
    min-height: 100%;
     background-color: #cacaca; /* light grey*/
    /* background-color: #e3e3e3; /* lighter grey*/
    /* background-color: #651a1a; /* dark red*/
    /*background-color: #cb3434; /* medium red*/
    /*
    background-image:url("../img/BEAR logo - light.gif");
    background-repeat: no-repeat;
    background-position: center 75px;
    background-size: 80%;
    background-attachment: fixed;
    */

}

.bearimg {
    width: 90px;
    position: fixed;
    top: 10px;
    right: 100px;
    z-index: 3;
    -webkit-transition: opacity 0.25s;
    transition: opacity 0.25s;
}
.card{
  border: 1px solid #d3d3d3;
  border-radius: .25rem;
}

.card img {
  background-size: cover;
  max-height: 18rem;
  background-position: center;
  background-color: #ccc;
  object-fit: contain;
}
 
.card-header{
 max-height:40px;   
}

.card object {
  background-size: cover;
  min-height: 18rem;
  max-height: 18rem;
  background-position: center;
  background-color: #ccc;
  object-fit: contain;
}

.card receipt {
  width: 100%;
  object-fit: contain;
}

.card p{
  padding: 15px;
}

.bearimg:hover {
    opacity: 0;
}

table {
    max-height: 100%;
    max-width: 100%;
    margin: 0 auto;
    /* background: #ececec; /* very light gray */
    /* background: #e6f5ff; /* very light blue */
}

/*time reports CSS*/
table.table1 td, th{
    border: 1px solid blue;
    text-align:center;
    background:white;
}
table.table2 {
    border: 1px solid blue;
    background:white;
}
table.table3 td{
    color:blue;
    border-radius:5px;
    border:1px solid yellow;
    text-align:center;
    background:rgba(0,100,255,0.1);
}

td {
    width: fit-content;
    padding: 3px;
    border: #fff; /* black cell borders */
}

.table-responsive {
    background: #e6f5ff; /* very light blue */
}

.btn-warning {
    margin: 3px;
}

#clockstuff {
    position: absolute;
    text-align: left;
    font-weight: 900;
    margin: 10px;
    background-color: #327bba;
    border: #165f9e solid 1px;
    color: white;
    border-radius: 4px;
    padding: 5px;
}

.Alternating {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 95%;
    margin: auto;
}
.Alternating th{
    text-align: center;
    border: 1px solid #ddd;
    padding: 8px;
    background-color: rgb(51, 122, 183);
    color: white;
    white-space: nowrap;
}
.Alternating td {
    padding-left: 8px;
    padding-right: 8px;
}
.Alternating tr:nth-child(even) {
    background-color: rgba(255,255,255,0.75);
}
.Alternating tr:hover {
    background-color: #ddd;
}

.centered {
    justify-content: center;
    text-align: center;
    z-index: 0;
}

.main-dropdown {
    /* background-color: #327bba; /* old server colors */
    /* border: #165f9e solid 1px; /* old server button border */
    background-color: rgb(75 100 200); /* #4b64c8: slightly richer blue, tiny bit of purple compared to old color */
    /* background-color: rgb(140 80 130); /* #8c5082: more purple */
    border: #fff solid 1px; /* thin white border */
    color: white;
}

.wrapper {
    width: 100%;
    height: 90%;
    overflow: hidden;
}

.grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, 18rem);
    grid-gap:15px;
}



.floater { /* use for a div to stay fixed on the screen during page scrolling */
    position:fixed;
    top:10em;
    right:5em;
}

.header {
    padding: 1px 1px;
    overflow: hidden;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%
}

#cover-spin {
    position:fixed;
    width:100%;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background-color: rgba(255,255,255,0.7);
    z-index:9999;
    display:none;
}

#cover-spin::after {
    content:'';
    display:block;
    position:absolute;
    left:48%;top:40%;
    width:40px;height:40px;
    border-style:solid;
    border-color:black;
    border-top-color:transparent;
    border-width: 4px;
    border-radius:50%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}
@-webkit-keyframes spin {
	from {-webkit-transform:rotate(0deg);}
	to {-webkit-transform:rotate(360deg);}
}

@keyframes spin {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}