html {
	font-size: 14px;
  }

  @media (min-width: 768px) {
	html {
	  font-size: 16px;
	}
  }

  .btn-primary {
	  background-color: #0e2c8e;
  }

  .btn-primary:hover {
	  background-color: #122672;
  }

  .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
	box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #122672;
  }

  html {
	position: relative;
	min-height: 100%;
  }

  body {
	margin-bottom: 60px;
  }

  .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
	color: var(--bs-secondary-color);
	text-align: end;
  }

  .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
	text-align: start;
  }

  .styled-table {
	  border-collapse: collapse;
	  margin: 25px 0;
	  font-size: 0.9em;
	  font-family: sans-serif;
	  min-width: 400px;
	  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  }

  .styled-table thead tr {
	  background-color: #0e2c8e;
	  color: #ffffff;
	  text-align: left;
  }

  .styled-table th,
  .styled-table td {
	  padding: 12px 15px;
  }

  .styled-table tbody tr {
	  border-bottom: 1px solid #dddddd;
  }

  .styled-table tbody tr:nth-of-type(even) {
	  background-color: #f3f3f3;
  }

  .styled-table tbody tr:last-of-type {
	  border-bottom: 2px solid #0e2c8e;
  }

  .styled-table tbody tr.active-row {
	  font-weight: bold;
	  color: #0e2c8e;
  }

  .center {
	  margin-left: auto;
	  margin-right: auto;
	}

	.results tr[visible='false'],
	.no-result{
	  display:none;
	}

	.results tr[visible='true']{
	  display:table-row;
	}
	progress[value] {
	  --w: 100px; /* the width*/
	  --color:  /* the progress color */
		linear-gradient(#fff8,#fff0),
		repeating-linear-gradient(135deg,#0003 0 20px,#0000 0 40px),
		/* if < 30% "red" */
		linear-gradient(red    0 0) 0 /calc(var(--w)*.3 - 100%) 1px,
		/* if < 60% "orange" */
		linear-gradient(orange 0 0) 0 /calc(var(--w)*.6 - 100%) 1px,
		/* else "green" */
		green;
	  --background: lightgrey; /* the background color */

	  -webkit-appearance: none;
	  -moz-appearance: none;
	  appearance: none;
	  border: none;
	  width: var(--w);
	  margin: 0 10px;
	  border-radius: 10em;
	  background: var(--background);
	}
	progress[value]::-webkit-progress-bar {
	  border-radius: 10em;
	  background: var(--background);
	}
	progress[value]::-webkit-progress-value {
	  border-radius: 10em;
	  background: var(--color);
	}
	progress[value]::-moz-progress-bar {
	  border-radius: 10em;
	  background: var(--color);
	}

	.save, .cancel {
		display: none;
	}

	.batteryShape {
		position: relative;
		width: 70px;
		height: 32px;
		margin: 10px 0;
		border: 3px solid #333;
		border-radius: 7px;
	}

	.batteryShape::before {
		content: '';
		position: absolute;
		top: 50%;
		right: -7px;
		transform: translateY(-50%);
		width: 3px;
		height: 8px;
		background: #333;
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
	}

	.batteryShape::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 50%;
		background: rgba(255,255,255,0.1);
	}

	.batteryLevel {
		position: absolute;
		top: 2px;
		left: 2px;
		right: 2px;
		bottom: 2px;
		border-radius: 2px;
		background: linear-gradient(90deg, red, orange,green);
		overflow: hidden;
	}

	.batteryPercentage {
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
		border-radius: 0px;
		background-color: #ffffff;
	}

	.batteryIcon {
	  position: fixed;
	  margin-left: 72px;
	  margin-top: 3px;
	}

	tr:nth-of-type(even) > .batteryLevel {
	  background-color: #f3f3f3;
  }


  .styled-table > tbody:nth-child(even) > tr:nth-child(even) > td:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
	  background-color: #f3f3f3;
  }

  .patientUpdateContainer{
	  display: grid;
	  margin-left: 10%;
	  margin-right: 10%;
	  margin-top: 2%;
  }

  #mwc_logo {
	  width: 19%;
  }

  #logo_link {
	  display: contents;
  }

.login-container {
  height: 70%;
  position: absolute;
  width: 100%;
  display: grid;
  justify-content: center;
  align-content: center;
}

.login-alert {
	width: 100%;
	text-align: center;
}

.hi-lite {
	background-color: yellow;
}

@keyframes blinking-text {
	0% { color: lightpink; }
	50% { color: red; }
	100% { color: lightpink; }
}

.no-match {
	animation-name: blinking-text;
    animation-duration: 2s;
    animation-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0);
    animation-iteration-count: infinite;
}

.does-match {
	color: green;
}