p{
  text-align:justify;
  line-height:30px;
  }
a{color:blue;}
table,tr{font-size:17px; color:black; border: 1px solid black; width:100%;}
td{border: 1px solid black; padding:6px;}
th{border:1px solid black; padding:6px; color:Brown; font-weight:bold;}
table tr:nth-child(odd){ background: #b8d1f3;}	
table tr:nth-child(even){background: #dae5f4;}

.table-style tr:nth-child(odd){ 
		background: #b8d1f3;
		font-size:16px;
		text-align:center;
	}
	
.table-style tr:nth-child(even){
		background: #dae5f4;
		font-size:16px;
		text-align:center;
	}
	
.table-style th{
	background:Orange;
	font-size:19px;
	text-align:center;
}

.info-display{
  color:white; 
  background:rgba(1,145,145,0.8); 
  padding:3px; 
  margin:10px;
  width:90%;
  font-weight:bold;
  text-align:center;
}

#time_disp:hover{
	cursor:none;
	background:none;
}
.nav-link:hover{
	background:rgba(214, 134, 4, 0.2);
	transition:0.5s;
}

.img-cont{
  position: relative;
  height:80px;
  width:auto;
  display:inline-block;
  vertical-align:top;
  margin:5px;
}

.cont-img{
  opacity: 1;
  display: block;
  width: 100%;
  height:80px; 
  margin:10px;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 20%;
  left: 25%;
  height:40px;
  width:30px;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.img-cont:hover .cont-img {
  opacity: 0.3;
}

.img-cont:hover .middle {
  opacity: 1;
}

.img-text {
  background-color:black;
  opacity:0.8;
  color: red;
  font-size: 12px;
  padding: 5px 5px;
  border-radius:50%;
}


.rounded:hover{
opacity:0.6;
cursor:pointer;
transition:0.5s;
}
.progress 
{
  display:none; 
  position:relative; 
  width:350px; 
  border: 1px solid #ddd; 
  padding: 1px; 
  border-radius: 3px; 
  height:28px;
  box-shadow:0px 1px 2px rgba(0,0,0,0.6);
}
.bar 
{ 
  background-color: #4169E1; 
  width:0%; 
  height:26px; 
  border-radius: 3px; 
}

.percent 
{ 
  position:absolute; 
  display:inline-block; 
  top:3px; 
  left:25%; 
  font-size:15px;
  color: white;
}


input.empty {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: 400;
    text-decoration: inherit;
  padding: 5px;
  font-size: 18px;
  line-hight:24px;
  border:1px solid #ddd;
  border-radius:4px;
  
}

.media{
box-shadow:0 1px 2px rgba(0,0,0,.2);	
}

.fixedfooter {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: black;
  color: white;
  text-align: center;
  padding:5px;
}

.loading_img {
	display:block; 
	height:30%; 
	margin-top:180px;
	margin-left:auto; 
	margin-right:auto; 
	width:30%;
}

/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: #333; /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 1; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  bottom: 80px; /* 80px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 3.5.5s;
  animation: fadein 0.5s, fadeout 0.5s 3.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 80px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 80px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 80px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 80px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
} 